+
# 开源协议
diff --git a/README.md b/README.md
index 925480a03a..1329570293 100644
--- a/README.md
+++ b/README.md
@@ -95,7 +95,7 @@ Contributing is welcome. Read [guidelines for contributing](https://github.com/T
Create your [Github issues](https://github.com/Tencent/tdesign-react/issues) or scan the QR code below to join our user groups
-
- {!collapsed ? t(local.expandText) : t(local.collapseText)}
-
- ) : null}
+
+ {!collapsed ? t(local.expandText) : t(local.collapseText)}
+
);
}
diff --git a/src/alert/__tests__/alert.test.tsx b/src/alert/__tests__/alert.test.tsx
index b5b3a69d11..baa9a65bf0 100644
--- a/src/alert/__tests__/alert.test.tsx
+++ b/src/alert/__tests__/alert.test.tsx
@@ -10,26 +10,93 @@ describe('Alert 组件测试', () => {
const onClose = vi.fn();
const onClosed = vi.fn();
- const { queryByTestId, container } = render(
+ const { queryByTestId, container, queryByText } = render(
{text}
,
+ {text}
,
+
+ {text}
+
,
+ ];
+ const { container } = render({text}
,
@@ -39,6 +106,9 @@ describe('Alert 组件测试', () => {
,
];
const { queryByText, queryByTestId } = render(
+ ` | N
separator | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+
### BreadcrumbItem Props
name | type | default | description | required
-- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
disabled | Boolean | - | \- | N
@@ -25,5 +27,6 @@ icon | TElement | - | prefix icon in breadcrumb item。Typescript：`TNode`。[s
maxWidth | String | undefined | \- | N
replace | Boolean | false | \- | N
router | Object | - | Typescript：`any` | N
-target | String | _self | options：_blank/_self/_parent/_top | N
-to | String / Object | - | Typescript：`Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N
+target | String | _self | options: _blank/_self/_parent/_top | N
+to | String / Object | - | Typescript：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N
+onClick | Function | | Typescript：`(e: MouseEvent) => void`
trigger on click | N diff --git a/src/breadcrumb/breadcrumb.md b/src/breadcrumb/breadcrumb.md index ce63ef9bc2..a87ff10054 100644 --- a/src/breadcrumb/breadcrumb.md +++ b/src/breadcrumb/breadcrumb.md @@ -1,9 +1,10 @@ :: BASE_DOC :: ## API + ### Breadcrumb Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N @@ -11,9 +12,10 @@ maxItemWidth | String | undefined | 单项最大宽度，超出后会以省略 options | Array | - | 面包屑项，功能同 BreadcrumbItem。TS 类型：`Array` | N
separator | TNode | - | 自定义分隔符。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+
### BreadcrumbItem Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -26,4 +28,5 @@ maxWidth | String | undefined | 最大宽度，超出后会以省略号形式呈
replace | Boolean | false | 路由跳转是否采用覆盖的方式（覆盖后将没有浏览器历史记录） | N
router | Object | - | 路由对象。如果项目存在 Router，则默认使用 Router。TS 类型：`any` | N
target | String | _self | 链接或路由跳转方式。可选项：_blank/_self/_parent/_top | N
-to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N
+to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N
+onClick | Function | | TS 类型：`(e: MouseEvent) => void`
点击时触发 | N diff --git a/src/breadcrumb/type.ts b/src/breadcrumb/type.ts index 93697472d1..ba4d309592 100644 --- a/src/breadcrumb/type.ts +++ b/src/breadcrumb/type.ts @@ -5,6 +5,7 @@ * */ import { TNode, TElement } from '../common'; +import { MouseEvent } from 'react'; export interface TdBreadcrumbProps { /** @@ -64,7 +65,11 @@ export interface TdBreadcrumbItemProps { /** * 路由跳转目标，当且仅当 Router 存在时，该 API 有效 */ - to?: Route | string; + to?: string | Route; + /** + * 点击时触发 + */ + onClick?: (e: MouseEvent) => void;
}
export interface Route {
diff --git a/src/common/__tests__/portal.test.tsx b/src/common/__tests__/portal.test.tsx
new file mode 100644
index 0000000000..8419b5a4b2
--- /dev/null
+++ b/src/common/__tests__/portal.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { render } from '@test/utils';
+import Portal from '../Portal';
+
+describe('Portal', () => {
+ test('Portal render', () => {
+ const { unmount } = render(
+
+ ,
+ );
+
+ expect(document.querySelector('#portal')).not.toBeNull();
+ expect(document.querySelector('#portal')).toBeInTheDocument();
+ unmount();
+ expect(document.querySelector('#portal')).toBeNull();
+ });
+
+ test('Portal ssr render', () => {
+ const renderOnServer = () =>
+ renderToString(
+
+ ,
+ );
+
+ // 目前test会出错，待后续添加lazy可support ssr
+ expect(renderOnServer).toThrow();
+ });
+});
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
index c334f6e823..536f15f659 100644
--- a/src/date-picker/DatePicker.tsx
+++ b/src/date-picker/DatePicker.tsx
@@ -8,7 +8,7 @@ import SelectInput from '../select-input';
import SinglePanel from './panel/SinglePanel';
import useSingle from './hooks/useSingle';
import { parseToDayjs, getDefaultFormat, formatTime, formatDate } from '../_common/js/date-picker/format';
-import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils';
+import { subtractMonth, addMonth, extractTimeObj, covertToDate } from '../_common/js/date-picker/utils';
import { datePickerDefaultProps } from './defaultProps';
import useDefaultProps from '../hooks/useDefaultProps';
@@ -64,8 +64,9 @@ const DatePicker = forwardRef((originalProps, r
useEffect(() => {
// 面板展开重置数据
- setCacheValue(formatDate(value, { format }));
- setInputValue(formatDate(value, { format }));
+ const dateValue = value ? covertToDate(value as string, valueType) : value;
+ setCacheValue(formatDate(dateValue, { format }));
+ setInputValue(formatDate(dateValue, { format }));
if (popupVisible) {
setYear(parseToDayjs(value, format).year());
diff --git a/src/date-picker/panel/RangePanel.tsx b/src/date-picker/panel/RangePanel.tsx
index 6d3c0d4951..72b33001cb 100644
--- a/src/date-picker/panel/RangePanel.tsx
+++ b/src/date-picker/panel/RangePanel.tsx
@@ -9,6 +9,7 @@ import type { TdTimePickerProps } from '../../time-picker';
import { getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format';
import useTableData from '../hooks/useTableData';
import useDisableDate from '../hooks/useDisableDate';
+import useDefaultProps from '../../hooks/useDefaultProps';
export interface RangePanelProps extends TdDateRangePickerProps, StyledProps {
hoverValue?: string[];
@@ -32,9 +33,15 @@ export interface RangePanelProps extends TdDateRangePickerProps, StyledProps {
onTimePickerChange?: TdTimePickerProps['onChange'];
}
-const RangePanel = forwardRef((props, ref) => {
+const RangePanel = forwardRef((originalProps, ref) => {
const { classPrefix, datePicker: globalDatePickerConfig } = useConfig();
const panelName = `${classPrefix}-date-range-picker__panel`;
+ const props = useDefaultProps(originalProps, {
+ mode: 'date',
+ panelPreselection: true,
+ enableTimePicker: false,
+ presetsPlacement: 'bottom',
+ });
const {
value = [],
hoverValue = [],
@@ -200,11 +207,5 @@ const RangePanel = forwardRef((props, ref) => {
});
RangePanel.displayName = 'RangePanel';
-RangePanel.defaultProps = {
- mode: 'date',
- panelPreselection: true,
- enableTimePicker: false,
- presetsPlacement: 'bottom',
-};
export default RangePanel;
diff --git a/src/date-picker/panel/SinglePanel.tsx b/src/date-picker/panel/SinglePanel.tsx
index 14cf5695d1..bee9d57fce 100644
--- a/src/date-picker/panel/SinglePanel.tsx
+++ b/src/date-picker/panel/SinglePanel.tsx
@@ -9,6 +9,7 @@ import type { TdTimePickerProps } from '../../time-picker';
import { getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format';
import useTableData from '../hooks/useTableData';
import useDisableDate from '../hooks/useDisableDate';
+import useDefaultProps from '../../hooks/useDefaultProps';
export interface SinglePanelProps extends TdDatePickerProps, StyledProps {
year?: number;
@@ -27,9 +28,14 @@ export interface SinglePanelProps extends TdDatePickerProps, StyledProps {
onTimePickerChange?: TdTimePickerProps['onChange'];
}
-const SinglePanel = forwardRef((props, ref) => {
+const SinglePanel = forwardRef((originalProps, ref) => {
const { classPrefix, datePicker: globalDatePickerConfig } = useConfig();
const panelName = `${classPrefix}-date-picker__panel`;
+ const props = useDefaultProps(originalProps, {
+ mode: 'date',
+ enableTimePicker: false,
+ presetsPlacement: 'bottom',
+ });
const {
value,
mode,
@@ -109,10 +115,4 @@ const SinglePanel = forwardRef((props, ref) =>
SinglePanel.displayName = 'SinglePanel';
-SinglePanel.defaultProps = {
- mode: 'date',
- enableTimePicker: false,
- presetsPlacement: 'bottom',
-};
-
export default SinglePanel;
diff --git a/src/descriptions/Descriptions.tsx b/src/descriptions/Descriptions.tsx
index 05b328a6c5..3e94396922 100644
--- a/src/descriptions/Descriptions.tsx
+++ b/src/descriptions/Descriptions.tsx
@@ -7,7 +7,7 @@ import { descriptionItemDefaultProps, descriptionsDefaultProps } from './default
import useDefaultProps from '../hooks/useDefaultProps';
import useConfig from '../hooks/useConfig';
import useCommonClassName from '../hooks/useCommonClassName';
-import { LayoutEnum } from '../common';
+import { LayoutEnum, StyledProps } from '../common';
import { DescriptionsContext } from './DescriptionsContext';
import DescriptionsItem from './DescriptionsItem';
import Row from './Row';
@@ -26,14 +26,15 @@ import Row from './Row';
* TDescriptionsItem：获取 item 数据（span, label, content）
*/
-export type DescriptionsProps = TdDescriptionsProps & {
- children?: React.ReactNode;
-};
+export type DescriptionsProps = TdDescriptionsProps &
+ StyledProps & {
+ children?: React.ReactNode;
+ };
const Descriptions = (DescriptionsProps: DescriptionsProps) => {
const props = useDefaultProps(DescriptionsProps, descriptionsDefaultProps);
- const { title, bordered, column, layout, items: rowItems, children } = props;
+ const { className, style, title, bordered, column, layout, items: rowItems, children } = props;
const { classPrefix } = useConfig();
@@ -131,7 +132,7 @@ const Descriptions = (DescriptionsProps: DescriptionsProps) => {
return (
-
{isCutOff ? {itemContent} : itemContent}
{separatorContent}
diff --git a/src/breadcrumb/breadcrumb.en-US.md b/src/breadcrumb/breadcrumb.en-US.md
index a7c881b5d8..364ded77fd 100644
--- a/src/breadcrumb/breadcrumb.en-US.md
+++ b/src/breadcrumb/breadcrumb.en-US.md
@@ -1,22 +1,24 @@
:: BASE_DOC ::
## API
+
### Breadcrumb Props
name | type | default | description | required
-- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
maxItemWidth | String | undefined | \- | N
options | Array | - | Typescript：`Arraytrigger on click | N diff --git a/src/breadcrumb/breadcrumb.md b/src/breadcrumb/breadcrumb.md index ce63ef9bc2..a87ff10054 100644 --- a/src/breadcrumb/breadcrumb.md +++ b/src/breadcrumb/breadcrumb.md @@ -1,9 +1,10 @@ :: BASE_DOC :: ## API + ### Breadcrumb Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N @@ -11,9 +12,10 @@ maxItemWidth | String | undefined | 单项最大宽度，超出后会以省略 options | Array | - | 面包屑项，功能同 BreadcrumbItem。TS 类型：`Array
点击时触发 | N diff --git a/src/breadcrumb/type.ts b/src/breadcrumb/type.ts index 93697472d1..ba4d309592 100644 --- a/src/breadcrumb/type.ts +++ b/src/breadcrumb/type.ts @@ -5,6 +5,7 @@ * */ import { TNode, TElement } from '../common'; +import { MouseEvent } from 'react'; export interface TdBreadcrumbProps { /** @@ -64,7 +65,11 @@ export interface TdBreadcrumbItemProps { /** * 路由跳转目标，当且仅当 Router 存在时，该 API 有效 */ - to?: Route | string; + to?: string | Route; + /** + * 点击时触发 + */ + onClick?: (e: MouseEvent
Hello World
+ Hello World
+
+
-
TDesign
139****0609
@@ -34,7 +34,7 @@ export default function BasicDescriptions() {
Shenzhen Penguin Island D1 4A Mail Center
-
+ */}
);
}
diff --git a/src/descriptions/_example/layout.jsx b/src/descriptions/_example/layout.jsx
index a94d02eb02..9cf7d43bc0 100644
--- a/src/descriptions/_example/layout.jsx
+++ b/src/descriptions/_example/layout.jsx
@@ -1,7 +1,10 @@
import React from 'react';
-import { Descriptions, Space } from 'tdesign-react';
+import { Descriptions, Space, Row, Col, Radio } from 'tdesign-react';
export default function Layout() {
+ const [layout, setLayout] = React.useState('horizontal');
+ const [itemLayout, setItemLayout] = React.useState('horizontal');
+
const items = [
{
label: 'Name',
@@ -21,27 +24,33 @@ export default function Layout() {
},
];
+ const layoutOptions = ['horizontal', 'vertical'];
+ const itemLayoutOptions = ['horizontal', 'vertical'];
+
return (
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
);
}
diff --git a/src/descriptions/_example/nest.jsx b/src/descriptions/_example/nest.jsx
new file mode 100644
index 0000000000..b0a7df912b
--- /dev/null
+++ b/src/descriptions/_example/nest.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Descriptions, Space } from 'tdesign-react';
+
+// const { DescriptionsItem } = Descriptions;
+
+export default function Nest() {
+ const itemsContent = [
+ {
+ label: 'City',
+ content: 'Shenzhen',
+ },
+ {
+ label: 'Detail',
+ content: 'Penguin Island D1 4A Mail Center',
+ },
+ ];
+
+ const items = [
+ {
+ label: 'Name',
+ content: 'TDesign',
+ },
+ {
+ label: 'Telephone Number',
+ content: '139****0609',
+ },
+ {
+ label: 'Area',
+ content: 'China Tencent Headquarters',
+ },
+ {
+ label: 'Address',
+ content:
+
+ TDesign
+ 139****0609
+ China Tencent Headquarters
+
+
+ Shenzhen
+ Penguin Island D1 4A Mail Center
+
+
+ */}
+
+ );
+}
diff --git a/src/form/FormList.tsx b/src/form/FormList.tsx
index 1d6c1df2f8..25f6453bd0 100644
--- a/src/form/FormList.tsx
+++ b/src/form/FormList.tsx
@@ -145,7 +145,8 @@ const FormList: React.FC = (props) => {
Promise.resolve().then(() => {
if (!fieldsTaskQueueRef.current.length) return;
- const currentQueue = fieldsTaskQueueRef.current[0];
+ // fix multiple formlist stuck
+ const currentQueue = fieldsTaskQueueRef.current.pop();
const { fieldData, callback, originData } = currentQueue;
[...formListMapRef.current.values()].forEach((formItemRef) => {
@@ -155,7 +156,6 @@ const FormList: React.FC = (props) => {
const data = get(fieldData, itemName);
callback(formItemRef, data);
});
- fieldsTaskQueueRef.current.pop();
// formList 嵌套 formList
if (!formMapRef || !formMapRef.current) return;
diff --git a/src/guide/Guide.tsx b/src/guide/Guide.tsx
index 1e0ef69f67..c16b6750ed 100644
--- a/src/guide/Guide.tsx
+++ b/src/guide/Guide.tsx
@@ -338,7 +338,7 @@ const Guide: React.FC = (originalProps) => {
current: innerCurrent,
total: stepsTotal,
};
- renderBody = isFunction(content) ? content(contentProps) : content;
+ renderBody = isFunction(content) ? content(contentProps) : React.cloneElement(content, contentProps);
} else {
renderBody = renderPopupContent();
}
@@ -354,7 +354,7 @@ const Guide: React.FC = (originalProps) => {
zIndex={zIndex}
placement={currentStepInfo.placement as StepPopupPlacement}
{...currentStepInfo.popupProps}
- overlayClassName={currentStepInfo.stepOverlayClass}
+ overlayClassName={[`${prefixCls}__popup`, currentStepInfo.stepOverlayClass]}
overlayInnerClassName={innerClassName.concat(currentStepInfo.popupProps?.overlayInnerClassName)}
>
diff --git a/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap b/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
index 63e07e8802..d24171f6d7 100644
--- a/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
+++ b/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
@@ -113,7 +113,7 @@ exports[`Guide Component > GuideStep.body works fine 1`] = `
class="t-portal-wrapper appear appear-active"
>
= (props) => {
const {
children,
currentIndex,
@@ -68,7 +68,7 @@ const SwiperItem = (props: SwiperItemProps) => {
const [, setUpdate] = useState({});
const isFirstFirstRender = useIsFirstRender();
- const getSwiperItemStyle = () => {
+ const getSwiperItemStyle = (): React.CSSProperties => {
if (animation === 'fade') {
return {
opacity: currentIndex === index ? 1 : 0,
diff --git a/src/swiper/__tests__/swiper.test.tsx b/src/swiper/__tests__/swiper.test.tsx
index 1be5398bb6..40e77b8d2b 100644
--- a/src/swiper/__tests__/swiper.test.tsx
+++ b/src/swiper/__tests__/swiper.test.tsx
@@ -72,7 +72,7 @@ describe('Swiper 组件测试', () => {
expect(document.querySelector('.t-swiper__container')).not.toBeNull();
fireEvent.click(document.querySelector('.t-swiper__arrow-right'));
- expect(document.querySelector('.t-swiper__container').getAttribute('style')).toBe(
+ expect(document.querySelector('.t-swiper__container')?.getAttribute('style')).toBe(
'transform: translate3d(-200%, 0px, 0px); transition: transform 0.3s ease;',
);
fireEvent.click(document.querySelector('.t-swiper__arrow-left'));
diff --git a/src/switch/Switch.tsx b/src/switch/Switch.tsx
index a63d13395a..6dda377770 100644
--- a/src/switch/Switch.tsx
+++ b/src/switch/Switch.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import Loading from '../loading';
import useConfig from '../hooks/useConfig';
@@ -8,14 +8,16 @@ import { SwitchValue, TdSwitchProps } from './type';
import { switchDefaultProps } from './defaultProps';
import log from '../_common/js/log';
import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
export type SwitchChangeEventHandler = (value: boolean, event: React.MouseEvent) => void;
export type SwitchClickEventHandler = SwitchChangeEventHandler;
export interface SwitchProps extends TdSwitchProps, StyledProps {}
-const Switch = forwardRef((props, ref) => {
+const Switch = React.forwardRef((originalProps, ref) => {
const { classPrefix } = useConfig();
+ const props = useDefaultProps>(originalProps, switchDefaultProps);
const { className, value, defaultValue, disabled, loading, size, label, customValue, onChange, ...restProps } = props;
const [activeValue = true, inactiveValue = false] = customValue || [];
@@ -23,24 +25,23 @@ const Switch = forwardRef((props, ref) => {
const initChecked = defaultValue === activeValue || value === activeValue;
const [innerChecked, setInnerChecked] = useState(initChecked);
- function renderContent(checked: boolean) {
+ const contentNode = React.useMemo(() => {
if (Array.isArray(label)) {
const [activeContent = '', inactiveContent = ''] = label;
- const content = checked ? activeContent : inactiveContent;
+ const content = innerChecked ? activeContent : inactiveContent;
return parseTNode(content, { value });
}
-
return parseTNode(label, { value });
- }
-
- function onInternalClick(e: React.MouseEvent) {
- if (disabled) return;
+ }, [label, innerChecked, value]);
+ const onInternalClick: React.MouseEventHandler = (e) => {
+ if (disabled) {
+ return;
+ }
!isControlled && setInnerChecked(!innerChecked);
-
const changedValue = !innerChecked ? activeValue : inactiveValue;
onChange?.(changedValue, { e });
- }
+ };
useEffect(() => {
if (Array.isArray(customValue) && !customValue.includes(value)) {
@@ -71,17 +72,14 @@ const Switch = forwardRef((props, ref) => {
ref={ref}
onClick={onInternalClick}
>
- {loading && (
- props: SwitchProps & {
- ref?: React.Ref;
- },
+ props: SwitchProps & React.RefAttributes,
) => React.ReactElement;
diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx
index e3fa8fe547..59ce4e0de2 100644
--- a/src/table/BaseTable.tsx
+++ b/src/table/BaseTable.tsx
@@ -1,10 +1,19 @@
-import React, { useRef, useMemo, useImperativeHandle, forwardRef, useEffect, useState, WheelEvent } from 'react';
+import React, {
+ useRef,
+ useMemo,
+ useImperativeHandle,
+ forwardRef,
+ useEffect,
+ useState,
+ WheelEvent,
+ RefAttributes,
+} from 'react';
import pick from 'lodash/pick';
import classNames from 'classnames';
import TBody, { extendTableProps, TableBodyProps } from './TBody';
-import { Affix } from '../affix';
+import { Affix, AffixRef } from '../affix';
import { ROW_LISTENERS } from './TR';
-import THead from './THead';
+import THead, { TheadProps } from './THead';
import TFoot from './TFoot';
import useTableHeader from './hooks/useTableHeader';
import useColumnResize from './hooks/useColumnResize';
@@ -23,6 +32,7 @@ import { TableRowData } from './type';
import useVirtualScroll from '../hooks/useVirtualScroll';
import { getIEVersion } from '../_common/js/utils/helper';
import log from '../_common/js/log';
+import useDefaultProps from '../hooks/useDefaultProps';
export const BASE_TABLE_EVENTS = ['page-change', 'cell-click', 'scroll', 'scrollX', 'scrollY'];
export const BASE_TABLE_ALL_EVENTS = ROW_LISTENERS.map((t) => `row-${t}`).concat(BASE_TABLE_EVENTS);
@@ -31,7 +41,8 @@ export interface TableListeners {
[key: string]: Function;
}
-const BaseTable = forwardRef((props, ref) => {
+const BaseTable = forwardRef((originalProps, ref) => {
+ const props = useDefaultProps>(originalProps, baseTableDefaultProps);
const {
showHeader = true,
tableLayout,
@@ -62,10 +73,10 @@ const BaseTable = forwardRef((props, ref) => {
);
const { showElement } = useElementLazyRender(tableRef, lazyLoad);
- const paginationAffixRef = useRef();
- const horizontalScrollAffixRef = useRef();
- const headerTopAffixRef = useRef();
- const footerBottomAffixRef = useRef();
+ const paginationAffixRef = useRef();
+ const horizontalScrollAffixRef = useRef();
+ const headerTopAffixRef = useRef();
+ const footerBottomAffixRef = useRef();
// 1. 表头吸顶；2. 表尾吸底；3. 底部滚动条吸底；4. 分页器吸底
const {
@@ -284,7 +295,7 @@ const BaseTable = forwardRef((props, ref) => {
})}
);
- const headProps = {
+ const headProps: TheadProps = {
isFixedHeader,
rowAndColFixedPosition,
isMultipleHeader,
@@ -727,10 +738,6 @@ const BaseTable = forwardRef((props, ref) => {
BaseTable.displayName = 'BaseTable';
-BaseTable.defaultProps = baseTableDefaultProps;
-
export default BaseTable as (
- props: BaseTableProps & {
- ref?: React.Ref;
- },
+ props: BaseTableProps & RefAttributes,
) => React.ReactElement;
diff --git a/src/table/Cell.tsx b/src/table/Cell.tsx
index eec7f5e1c1..34fce64796 100644
--- a/src/table/Cell.tsx
+++ b/src/table/Cell.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, MutableRefObject } from 'react';
+import React, { MouseEvent, MutableRefObject, ReactNode } from 'react';
import classNames from 'classnames';
import isFunction from 'lodash/isFunction';
import get from 'lodash/get';
@@ -12,7 +12,7 @@ import { TooltipProps } from '../tooltip';
import { PaginationProps } from '../pagination';
export interface RenderEllipsisCellParams {
- cellNode: any;
+ cellNode: ReactNode;
tableElm?: HTMLDivElement;
columnLength: number;
classPrefix?: string;
diff --git a/src/table/EditableCell.tsx b/src/table/EditableCell.tsx
index 062dda0d28..db3d18b3eb 100644
--- a/src/table/EditableCell.tsx
+++ b/src/table/EditableCell.tsx
@@ -128,7 +128,7 @@ const EditableCell = (props: EditableCellProps) => {
}, [col]);
const validateEdit = (trigger: 'self' | 'parent', newVal: any) =>
- new Promise((resolve) => {
+ new Promise((resolve) => {
const params: PrimaryTableRowValidateContext = {
result: [
{
diff --git a/src/table/EnhancedTable.tsx b/src/table/EnhancedTable.tsx
index 135ecfedf4..0c2316ea8b 100644
--- a/src/table/EnhancedTable.tsx
+++ b/src/table/EnhancedTable.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { RefAttributes, forwardRef, useImperativeHandle, useRef } from 'react';
import get from 'lodash/get';
import PrimaryTable from './PrimaryTable';
import { PrimaryTableCol, TableRowData, DragSortContext, TdPrimaryTableProps } from './type';
@@ -106,7 +106,5 @@ const EnhancedTable = forwardRef((props,
EnhancedTable.displayName = 'EnhancedTable';
export default EnhancedTable as (
- props: EnhancedTableProps & {
- ref?: React.Ref;
- },
+ props: EnhancedTableProps & RefAttributes,
) => React.ReactElement;
diff --git a/src/table/PrimaryTable.tsx b/src/table/PrimaryTable.tsx
index e619a6b4f3..a62b8f0348 100644
--- a/src/table/PrimaryTable.tsx
+++ b/src/table/PrimaryTable.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, ReactNode, RefAttributes } from 'react';
import get from 'lodash/get';
import classNames from 'classnames';
import BaseTable from './BaseTable';
@@ -20,12 +20,14 @@ import { StyledProps } from '../common';
import { useEditableRow } from './hooks/useEditableRow';
import { primaryTableDefaultProps } from './defaultProps';
import { CheckboxGroupValue } from '../checkbox';
+import useDefaultProps from '../hooks/useDefaultProps';
export { BASE_TABLE_ALL_EVENTS } from './BaseTable';
export interface TPrimaryTableProps extends PrimaryTableProps, StyledProps {}
-const PrimaryTable = forwardRef((props, ref) => {
+const PrimaryTable = forwardRef((originalProps, ref) => {
+ const props = useDefaultProps(originalProps, primaryTableDefaultProps);
const { columns, columnController, editableRowKeys, style, className } = props;
const primaryTableRef = useRef(null);
const innerPagination = useRef(props.pagination);
@@ -207,7 +209,12 @@ const PrimaryTable = forwardRef((props, ref
}
};
- function formatNode(api: string, renderInnerNode: Function, condition: boolean, extra?: { reverse?: boolean }) {
+ function formatNode(
+ api: string,
+ renderInnerNode: () => ReactNode,
+ condition: boolean,
+ extra?: { reverse?: boolean },
+ ) {
if (!condition) return props[api];
const innerNode = renderInnerNode();
const propsNode = props[api];
@@ -271,10 +278,6 @@ const PrimaryTable = forwardRef((props, ref
PrimaryTable.displayName = 'PrimaryTable';
-PrimaryTable.defaultProps = primaryTableDefaultProps;
-
export default PrimaryTable as (
- props: PrimaryTableProps & {
- ref?: React.Ref;
- },
+ props: PrimaryTableProps & RefAttributes,
) => React.ReactElement;
diff --git a/src/table/TBody.tsx b/src/table/TBody.tsx
index e744ed245d..01b00220a5 100644
--- a/src/table/TBody.tsx
+++ b/src/table/TBody.tsx
@@ -1,4 +1,4 @@
-import React, { MutableRefObject, useMemo } from 'react';
+import React, { CSSProperties, MutableRefObject, ReactNode, useMemo } from 'react';
import camelCase from 'lodash/camelCase';
import get from 'lodash/get';
import pick from 'lodash/pick';
@@ -123,7 +123,7 @@ export default function TBody(props: TableBodyProps) {
const getTRNodeList = () => {
if (isSkipSnapsMapNotFinish) return null;
- const trNodeList = [];
+ const trNodeList: ReactNode[] = [];
const properties = [
'classPrefix',
'ellipsisOverlayClassName',
@@ -182,13 +182,13 @@ export default function TBody(props: TableBodyProps) {
// 垫上隐藏的 tr 元素高度
const translate = `translateY(${virtualConfig.translateY}px)`;
- const posStyle = virtualConfig.isVirtualScroll
- ? {
+ const posStyle: CSSProperties = virtualConfig.isVirtualScroll
+ ? ({
transform: translate,
msTransform: translate,
MozTransform: translate,
WebkitTransform: translate,
- }
+ } as CSSProperties)
: undefined;
const list = (
diff --git a/src/table/TFoot.tsx b/src/table/TFoot.tsx
index b8ef9dcf5c..5356397ea0 100644
--- a/src/table/TFoot.tsx
+++ b/src/table/TFoot.tsx
@@ -27,7 +27,7 @@ export interface TFootProps {
export default function TFoot(props: TFootProps) {
const { footData, columns, rowKey, footerSummary } = props;
- const tfooterRef = useRef();
+ const tfooterRef = useRef();
const classnames = useClassName();
const { skipSpansMap } = useRowspanAndColspan(footData, columns, rowKey, props.rowspanAndColspanInFooter);
diff --git a/src/table/THead.tsx b/src/table/THead.tsx
index e501f20035..dae5c9bd2b 100644
--- a/src/table/THead.tsx
+++ b/src/table/THead.tsx
@@ -36,8 +36,15 @@ export interface TheadProps {
columnResizeParams?: {
resizeLineRef: MutableRefObject;
resizeLineStyle: CSSProperties;
- onColumnMouseover: (e: MouseEvent, col: BaseTableCol) => void;
- onColumnMousedown: (e: MouseEvent, col: BaseTableCol, index: number) => void;
+ onColumnMouseover: (
+ e: React.MouseEvent,
+ col: BaseTableCol,
+ ) => void;
+ onColumnMousedown: (
+ e: React.MouseEvent,
+ col: BaseTableCol,
+ index: number,
+ ) => void;
};
}
@@ -72,8 +79,8 @@ export default function THead(props: TheadProps) {
return map;
}, [props.thList]);
- const getTableNode = (thead: HTMLElement) => {
- let parent = thead;
+ const getTableNode = (thead: HTMLTableSectionElement) => {
+ let parent: HTMLElement = thead;
while (parent) {
parent = parent.parentNode as HTMLElement;
if (parent?.classList?.contains(`${props.classPrefix}-table`)) {
@@ -85,7 +92,7 @@ export default function THead(props: TheadProps) {
const renderThNodeList = (rowAndColFixedPosition: RowAndColFixedPosition, thWidthList: TheadProps['thWidthList']) => {
// thBorderMap: rowspan 会影响 tr > th 是否为第一列表头，从而影响边框
- const thBorderMap = new Map();
+ const thBorderMap = new Map, boolean>();
const thRowspanAndColspan = props.spansAndLeafNodes.rowspanAndColspanMap;
return props.thList.map((row, rowIndex) => {
const thRow = row.map((col: TableColumns[0], index: number) => {
@@ -130,19 +137,19 @@ export default function THead(props: TheadProps) {
const resizeColumnListener =
props.resizable || !canDragSort
? {
- onMouseDown: (e) => {
+ onMouseDown: (e: React.MouseEvent) => {
if (props.resizable) {
columnResizeParams?.onColumnMousedown?.(e, col, index);
}
if (!canDragSort) {
const timer = setTimeout(() => {
- const thList = theadRef.current.querySelectorAll('th');
+ const thList = theadRef.current.querySelectorAll('th');
thList[index]?.removeAttribute('draggable');
clearTimeout(timer);
}, 10);
}
},
- onMouseMove: (e) => {
+ onMouseMove: (e: React.MouseEvent) => {
props.resizable && columnResizeParams?.onColumnMouseover?.(e, col);
},
}
diff --git a/src/table/hooks/useColumnResize.tsx b/src/table/hooks/useColumnResize.tsx
index 0df3ddb807..fb7d14ebd5 100644
--- a/src/table/hooks/useColumnResize.tsx
+++ b/src/table/hooks/useColumnResize.tsx
@@ -5,7 +5,7 @@
* - 当表格内容没有超出时，即没有出现横向滚动条时，此时认为表格有足够的列宽呈现内容，修改宽度为相邻宽度调整
* - 当表格内容超出，出现横向滚动条时，会自动调整当前列宽和表格总列宽，不影响相邻列宽
*/
-import { useState, useRef, MutableRefObject, CSSProperties, useEffect } from 'react';
+import React, { useState, useRef, MutableRefObject, CSSProperties, useEffect } from 'react';
import isNumber from 'lodash/isNumber';
import { BaseTableCol, TableRowData, TdBaseTableProps } from '../type';
import { on, off } from '../../_util/dom';
@@ -108,7 +108,10 @@ export default function useColumnResize(params: {
// 表格列宽拖拽事件
// 只在表头显示拖拽图标
- const onColumnMouseover = (e: MouseEvent, col: BaseTableCol) => {
+ const onColumnMouseover = (
+ e: React.MouseEvent,
+ col: BaseTableCol,
+ ) => {
// calculate mouse cursor before drag start
if (!resizeLineRef.current || resizeLineParams.isDragging || !e.target) return;
const target = (e.target as HTMLElement).closest('th');
@@ -200,7 +203,11 @@ export default function useColumnResize(params: {
};
// 调整表格列宽
- const onColumnMousedown = (e: MouseEvent, col: BaseTableCol, index: number) => {
+ const onColumnMousedown = (
+ e: React.MouseEvent,
+ col: BaseTableCol,
+ index: number,
+ ) => {
if (!resizeLineParams.draggingCol) return;
const target = resizeLineParams.draggingCol;
const targetBoundRect = target.getBoundingClientRect();
@@ -217,7 +224,7 @@ export default function useColumnResize(params: {
// 初始化 resizeLine 标记线
if (resizeLineRef?.current) {
- const styles = { ...resizeLineStyle };
+ const styles: CSSProperties = { ...resizeLineStyle };
styles.display = 'block';
styles.height = `${tableBoundRect.bottom - targetBoundRect.top}px`;
styles.left = `${resizeLinePos}px`;
diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts
index 53e97ec683..0b152dcf15 100644
--- a/src/table/hooks/useFixed.ts
+++ b/src/table/hooks/useFixed.ts
@@ -442,7 +442,6 @@ export default function useFixed(
finalColumns: BaseTableCol[] = [],
preFinalColumns: BaseTableCol[] = [],
) => {
- console.log(preFinalColumns);
const finalColKeys = finalColumns.map((t) => t.colKey);
const preColKeys = preFinalColumns.map((t) => t.colKey);
if (finalColKeys.length < preColKeys.length) {
diff --git a/src/table/utils.ts b/src/table/utils.ts
index 76d9c8d967..32fb09024d 100644
--- a/src/table/utils.ts
+++ b/src/table/utils.ts
@@ -85,7 +85,7 @@ export function formatClassNames(
for (let i = 0, len = classes.length; i < len; i++) {
const cls = classes[i];
if (isFunction(cls)) {
- arr.push(cls(params));
+ arr.push(cls(params as CellData));
} else {
arr.push(cls);
}
diff --git a/src/tabs/TabBar.tsx b/src/tabs/TabBar.tsx
index 55045eaed4..e240d5f14a 100644
--- a/src/tabs/TabBar.tsx
+++ b/src/tabs/TabBar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, CSSProperties, useCallback, useRef } from 'react';
+import React, { useEffect, useState, CSSProperties, useRef } from 'react';
import classNames from 'classnames';
import useConfig from '../hooks/useConfig';
import useMutationObserver from '../_util/useMutationObserver';
@@ -14,13 +14,12 @@ const TabBar: React.FC = (props) => {
const { classPrefix } = useConfig();
const [barStyle, setBarStyle] = useState({});
const tabsClassPrefix = `${classPrefix}-tabs`;
-
const currentActiveIdRef = useRef(activeId);
useEffect(() => {
currentActiveIdRef.current = activeId;
}, [activeId]);
- const computeStyle = useCallback(() => {
+ const computeStyle = React.useCallback(() => {
const isHorizontal = ['bottom', 'top'].includes(tabPosition);
const transformPosition = isHorizontal ? 'translateX' : 'translateY';
const itemProp = isHorizontal ? 'width' : 'height';
@@ -29,26 +28,20 @@ const TabBar: React.FC = (props) => {
let offset = 0;
if (containerRef.current) {
- const itemsRef = containerRef.current.querySelectorAll?.(`.${tabsClassPrefix}__nav-item`);
- if (itemsRef.length - 1 >= currentActiveIdRef.current) {
+ const itemsRef = containerRef.current?.querySelectorAll(`.${tabsClassPrefix}__nav-item`);
+ if (itemsRef.length - 1 >= (currentActiveIdRef.current as number)) {
itemsRef.forEach((item, itemIndex) => {
- if (itemIndex < currentActiveIdRef.current) {
+ if (itemIndex < (currentActiveIdRef.current as number)) {
offset += Number(getComputedStyle(item)[itemProp].replace('px', ''));
}
});
const computedItem = itemsRef[currentActiveIdRef.current];
if (!computedItem) {
- setBarStyle({
- transform: `${transformPosition}(${0}px)`,
- [barBorderProp]: 0,
- });
+ setBarStyle({ transform: `${transformPosition}(${0}px)`, [barBorderProp]: 0 });
return;
}
const itemPropValue = getComputedStyle(computedItem)[itemProp];
- setBarStyle({
- transform: `${transformPosition}(${offset}px)`,
- [barBorderProp]: itemPropValue || 0,
- });
+ setBarStyle({ transform: `${transformPosition}(${offset}px)`, [barBorderProp]: itemPropValue || 0 });
}
}
}, [currentActiveIdRef, containerRef, tabPosition, tabsClassPrefix]);
@@ -60,8 +53,8 @@ const TabBar: React.FC = (props) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [tabPosition, activeId, containerRef.current]);
- const handleMutationObserver = useCallback(
- (mutations) => {
+ const handleMutationObserver = React.useCallback(
+ (mutations: MutationRecord[]) => {
mutations.forEach((mutation) => {
if (mutation.type === 'characterData') {
computeStyle();
diff --git a/src/tabs/TabNav.tsx b/src/tabs/TabNav.tsx
index 23cdf8b28d..2b52d1fd07 100644
--- a/src/tabs/TabNav.tsx
+++ b/src/tabs/TabNav.tsx
@@ -14,6 +14,7 @@ import TabBar from './TabBar';
import tabBase from '../_common/js/tabs/base';
import useGlobalIcon from '../hooks/useGlobalIcon';
import type { DragSortInnerProps } from '../_util/useDragSorter';
+import parseTNode from '../_util/parseTNode';
const { moveActiveTabIntoView, calcScrollLeft, scrollToLeft, scrollToRight, calculateCanToLeft, calculateCanToRight } =
tabBase;
@@ -39,6 +40,7 @@ const TabNav: React.FC = (props) => {
onChange = noop,
activeValue,
children,
+ action,
getDragProps,
} = props;
@@ -272,7 +274,17 @@ const TabNav: React.FC = (props) => {
) : null}
- {props.action}
+ {action ? (
+
{renderHeader()}
{renderBody()}
diff --git a/src/descriptions/__tests__/descriptions.test.tsx b/src/descriptions/__tests__/descriptions.test.tsx
index 6a712868d6..0b408f98a2 100644
--- a/src/descriptions/__tests__/descriptions.test.tsx
+++ b/src/descriptions/__tests__/descriptions.test.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { render } from '@test/utils';
+import { render, screen } from '@test/utils';
import Descriptions from '../index';
import { SizeEnum } from '../../common';
@@ -242,4 +242,40 @@ describe('Descriptions 组件测试', () => {
expect(container.querySelector('.t-descriptions')).toBeInTheDocument();
});
+
+ // nest
+ test('nest', () => {
+ const itemsContent = [
+ {
+ label: 'City',
+ content: 'Shenzhen',
+ },
+ {
+ label: 'Detail',
+ content: 'Penguin Island D1 4A Mail Center',
+ },
+ ];
+
+ const items = [
+ {
+ label: 'Name',
+ content: 'TDesign',
+ },
+ {
+ label: 'Telephone Number',
+ content: '139****0609',
+ },
+ {
+ label: 'Area',
+ content: 'China Tencent Headquarters',
+ },
+ {
+ label: 'Address',
+ content: 推荐：数据写法
+ {/*推荐：数据写法
*/}JSX写法
+ {/*JSX写法
整体左右布局，item 左右布局
-整体左右布局，item 上下布局
-整体上下布局，item 左右布局
-整体上下布局，item 上下布局
- GuideStep.children works fine 1`] = `
class="t-portal-wrapper appear appear-active"
>
);
diff --git a/src/swiper/SwiperItem.tsx b/src/swiper/SwiperItem.tsx
index fda99c6ea0..6a2af5969b 100644
--- a/src/swiper/SwiperItem.tsx
+++ b/src/swiper/SwiperItem.tsx
@@ -42,7 +42,7 @@ const calculateTranslate = (index: number, currentIndex: number, parentWidth: nu
return ((2 + itemWidth * (CARD_SCALE - 1)) * parentWidth) / 2;
};
-const getZindex = (isActivity, inStage) => {
+const getZindex = (isActivity: boolean, inStage: boolean) => {
if (isActivity) {
return 2;
}
@@ -52,7 +52,7 @@ const getZindex = (isActivity, inStage) => {
return 0;
};
-const SwiperItem = (props: SwiperItemProps) => {
+const SwiperItem: React.FC GuideStep.children works fine 1`] = `
>
TNode
@@ -421,7 +423,7 @@ exports[`Guide Component > GuideStep.content works fine 1`] = `
class="t-portal-wrapper appear appear-active"
>
GuideStep.content works fine 1`] = `
>
TNode
@@ -561,7 +565,7 @@ exports[`Guide Component > GuideStep.highlightContent works fine 1`] = `
class="t-portal-wrapper appear appear-active"
>
+ ,
+ );
+
+ expect(container.querySelector('#content_id')).not.toBeNull();
+ expect(container.querySelector('#content_id')).toBeInTheDocument();
+ expect(childContainer.querySelector('#child_test')).not.toBeNull();
+ expect(childContainer.querySelector('#child_test')).toBeInTheDocument();
+ });
+
+ test('action', () => {
+ const { queryByText } = render(操作1} />);
+
+ expect(queryByText('操作1')).not.toBeNull();
+ expect(queryByText('操作1')).toBeInTheDocument();
+ });
+ });
+
+ describe('ListItemMeta Component Test', () => {
+ const imgSrc = 'https://tdesign.gtimg.com/list-icon.png';
+ const description = 'Test Description';
+ test('image string', () => {
+ const { container } = render(
;
+ const { container } = render(
-
-
- {createNavigation()}
- {createArrow(CreateArrow.Default)}
+ {renderNavigation()}
+ {renderArrow(CreateArrow.Default)}
GuideStep.placement is equal to bottom-left 1`] = `
class="t-portal-wrapper appear-done enter-done"
>
= (props) => {
visible,
title,
closeOnEscKeydown,
+ imageReferrerpolicy,
...resProps
} = props;
const { classPrefix } = useConfig();
@@ -410,6 +440,7 @@ export const ImageModal: React.FC = (props) => {
onRotate={onRotate}
errorText={errorText}
tipText={tipText}
+ imageReferrerpolicy={imageReferrerpolicy}
/>
);
}
@@ -442,7 +473,12 @@ export const ImageModal: React.FC = (props) => {
)}
{images.length > 1 && (
<>
-
-
+ ![]()
`, [MDN Definition](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。options: no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N
imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N
images | Array | [] | Typescript：`Array` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N
index | Number | 0 | \- | N
diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md
index e6eca93f3d..a52a757a03 100644
--- a/src/image-viewer/image-viewer.md
+++ b/src/image-viewer/image-viewer.md
@@ -1,9 +1,10 @@
:: BASE_DOC ::
## API
+
### ImageViewer Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -11,6 +12,7 @@ closeBtn | TNode | true | 是否展示关闭按钮，值为 `true` 显示默认
closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N
closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N
draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N
+imageReferrerpolicy | String | - | 图片预览中的 `![]()
` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。可选项：no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N
imageScale | Object | - | 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N
images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N
index | Number | 0 | 当前预览图片所在的下标 | N
diff --git a/src/image-viewer/type.ts b/src/image-viewer/type.ts
index b1fa3d2f40..127e3d7b49 100644
--- a/src/image-viewer/type.ts
+++ b/src/image-viewer/type.ts
@@ -26,6 +26,18 @@ export interface TdImageViewerProps {
* 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽
*/
draggable?: boolean;
+ /**
+ * 图片预览中的 `![]()
` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
+ */
+ imageReferrerpolicy?:
+ | 'no-referrer'
+ | 'no-referrer-when-downgrade'
+ | 'origin'
+ | 'origin-when-cross-origin'
+ | 'same-origin'
+ | 'strict-origin'
+ | 'strict-origin-when-cross-origin'
+ | 'unsafe-url';
/**
* 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例
*/
@@ -102,12 +114,30 @@ export interface ImageScale {
defaultScale?: number;
}
+export interface ImageScale {
+ max: number;
+ min: number;
+ step: number;
+ defaultScale?: number;
+}
+
export interface ImageInfo {
mainImage: string | File;
thumbnail?: string | File;
download?: boolean;
}
+export interface ImageInfo {
+ mainImage: string | File;
+ thumbnail?: string | File;
+ download?: boolean;
+}
+
+export interface ImageViewerScale {
+ minWidth: number;
+ minHeight: number;
+}
+
export interface ImageViewerScale {
minWidth: number;
minHeight: number;
diff --git a/src/image/Image.tsx b/src/image/Image.tsx
index f561ac7db8..35aea54f88 100644
--- a/src/image/Image.tsx
+++ b/src/image/Image.tsx
@@ -35,7 +35,6 @@ const InternalImage: React.ForwardRefRenderFunction
className,
src,
style,
- alt,
fit,
position,
shape,
@@ -50,8 +49,14 @@ const InternalImage: React.ForwardRefRenderFunction
fallback,
onLoad,
onError,
- ...rest
+ ...waitPassRest
} = props;
+ const {
+ // penetrate pass to image tag element props
+ alt,
+ referrerpolicy,
+ ...rest
+ } = waitPassRest;
const { classPrefix } = useConfig();
const imageRef = useRef(null);
@@ -127,7 +132,7 @@ const InternalImage: React.ForwardRefRenderFunction
// 这里添加setTimeout是因为CSR image渲染时，onError有时快有时慢，会导致执行顺序不同导致的bug
setTimeout(() => {
if (!isValid && !isFirstError.current) {
- // SSR模式下获取不到imaage的合成事件，暂时传递image实例
+ // SSR模式下获取不到 image 的合成事件，暂时传递 image 实例
handleError(imgRef.current);
}
}, 0);
@@ -141,7 +146,7 @@ const InternalImage: React.ForwardRefRenderFunction
if (imgRef.current) {
const { complete, naturalWidth, naturalHeight } = imgRef.current;
if (complete && naturalWidth !== 0 && naturalHeight !== 0) {
- // SSR模式下获取不到imaage的合成事件，暂时传递image实例
+ // SSR模式下获取不到 image 的合成事件，暂时传递 image 实例
handleLoad(imgRef.current);
}
}
@@ -197,6 +202,7 @@ const InternalImage: React.ForwardRefRenderFunction
`${classPrefix}-image--position-${position}`,
)}
alt={alt}
+ referrerPolicy={referrerpolicy}
/>
);
};
diff --git a/src/list/__tests__/list.test.tsx b/src/list/__tests__/list.test.tsx
index 77d7aff258..0c4eb9c488 100644
--- a/src/list/__tests__/list.test.tsx
+++ b/src/list/__tests__/list.test.tsx
@@ -2,7 +2,7 @@ import { render, fireEvent, vi } from '@test/utils';
import React from 'react';
import List from '../List';
-const { ListItem } = List;
+const { ListItem, ListItemMeta } = List;
describe('List 组件测试', () => {
const data = [
@@ -51,5 +51,79 @@ describe('List 组件测试', () => {
fireEvent.scroll(container.firstChild);
expect(fn).toHaveBeenCalled();
});
+
+ test('header and footer props', () => {
+ const header = 'header content';
+ const footer = 'footer content';
+ const { queryByText } = render({contextText}
} />);
+
+ const { container: childContainer } = render(
+ GuideStep.stepOverlayClass is equal to t-test-guide-s
class="t-portal-wrapper appear-done enter-done"
>
))}
@@ -292,6 +320,7 @@ interface ImageModalProps {
closeBtn: boolean | TNode;
closeOnEscKeydown?: boolean;
onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' }) => void;
+ imageReferrerpolicy?: ImageViewerProps['imageReferrerpolicy'];
}
// 弹窗基础组件
@@ -311,6 +340,7 @@ export const ImageModal: React.FC
{title}
{`${index + 1}/${images.length}`}
@@ -481,6 +517,7 @@ export const ImageModal: React.FC = (props) => {
preSrc={currentImage.thumbnail}
src={currentImage.mainImage}
errorText={errorText}
+ imageReferrerpolicy={imageReferrerpolicy}
/>
);
diff --git a/src/image-viewer/__tests__/image-viewer.test.tsx b/src/image-viewer/__tests__/image-viewer.test.tsx
index 8955981a66..8a37301d93 100644
--- a/src/image-viewer/__tests__/image-viewer.test.tsx
+++ b/src/image-viewer/__tests__/image-viewer.test.tsx
@@ -226,4 +226,23 @@ describe('ImageViewerModal', () => {
transform: 'rotateZ(0deg) scale(2)',
});
});
+
+ test('imageReferrerpolicy', async () => {
+ const referrerPolicy = 'strict-origin-when-cross-origin';
+
+ const BasicImageViewer = () => {
+ const trigger = ({ onOpen }) => {triggerText};
+ return
- 预览
+
+
);
@@ -34,15 +36,15 @@ export default function BasicImageViewer() {
height: 160,
border: '4px solid var(--td-bg-color-secondarycontainer)',
borderRadius: 'var(--td-radius-medium)',
- backgroundColor: '#fff'
+ backgroundColor: '#fff',
}}
/>
- )
- }
+ );
+ };
return (
{contextText}
+ {description}
;
+ const { container } = render({renderContent(innerChecked)}
+ {loading && {contentNode}
);
});
Switch.displayName = 'Switch';
-Switch.defaultProps = switchDefaultProps;
export default Switch as
+ {parseTNode(action)}
+
+ ) : null}
= (props) => {
dragProps,
} = props;
- const { CloseIcon } = useGlobalIcon({
- CloseIcon: TdCloseIcon,
- });
+ const { CloseIcon } = useGlobalIcon({ CloseIcon: TdCloseIcon });
const isCard = theme === 'card';
diff --git a/src/tabs/TabPanel.tsx b/src/tabs/TabPanel.tsx
index 091d2e75c3..cdcb8141de 100644
--- a/src/tabs/TabPanel.tsx
+++ b/src/tabs/TabPanel.tsx
@@ -4,6 +4,7 @@ import { TdTabPanelProps } from './type';
import { StyledProps } from '../common';
import { useTabClass } from './useTabClass';
import { tabPanelDefaultProps } from './defaultProps';
+import useDefaultProps from '../hooks/useDefaultProps';
export interface TabPanelProps extends TdTabPanelProps, StyledProps {
children?: React.ReactNode;
@@ -11,9 +12,7 @@ export interface TabPanelProps extends TdTabPanelProps, StyledProps {
const TabPanel: React.FC = (props) => {
const { tdTabPanelClassPrefix } = useTabClass();
-
- const { className, style } = props;
-
+ const { className, style } = useDefaultProps(props, tabPanelDefaultProps);
return (
@@ -6329,7 +6329,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group.jsx 1`] = `
{props.children || props.panel}
@@ -22,6 +21,5 @@ const TabPanel: React.FC = (props) => {
};
TabPanel.displayName = 'TabPanel';
-TabPanel.defaultProps = tabPanelDefaultProps;
export default TabPanel;
diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx
index 507c834be0..c11095e9bf 100644
--- a/src/tabs/Tabs.tsx
+++ b/src/tabs/Tabs.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect } from 'react';
import classNames from 'classnames';
import { TabValue, TdTabsProps } from './type';
import forwardRefWithStatics from '../_util/forwardRefWithStatics';
@@ -8,15 +8,27 @@ import TabPanel from './TabPanel';
import { StyledProps } from '../common';
import { tabsDefaultProps } from './defaultProps';
import useDragSorter from '../_util/useDragSorter';
+import useDefaultProps from '../hooks/useDefaultProps';
export interface TabsProps extends TdTabsProps, StyledProps {
children?: React.ReactNode;
}
const Tabs = forwardRefWithStatics(
- (props: TabsProps, ref) => {
- const { children, list, placement, onRemove, value: tabValue, onChange, className, style } = props;
- let { defaultValue } = props;
+ (originalProps: TabsProps, ref: React.Ref) => {
+ const props = useDefaultProps(originalProps, tabsDefaultProps);
+ const {
+ defaultValue,
+ children,
+ list,
+ placement,
+ value: tabValue,
+ dragSort,
+ className,
+ style,
+ onRemove,
+ onChange,
+ } = props;
// 样式工具引入
const { tdTabsClassPrefix, tdTabsClassGenerator, tdClassGenerator } = useTabClass();
@@ -24,21 +36,21 @@ const Tabs = forwardRefWithStatics(
const { getDragProps } = useDragSorter({
...props,
- sortOnDraggable: props.dragSort,
+ sortOnDraggable: dragSort,
onDragOverCheck: {
x: true,
targetClassNameRegExp: new RegExp(targetClassNameRegExpStr),
},
});
- const memoChildren = useMemo(() => {
+ const memoChildren = React.useMemo(() => {
if (!list || list.length === 0) {
return children;
}
- return list.map((panelProps) => ((panelProps) => (defaultValue);
+ const [value, setValue] = React.useState(
+ defaultValue === undefined && Array.isArray(itemList) && itemList.length !== 0 ? itemList[0].value : defaultValue,
+ );
useEffect(() => {
- tabValue !== undefined && setValue(tabValue);
+ if (tabValue !== undefined) {
+ setValue(tabValue);
+ }
}, [tabValue]);
- const handleChange = (v) => {
- if (tabValue === undefined) {
- setValue(v);
- }
- onChange?.(v);
- };
+ const handleChange = React.useCallback(
+ (v: TabValue) => {
+ if (tabValue === undefined) {
+ setValue(v);
+ }
+ onChange?.(v);
+ },
+ [tabValue, onChange],
+ );
- const handleClickTab = (v) => {
- if (tabValue === undefined) {
- setValue(v);
- }
- };
+ const handleClickTab = React.useCallback(
+ (v: TabValue) => {
+ if (tabValue === undefined) {
+ setValue(v);
+ }
+ },
+ [tabValue],
+ );
- const renderHeader = () => (
- (
+ () => (
+ ) => {
+const TagInput = forwardRef((originalProps, ref) => {
+ const props = useDefaultProps(originalProps, tagInputDefaultProps);
const { classPrefix: prefix } = useConfig();
const { CloseCircleFilledIcon } = useGlobalIcon({
CloseCircleFilledIcon: TdCloseCircleFilledIcon,
@@ -183,6 +185,5 @@ const TagInput = forwardRef((props: TagInputProps, ref: React.RefObject) => {
+const CheckTag = forwardRef((originalProps, ref) => {
+ const props = useDefaultProps(originalProps, checkTagDefaultProps);
const {
value,
content,
@@ -101,6 +103,5 @@ const CheckTag = forwardRef((props: CheckTagProps, ref: React.Ref {
+const CheckTagGroup: React.FC = (originalProps) => {
+ const props = useDefaultProps(originalProps, checkTagGroupDefaultProps);
const { options, onChange } = props;
const { classPrefix } = useConfig();
const componentName = `${classPrefix}-check-tag-group`;
@@ -54,6 +56,5 @@ const CheckTagGroup = (props: CheckTagGroupProps) => {
};
CheckTagGroup.displayName = 'CheckTagGroup';
-CheckTagGroup.defaultProps = checkTagGroupDefaultProps;
export default CheckTagGroup;
diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
index 987f501907..d7aff2f979 100644
--- a/src/tag/Tag.tsx
+++ b/src/tag/Tag.tsx
@@ -1,12 +1,15 @@
-import React, { FocusEvent, forwardRef } from 'react';
+import React, { ForwardRefRenderFunction, FocusEvent, forwardRef, useMemo } from 'react';
import classNames from 'classnames';
import { CloseIcon as TdCloseIcon } from 'tdesign-icons-react';
+import tinycolor from 'tinycolor2';
+
import noop from '../_util/noop';
import useConfig from '../hooks/useConfig';
import useGlobalIcon from '../hooks/useGlobalIcon';
import { StyledProps } from '../common';
import { TdTagProps } from './type';
import { tagDefaultProps } from './defaultProps';
+import useDefaultProps from '../hooks/useDefaultProps';
/**
* Tag 组件支持的属性。
@@ -21,7 +24,8 @@ export interface TagProps extends TdTagProps, StyledProps {
onBlur?: (e: FocusEvent) => void;
}
-export function TagFunction(props: TagProps, ref: React.Ref) {
+export const TagFunction: ForwardRefRenderFunction = (originalProps, ref) => {
+ const props = useDefaultProps(originalProps, tagDefaultProps);
const {
theme,
size,
@@ -37,6 +41,7 @@ export function TagFunction(props: TagProps, ref: React.Ref) {
style,
disabled,
children,
+ color,
...otherTagProps
} = props;
@@ -83,6 +88,32 @@ export function TagFunction(props: TagProps, ref: React.Ref) {
})();
const titleAttribute = title ? { title } : undefined;
+ const getTagStyle = useMemo(() => {
+ if (!color) return style;
+ const luminance = tinycolor(color).getLuminance();
+
+ const calculatedStyle = style || {};
+
+ calculatedStyle.color = luminance > 0.5 ? 'black' : 'white';
+ if (variant === 'outline' || variant === 'light-outline') {
+ calculatedStyle.borderColor = color;
+ }
+
+ if (variant !== 'outline') {
+ const getLightestShade = () => {
+ const { r, g, b } = tinycolor(color).toRgb();
+ // alpha 0.1 is designed by @wen1kang
+ return `rgba(${r}, ${g}, ${b}, 0.1)`;
+ };
+
+ calculatedStyle.backgroundColor = variant === 'dark' ? color : getLightestShade();
+ }
+ if (variant !== 'dark') {
+ calculatedStyle.color = color;
+ }
+ return calculatedStyle;
+ }, [color, variant, style]);
+
const tag = (
@@ -6200,7 +6200,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/base.jsx 1`] = `
-
+ const headerNode = React.useMemo
+
+ ),
+ [
+ props,
+ getDragProps,
+ value,
+ onRemove,
+ itemList,
+ handleClickTab,
+ handleChange,
+ placement,
+ tdTabsClassGenerator,
+ tdClassGenerator,
+ ],
);
return (
- {placement !== 'bottom' ? renderHeader() : null}
+ {placement !== 'bottom' ? headerNode : null}
);
},
@@ -107,6 +139,5 @@ const Tabs = forwardRefWithStatics(
);
Tabs.displayName = 'Tabs';
-Tabs.defaultProps = tabsDefaultProps;
export default Tabs;
diff --git a/src/tabs/__tests__/tabs.test.tsx b/src/tabs/__tests__/tabs.test.tsx
index 0804841533..59c7ba35a2 100644
--- a/src/tabs/__tests__/tabs.test.tsx
+++ b/src/tabs/__tests__/tabs.test.tsx
@@ -340,4 +340,26 @@ describe('Tabs 组件测试', () => {
expect(onDragSort.mock.calls[0][0].target.value).toEqual('vue');
expect(container.querySelectorAll('.t-tabs__nav-item-text-wrapper').item(0).firstChild.nodeValue).toEqual('react');
});
+
+ test('Tabs action', () => {
+ const { container } = render(
+
{React.Children.map(memoChildren, (child: any) => {
if (child && child.type === TabPanel) {
@@ -99,7 +131,7 @@ const Tabs = forwardRefWithStatics(
return null;
})}
- {placement === 'bottom' ? renderHeader() : null}
+ {placement === 'bottom' ? headerNode : null}
) {
if (disabled) return;
onClick({ e });
}}
- style={maxWidth ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, ...style } : style}
+ style={
+ maxWidth ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, ...getTagStyle } : getTagStyle
+ }
{...otherTagProps}
>
<>
@@ -105,11 +138,10 @@ export function TagFunction(props: TagProps, ref: React.Ref) {
);
return tag;
-}
+};
export const Tag = forwardRef(TagFunction);
Tag.displayName = 'Tag';
-Tag.defaultProps = tagDefaultProps;
export default Tag;
diff --git a/src/tag/_example/custom-color.jsx b/src/tag/_example/custom-color.jsx
new file mode 100644
index 0000000000..4d32f506b6
--- /dev/null
+++ b/src/tag/_example/custom-color.jsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Space, Tag, ColorPicker } from 'tdesign-react';
+
+export default function CustomColor() {
+ const [selfDefinedColor, changeSelfDefinedColor] = useState('#0052D9');
+ return (
+
+
+ changeSelfDefinedColor(v)} />
+
+
+
+ default
+
+
+ light
+
+
+ outline
+
+
+ light-outline
+
+
+
+ );
+}
diff --git a/src/tag/index.ts b/src/tag/index.ts
index 8403c65abf..b0719edfa1 100644
--- a/src/tag/index.ts
+++ b/src/tag/index.ts
@@ -2,8 +2,6 @@ import { TagFunction } from './Tag';
import _CheckTag from './CheckTag';
import _CheckTagGroup from './CheckTagGroup';
import forwardRefWithStatics from '../_util/forwardRefWithStatics';
-import { tagDefaultProps } from './defaultProps';
-
import './style/index.js';
export type { TagProps } from './Tag';
@@ -19,7 +17,6 @@ export const Tag = forwardRefWithStatics(TagFunction, {
});
Tag.displayName = 'Tag';
-Tag.defaultProps = tagDefaultProps;
export const CheckTag = _CheckTag;
export const CheckTagGroup = _CheckTagGroup;
diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md
index 378dc44c58..9540a520bc 100644
--- a/src/tag/tag.en-US.md
+++ b/src/tag/tag.en-US.md
@@ -1,14 +1,16 @@
:: BASE_DOC ::
## API
+
### Tag Props
name | type | default | description | required
-- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
closable | Boolean | false | \- | N
+color | String | - | self-defined tag color | N
content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
disabled | Boolean | false | \- | N
icon | TElement | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -20,12 +22,13 @@ variant | String | dark | options: dark/light/outline/light-outline | N
onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N + ### CheckTag Props name | type | default | description | required -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式，Typescript：`React.CSSProperties` | N +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N checked | Boolean | - | \- | N defaultChecked | Boolean | - | uncontrolled property | N checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N @@ -38,12 +41,13 @@ value | String / Number | - | tag unique key | N onChange | Function | | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N + ### CheckTagGroup Props name | type | default | description | required -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式，Typescript：`React.CSSProperties` | N +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N multiple | Boolean | false | allow to select multiple tags | N options | Array | - | tag list。Typescript：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N diff --git a/src/tag/tag.md b/src/tag/tag.md index ea477a8df0..2c065b96d7 100644 --- a/src/tag/tag.md +++ b/src/tag/tag.md @@ -1,14 +1,16 @@ :: BASE_DOC :: ## API + ### Tag Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N children | TNode | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N closable | Boolean | false | 标签是否可关闭 | N +color | String | - | 自定义标签颜色 | N content | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N icon | TElement | undefined | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -20,9 +22,10 @@ variant | String | dark | 标签风格变体。可选项：dark/light/outline/li onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果关闭按钮存在，点击关闭按钮时触发 | N + ### CheckTag Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N @@ -38,9 +41,10 @@ value | String / Number | - | 标签唯一标识，一般用于标签组场景 onChange | Function | | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击标签时触发 | N + ### CheckTagGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N diff --git a/src/tag/type.ts b/src/tag/type.ts index 71729aee00..db009a7052 100644 --- a/src/tag/type.ts +++ b/src/tag/type.ts @@ -17,6 +17,11 @@ export interface TdTagProps { * @default false */ closable?: boolean; + /** + * 自定义标签颜色 + * @default '' + */ + color?: string; /** * 组件子元素 */ diff --git a/src/textarea/Textarea.tsx b/src/textarea/Textarea.tsx index 1f1403ea41..4fcef82859 100644 --- a/src/textarea/Textarea.tsx +++ b/src/textarea/Textarea.tsx @@ -8,6 +8,7 @@ import useControlled from '../hooks/useControlled'; import { getCharacterLength, getUnicodeLength, limitUnicodeMaxLength } from '../_common/js/utils/helper'; import calcTextareaHeight from '../_common/js/utils/calcTextareaHeight'; import { textareaDefaultProps } from './defaultProps'; +import useDefaultProps from '../hooks/useDefaultProps'; export interface TextareaProps extends Omit< @@ -21,7 +22,8 @@ export interface TextareaRefInterface extends React.RefObject {
textareaElement: HTMLTextAreaElement;
}
-const Textarea = forwardRef((props: TextareaProps, ref: TextareaRefInterface) => {
+const Textarea = forwardRef((originalProps: TextareaProps, ref: TextareaRefInterface) => {
+ const props = useDefaultProps(originalProps, textareaDefaultProps);
const {
disabled,
maxlength,
@@ -201,6 +203,5 @@ const Textarea = forwardRef((props: TextareaProps, ref: TextareaRefInterface) =>
});
Textarea.displayName = 'Textarea';
-Textarea.defaultProps = textareaDefaultProps;
export default Textarea;
diff --git a/src/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx
index d6af49b0c8..db2ca6d9b0 100644
--- a/src/time-picker/TimePicker.tsx
+++ b/src/time-picker/TimePicker.tsx
@@ -21,6 +21,7 @@ import { timePickerDefaultProps } from './defaultProps';
import type { StyledProps } from '../common';
import type { TdTimePickerProps } from './type';
+import useDefaultProps from '../hooks/useDefaultProps';
// https://github.com/iamkun/dayjs/issues/1552
dayjs.extend(customParseFormat);
@@ -28,7 +29,8 @@ dayjs.extend(customParseFormat);
export interface TimePickerProps extends TdTimePickerProps, StyledProps {}
const TimePicker = forwardRefWithStatics(
- (props: TimePickerProps, ref: Ref) => {
+ (originalProps: TimePickerProps, ref: Ref) => {
+ const props = useDefaultProps(originalProps, timePickerDefaultProps);
const TEXT_CONFIG = useTimePickerTextConfig();
const {
allowInput,
@@ -147,6 +149,5 @@ const TimePicker = forwardRefWithStatics(
);
TimePicker.displayName = 'TimePicker';
-TimePicker.defaultProps = timePickerDefaultProps;
export default TimePicker;
diff --git a/src/time-picker/TimeRangePicker.tsx b/src/time-picker/TimeRangePicker.tsx
index 28844b4594..3c49318a63 100644
--- a/src/time-picker/TimeRangePicker.tsx
+++ b/src/time-picker/TimeRangePicker.tsx
@@ -16,12 +16,14 @@ import { TIME_PICKER_EMPTY } from '../_common/js/time-picker/const';
import { TdTimeRangePickerProps, TimeRangeValue, TimeRangePickerPartial } from './type';
import { StyledProps } from '../common';
import { timeRangePickerDefaultProps } from './defaultProps';
+import useDefaultProps from '../hooks/useDefaultProps';
export interface TimeRangePickerProps extends TdTimeRangePickerProps, StyledProps {}
const defaultArrVal = [undefined, undefined];
-const TimeRangePicker: FC = (props) => {
+const TimeRangePicker: FC = (originalProps) => {
+ const props = useDefaultProps(originalProps, timeRangePickerDefaultProps);
const TEXT_CONFIG = useTimePickerTextConfig();
const {
@@ -172,6 +174,5 @@ const TimeRangePicker: FC = (props) => {
};
TimeRangePicker.displayName = 'TimeRangePicker';
-TimeRangePicker.defaultProps = timeRangePickerDefaultProps;
export default TimeRangePicker;
diff --git a/src/timeline/useAlign.ts b/src/timeline/useAlign.ts
index 446e89f362..5074858314 100644
--- a/src/timeline/useAlign.ts
+++ b/src/timeline/useAlign.ts
@@ -6,7 +6,7 @@ const DefaultAlign = {
horizontal: ['top', 'bottom'],
};
-export const useAlign = (align, layout = 'vertical') =>
+export const useAlign = (align: string, layout = 'vertical') =>
useMemo(() => {
let renderAlign = layout === 'vertical' ? 'left' : 'top';
if (layout === 'vertical' && align) {
diff --git a/src/tooltip/Tooltip.tsx b/src/tooltip/Tooltip.tsx
index 6cfd516adf..176537519b 100644
--- a/src/tooltip/Tooltip.tsx
+++ b/src/tooltip/Tooltip.tsx
@@ -1,13 +1,15 @@
import React, { forwardRef, useState, useEffect, useRef, useImperativeHandle } from 'react';
import classNames from 'classnames';
-import Popup, { PopupVisibleChangeContext } from '../popup';
+import Popup, { PopupRef, PopupVisibleChangeContext } from '../popup';
import useConfig from '../hooks/useConfig';
import { TdTooltipProps } from './type';
import { tooltipDefaultProps } from './defaultProps';
+import useDefaultProps from '../hooks/useDefaultProps';
export type TooltipProps = TdTooltipProps;
-const Tooltip = forwardRef((props: TdTooltipProps, ref) => {
+const Tooltip = forwardRef, TdTooltipProps>((originalProps, ref) => {
+ const props = useDefaultProps(originalProps, tooltipDefaultProps);
const {
theme,
showArrow,
@@ -22,7 +24,7 @@ const Tooltip = forwardRef((props: TdTooltipProps, ref) => {
const { classPrefix } = useConfig();
const [timeUp, setTimeUp] = useState(false);
- const popupRef = useRef(null);
+ const popupRef = useRef(null);
const timerRef = useRef(null);
const toolTipClass = classNames(
`${classPrefix}-tooltip`,
@@ -51,7 +53,7 @@ const Tooltip = forwardRef((props: TdTooltipProps, ref) => {
}, [duration, timeUp]);
useImperativeHandle(ref, () => ({
- ...((popupRef.current || {}) as any),
+ ...(popupRef.current || {}),
}));
return (
@@ -70,6 +72,5 @@ const Tooltip = forwardRef((props: TdTooltipProps, ref) => {
});
Tooltip.displayName = 'Tooltip';
-Tooltip.defaultProps = tooltipDefaultProps;
export default Tooltip;
diff --git a/src/tooltip/TooltipLite.tsx b/src/tooltip/TooltipLite.tsx
index e25fe9277e..1f39adde79 100644
--- a/src/tooltip/TooltipLite.tsx
+++ b/src/tooltip/TooltipLite.tsx
@@ -10,6 +10,7 @@ import getPosition from '../_common/js/utils/getPosition';
import { TdTooltipLiteProps } from './type';
import { tooltipLiteDefaultProps } from './defaultProps';
import { getTransitionParams } from '../popup/utils/transition';
+import useDefaultProps from '../hooks/useDefaultProps';
export interface TooltipLiteProps extends TdTooltipLiteProps, StyledProps {
children?: ReactNode;
@@ -17,7 +18,8 @@ export interface TooltipLiteProps extends TdTooltipLiteProps, StyledProps {
const DEFAULT_TRANSITION_TIMEOUT = 180;
-const TooltipLite: React.FC = (props) => {
+const TooltipLite: React.FC = (originalProps) => {
+ const props = useDefaultProps(originalProps, tooltipLiteDefaultProps);
const { style, className, placement, showArrow, theme, children, triggerElement, content, showShadow } = props;
const triggerRef = useRef(null);
const contentRef = useRef(null);
@@ -108,6 +110,5 @@ const TooltipLite: React.FC = (props) => {
};
TooltipLite.displayName = 'Tooltiplite';
-TooltipLite.defaultProps = tooltipLiteDefaultProps;
export default React.memo(TooltipLite);
diff --git a/src/transfer/Transfer.tsx b/src/transfer/Transfer.tsx
index 41f2e551ca..edab3f18ae 100644
--- a/src/transfer/Transfer.tsx
+++ b/src/transfer/Transfer.tsx
@@ -13,6 +13,7 @@ import { filterCheckedTreeNodes, getTargetNodes, getDefaultValue, getJSX, getLea
import { TNode, StyledProps } from '../common';
import { useLocaleReceiver } from '../locale/LocalReceiver';
import { transferDefaultProps } from './defaultProps';
+import useDefaultProps from '../hooks/useDefaultProps';
export interface TransferProps extends TdTransferProps, StyledProps {
content?: Array;
@@ -28,7 +29,8 @@ interface CheckedInterface {
target: Array;
}
-const Transfer: React.FunctionComponent = (props) => {
+const Transfer: React.FunctionComponent = (originalProps) => {
+ const props = useDefaultProps(originalProps, transferDefaultProps);
const {
data,
search,
@@ -279,6 +281,5 @@ const Transfer: React.FunctionComponent = (props) => {
};
Transfer.displayName = 'Transfer';
-Transfer.defaultProps = transferDefaultProps;
export default Transfer;
diff --git a/src/tree-select/TreeSelect.tsx b/src/tree-select/TreeSelect.tsx
index 017d8556b1..6c806746bb 100644
--- a/src/tree-select/TreeSelect.tsx
+++ b/src/tree-select/TreeSelect.tsx
@@ -16,6 +16,9 @@ import { useTreeSelectPassThroughProps } from './useTreeSelectPassthoughProps';
import { useTreeSelectLocale } from './useTreeSelectLocale';
import { treeSelectDefaultProps } from './defaultProps';
import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { PopupRef } from '../popup';
+import { InputRef } from '../input';
export interface TreeSelectProps
extends TdTreeSelectProps,
@@ -29,7 +32,10 @@ export interface NodeOptions {
const useMergeFn = (...fns: Array<(...args: T) => void>) =>
usePersistFn((...args: T) => fns.forEach((fn) => fn?.(...args)));
-const TreeSelect = forwardRef((props: TreeSelectProps, ref) => {
+type TreeSelectRefType = Partial & PopupRef & InputRef>;
+
+const TreeSelect = forwardRef((originalProps, ref) => {
+ const props = useDefaultProps>(originalProps, treeSelectDefaultProps);
/* ---------------------------------config---------------------------------------- */
// 国际化文本初始化
@@ -73,7 +79,7 @@ const TreeSelect = forwardRef((props: TreeSelectProps, ref) => {
const [filterInput, setFilterInput] = useControlled(props, 'inputValue', onInputChange);
const treeRef = useRef>();
- const selectInputRef = useRef();
+ const selectInputRef = useRef>();
const tKeys = useMemo(
() => ({
@@ -351,6 +357,5 @@ const TreeSelect = forwardRef((props: TreeSelectProps, ref) => {
});
TreeSelect.displayName = 'TreeSelect';
-TreeSelect.defaultProps = treeSelectDefaultProps;
export default TreeSelect;
diff --git a/src/tree/Tree.tsx b/src/tree/Tree.tsx
index 7041193ff1..69fc0d9073 100644
--- a/src/tree/Tree.tsx
+++ b/src/tree/Tree.tsx
@@ -28,11 +28,21 @@ import useTreeVirtualScroll from './hooks/useTreeVirtualScroll';
import type { TreeNodeState, TreeNodeValue, TypeTreeNodeData, TypeTreeNodeModel } from '../_common/js/tree-v1/types';
import type { TreeInstanceFunctions, TdTreeProps } from './type';
+import useDefaultProps from '../hooks/useDefaultProps';
export type TreeProps = TdTreeProps & StyledProps;
-const Tree = forwardRef((props: TreeProps, ref: React.Ref) => {
+const Tree = forwardRef, TreeProps>((originalProps, ref) => {
const { treeClassNames, transitionNames, transitionClassNames, transitionDuration, locale } = useTreeConfig();
+ const props = useDefaultProps(originalProps, {
+ data: [],
+ expandLevel: 0,
+ icon: true,
+ line: false,
+ transition: true,
+ lazy: true,
+ valueMode: 'onlyLeaf',
+ });
// 可见节点集合
const [visibleNodes, setVisibleNodes] = useState([]);
@@ -365,14 +375,4 @@ const Tree = forwardRef((props: TreeProps, ref: React.Ref
Tree.displayName = 'Tree';
-Tree.defaultProps = {
- data: [],
- expandLevel: 0,
- icon: true,
- line: false,
- transition: true,
- lazy: true,
- valueMode: 'onlyLeaf',
-};
-
export default Tree;
diff --git a/src/tree/TreeItem.tsx b/src/tree/TreeItem.tsx
index 476a5fc3f9..ded073df88 100644
--- a/src/tree/TreeItem.tsx
+++ b/src/tree/TreeItem.tsx
@@ -8,6 +8,7 @@ import React, {
DragEvent,
isValidElement,
useEffect,
+ useState,
} from 'react';
import classNames from 'classnames';
import isFunction from 'lodash/isFunction';
@@ -25,6 +26,7 @@ import useConfig from '../hooks/useConfig';
import type { TdTreeProps } from './type';
import type { TreeItemProps } from './interface';
+import type { TypeTreeNodeData } from '../_common/js/tree-v1/types';
/**
* 树节点组件
@@ -210,11 +212,23 @@ const TreeItem = forwardRef(
const [labelDom, setRefCurrent] = useDomRefCallback();
useRipple(labelDom);
+ // setData需要强制刷新组件来更新数据
+ const [, updateRender] = useState({});
+
const renderLabel = () => {
const emptyView = locale('empty');
let labelText: string | ReactNode = '';
if (label instanceof Function) {
- labelText = label(node.getModel()) || emptyView;
+ const { setData: nodeSetData, ...rest } = node.getModel();
+ labelText =
+ label({
+ ...rest,
+ // 拦截setData render tree-item
+ setData: (value: TypeTreeNodeData) => {
+ nodeSetData(value);
+ updateRender({});
+ },
+ }) || emptyView;
} else {
labelText = node.label || emptyView;
}
diff --git a/src/tree/__tests__/tree.test.tsx b/src/tree/__tests__/tree.test.tsx
index 2dea5c0542..fc749f67c6 100644
--- a/src/tree/__tests__/tree.test.tsx
+++ b/src/tree/__tests__/tree.test.tsx
@@ -320,4 +320,71 @@ describe('Tree test', () => {
await mockDelay(300);
expect(container.querySelectorAll('.t-loading').length).toBe(1);
});
+
+ test('custom label', async () => {
+ const data = [
+ {
+ label: '第1一段',
+ value: 1,
+ children: [
+ {
+ label: '第二段',
+ value: '1-1',
+ },
+ ],
+ },
+ {
+ label: '第二段',
+ value: 2,
+ },
+ ];
+ const { container } = await renderTreeWithProps({
+ data,
+ label: ({ data, setData }) =>
+ data.isEditing ? (
+ {
+ console.log('blur', { ...data, isEditing: false });
+ setData({ ...data, label: e.target.value, isEditing: false });
+ }}
+ onKeyDown={(e) => {
+ console.log('keydown', e.key);
+ if (e.key === 'Enter') {
+ setData({ ...data, label: e.currentTarget.value, isEditing: false });
+ console.log('Enter setData({ ...data, name: e.target.value, isEditing: false })');
+ }
+ if (e.key === 'Escape') {
+ setData({ ...data, isEditing: false });
+ console.log('ESC setData({ ...data, isEditing: false })');
+ }
+ }}
+ />
+ ) : (
+ {
+ e.stopPropagation();
+ setData({ ...data, isEditing: true });
+ }}
+ >
+ {data.label}
+
+ ),
+ });
+ await mockDelay(300);
+ expect(container.querySelector('.tree-item-span')).not.toBeNull();
+ fireEvent.dblClick(container.querySelector('.tree-item-span'));
+ await mockDelay(300);
+ expect(container.querySelector('.tree-item-input')).not.toBeNull();
+ fireEvent.change(container.querySelector('.tree-item-input'), { target: { value: '123' } });
+ expect(container.querySelector('.tree-item-input').value).toBe('123');
+ container.querySelector('.tree-item-input').focus();
+ container.querySelector('.tree-item-input').blur();
+ await mockDelay(300);
+ expect(container.querySelector('.tree-item-input')).toBeNull();
+ expect(container.querySelector('.tree-item-span')).not.toBeNull();
+ expect(container.querySelector('.tree-item-span').textContent).toBe('123');
+ });
});
diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx
index 1439fc4eeb..8f07c80285 100644
--- a/src/upload/upload.tsx
+++ b/src/upload/upload.tsx
@@ -13,9 +13,11 @@ import { UploadDragEvents } from './hooks/useDrag';
import CustomFile from './themes/CustomFile';
import { UploadFile } from './type';
import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
// const Upload = forwardRef((props: UploadProps, ref) => {
-function TdUpload(props: UploadProps, ref: ForwardedRef) {
+function TdUpload(originalProps: UploadProps, ref: ForwardedRef) {
+ const props = useDefaultProps>(originalProps, uploadDefaultProps);
const { theme } = props;
const {
locale,
@@ -216,6 +218,5 @@ export type UploadOuterForwardRef = {
const Upload = forwardRef(TdUpload) as UploadOuterForwardRef;
Upload.displayName = 'Upload';
-Upload.defaultProps = uploadDefaultProps;
export default Upload;
diff --git a/src/watermark/Watermark.tsx b/src/watermark/Watermark.tsx
index 54e50cfdd1..be36f04e4f 100644
--- a/src/watermark/Watermark.tsx
+++ b/src/watermark/Watermark.tsx
@@ -8,31 +8,35 @@ import injectStyle from '../_common/js/utils/injectStyle';
import useConfig from '../hooks/useConfig';
import useMutationObserver from '../_util/useMutationObserver';
import { TdWatermarkProps } from './type';
-import { watermarkDefaultProps as defaultProps } from './defaultProps';
+import { watermarkDefaultProps } from './defaultProps';
import { getStyleStr } from './utils';
+import useDefaultProps from '../hooks/useDefaultProps';
export interface WatermarkProps extends TdWatermarkProps, StyledProps {}
-const Watermark: React.FC = ({
- alpha = defaultProps.alpha,
- x = 200,
- y = 210,
- width = 120,
- height = 60,
- rotate: tempRotate = defaultProps.rotate,
- zIndex = 10,
- lineSpace = defaultProps.lineSpace,
- isRepeat = defaultProps.isRepeat,
- removable = defaultProps.removable,
- movable = defaultProps.movable,
- moveInterval = defaultProps.moveInterval,
- offset = [],
- content,
- children,
- watermarkContent,
- className,
- style = {},
-}) => {
+const Watermark: React.FC = (originalProps) => {
+ const props = useDefaultProps(originalProps, watermarkDefaultProps);
+ const {
+ alpha,
+ x = 200,
+ y = 210,
+ width = 120,
+ height = 60,
+ rotate: tempRotate,
+ zIndex = 10,
+ lineSpace,
+ isRepeat,
+ removable,
+ movable,
+ moveInterval,
+ offset = [],
+ content,
+ children,
+ watermarkContent,
+ className,
+ style = {},
+ } = props;
+
const { classPrefix } = useConfig();
let gapX = x;
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index c17242e172..6d21b14474 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -6109,7 +6109,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/base.jsx 1`] = `
| N onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N + ### CheckTag Props name | type | default | description | required -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式，Typescript：`React.CSSProperties` | N +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N checked | Boolean | - | \- | N defaultChecked | Boolean | - | uncontrolled property | N checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N @@ -38,12 +41,13 @@ value | String / Number | - | tag unique key | N onChange | Function | | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N + ### CheckTagGroup Props name | type | default | description | required -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式，Typescript：`React.CSSProperties` | N +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N multiple | Boolean | false | allow to select multiple tags | N options | Array | - | tag list。Typescript：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N diff --git a/src/tag/tag.md b/src/tag/tag.md index ea477a8df0..2c065b96d7 100644 --- a/src/tag/tag.md +++ b/src/tag/tag.md @@ -1,14 +1,16 @@ :: BASE_DOC :: ## API + ### Tag Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N children | TNode | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N closable | Boolean | false | 标签是否可关闭 | N +color | String | - | 自定义标签颜色 | N content | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N icon | TElement | undefined | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -20,9 +22,10 @@ variant | String | dark | 标签风格变体。可选项：dark/light/outline/li onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果关闭按钮存在，点击关闭按钮时触发 | N + ### CheckTag Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N @@ -38,9 +41,10 @@ value | String / Number | - | 标签唯一标识，一般用于标签组场景 onChange | Function | | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击标签时触发 | N + ### CheckTagGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N diff --git a/src/tag/type.ts b/src/tag/type.ts index 71729aee00..db009a7052 100644 --- a/src/tag/type.ts +++ b/src/tag/type.ts @@ -17,6 +17,11 @@ export interface TdTagProps { * @default false */ closable?: boolean; + /** + * 自定义标签颜色 + * @default '' + */ + color?: string; /** * 组件子元素 */ diff --git a/src/textarea/Textarea.tsx b/src/textarea/Textarea.tsx index 1f1403ea41..4fcef82859 100644 --- a/src/textarea/Textarea.tsx +++ b/src/textarea/Textarea.tsx @@ -8,6 +8,7 @@ import useControlled from '../hooks/useControlled'; import { getCharacterLength, getUnicodeLength, limitUnicodeMaxLength } from '../_common/js/utils/helper'; import calcTextareaHeight from '../_common/js/utils/calcTextareaHeight'; import { textareaDefaultProps } from './defaultProps'; +import useDefaultProps from '../hooks/useDefaultProps'; export interface TextareaProps extends Omit< @@ -21,7 +22,8 @@ export interface TextareaRefInterface extends React.RefObject
- 图片加载中
+ loading
- 图片加载中
+ loading
- 图片加载中
+ loading
@@ -6405,7 +6405,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group.jsx 1`] = `
- 图片加载中
+ loading
@@ -6489,7 +6489,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group.jsx 1`] = `
- 图片加载中
+ loading
@@ -6565,7 +6565,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group.jsx 1`] = `
- 图片加载中
+ loading
@@ -6706,7 +6706,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group-cascading.jsx 1`
- 图片加载中
+ loading
@@ -6782,7 +6782,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group-cascading.jsx 1`
- 图片加载中
+ loading
@@ -6866,7 +6866,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group-cascading.jsx 1`
- 图片加载中
+ loading
@@ -6942,7 +6942,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group-cascading.jsx 1`
- 图片加载中
+ loading
@@ -7083,7 +7083,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group-max.jsx 1`] = `
- 图片加载中
+ loading
@@ -7152,7 +7152,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group-max.jsx 1`] = `
- 图片加载中
+ loading
@@ -7232,7 +7232,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group-max.jsx 1`] = `
- 图片加载中
+ loading
@@ -7309,7 +7309,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group-max.jsx 1`] = `
- 图片加载中
+ loading
@@ -7378,7 +7378,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group-max.jsx 1`] = `
- 图片加载中
+ loading
@@ -7458,7 +7458,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/group-max.jsx 1`] = `
- 图片加载中
+ loading
@@ -7857,7 +7857,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.jsx 1`] = `
- 图片加载中
+ loading
@@ -7905,7 +7905,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.jsx 1`] = `
- 图片加载中
+ loading
@@ -7953,7 +7953,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.jsx 1`] = `
- 图片加载中
+ loading
@@ -8002,7 +8002,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.jsx 1`] = `
- 图片加载中
+ loading
@@ -8198,7 +8198,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.jsx 1`] = `
- 图片加载中
+ loading
@@ -8246,7 +8246,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.jsx 1`] = `
- 图片加载中
+ loading
@@ -8294,7 +8294,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.jsx 1`] = `
- 图片加载中
+ loading
@@ -8343,7 +8343,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.jsx 1`] = `
- 图片加载中
+ loading
@@ -41311,7 +41311,7 @@ exports[`csr snapshot test > csr test src/card/_example/footer-actions.jsx 1`] =
- 图片加载中
+ loading
@@ -41668,7 +41668,7 @@ exports[`csr snapshot test > csr test src/card/_example/footer-actions.jsx 1`] =
- 图片加载中
+ loading
@@ -42797,7 +42797,7 @@ exports[`csr snapshot test > csr test src/card/_example/header-footer-actions.js
- 图片加载中
+ loading
@@ -43002,7 +43002,7 @@ exports[`csr snapshot test > csr test src/card/_example/header-footer-actions.js
- 图片加载中
+ loading
@@ -69283,7 +69283,7 @@ exports[`csr snapshot test > csr test src/config-provider/_example/others.jsx 1`
- 图片加载中
+ loading
@@ -69905,7 +69905,7 @@ exports[`csr snapshot test > csr test src/config-provider/_example/others.jsx 1`
- 图片加载中
+ loading
@@ -85042,13 +85042,6 @@ exports[`csr snapshot test > csr test src/descriptions/_example/base.jsx 1`] = `
class="t-space t-space-vertical"
style="gap: 16px;"
>
-
-
- 推荐：数据写法 -
-
@@ -85120,84 +85113,6 @@ exports[`csr snapshot test > csr test src/descriptions/_example/base.jsx 1`] = `
-
-
- - JSX写法 -
-
-
-
-
-
-
-
- Shipping address
-
- | - Name - | -- TDesign - | -- Telephone Number - | -- 139****0609 - | -
| - Area - | -- China Tencent Headquarters - | -- Address - | -- test - | -