diff --git a/src/affix/affix.en-US.md b/src/affix/affix.en-US.md index 030007a0e8..eecfa9bd79 100644 --- a/src/affix/affix.en-US.md +++ b/src/affix/affix.en-US.md @@ -10,7 +10,7 @@ style | Object | - | 样式，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 container | String / Function | () => (() => window) | Typescript：`ScrollContainer`。[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 -offsetBottom | Number | 0 | When the distance from the bottom of the container reaches the specified distance, the trigger is fixed | N -offsetTop | Number | 0 | When the distance from the top of the container reaches the specified distance, the trigger is fixed | N +offsetBottom | Number | 0 | \- | N +offsetTop | Number | 0 | \- | N zIndex | Number | - | \- | N onFixedChange | Function | | Typescript：`(affixed: boolean, context: { top: number }) => void`
| N diff --git a/src/affix/defaultProps.ts b/src/affix/defaultProps.ts index 254e262a4b..20c86fd884 100644 --- a/src/affix/defaultProps.ts +++ b/src/affix/defaultProps.ts @@ -4,4 +4,4 @@ import { TdAffixProps } from './type'; -export const affixDefaultProps: TdAffixProps = { container: () => window, offsetBottom: 0, offsetTop: 0 }; +export const affixDefaultProps: TdAffixProps = { container: '() => (() => window)', offsetBottom: 0, offsetTop: 0 }; diff --git a/src/affix/type.ts b/src/affix/type.ts index 54e8546986..4815a199be 100644 --- a/src/affix/type.ts +++ b/src/affix/type.ts @@ -13,7 +13,7 @@ export interface TdAffixProps { children?: TNode; /** * 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body - * @default () => window + * @default () => (() => window) */ container?: ScrollContainer; /** @@ -21,12 +21,12 @@ export interface TdAffixProps { */ content?: TNode; /** - * 距离容器底部达到指定距离后触发固定 + * 距离容器顶部达到指定距离后触发固定 * @default 0 */ offsetBottom?: number; /** - * 距离容器顶部达到指定距离后触发固定 + * 距离容器底部达到指定距离后触发固定 * @default 0 */ offsetTop?: number; diff --git a/src/alert/alert.md b/src/alert/alert.md index 7a110b422c..7406f83517 100644 --- a/src/alert/alert.md +++ b/src/alert/alert.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Alert Props 名称 | 类型 | 默认值 | 说明 | 必传 diff --git a/src/anchor/anchor.en-US.md b/src/anchor/anchor.en-US.md index 64f0b9c8b8..b6110351eb 100644 --- a/src/anchor/anchor.en-US.md +++ b/src/anchor/anchor.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Anchor Props name | type | default | description | required @@ -9,10 +10,9 @@ className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N affixProps | Object | - | Typescript：`Omit`，[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/anchor/type.ts) | N bounds | Number | 5 | \- | N -container | String / Function | () => window | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +container | String / Function | () => (() => window) | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N cursor | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -getCurrentAnchor | Function | - | Custom Highlighted Anchor Points。Typescript：`(activeLink: string) => string` | N -size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N targetOffset | Number | 0 | \- | N onChange | Function | | Typescript：`(currentLink: string, prevLink: string) => void`
| N onClick | Function | | Typescript：`(link: { href: string; title: string; e: MouseEvent }) => void`
| N @@ -24,7 +24,7 @@ name | type | default | description | required className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N href | String | - | required | Y -target | String | _self | options: _self/_blank/_parent/_top | N +target | String | _self | options：_self/_blank/_parent/_top | N title | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N ### AnchorTarget Props diff --git a/src/anchor/anchor.md b/src/anchor/anchor.md index c613d357ca..208c8c5fb8 100644 --- a/src/anchor/anchor.md +++ b/src/anchor/anchor.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Anchor Props 名称 | 类型 | 默认值 | 说明 | 必传 @@ -9,9 +10,8 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N affixProps | Object | - | 透传 Affix 组件属性，即让 Anchor 组件支持所有 Affix 组件特性。TS 类型：`Omit`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/anchor/type.ts) | N bounds | Number | 5 | 锚点区域边界 | N -container | String / Function | () => window | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +container | String / Function | () => (() => window) | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N cursor | TElement | - | 用于自定义选中项左侧游标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -getCurrentAnchor | Function | - | 自定义高亮的锚点 。TS 类型：`(activeLink: string) => string` | N size | String | medium | 组件尺寸，small(120px)，medium(200px)，large(320px)。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N targetOffset | Number | 0 | 锚点滚动偏移量 | N onChange | Function | | TS 类型：`(currentLink: string, prevLink: string) => void`
锚点改变时触发 | N diff --git a/src/auto-complete/auto-complete.en-US.md b/src/auto-complete/auto-complete.en-US.md index e2d32bb536..5af736b84c 100644 --- a/src/auto-complete/auto-complete.en-US.md +++ b/src/auto-complete/auto-complete.en-US.md @@ -29,7 +29,7 @@ triggerElement | TNode | - | Typescript：`string \| TNode`。[see more ts defin value | String | - | \- | N defaultValue | String | - | uncontrolled property | N onBlur | Function | | Typescript：`(context: { e: FocusEvent; value: string }) => void`
| N -onChange | Function | | Typescript：`(value: string, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent }) => void`
| N +onChange | Function | | Typescript：`(value: string, context?: { e?: InputEvent \| MouseEvent \| KeyboardEvent }) => void`
| N onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onCompositionend | Function | | Typescript：`(context: { e: CompositionEvent; value: string }) => void`
trigger on compositionend | N onCompositionstart | Function | | Typescript：`(context: { e: CompositionEvent; value: string }) => void`
trigger on compositionstart | N diff --git a/src/auto-complete/auto-complete.md b/src/auto-complete/auto-complete.md index a6e6ca744b..5fc1ece72c 100644 --- a/src/auto-complete/auto-complete.md +++ b/src/auto-complete/auto-complete.md @@ -29,7 +29,7 @@ triggerElement | TNode | - | 触发显示联想词下拉框的元素，默认为 value | String | - | 输入框的值，即当前指定的联想词 | N defaultValue | String | - | 输入框的值，即当前指定的联想词。非受控属性 | N onBlur | Function | | TS 类型：`(context: { e: FocusEvent; value: string }) => void`
失去焦点时触发 | N -onChange | Function | | TS 类型：`(value: string, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent }) => void`
输入框值发生变化时触发 | N +onChange | Function | | TS 类型：`(value: string, context?: { e?: InputEvent \| MouseEvent \| KeyboardEvent }) => void`
输入框值发生变化时触发 | N onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
清空按钮点击时触发 | N onCompositionend | Function | | TS 类型：`(context: { e: CompositionEvent; value: string }) => void`
中文输入结束时触发 | N onCompositionstart | Function | | TS 类型：`(context: { e: CompositionEvent; value: string }) => void`
中文输入开始时触发 | N diff --git a/src/auto-complete/type.ts b/src/auto-complete/type.ts index 6fea8b877a..8bfc889e4e 100644 --- a/src/auto-complete/type.ts +++ b/src/auto-complete/type.ts @@ -110,9 +110,7 @@ export interface TdAutoCompleteProps | MouseEvent | CompositionEvent | KeyboardEvent; - }, + context?: { e?: FormEvent | MouseEvent | KeyboardEvent }, ) => void; /** * 清空按钮点击时触发 @@ -121,11 +119,11 @@ export interface TdAutoCompleteProps; value: string }) => void; + onCompositionend?: (context: { e: CompositionEvent; value: string }) => void; /** * 中文输入开始时触发 */ - onCompositionstart?: (context: { e: CompositionEvent; value: string }) => void; + onCompositionstart?: (context: { e: CompositionEvent; value: string }) => void; /** * 回车键按下时触发 */ @@ -137,7 +135,7 @@ export interface TdAutoCompleteProps | KeyboardEvent }) => void; + onSelect?: (value: string, context: { e: MouseEvent | KeyboardEvent }) => void; } export type AutoCompleteOption = string | AutoCompleteOptionObj; diff --git a/src/avatar/avatar.en-US.md b/src/avatar/avatar.en-US.md index a2ddd048d0..8a5ea6132b 100644 --- a/src/avatar/avatar.en-US.md +++ b/src/avatar/avatar.en-US.md @@ -16,7 +16,7 @@ image | String | - | images url | N imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N size | String | - | size | N -onError | Function | | Typescript：`(context: { e: ImageEvent }) => void`
trigger on image load failed | N +onError | Function | | Typescript：`(context: { e: Event }) => void`
trigger on image load failed | N ### AvatarGroup Props @@ -27,5 +27,6 @@ style | Object | - | 样式，Typescript：`React.CSSProperties` | N cascading | String | 'right-up' | multiple images cascading。options：left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N collapseAvatar | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N max | Number | - | \- | N +placement | String | - | popup placement。options：left/top/bottom/right。Typescript：`MaxOverPlacement` `type MaxOverPlacement = 'left' \| 'top' \| 'bottom' \| 'right'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -size | String | - | size | N +size | String | medium | size | N diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md index 07ad27d6e9..73996a8031 100644 --- a/src/avatar/avatar.md +++ b/src/avatar/avatar.md @@ -16,7 +16,7 @@ image | String | - | 图片地址 | N imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N -onError | Function | | TS 类型：`(context: { e: ImageEvent }) => void`
图片加载失败时触发 | N +onError | Function | | TS 类型：`(context: { e: Event }) => void`
图片加载失败时触发 | N ### AvatarGroup Props @@ -27,5 +27,6 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N collapseAvatar | TNode | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N max | Number | - | 能够同时显示的最多头像数量 | N +placement | String | - | 超出的头像呈现位置。可选项：left/top/bottom/right。TS 类型：`MaxOverPlacement` `type MaxOverPlacement = 'left' \| 'top' \| 'bottom' \| 'right'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N popupProps | Object | - | 头像右上角提示信息。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N +size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N diff --git a/src/avatar/defaultProps.ts b/src/avatar/defaultProps.ts index 17f25745ab..07cdbddd6b 100644 --- a/src/avatar/defaultProps.ts +++ b/src/avatar/defaultProps.ts @@ -6,4 +6,4 @@ import { TdAvatarProps, TdAvatarGroupProps } from './type'; export const avatarDefaultProps: TdAvatarProps = { hideOnLoadFailed: false, shape: 'circle' }; -export const avatarGroupDefaultProps: TdAvatarGroupProps = { cascading: 'right-up' }; +export const avatarGroupDefaultProps: TdAvatarGroupProps = { cascading: 'right-up', size: 'medium' }; diff --git a/src/avatar/type.ts b/src/avatar/type.ts index ee200cb4a3..094293dff1 100644 --- a/src/avatar/type.ts +++ b/src/avatar/type.ts @@ -6,7 +6,7 @@ import { ImageProps } from '../image'; import { PopupProps } from '../popup'; -import { TNode, TElement, ImageEvent } from '../common'; +import { TNode, TElement } from '../common'; export interface TdAvatarProps { /** @@ -53,7 +53,7 @@ export interface TdAvatarProps { /** * 图片加载失败时触发 */ - onError?: (context: { e: ImageEvent }) => void; + onError?: (context: { e: Event }) => void; } export interface TdAvatarGroupProps { @@ -70,13 +70,17 @@ export interface TdAvatarGroupProps { * 能够同时显示的最多头像数量 */ max?: number; + /** + * 超出的头像呈现位置 + */ + placement?: MaxOverPlacement; /** * 头像右上角提示信息 */ popupProps?: PopupProps; /** * 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size - * @default '' + * @default medium */ size?: string; } @@ -84,3 +88,5 @@ export interface TdAvatarGroupProps { export type ShapeEnum = 'circle' | 'round'; export type CascadingValue = 'left-up' | 'right-up'; + +export type MaxOverPlacement = 'left' | 'top' | 'bottom' | 'right'; diff --git a/src/back-top/back-top.en-US.md b/src/back-top/back-top.en-US.md index 3b3ae29d8a..b020f2662f 100644 --- a/src/back-top/back-top.en-US.md +++ b/src/back-top/back-top.en-US.md @@ -1,7 +1,6 @@ :: BASE_DOC :: ## API - ### BackTop Props name | type | default | description | required diff --git a/src/back-top/back-top.md b/src/back-top/back-top.md index 54989a0119..a4cf2dfaca 100644 --- a/src/back-top/back-top.md +++ b/src/back-top/back-top.md @@ -1,7 +1,6 @@ :: BASE_DOC :: ## API - ### BackTop Props 名称 | 类型 | 默认值 | 说明 | 必传 diff --git a/src/back-top/type.ts b/src/back-top/type.ts index 2760706eae..395679a662 100644 --- a/src/back-top/type.ts +++ b/src/back-top/type.ts @@ -8,14 +8,6 @@ import { TNode, AttachNode } from '../common'; import { MouseEvent } from 'react'; export interface TdBackTopProps { - /** - * 类名 - */ - className?: string; - /** - * 样式 - */ - style?: React.CSSProperties; /** * 回到顶部内容，同 `content` */ diff --git a/src/badge/badge.md b/src/badge/badge.md index 211752f705..87e4f5f44f 100644 --- a/src/badge/badge.md +++ b/src/badge/badge.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Badge Props 名称 | 类型 | 默认值 | 说明 | 必传 diff --git a/src/breadcrumb-item/breadcrumb-item.en-US.md b/src/breadcrumb-item/breadcrumb-item.en-US.md new file mode 100644 index 0000000000..1805ef1423 --- /dev/null +++ b/src/breadcrumb-item/breadcrumb-item.en-US.md @@ -0,0 +1,20 @@ +:: BASE_DOC :: + +## API + +### BreadcrumbItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，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 +href | String | - | \- | N +icon | TElement | - | prefix icon in breadcrumb item。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +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：`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 diff --git a/src/breadcrumb-item/breadcrumb-item.md b/src/breadcrumb-item/breadcrumb-item.md new file mode 100644 index 0000000000..1360f87faf --- /dev/null +++ b/src/breadcrumb-item/breadcrumb-item.md @@ -0,0 +1,20 @@ +:: BASE_DOC :: + +## API + +### BreadcrumbItem 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 +content | TNode | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +disabled | Boolean | - | 是否禁用当前项点击 | N +href | String | - | 跳转链接 | N +icon | TElement | - | 面板屑项内的前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +maxWidth | String | undefined | 最大宽度，超出后会以省略号形式呈现。优先级高于 Breadcrumb 中的 maxItemWidth | N +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 类型：`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 diff --git a/src/breadcrumb/breadcrumb.en-US.md b/src/breadcrumb/breadcrumb.en-US.md index a7c881b5d8..5b3d927987 100644 --- a/src/breadcrumb/breadcrumb.en-US.md +++ b/src/breadcrumb/breadcrumb.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Breadcrumb Props name | type | default | description | required @@ -26,4 +27,4 @@ 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 +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 diff --git a/src/breadcrumb/breadcrumb.md b/src/breadcrumb/breadcrumb.md index ce63ef9bc2..c6f85ad4c4 100644 --- a/src/breadcrumb/breadcrumb.md +++ b/src/breadcrumb/breadcrumb.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Breadcrumb Props 名称 | 类型 | 默认值 | 说明 | 必传 @@ -26,4 +27,4 @@ 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 diff --git a/src/breadcrumb/defaultProps.ts b/src/breadcrumb/defaultProps.ts index 7e1fd07e12..faa7968a50 100644 --- a/src/breadcrumb/defaultProps.ts +++ b/src/breadcrumb/defaultProps.ts @@ -2,9 +2,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TdBreadcrumbProps, TdBreadcrumbItemProps } from './type'; - -export const breadcrumbDefaultProps: TdBreadcrumbProps = { maxItemWidth: undefined }; +import { TdBreadcrumbItemProps } from './type'; export const breadcrumbItemDefaultProps: TdBreadcrumbItemProps = { maxWidth: undefined, diff --git a/src/breadcrumb/type.ts b/src/breadcrumb/type.ts index 93697472d1..b652cc6a95 100644 --- a/src/breadcrumb/type.ts +++ b/src/breadcrumb/type.ts @@ -6,21 +6,6 @@ import { TNode, TElement } from '../common'; -export interface TdBreadcrumbProps { - /** - * 单项最大宽度，超出后会以省略号形式呈现 - */ - maxItemWidth?: string; - /** - * 面包屑项，功能同 BreadcrumbItem - */ - options?: Array; - /** - * 自定义分隔符 - */ - separator?: TNode; -} - export interface TdBreadcrumbItemProps { /** * 子元素，同 content @@ -64,7 +49,7 @@ export interface TdBreadcrumbItemProps { /** * 路由跳转目标，当且仅当 Router 存在时，该 API 有效 */ - to?: Route | string; + to?: string | Route; } export interface Route { diff --git a/src/button/__tests__/vitest-button.test.jsx b/src/button/__tests__/vitest-button.test.jsx index d4e7bba212..dd9d4f855e 100644 --- a/src/button/__tests__/vitest-button.test.jsx +++ b/src/button/__tests__/vitest-button.test.jsx @@ -143,15 +143,6 @@ describe('Button Component', () => { expect(container.querySelector('.custom-node')).toBeTruthy(); }); - const tagExpectedDom = ['button', 'a', 'div']; - ['button', 'a', 'div'].forEach((item, index) => { - it(`props.tag is equal to ${item}`, () => { - const { container } = render(); - expect(container.querySelector(tagExpectedDom[index])).toBeTruthy(); - expect(container).toMatchSnapshot(); - }); - }); - ['default', 'primary', 'danger', 'warning', 'success'].forEach((item) => { it(`props.theme is equal to ${item}`, () => { const { container } = render(); diff --git a/src/calendar/calendar.en-US.md b/src/calendar/calendar.en-US.md index 48390f0b21..04ae380414 100644 --- a/src/calendar/calendar.en-US.md +++ b/src/calendar/calendar.en-US.md @@ -1,7 +1,6 @@ :: BASE_DOC :: ## API - ### Calendar Props name | type | default | description | required @@ -10,7 +9,7 @@ className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N cell | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N cellAppend | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -controllerConfig | Boolean / Object | - | Typescript：`boolean \| CalendarController` | N +controllerConfig | Boolean / Object | undefined | Typescript：`boolean \| CalendarController` | N fillWithZero | Boolean | true | \- | N firstDayOfWeek | Number | 1 | options：1/2/3/4/5/6/7 | N format | String | 'YYYY-MM-DD' | \- | N @@ -18,10 +17,11 @@ head | TNode | - | Typescript：`string \| TNode`。[see more isShowWeekendDefault | Boolean | true | \- | N mode | String | month | options：month/year | N month | String / Number | - | \- | N +multiple | Boolean | - | \- | N preventCellContextmenu | Boolean | false | \- | N range | Array | - | Typescript：`Array` | N theme | String | full | options：full/card | N -value | String / Date | - | Typescript：`CalendarValue` `type CalendarValue = string \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N +value | String / Array / Date | - | Typescript：`CalendarValue \| CalendarValue[]` `type CalendarValue = string \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N week | TNode | - | Typescript：`Array \| TNode` `interface CalendarWeek { day: WeekDay }` `type WeekDay = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7`。[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/calendar/type.ts) | N year | String / Number | - | \- | N onCellClick | Function | | Typescript：`(options: { cell: CalendarCell; e: MouseEvent }) => void`
| N @@ -34,7 +34,7 @@ onMonthChange | Function | | Typescript：`(options: { month: string; year: str name | type | default | description | required -- | -- | -- | -- | -- -current | Object | - | Typescript：`{ visible?: boolean; currentDayButtonProps?: ButtonProps; currentMonthButtonProps?: ButtonProps }` | N +current | Object | - | Typescript：`{ visible?: boolean; currentDayButtonProps?: ButtonProps; currentMonthButtonProps?: ButtonProps }`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N disabled | Boolean | false | \- | N mode | Object | - | Typescript：`{ visible?: boolean; radioGroupProps?: RadioGroupProps }`，[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N month | Object | - | Typescript：`{ visible?: boolean; selectProps?: SelectProps }` | N diff --git a/src/calendar/calendar.md b/src/calendar/calendar.md index 44a696a388..eadaec046f 100644 --- a/src/calendar/calendar.md +++ b/src/calendar/calendar.md @@ -9,18 +9,19 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N cell | TNode | - | 单元格插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N cellAppend | TNode | - | 单元格插槽，在原来的内容之后追加。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -controllerConfig | Boolean / Object | - | 右上角控制器配置。值为 false 则表示不显示控制器，值为 true 则显示控制器默认配置，值类型为 CalendarController 则显示为自定义控制器配置。TS 类型：`boolean \| CalendarController` | N -fillWithZero | Boolean | true | 小于 10 的日期，是否使用 '0' 填充。默认表现为 `01` `02`，值为 false 表现为 `1` `2` `9` | N +controllerConfig | Boolean / Object | undefined | 右上角控制器配置。支持全局配置。值为 false 则表示不显示控制器，值为 true 则显示控制器默认配置，值类型为 CalendarController 则显示为自定义控制器配置。TS 类型：`boolean \| CalendarController` | N +fillWithZero | Boolean | true | 小于 10 的日期，是否使用 '0' 填充。支持全局配置。默认表现为 `01` `02`，值为 false 表现为 `1` `2` `9` | N firstDayOfWeek | Number | 1 | 第一天从星期几开始，仅在日历展示维度为月份时（mode = month）有效。默认为 1。可选项：1/2/3/4/5/6/7 | N format | String | 'YYYY-MM-DD' | 用于格式化日期，决定事件参数 formattedFilterDate 的输出值。[详细文档](https://day.js.org/docs/en/display/format) | N head | TNode | - | 头部插槽（左上角处，默认不显示任何内容）。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N isShowWeekendDefault | Boolean | true | 默认是否显示周末 | N mode | String | month | 日历展示维度。可选项：month/year | N month | String / Number | - | 控制当前面板展示月份，优先级高于 `controllerConfig.month` | N +multiple | Boolean | - | 是否高亮多个日期单元格 | N preventCellContextmenu | Boolean | false | 是否禁用单元格右键默认系统菜单 | N range | Array | - | 用于设置日历的年月份显示范围，[范围开始，范围结束]。TS 类型：`Array` | N theme | String | full | 日历风格。可选项：full/card | N -value | String / Date | - | 当前高亮的日期。TS 类型：`CalendarValue` `type CalendarValue = string \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N +value | String / Array / Date | - | 当前高亮的日期。TS 类型：`CalendarValue \| CalendarValue[]` `type CalendarValue = string \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N week | TNode | - | 用于自定义日历星期呈现方式。CalendarWeek.day 表示当前是星期几。示例一：['周一', '周二', '周三', '周四', '周五', '星期六', '星期天']。示例二：`({ day }) => '周' + day`。TS 类型：`Array \| TNode` `interface CalendarWeek { day: WeekDay }` `type WeekDay = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N year | String / Number | - | 控制当前面板展示年份，优先级高于 `controllerConfig.year` | N onCellClick | Function | | TS 类型：`(options: { cell: CalendarCell; e: MouseEvent }) => void`
日历单元格点击时触发 | N @@ -33,7 +34,7 @@ onMonthChange | Function | | TS 类型：`(options: { month: string; year: stri 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -current | Object | - | “今天(本月)”按钮控制器。TS 类型：`{ visible?: boolean; currentDayButtonProps?: ButtonProps; currentMonthButtonProps?: ButtonProps }` | N +current | Object | - | “今天(本月)”按钮控制器。TS 类型：`{ visible?: boolean; currentDayButtonProps?: ButtonProps; currentMonthButtonProps?: ButtonProps }`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N disabled | Boolean | false | 是否禁用右上角控制器 | N mode | Object | - | 日历展示维度控制器。TS 类型：`{ visible?: boolean; radioGroupProps?: RadioGroupProps }`，[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N month | Object | - | 日历月份控制器。TS 类型：`{ visible?: boolean; selectProps?: SelectProps }` | N diff --git a/src/calendar/defaultProps.ts b/src/calendar/defaultProps.ts index 261dcd2f18..bff73fc2de 100644 --- a/src/calendar/defaultProps.ts +++ b/src/calendar/defaultProps.ts @@ -5,6 +5,8 @@ import { TdCalendarProps } from './type'; export const calendarDefaultProps: TdCalendarProps = { + controllerConfig: undefined, + fillWithZero: undefined, format: 'YYYY-MM-DD', isShowWeekendDefault: true, mode: 'month', diff --git a/src/calendar/type.ts b/src/calendar/type.ts index 52e4c416f2..37ca0c7b25 100644 --- a/src/calendar/type.ts +++ b/src/calendar/type.ts @@ -4,10 +4,10 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { RadioGroupProps } from '../radio'; import { ButtonProps } from '../button'; -import { SelectProps } from '../select'; +import { RadioGroupProps } from '../radio'; import { CheckTagProps } from '../tag'; +import { SelectProps } from '../select'; import { TNode } from '../common'; import { MouseEvent } from 'react'; @@ -21,11 +21,11 @@ export interface TdCalendarProps { */ cellAppend?: string | TNode; /** - * 右上角控制器配置。值为 false 则表示不显示控制器，值为 true 则显示控制器默认配置，值类型为 CalendarController 则显示为自定义控制器配置 + * 右上角控制器配置。支持全局配置。值为 false 则表示不显示控制器，值为 true 则显示控制器默认配置，值类型为 CalendarController 则显示为自定义控制器配置 */ controllerConfig?: boolean | CalendarController; /** - * 小于 10 的日期，是否使用 '0' 填充。默认表现为 `01` `02`，值为 false 表现为 `1` `2` `9` + * 小于 10 的日期，是否使用 '0' 填充。支持全局配置。默认表现为 `01` `02`，值为 false 表现为 `1` `2` `9` */ fillWithZero?: boolean; /** @@ -55,6 +55,10 @@ export interface TdCalendarProps { * 控制当前面板展示月份，优先级高于 `controllerConfig.month` */ month?: string | number; + /** + * 是否高亮多个日期单元格 + */ + multiple?: boolean; /** * 是否禁用单元格右键默认系统菜单 * @default false @@ -72,7 +76,7 @@ export interface TdCalendarProps { /** * 当前高亮的日期 */ - value?: CalendarValue; + value?: CalendarValue | CalendarValue[]; /** * 用于自定义日历星期呈现方式。CalendarWeek.day 表示当前是星期几。示例一：['周一', '周二', '周三', '周四', '周五', '星期六', '星期天']。示例二：`({ day }) => '周' + day` */ diff --git a/src/card/card.md b/src/card/card.md index cb41dc4442..a784273e72 100644 --- a/src/card/card.md +++ b/src/card/card.md @@ -18,7 +18,7 @@ footer | TNode | - | 卡片底部内容，可完全自定义。TS 类型：`stri header | TNode | - | 卡片顶部内容，优先级高于其他所有元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N hoverShadow | Boolean | false | hover时是否有阴影 | N -loading | TNode | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +loading | TNode | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/card/type.ts) | N shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N size | String | medium | 尺寸。可选项：medium/small | N diff --git a/src/card/type.ts b/src/card/type.ts index 4b69ea2d72..f4ae54a324 100644 --- a/src/card/type.ts +++ b/src/card/type.ts @@ -56,7 +56,7 @@ export interface TdCardProps { */ hoverShadow?: boolean; /** - * 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容 + * 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容 * @default false */ loading?: TNode; diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md index 8b3fe8b378..3b617fde50 100644 --- a/src/cascader/cascader.en-US.md +++ b/src/cascader/cascader.en-US.md @@ -8,6 +8,7 @@ name | type | default | description | required className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N autofocus | Boolean | - | \- | N +borderless | Boolean | false | \- | N checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N checkStrictly | Boolean | false | \- | N clearable | Boolean | false | \- | N @@ -17,7 +18,7 @@ empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](ht filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise` | N filterable | Boolean | false | \- | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -keys | Object | - | Typescript：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string \| boolean }`。[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/cascader/type.ts) | N +keys | Object | - | Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N lazy | Boolean | true | \- | N load | Function | - | Typescript：`(node: TreeNodeModel) => Promise>` | N @@ -31,23 +32,25 @@ options | Array | [] | Typescript：`Array` | N placeholder | String | undefined | \- | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N popupVisible | Boolean | - | \- | N +defaultPopupVisible | Boolean | - | uncontrolled property | N +prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N readonly | Boolean | false | \- | N reserveKeyword | Boolean | false | \- | N selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N showAllLevels | Boolean | true | \- | N -size | String | medium | options：large/medium/small。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -status | String | default | options：default/success/warning/error | N +size | String | medium | options: large/medium/small。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +status | String | default | options: default/success/warning/error | N suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N tagInputProps | Object | - | Typescript：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N tips | TNode | - | tips at the bottom of cascader。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -trigger | String | click | options：click/hover | N +trigger | String | click | options: click/hover | N value | String / Number / Array | [] | Typescript：`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[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/cascader/type.ts) | N defaultValue | String / Number / Array | [] | uncontrolled property。Typescript：`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[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/cascader/type.ts) | N -valueDisplay | TNode | - | `MouseEvent`。Typescript：`string \| TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -valueMode | String | onlyLeaf | options：onlyLeaf/parentFirst/all | N -valueType | String | single | options：single/full | N +valueDisplay | TNode | - | `MouseEvent`。Typescript：`string \| TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue; selectedOptions: CascaderOption[] }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +valueMode | String | onlyLeaf | options: onlyLeaf/parentFirst/all | N +valueType | String | single | options: single/full | N onBlur | Function | | Typescript：`(context: { value: CascaderValue } & SelectInputBlurContext ) => void`
| N onChange | Function | | Typescript：`(value: CascaderValue, context: CascaderChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts)。
`interface CascaderChangeContext { node?: TreeNodeModel; source: CascaderChangeSource }`

`import { TreeNodeModel } from '@Tree'`

`type CascaderChangeSource = 'invalid-value' \| 'check' \| 'clear' \| 'uncheck'`
| N onFocus | Function | | Typescript：`(context: { value: CascaderValue; e: FocusEvent }) => void`
| N diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md index e9d7cb5b2c..529a96d5b3 100644 --- a/src/cascader/cascader.md +++ b/src/cascader/cascader.md @@ -8,6 +8,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N autofocus | Boolean | - | 自动聚焦 | N +borderless | Boolean | false | 无边框模式 | N checkProps | Object | - | 参考 checkbox 组件 API。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N clearable | Boolean | false | 是否支持清空选项 | N @@ -17,7 +18,7 @@ empty | TNode | - | 无匹配选项时的内容，默认全局配置为 '暂无 filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise` | N filterable | Boolean | false | 是否可搜索 | N inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -keys | Object | - | 用来定义 value / label / children 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string \| boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N +keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N lazy | Boolean | true | 延迟加载 children 为 true 的子节点，即使 expandAll 被设置为 true，也同样延迟加载 | N load | Function | - | 加载子树数据的方法（仅当节点 children 为 true 时生效）。TS 类型：`(node: TreeNodeModel) => Promise>` | N @@ -31,6 +32,8 @@ options | Array | [] | 可选项数据源。TS 类型：`Array` placeholder | String | undefined | 占位符 | N popupProps | Object | - | 参考 popup 组件 API。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N popupVisible | Boolean | - | 是否显示下拉框 | N +defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N +prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N @@ -45,7 +48,7 @@ tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈 trigger | String | click | 展开下一层级的方式。可选项：click/hover | N value | String / Number / Array | [] | 选中项的值。TS 类型：`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N defaultValue | String / Number / Array | [] | 选中项的值。非受控属性。TS 类型：`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -valueDisplay | TNode | - | 【开发中】自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +valueDisplay | TNode | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue; selectedOptions: CascaderOption[] }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N valueMode | String | onlyLeaf | 选中值模式。all 表示父节点和子节点全部会出现在选中值里面；parentFirst 表示当子节点全部选中时，仅父节点在选中值里面；onlyLeaf 表示无论什么情况，选中值仅呈现叶子节点。可选项：onlyLeaf/parentFirst/all | N valueType | String | single | 用于控制选中值的类型。single 表示输入输出值为 叶子结点值， full 表示输入输出值为全路径。可选项：single/full | N onBlur | Function | | TS 类型：`(context: { value: CascaderValue } & SelectInputBlurContext ) => void`
当输入框失去焦点时触发 | N diff --git a/src/cascader/defaultProps.ts b/src/cascader/defaultProps.ts index 03a78cc259..748b6f8a1d 100644 --- a/src/cascader/defaultProps.ts +++ b/src/cascader/defaultProps.ts @@ -5,6 +5,7 @@ import { TdCascaderProps } from './type'; export const cascaderDefaultProps: TdCascaderProps = { + borderless: false, checkStrictly: false, clearable: false, filterable: false, diff --git a/src/cascader/type.ts b/src/cascader/type.ts index 406a14369f..6dd4b66d33 100644 --- a/src/cascader/type.ts +++ b/src/cascader/type.ts @@ -12,7 +12,7 @@ import { TagInputProps } from '../tag-input'; import { TagProps } from '../tag'; import { TreeNodeModel } from '../tree'; import { PopupVisibleChangeContext } from '../popup'; -import { TNode, TElement, TreeOptionData, SizeEnum } from '../common'; +import { TNode, TElement, TreeOptionData, SizeEnum, TreeKeysType } from '../common'; import { FocusEvent } from 'react'; export interface TdCascaderProps { @@ -20,6 +20,11 @@ export interface TdCascaderProps; /** - * 【开发中】自定义选中项呈现的内容 + * 自定义选中项呈现的内容 */ valueDisplay?: | string @@ -194,6 +203,7 @@ export interface TdCascaderProps; onClose: (index: number) => void; displayValue?: CascaderValue; + selectedOptions: CascaderOption[]; }>; /** * 选中值模式。all 表示父节点和子节点全部会出现在选中值里面；parentFirst 表示当子节点全部选中时，仅父节点在选中值里面；onlyLeaf 表示无论什么情况，选中值仅呈现叶子节点 @@ -227,12 +237,6 @@ export interface TdCascaderProps) => void; } -export interface CascaderKeysType { - value?: string; - label?: string; - children?: string | boolean; -} - export type CascaderValue = string | number | T | Array>; export interface CascaderChangeContext { diff --git a/src/checkbox/checkbox.en-US.md b/src/checkbox/checkbox.en-US.md index 116ca2a5a7..29d65e32a8 100644 --- a/src/checkbox/checkbox.en-US.md +++ b/src/checkbox/checkbox.en-US.md @@ -14,6 +14,7 @@ children | TNode | - | Typescript：`string \| TNode`。[see more ts definition] disabled | Boolean | undefined | \- | N indeterminate | Boolean | false | \- | N label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +lazyLoad | Boolean | false | load checkbox content when it entering the visible area | N name | String | - | \- | N readonly | Boolean | false | \- | N value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N @@ -26,10 +27,11 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N +lazyLoad | Boolean | false | load checkbox content when it entering the visible area | N max | Number | undefined | \- | N name | String | - | \- | N -options | Array | - | Typescript：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[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/checkbox/type.ts) | N +options | Array | - | Typescript：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N value | Array | [] | Typescript：`T` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N defaultValue | Array | [] | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N -onChange | Function | | Typescript：`(value: T, context: CheckboxGroupChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`
| N +onChange | Function | | Typescript：`(value: T, context: CheckboxGroupChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; option: current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`
| N diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md index 1b106f3964..3847b45fb3 100644 --- a/src/checkbox/checkbox.md +++ b/src/checkbox/checkbox.md @@ -1,10 +1,5 @@ :: BASE_DOC :: - -### 最多选中的数量 - -{{ max }} - ## API ### Checkbox Props @@ -16,9 +11,10 @@ checkAll | Boolean | false | 用于标识是否为「全选选项」。单独使 checked | Boolean | false | 是否选中 | N defaultChecked | Boolean | false | 是否选中。非受控属性 | N children | TNode | - | 多选框内容，同 label。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled | N +disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N indeterminate | Boolean | false | 是否为半选 | N label | TNode | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +lazyLoad | Boolean | false | 是否启用懒加载。数据量大时建议开启；加载复杂内容或大量图片时建议开启 | N name | String | - | HTML 元素原生属性 | N readonly | Boolean | false | 只读状态 | N value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N @@ -31,10 +27,11 @@ onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
-- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -disabled | Boolean | - | 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled | N +disabled | Boolean | undefined | 是否禁用组件，默认为 false。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N +lazyLoad | Boolean | false | 是否启用懒加载。子组件 Checkbox 数据量大时建议开启；加载复杂内容或大量图片时建议开启 | N max | Number | undefined | 支持最多选中的数量 | N name | String | - | 统一设置内部复选框 HTML 属性 | N -options | Array | - | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N +options | Array | - | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N value | Array | [] | 选中值。TS 类型：`T` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N -onChange | Function | | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`
值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`
| N +onChange | Function | | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`
值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项；`context.current` 即将废弃，请勿使用。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; option: current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`
| N diff --git a/src/checkbox/defaultProps.ts b/src/checkbox/defaultProps.ts index 3d98f0cfb6..be631ad199 100644 --- a/src/checkbox/defaultProps.ts +++ b/src/checkbox/defaultProps.ts @@ -9,7 +9,13 @@ export const checkboxDefaultProps: TdCheckboxProps = { defaultChecked: false, disabled: undefined, indeterminate: false, + lazyLoad: false, readonly: false, }; -export const checkboxGroupDefaultProps: TdCheckboxGroupProps = { max: undefined, defaultValue: [] }; +export const checkboxGroupDefaultProps: TdCheckboxGroupProps = { + disabled: undefined, + lazyLoad: false, + max: undefined, + defaultValue: [], +}; diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts index 649b98762a..9e2b017cc2 100644 --- a/src/checkbox/type.ts +++ b/src/checkbox/type.ts @@ -4,114 +4,4 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TNode } from '../common'; -import { MouseEvent, ChangeEvent } from 'react'; - -export interface TdCheckboxProps { - /** - * 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 - * @default false - */ - checkAll?: boolean; - /** - * 是否选中 - * @default false - */ - checked?: boolean; - /** - * 是否选中，非受控属性 - * @default false - */ - defaultChecked?: boolean; - /** - * 多选框内容，同 label - */ - children?: TNode; - /** - * 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled - */ - disabled?: boolean; - /** - * 是否为半选 - * @default false - */ - indeterminate?: boolean; - /** - * 主文案 - */ - label?: TNode; - /** - * HTML 元素原生属性 - * @default '' - */ - name?: string; - /** - * 只读状态 - * @default false - */ - readonly?: boolean; - /** - * 多选框的值 - */ - value?: string | number | boolean; - /** - * 值变化时触发 - */ - onChange?: (checked: boolean, context: { e: ChangeEvent }) => void; - /** - * 点击时出发，一般用于外层阻止冒泡场景 - */ - onClick?: (context: { e: MouseEvent }) => void; -} - -export interface TdCheckboxGroupProps { - /** - * 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled - */ - disabled?: boolean; - /** - * 支持最多选中的数量 - */ - max?: number; - /** - * 统一设置内部复选框 HTML 属性 - * @default '' - */ - name?: string; - /** - * 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」 - */ - options?: Array; - /** - * 选中值 - * @default [] - */ - value?: T; - /** - * 选中值，非受控属性 - * @default [] - */ - defaultValue?: T; - /** - * 值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项 - */ - onChange?: (value: T, context: CheckboxGroupChangeContext) => void; -} - -export type CheckboxOption = string | number | CheckboxOptionObj; - -export interface CheckboxOptionObj { - label?: string | TNode; - value?: string | number; - disabled?: boolean; - name?: string; - checkAll?: true; -} - -export type CheckboxGroupValue = Array; - -export interface CheckboxGroupChangeContext { - e: ChangeEvent; - current: CheckboxOption | TdCheckboxProps; - type: 'check' | 'uncheck'; -} +[object Object] \ No newline at end of file diff --git a/src/collapse/defaultProps.ts b/src/collapse/defaultProps.ts index 3d42c2645d..151f172e9b 100644 --- a/src/collapse/defaultProps.ts +++ b/src/collapse/defaultProps.ts @@ -11,6 +11,7 @@ export const collapseDefaultProps: TdCollapseProps = { expandIconPlacement: 'left', expandMutex: false, expandOnRowClick: true, + defaultValue: [], }; export const collapsePanelDefaultProps: TdCollapsePanelProps = { diff --git a/src/collapse/type.ts b/src/collapse/type.ts index 7b0b69a328..72942b9510 100644 --- a/src/collapse/type.ts +++ b/src/collapse/type.ts @@ -44,16 +44,18 @@ export interface TdCollapseProps { expandOnRowClick?: boolean; /** * 展开的面板集合 + * @default [] */ value?: CollapseValue; /** * 展开的面板集合，非受控属性 + * @default [] */ defaultValue?: CollapseValue; /** * 切换面板时触发，返回变化的值 */ - onChange?: (value: CollapseValue, context: { e: MouseEvent }) => void; + onChange?: (value: CollapseValue, context: { e: MouseEvent }) => void; } export interface TdCollapsePanelProps { @@ -93,5 +95,3 @@ export interface TdCollapsePanelProps { } export type CollapseValue = Array; - -export type CollapsePanelValue = string | number; diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md index 6d985fbc9c..7720f51070 100644 --- a/src/color-picker/color-picker.en-US.md +++ b/src/color-picker/color-picker.en-US.md @@ -7,10 +7,12 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N +clearable | Boolean | false | \- | N closeBtn | TNode | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N disabled | Boolean | - | \- | N enableAlpha | Boolean | false | \- | N +enableMultipleGradient | Boolean | true | \- | N format | String | RGB | options：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N multiple | Boolean | false | \- | N @@ -19,6 +21,7 @@ recentColors | Array | [] | used color recently。Typescript：`boolean \| Array defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`boolean \| Array` | N selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N showPrimaryColorPreview | Boolean | true | \- | N +size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N swatchColors | Array | - | swatch colors。Typescript：`Array` | N value | String | - | color value | N defaultValue | String | - | color value。uncontrolled property | N diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md index 813c21ce6b..1d07e2db9f 100644 --- a/src/color-picker/color-picker.md +++ b/src/color-picker/color-picker.md @@ -7,10 +7,12 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +clearable | Boolean | false | 是否可清空 | N closeBtn | TNode | true | 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N disabled | Boolean | - | 是否禁用组件 | N enableAlpha | Boolean | false | 是否开启透明通道 | N +enableMultipleGradient | Boolean | true | 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 | N format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N multiple | Boolean | false | 【开发中】是否允许选中多个颜色 | N @@ -19,6 +21,7 @@ recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内 defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean \| Array` | N selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N showPrimaryColorPreview | Boolean | true | 是否展示颜色选择条右侧的颜色预览区域 | N +size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array` | N value | String | - | 色值 | N defaultValue | String | - | 色值。非受控属性 | N diff --git a/src/color-picker/defaultProps.ts b/src/color-picker/defaultProps.ts index 4af991af6e..5592856ef4 100644 --- a/src/color-picker/defaultProps.ts +++ b/src/color-picker/defaultProps.ts @@ -4,12 +4,4 @@ import { TdColorPickerProps } from './type'; -export const colorPickerDefaultProps: TdColorPickerProps = { - closeBtn: true, - colorModes: ['monochrome', 'linear-gradient'], - enableAlpha: false, - format: 'RGB', - multiple: false, - defaultRecentColors: [], - showPrimaryColorPreview: true, -}; +export const colorPickerDefaultProps: TdColorPickerProps = {clearable: false,closeBtn: true,colorModes: '()=> ['monochrome', 'linear-gradient']',enableAlpha: false,enableMultipleGradient: true,format: 'RGB',multiple: false,defaultRecentColors: [],showPrimaryColorPreview: true,size: 'medium',}; \ No newline at end of file diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts index 850699aa77..d048a9f397 100644 --- a/src/color-picker/type.ts +++ b/src/color-picker/type.ts @@ -7,9 +7,14 @@ import { InputProps } from '../input'; import { PopupProps } from '../popup'; import { SelectInputProps } from '../select-input'; -import { TNode } from '../common'; +import { TNode, SizeEnum } from '../common'; export interface TdColorPickerProps { + /** + * 是否可清空 + * @default false + */ + clearable?: boolean; /** * 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 * @default true @@ -29,6 +34,11 @@ export interface TdColorPickerProps { * @default false */ enableAlpha?: boolean; + /** + * 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 + * @default true + */ + enableMultipleGradient?: boolean; /** * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 * @default RGB @@ -51,12 +61,12 @@ export interface TdColorPickerProps { * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” * @default [] */ - recentColors?: boolean | Array | null; + recentColors?: boolean | Array; /** * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 * @default [] */ - defaultRecentColors?: boolean | Array | null; + defaultRecentColors?: boolean | Array; /** * 透传 SelectInputProps 筛选器输入框组件全部属性 */ @@ -66,10 +76,15 @@ export interface TdColorPickerProps { * @default true */ showPrimaryColorPreview?: boolean; + /** + * 组件尺寸 + * @default medium + */ + size?: SizeEnum; /** * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */ - swatchColors?: Array | null; + swatchColors?: Array; /** * 色值 * @default '' diff --git a/src/comment/comment.md b/src/comment/comment.md index f9bbf6f31e..f55fa3571f 100644 --- a/src/comment/comment.md +++ b/src/comment/comment.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Comment Props 名称 | 类型 | 默认值 | 说明 | 必传 diff --git a/src/common.ts b/src/common.ts index e5df47f926..cf41a5950b 100644 --- a/src/common.ts +++ b/src/common.ts @@ -5,7 +5,7 @@ import { ReactElement, ReactNode, CSSProperties, FormEvent, DragEvent, Synthetic // TElement 表示 API 只接受传入组件 export type TElement = T extends undefined ? ReactElement : (props: T) => ReactElement; // 1. TNode = ReactNode; 2. TNode = (props: T) => ReactNode -export type TNode = T extends undefined ? ReactNode : ReactNode | ((props: T) => ReactNode); +export type TNode = T extends undefined ? ReactNode | (() => ReactNode) : ReactNode | ((props: T) => ReactNode); export type AttachNodeReturnValue = HTMLElement | Element | Document; export type AttachNode = CSSSelector | ((triggerNode?: HTMLElement) => AttachNodeReturnValue); @@ -64,10 +64,7 @@ export type HorizontalAlignEnum = 'left' | 'center' | 'right'; export type VerticalAlignEnum = 'top' | 'middle' | 'bottom'; -export enum LayoutEnum { - VERTICAL = 'vertical', - HORIZONTAL = 'horizontal', -} +export type LayoutEnum = 'vertical' | 'horizontal'; export type ClassName = { [className: string]: any } | ClassName[] | string; diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md index 4504d00c2d..e2aaf3d94d 100644 --- a/src/config-provider/config-provider.en-US.md +++ b/src/config-provider/config-provider.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### GlobalConfigProvider name | type | default | description | required @@ -272,7 +273,6 @@ closeIcon | Function | - | Typescript：`TNode`。[see more ts definition](https name | type | default | description | required -- | -- | -- | -- | -- -checkIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N errorIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N ### AlertConfig diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md index bd97571d74..f32992c4c0 100644 --- a/src/config-provider/config-provider.md +++ b/src/config-provider/config-provider.md @@ -1,36 +1,7 @@ :: BASE_DOC :: -### 全局组件前缀 - -TDesign 的组件前缀统一为`t`，在一些业务场景中，有需要改变组件前缀来满足业务的使用场景。 -可以使用`esm`版本（保证您可以修改less vars)，通过全局配置修改`classPrefix`，并配合 less-loader 修改`@prefix`这个 less vars 来保证组件样式的正常。 - -```js -import { ConfigProvider, Button } from 'tdesign-react/esm' -import 'tdesign-react/esm/style/index.js' - -... - - - -``` - -```js -{ - loaderOptions: { - less: { - lessOptions: { - modifyVars: { - '@prefix': 'any', // 请注意需要与classPrefix保持一致 - }, - javascriptEnabled: true, - }, - }, - } -} -``` - ## API + ### GlobalConfigProvider 名称 | 类型 | 默认值 | 说明 | 必传 @@ -302,7 +273,6 @@ closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -checkIcon | TElement | - | 已完成步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N errorIcon | TElement | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N ### AlertConfig diff --git a/src/date-range-picker/date-range-picker.en-US.md b/src/date-range-picker/date-range-picker.en-US.md new file mode 100644 index 0000000000..82ab34dd33 --- /dev/null +++ b/src/date-range-picker/date-range-picker.en-US.md @@ -0,0 +1,42 @@ +:: BASE_DOC :: + +## API +### DateRangePicker Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，Typescript：`React.CSSProperties` | N +allowInput | Boolean | false | \- | N +cancelRangeSelectLimit | Boolean | false | The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted. | N +clearable | Boolean | false | \- | N +defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N +disableDate | Object / Array / Function | - | Typescript：`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +disabled | Boolean | - | \- | N +enableTimePicker | Boolean | false | \- | N +firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N +format | String | - | \- | N +mode | String | date | options: year/quarter/month/week/date | N +panelPreselection | Boolean | true | \- | N +placeholder | String / Array | - | Typescript：`string \| Array` | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +presets | Object | - | Typescript：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +presetsPlacement | String | bottom | options: left/top/right/bottom | N +rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +separator | String | - | \- | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +status | String | default | options: default/success/warning/error | N +suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +value | Array | [] | Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +defaultValue | Array | [] | uncontrolled property。Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +valueType | String | - | options: time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N +onBlur | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N +onChange | Function | | Typescript：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
| N +onConfirm | Function | | Typescript：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`
| N +onFocus | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N +onInput | Function | | Typescript：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`
| N +onPick | Function | | Typescript：`(value: DateValue, context: PickContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N +onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`
| N diff --git a/src/date-range-picker/date-range-picker.md b/src/date-range-picker/date-range-picker.md new file mode 100644 index 0000000000..38b61034c3 --- /dev/null +++ b/src/date-range-picker/date-range-picker.md @@ -0,0 +1,42 @@ +:: BASE_DOC :: + +## API +### DateRangePicker Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +allowInput | Boolean | false | 是否允许输入日期 | N +cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N +clearable | Boolean | false | 是否显示清除按钮 | N +defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N +disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +disabled | Boolean | - | 是否禁用组件 | N +enableTimePicker | Boolean | false | 是否显示时间选择 | N +firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N +format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N +mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N +panelPreselection | Boolean | true | 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 | N +placeholder | String / Array | - | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array` | N +popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +presets | Object | - | 预设快捷日期选择，示例：{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +presetsPlacement | String | bottom | 预设面板展示区域（包含确定按钮）。可选项：left/top/right/bottom | N +rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +separator | String | - | 日期分隔符，支持全局配置，默认为 '-' | N +size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +status | String | default | 输入框状态。可选项：default/success/warning/error | N +suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +value | Array | [] | 选中值。TS 类型：`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N +onBlur | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
当输入框失去焦点时触发 | N +onChange | Function | | TS 类型：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
| N +onConfirm | Function | | TS 类型：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`
如果存在“确定”按钮，则点击“确定”按钮时触发 | N +onFocus | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
输入框获得焦点时触发 | N +onInput | Function | | TS 类型：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`
输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值 | N +onPick | Function | | TS 类型：`(value: DateValue, context: PickContext) => void`
选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N +onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`
点击预设按钮后触发 | N diff --git a/src/descriptions/defaultProps.ts b/src/descriptions/defaultProps.ts index 9a293eb1e4..585ce325a3 100644 --- a/src/descriptions/defaultProps.ts +++ b/src/descriptions/defaultProps.ts @@ -6,7 +6,7 @@ import { TdDescriptionsProps, TdDescriptionItemProps } from './type'; export const descriptionsDefaultProps: TdDescriptionsProps = { bordered: false, - column: 2, + columns: 2, itemLayout: 'horizontal', layout: 'horizontal', size: 'medium', diff --git a/src/descriptions/descriptions.en-US.md b/src/descriptions/descriptions.en-US.md index a52229952e..9351fd50bf 100644 --- a/src/descriptions/descriptions.en-US.md +++ b/src/descriptions/descriptions.en-US.md @@ -9,10 +9,10 @@ className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N bordered | Boolean | false | set description list with grey border | N colon | Boolean | - | set label with ":" on the right | N -column | Number | 2 | count of DescriptionItem in one row | N +columns | Number | 2 | count of DescriptionItem in one row | N contentStyle | Object | - | style of description cotent。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N itemLayout | String | horizontal | layout direction of description item。options: horizontal/vertical | N -items | Array | - | list of descriptions items。Typescript：`Array` | N +items | Array | - | list of descriptions items。Typescript：`Array` | N labelStyle | Object | - | style of description item。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N layout | String | horizontal | layout direction。options: horizontal/vertical | N size | String | medium | a descriptions has three size。options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N diff --git a/src/descriptions/descriptions.md b/src/descriptions/descriptions.md index 923b538be4..09600879db 100644 --- a/src/descriptions/descriptions.md +++ b/src/descriptions/descriptions.md @@ -9,10 +9,10 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N bordered | Boolean | false | 是否带边框 | N colon | Boolean | - | 字段名右侧是否携带冒号“：” | N -column | Number | 2 | 一行 `DescriptionItem` 的数量 | N +columns | Number | 2 | 一行 `DescriptionItem` 的数量 | N contentStyle | Object | - | 自定义描述项内容的样式。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N itemLayout | String | horizontal | 描述项的排列方向。可选项：horizontal/vertical | N -items | Array | - | 描述项的列表。TS 类型：`Array` | N +items | Array | - | 描述项的列表。TS 类型：`Array` | N labelStyle | Object | - | 自定义描述项标签的样式。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N layout | String | horizontal | 排列方向。可选项：horizontal/vertical | N size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N diff --git a/src/descriptions/type.ts b/src/descriptions/type.ts index df2888b121..7e5c2e2391 100644 --- a/src/descriptions/type.ts +++ b/src/descriptions/type.ts @@ -20,7 +20,7 @@ export interface TdDescriptionsProps { * 一行 `DescriptionItem` 的数量 * @default 2 */ - column?: number; + columns?: number; /** * 自定义描述项内容的样式 */ @@ -33,7 +33,7 @@ export interface TdDescriptionsProps { /** * 描述项的列表 */ - items?: Array; + items?: Array; /** * 自定义描述项标签的样式 */ diff --git a/src/dialog/defaultProps.ts b/src/dialog/defaultProps.ts index b93b47f711..f849cf277e 100644 --- a/src/dialog/defaultProps.ts +++ b/src/dialog/defaultProps.ts @@ -2,23 +2,21 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TdDialogCardProps, TdDialogProps } from './type'; - -export const dialogCardDefaultProps: TdDialogCardProps = { - closeBtn: true, - footer: true, - header: true, - theme: 'default', -}; +import { TdDialogProps } from './type'; export const dialogDefaultProps: TdDialogProps = { + closeBtn: true, closeOnEscKeydown: undefined, closeOnOverlayClick: undefined, + confirmLoading: undefined, destroyOnClose: false, draggable: false, + footer: true, + header: true, mode: 'modal', placement: 'top', preventScrollThrough: true, showInAttachedElement: false, showOverlay: true, + theme: 'default', }; diff --git a/src/dialog/dialog.en-US.md b/src/dialog/dialog.en-US.md index 50292732d7..b4c0a81e79 100644 --- a/src/dialog/dialog.en-US.md +++ b/src/dialog/dialog.en-US.md @@ -7,16 +7,7 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -body | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cancelBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[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/dialog/type.ts) | N -closeBtn | TNode | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -confirmBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -footer | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -header | TNode | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -theme | String | default | options：default/info/warning/danger/success | N -onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N -onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N -onConfirm | Function | | Typescript：`(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N +`Pick` | TNode | - | extends `Pick`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N ### Dialog Props @@ -25,24 +16,35 @@ name | type | default | description | required className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N attach | String / Function | - | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +body | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cancelBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[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/dialog/type.ts) | N children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -closeOnEscKeydown | Boolean | true | \- | N +closeBtn | TNode | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +closeOnEscKeydown | Boolean | true | trigger dialog close event on `ESC` keydown | N closeOnOverlayClick | Boolean | true | \- | N +confirmBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +confirmLoading | Boolean | undefined | confirm button loading status | N confirmOnEnter | Boolean | - | confirm on enter | N destroyOnClose | Boolean | false | \- | N +dialogClassName | String | - | \- | N draggable | Boolean | false | \- | N -mode | String | modal | options：modal/modeless/full-screen | N -placement | String | top | options：top/center | N +footer | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +header | TNode | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +mode | String | modal | options: modal/modeless/full-screen | N +placement | String | top | options: top/center | N preventScrollThrough | Boolean | true | \- | N showInAttachedElement | Boolean | false | \- | N showOverlay | Boolean | true | \- | N +theme | String | default | options: default/info/warning/danger/success | N top | String / Number | - | \- | N visible | Boolean | - | \- | N width | String / Number | - | \- | N zIndex | Number | - | \- | N -`DialogCardProps` | \- | - | \- | N +onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClose | Function | | Typescript：`(context: DialogCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N +onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClosed | Function | | Typescript：`() => void`
| N +onConfirm | Function | | Typescript：`(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N onEscKeydown | Function | | Typescript：`(context: { e: KeyboardEvent }) => void`
| N onOpened | Function | | Typescript：`() => void`
| N onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N @@ -54,7 +56,7 @@ name | type | default | description | required attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N className | String | - | \- | N style | Object | - | Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -`Omit` | \- | - | \- | N +`Omit` | \- | - | extends `Omit` | N ### DialogInstance @@ -62,6 +64,7 @@ name | params | return | description -- | -- | -- | -- destroy | \- | \- | required hide | \- | \- | required +setConfirmLoading | `(loading: boolean)` | \- | required。set confirm button loading status show | \- | \- | required update | `(props: DialogOptions)` | \- | required diff --git a/src/dialog/dialog.md b/src/dialog/dialog.md index 6b79e473f0..da9ff49516 100644 --- a/src/dialog/dialog.md +++ b/src/dialog/dialog.md @@ -1,26 +1,5 @@ :: BASE_DOC :: -### 函数式调用 - -函数调用方式一：`DialogPlugin(options)` - -函数调用方式二：`DialogPlugin.confirm(options)` - -函数调用方式三：`DialogPlugin.alert(options)` - -
- -组件实例：`DialogInstance = DialogPlugin(options)` - -组件实例方法-销毁弹框：`DialogInstance.destroy()` - -组件实例方法-隐藏弹框：`DialogInstance.hide()` - -组件实例方法-显示弹窗：`DialogInstance.show()` - -组件实例方法-更新弹框：`DialogInstance.update()` - -{{ plugin }} ## API ### DialogCard Props @@ -28,16 +7,7 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -body | TNode | - | 对话框内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cancelBtn | TNode | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/dialog/type.ts) | N -closeBtn | TNode | true | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -confirmBtn | TNode | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string \| ButtonProps \| TNode \| null`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -footer | TNode | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -header | TNode | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -theme | String | default | 对话框风格。可选项：default/info/warning/danger/success | N -onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N -onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击右上角关闭按钮时触发 | N -onConfirm | Function | | TS 类型：`(context: { e: MouseEvent \| KeyboardEvent }) => void`
如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发 | N +`Pick` | TNode | - | 继承 `Pick` 中的全部属性。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N ### Dialog Props @@ -46,24 +16,35 @@ onConfirm | Function | | TS 类型：`(context: { e: MouseEvent \| KeyboardEven className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N attach | String / Function | - | 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +body | TNode | - | 对话框内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cancelBtn | TNode | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/dialog/type.ts) | N children | TNode | - | 对话框内容，同 body。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +closeBtn | TNode | true | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发对话框关闭事件 | N closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发关闭事件 | N +confirmBtn | TNode | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string \| ButtonProps \| TNode \| null`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +confirmLoading | Boolean | undefined | 确认按钮加载状态 | N confirmOnEnter | Boolean | - | 是否在按下回车键时，触发确认事件 | N destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N +dialogClassName | String | - | 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' | N draggable | Boolean | false | 对话框是否可以拖拽（仅在非模态对话框时有效） | N +footer | TNode | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +header | TNode | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N mode | String | modal | 对话框类型，有 3 种：模态对话框、非模态对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件。可选项：modal/modeless/full-screen | N placement | String | top | 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小。可选项：top/center | N preventScrollThrough | Boolean | true | 防止滚动穿透 | N showInAttachedElement | Boolean | false | 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative | N showOverlay | Boolean | true | 是否显示遮罩层 | N +theme | String | default | 对话框风格。可选项：default/info/warning/danger/success | N top | String / Number | - | 用于弹框具体窗口顶部的距离，优先级大于 placement | N visible | Boolean | - | 控制对话框是否显示 | N width | String / Number | - | 对话框宽度，示例：320, '500px', '80%' | N zIndex | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N -`DialogCardProps` | \- | - | 继承 `DialogCardProps` 中的全部 API | N +onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N onClose | Function | | TS 类型：`(context: DialogCloseContext) => void`
关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N +onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击右上角关闭按钮时触发 | N onClosed | Function | | TS 类型：`() => void`
对话框消失动画效果结束后触发 | N +onConfirm | Function | | TS 类型：`(context: { e: MouseEvent \| KeyboardEvent }) => void`
如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发 | N onEscKeydown | Function | | TS 类型：`(context: { e: KeyboardEvent }) => void`
按下 ESC 时触发事件 | N onOpened | Function | | TS 类型：`() => void`
对话框弹出动画效果结束后触发 | N onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果蒙层存在，点击蒙层时触发 | N @@ -75,7 +56,7 @@ onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void attach | String / Function | 'body' | 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N className | String | - | 弹框类名，示例：'t-class-dialog-first t-class-dialog-second' | N style | Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -`Omit` | \- | - | 继承 `Omit` 中的全部 API | N +`Omit` | \- | - | 继承 `Omit` 中的全部属性 | N ### DialogInstance @@ -83,6 +64,7 @@ style | Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText]( -- | -- | -- | -- destroy | \- | \- | 必需。销毁弹框 hide | \- | \- | 必需。隐藏弹框 +setConfirmLoading | `(loading: boolean)` | \- | 必需。设置确认按钮加载状态 show | \- | \- | 必需。显示弹框 update | `(props: DialogOptions)` | \- | 必需。更新弹框内容 diff --git a/src/dialog/type.ts b/src/dialog/type.ts index 7081092e04..7adb712006 100644 --- a/src/dialog/type.ts +++ b/src/dialog/type.ts @@ -8,20 +8,28 @@ import { ButtonProps } from '../button'; import { TNode, Styles, AttachNode } from '../common'; import { MouseEvent, KeyboardEvent } from 'react'; -export interface TdDialogProps extends TdDialogCardProps { - /** - * 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' - * @default '' - */ - dialogClassName?: string; +export interface TdDialogProps { /** * 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */ attach?: AttachNode; + /** + * 对话框内容 + */ + body?: TNode; + /** + * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 + */ + cancelBtn?: ButtonProps | TNode | null; /** * 对话框内容，同 body */ children?: TNode; + /** + * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 + * @default true + */ + closeBtn?: TNode; /** * 按下 ESC 时是否触发对话框关闭事件 */ @@ -30,6 +38,14 @@ export interface TdDialogProps extends TdDialogCardProps { * 点击蒙层时是否触发关闭事件 */ closeOnOverlayClick?: boolean; + /** + * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 + */ + confirmBtn?: ButtonProps | TNode | null; + /** + * 确认按钮加载状态 + */ + confirmLoading?: boolean; /** * 是否在按下回车键时，触发确认事件 */ @@ -39,11 +55,26 @@ export interface TdDialogProps extends TdDialogCardProps { * @default false */ destroyOnClose?: boolean; + /** + * 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' + * @default '' + */ + dialogClassName?: string; /** * 对话框是否可以拖拽（仅在非模态对话框时有效） * @default false */ draggable?: boolean; + /** + * 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容 + * @default true + */ + footer?: TNode; + /** + * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容 + * @default true + */ + header?: TNode; /** * 对话框类型，有 3 种：模态对话框、非模态对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 * @default modal @@ -69,6 +100,11 @@ export interface TdDialogProps extends TdDialogCardProps { * @default true */ showOverlay?: boolean; + /** + * 对话框风格 + * @default default + */ + theme?: 'default' | 'info' | 'warning' | 'danger' | 'success'; /** * 用于弹框具体窗口顶部的距离，优先级大于 placement */ @@ -85,14 +121,26 @@ export interface TdDialogProps extends TdDialogCardProps { * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 */ zIndex?: number; + /** + * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 + */ + onCancel?: (context: { e: MouseEvent }) => void; /** * 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发 */ onClose?: (context: DialogCloseContext) => void; + /** + * 点击右上角关闭按钮时触发 + */ + onCloseBtnClick?: (context: { e: MouseEvent }) => void; /** * 对话框消失动画效果结束后触发 */ onClosed?: () => void; + /** + * 如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发 + */ + onConfirm?: (context: { e: MouseEvent | KeyboardEvent }) => void; /** * 按下 ESC 时触发事件 */ @@ -107,52 +155,20 @@ export interface TdDialogProps extends TdDialogCardProps { onOverlayClick?: (context: { e: MouseEvent }) => void; } -export interface TdDialogCardProps { - /** - * 对话框内容 - */ - body?: TNode; - /** - * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 - */ - cancelBtn?: ButtonProps | TNode | null; - /** - * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 - * @default true - */ - closeBtn?: TNode; - /** - * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 - */ - confirmBtn?: ButtonProps | TNode | null; - /** - * 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容 - * @default true - */ - footer?: TNode; - /** - * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容 - * @default true - */ - header?: TNode; - /** - * 对话框风格 - * @default default - */ - theme?: 'default' | 'info' | 'warning' | 'danger' | 'success'; - /** - * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 - */ - onCancel?: (context: { e: MouseEvent }) => void; - /** - * 点击右上角关闭按钮时触发 - */ - onCloseBtnClick?: (context: { e: MouseEvent }) => void; - /** - * 如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发 - */ - onConfirm?: (context: { e: MouseEvent | KeyboardEvent }) => void; -} +export interface TdDialogCardProps + extends Pick< + TdDialogProps, + | 'body' + | 'cancelBtn' + | 'closeBtn' + | 'confirmBtn' + | 'footer' + | 'header' + | 'theme' + | 'onCancel' + | 'onCloseBtnClick' + | 'onConfirm' + > {} export interface DialogOptions extends Omit { /** @@ -161,12 +177,12 @@ export interface DialogOptions extends Omit { */ attach?: AttachNode; /** - * ctx 弹框顶层元素类名，示例：'t-class-dialog-ctx-first t-class-dialog-ctx-second' + * 弹框类名，示例：'t-class-dialog-first t-class-dialog-second' * @default '' */ className?: string; /** - * 弹框顶层元素 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText) + * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText) */ style?: Styles; } @@ -180,6 +196,10 @@ export interface DialogInstance { * 隐藏弹框 */ hide: () => void; + /** + * 设置确认按钮加载状态 + */ + setConfirmLoading: (loading: boolean) => void; /** * 显示弹框 */ diff --git a/src/drawer/defaultProps.ts b/src/drawer/defaultProps.ts index 17cdbe8a41..cc28c017a9 100644 --- a/src/drawer/defaultProps.ts +++ b/src/drawer/defaultProps.ts @@ -8,7 +8,6 @@ export const drawerDefaultProps: TdDrawerProps = { closeOnEscKeydown: undefined, closeOnOverlayClick: undefined, destroyOnClose: false, - closeBtn: true, footer: true, header: true, mode: 'overlay', diff --git a/src/dropdown/defaultProps.ts b/src/dropdown/defaultProps.ts index 5faa771c3d..a9c9197ea3 100644 --- a/src/dropdown/defaultProps.ts +++ b/src/dropdown/defaultProps.ts @@ -6,10 +6,12 @@ import { TdDropdownProps, TdDropdownItemProps } from './type'; export const dropdownDefaultProps: TdDropdownProps = { direction: 'right', + disabled: false, hideAfterItemClick: true, maxColumnWidth: 100, maxHeight: 300, minColumnWidth: 10, + options: [], placement: 'bottom-left', trigger: 'hover', }; diff --git a/src/dropdown/dropdown.md b/src/dropdown/dropdown.md index 6d44f63f7e..d6fb0e88b1 100644 --- a/src/dropdown/dropdown.md +++ b/src/dropdown/dropdown.md @@ -1,11 +1,5 @@ :: BASE_DOC :: -### 通过传入Children方式使用下拉菜单 - -下拉菜单操作项支持通过传入Children的方式传递操作项。 - -{{ child }} - ## API ### Dropdown Props diff --git a/src/dropdown/type.ts b/src/dropdown/type.ts index 370dbb2db5..bf10b66f71 100644 --- a/src/dropdown/type.ts +++ b/src/dropdown/type.ts @@ -44,14 +44,6 @@ export interface TdDropdownProps { * @default [] */ options?: Array; - /** - * 面板内的底部内容 - */ - panelBottomContent?: TNode; - /** - * 面板内的顶部内容 - */ - panelTopContent?: TNode; /** * 弹窗定位方式，可选值同 Popup 组件 * @default bottom-left diff --git a/src/empty/defaultProps.ts b/src/empty/defaultProps.ts new file mode 100644 index 0000000000..ce79e1e01a --- /dev/null +++ b/src/empty/defaultProps.ts @@ -0,0 +1,7 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdEmptyProps } from './type'; + +export const emptyDefaultProps: TdEmptyProps = { type: 'empty' }; diff --git a/src/empty/empty.en-US.md b/src/empty/empty.en-US.md new file mode 100644 index 0000000000..9f5e9849ac --- /dev/null +++ b/src/empty/empty.en-US.md @@ -0,0 +1,15 @@ +:: BASE_DOC :: + +## API +### Empty Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，Typescript：`React.CSSProperties` | N +action | TElement | - | action block。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +description | TNode | - | empty component description。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +image | TNode | - | image url, or Image component props, or custom any node you need.。Typescript：`string \| ImageProps \| TNode `，[Image API Documents](./image?tab=api)。[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/empty/type.ts) | N +imageStyle | Object | - | pass `Cascading Style Sheets` to image element。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | - | empty component title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +type | String | empty | Empty component type。options: empty/success/fail/network-error/maintenance | N diff --git a/src/empty/empty.md b/src/empty/empty.md new file mode 100644 index 0000000000..23c337ca86 --- /dev/null +++ b/src/empty/empty.md @@ -0,0 +1,15 @@ +:: BASE_DOC :: + +## API +### Empty Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +action | TElement | - | 操作区域。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +description | TNode | - | 描述文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +image | TNode | - | 组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：``。TS 类型：`string \| ImageProps \| TNode `，[Image API Documents](./image?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/empty/type.ts) | N +imageStyle | Object | - | 透传图片样式表。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | - | 错误标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +type | String | empty | 组件类型，如：空数据/成功/失败/网络错误/建设中。可选项：empty/success/fail/network-error/maintenance | N diff --git a/src/empty/type.ts b/src/empty/type.ts new file mode 100644 index 0000000000..c2bf77c7dc --- /dev/null +++ b/src/empty/type.ts @@ -0,0 +1,36 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { ImageProps } from '../image'; +import { TNode, TElement, Styles } from '../common'; + +export interface TdEmptyProps { + /** + * 操作区域 + */ + action?: TElement; + /** + * 描述文字 + */ + description?: TNode; + /** + * 组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：`` + */ + image?: ImageProps | TNode; + /** + * 透传图片样式表 + */ + imageStyle?: Styles; + /** + * 错误标题 + */ + title?: TNode; + /** + * 组件类型，如：空数据/成功/失败/网络错误/建设中 + * @default empty + */ + type?: 'empty' | 'success' | 'fail' | 'network-error' | 'maintenance'; +} diff --git a/src/form/form.en-US.md b/src/form/form.en-US.md index df0aacadb4..cc3590fc68 100644 --- a/src/form/form.en-US.md +++ b/src/form/form.en-US.md @@ -67,7 +67,6 @@ status | String | - | Typescript：`'error' \| 'warning' \| 'success' \| 'valida statusIcon | TNode | undefined | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N successBorder | Boolean | false | \- | N tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -valueFormat | Function | - | Triggered when user interaction results in data changes, used to format data。Typescript：`FormItemFormatType` `type FormItemFormatType = (value: any) => any`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N ### FormList Props @@ -97,7 +96,7 @@ number | Boolean | - | \- | N pattern | Object | - | Typescript：`RegExp` | N required | Boolean | - | \- | N telnumber | Boolean | - | \- | N -trigger | String | change | options: change/blur/submit | N +trigger | String | change | options: change/blur | N type | String | error | options: error/warning | N url | Boolean / Object | - | Typescript：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N validator | Function | - | Typescript：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N diff --git a/src/form/form.md b/src/form/form.md index c29eefa879..4eec629b41 100644 --- a/src/form/form.md +++ b/src/form/form.md @@ -1,95 +1,5 @@ :: BASE_DOC :: -### 复杂嵌套数据结构表单 - -可给 `name` 传入数组整理成对象嵌套数据结构 - -{{ nested-data }} - -### 动态增减嵌套表单 - -可使用 `Form.FormList` 组件创建动态表单 - -{{ form-list }} - -## Hooks - -### Form.useForm - -创建 Form 实例，用于管理所有数据状态。 - - -### Form.useWatch - -用于直接获取 form 中字段对应的值。 - -```js -const Demo = () => { - const [form] = Form.useForm(); - const userName = Form.useWatch('username', form); - - return ( -
- - - -
- ); -}; -``` - -## FAQ - -### 为什么被 FormItem 包裹的组件 value、defaultValue 没有效果？ - -Form 组件设计的初衷是为了解放开发者配置大量的 `value`、`onChange` 受控属性，所以 Form.FormItem 被设计成需要拦截嵌套组件的受控属性，如需定义初始值请使用 `initialData` 属性。 - -由于 Form.FormItem 只会拦截第一层子节点的受控属性，所以如不希望 Form.FormItem 拦截受控属性希望自行管理 state 的话，可以在 Form.FormItem 下包裹一层 `div` 节点脱离 Form.FormItem 的代理，但同时也会失去 Form 组件的校验能力。 - -### 我只想要 Form 组件的布局效果，校验能力我自己业务来实现可以吗？ - -可以的，Form 的校验能力只跟 `name` 属性关联，不指定 Form.FormItem 的 `name` 属性是可以当成布局组件来使用的，甚至可以实现各种嵌套自定义内容的布局效果。 - -```js -// 可以单独使用 FormItem 组件 - -
可以任意定制内容
- -
可以任意定制内容
- -``` - -### getFieldsValue 返回的数据如何支持嵌套数据结构？ - -将 `name` 设置成数组形式可以支持嵌套数据结构。 - -```js -// ['user', 'name'] => { user: { name: '' } } - - - -``` - -### 如何根据某个字段变化动态展示数据 - -而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 `FormItem` 的更新逻辑。 - -```js - prev.additional !== next.additional}> - {({ getFieldValue }) => { - if (getFieldValue('additional') === 'test') { - return ( - - - - ); - } - return null; - }} - - -``` - ## API ### Form Props @@ -157,7 +67,6 @@ status | String | - | 校验状态，可在需要完全自主控制校验状态 statusIcon | TNode | undefined | 校验状态图标，值为 `true` 显示默认图标，默认图标有 成功、失败、警告 等，不同的状态图标不同。`statusIcon` 值为 `false`，不显示图标。`statusIcon` 值类型为渲染函数，则可以自定义右侧状态图标。优先级高级 Form 的 statusIcon。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N successBorder | Boolean | false | 是否显示校验成功的边框，默认不显示 | N tips | TNode | - | 自定义提示内容，样式跟随 `status` 变动，可在需要完全自主控制校验规则时使用。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -valueFormat | Function | - | 当用户交互产生数据变化时触发，用于格式化数据。TS 类型：`FormItemFormatType` `type FormItemFormatType = (value: any) => any`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N ### FormList Props @@ -187,7 +96,7 @@ number | Boolean | - | 内置校验方法，校验值是否为数字（1.2 、 1 pattern | Object | - | 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`。TS 类型：`RegExp` | N required | Boolean | - | 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记 | N telnumber | Boolean | - | 内置校验方法，校验值是否为手机号码，校验正则为 `/^1[3-9]\d{9}$/`，示例：`{ telnumber: true, message: '请输入正确的手机号码' }` | N -trigger | String | change | 校验触发方式。可选项：change/blur/submit | N +trigger | String | change | 校验触发方式。可选项：change/blur | N type | String | error | 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种。可选项：error/warning | N url | Boolean / Object | - | 内置校验方法，校验值是否为网络链接地址，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`。TS 类型：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N validator | Function | - | 自定义校验规则，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`。TS 类型：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N diff --git a/src/form/type.ts b/src/form/type.ts index 178119685b..09985c87de 100644 --- a/src/form/type.ts +++ b/src/form/type.ts @@ -108,11 +108,7 @@ export interface FormInstanceFunctions { /** * 获取 form dom 元素 */ - currentElement?: HTMLFormElement; - /** - * 获取 form dom 元素 - */ - getCurrentElement?: () => HTMLFormElement; + currentElement: () => HTMLFormElement; /** * 获取单个字段值 */ @@ -120,7 +116,7 @@ export interface FormInstanceFunctions { /** * 获取一组字段名对应的值，当调用 getFieldsValue(true) 时返回所有表单数据 */ - getFieldsValue: getFieldsValue; + getFieldsValue: () => getFieldsValue; /** * 重置表单，表单里面没有重置按钮`