From 0ddebd738805564df5d5f0b587d647f451fed8c6 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Wed, 16 Aug 2023 15:41:32 +0800 Subject: [PATCH 1/4] feat: add select keys disabled --- src/_common | 2 +- src/select/hooks/useOptions.ts | 6 ++++-- src/select/select.en-US.md | 18 +++++++++--------- src/select/select.md | 12 ++++++------ src/select/type.ts | 15 +++++---------- 5 files changed, 25 insertions(+), 28 deletions(-) diff --git a/src/_common b/src/_common index b5b8167eae..354d9a1481 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit b5b8167eae16df30cb8cf61539ff52a151189a9e +Subproject commit 354d9a14813ac8b5a2a4a7024325195c2397f790 diff --git a/src/select/hooks/useOptions.ts b/src/select/hooks/useOptions.ts index ce221d2d29..4abfaa10a0 100644 --- a/src/select/hooks/useOptions.ts +++ b/src/select/hooks/useOptions.ts @@ -1,12 +1,13 @@ import React, { useState, useEffect, ReactNode, ReactElement } from 'react'; import get from 'lodash/get'; -import { SelectKeysType, SelectOption, SelectValue } from '../type'; +import { SelectOption, SelectValue } from '../type'; +import { KeysType } from '../../common'; import { getValueToOption } from '../util/helper'; import Option from '../base/Option'; // 处理 options 的逻辑 export default function UseOptions( - keys: SelectKeysType, + keys: KeysType, options: SelectOption[], children: ReactNode, valueType: 'object' | 'value', @@ -43,6 +44,7 @@ export default function UseOptions( ...option, value: get(option, keys?.value || 'value'), label: get(option, keys?.label || 'label'), + disabled: get(option, keys?.disabled || 'disabled'), })); } setCurrentOptions(transformedOptions); diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md index 09952ca1d6..9706a20bce 100644 --- a/src/select/select.en-US.md +++ b/src/select/select.en-US.md @@ -20,7 +20,7 @@ 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/select/type.ts) | N inputValue | String / Number | - | input value。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N -keys | Object | - | Typescript:`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[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/select/type.ts) | N +keys | Object | - | alias option field。Typescript:`KeysType`。[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 loading | Boolean | false | \- | N loadingText | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -40,19 +40,19 @@ reserveKeyword | Boolean | false | \- | N scroll | Object | - | lazy load and virtual scroll。Typescript:`InfinityScroll`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | 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/select/type.ts) | N showArrow | 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 -status | String | default | options:default/success/warning/error | 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 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/select/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/select/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 | String / Number / Object / Array | - | Typescript:`SelectValue` `type SelectValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N -defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript:`SelectValue` `type SelectValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N +value | String / Number / Boolean / Object / Array | - | Typescript:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N +defaultValue | String / Number / Boolean / Object / Array | - | uncontrolled property。Typescript:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N valueDisplay | TNode | - | `MouseEvent`。Typescript:`string \| TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -valueType | String | value | options:value/object | N +valueType | String | value | options: value/object | N onBlur | Function | | Typescript:`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`
| N -onChange | Function | | Typescript:`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N +onChange | Function | | Typescript:`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`
| N onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N onCreate | Function | | Typescript:`(value: string \| number) => void`
| N onEnter | Function | | Typescript:`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`
| N @@ -85,7 +85,7 @@ style | Object | - | 样式,Typescript:`React.CSSProperties` | N divider | Boolean | true | \- | N label | String | - | \- | N -### InfinityScroll +### TScroll name | type | default | description | required -- | -- | -- | -- | -- @@ -93,4 +93,4 @@ bufferSize | Number | 20 | \- | N isFixedRowHeight | Boolean | false | \- | N rowHeight | Number | - | \- | N threshold | Number | 100 | \- | N -type | String | - | required。options:lazy/virtual | Y \ No newline at end of file +type | String | - | required。options: lazy/virtual | Y diff --git a/src/select/select.md b/src/select/select.md index d3214a8f21..f65e5681c5 100644 --- a/src/select/select.md +++ b/src/select/select.md @@ -20,7 +20,7 @@ filterable | Boolean | false | 是否可搜索,默认搜索规则不区分大 inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N inputValue | String / Number | - | 输入框的值。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N -keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N +keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](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 loading | Boolean | false | 是否为加载状态 | N loadingText | TNode | - | 远程加载时显示的文字,支持自定义。如加上超链接。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -47,12 +47,12 @@ suffixIcon | TElement | - | 组件后置图标。TS 类型:`TNode`。[通用 tagInputProps | Object | - | 透传 TagInput 标签输入框组件的全部属性。TS 类型:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型:`TagProps`,[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N tips | TNode | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | String / Number / Object / Array | - | 选中值。TS 类型:`SelectValue` `type SelectValue = string \| number \| T \| Array>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N -defaultValue | String / Number / Object / Array | - | 选中值。非受控属性。TS 类型:`SelectValue` `type SelectValue = string \| number \| T \| Array>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N +value | String / Number / Boolean / Object / Array | - | 选中值。TS 类型:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N +defaultValue | String / Number / Boolean / Object / Array | - | 选中值。非受控属性。TS 类型:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N valueDisplay | TNode | - | 自定义选中项呈现的内容。TS 类型:`string \| TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N valueType | String | value | 用于控制选中值的类型。假设数据选项为:`[{ label: '姓名', value: 'name' }]`,value 表示值仅返回数据选项中的 value, object 表示值返回全部数据。。可选项:value/object | N onBlur | Function | | TS 类型:`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`
输入框失去焦点时触发 | N -onChange | Function | | TS 类型:`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`
选中值变化时触发。`context.trigger` 表示触发变化的来源;`context.selectedOptions` 表示选中值的完整对象,数组长度一定和 `value` 相同;`context.option` 表示当前操作的选项,不一定存在。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N +onChange | Function | | TS 类型:`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`
选中值变化时触发。`context.trigger` 表示触发变化的来源;`context.selectedOptions` 表示选中值的完整对象,数组长度一定和 `value` 相同;`context.option` 表示当前操作的选项,不一定存在。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`
| N onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击清除按钮时触发 | N onCreate | Function | | TS 类型:`(value: string \| number) => void`
当选择新创建的条目时触发 | N onEnter | Function | | TS 类型:`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`
回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值 | N @@ -85,7 +85,7 @@ style | Object | - | 样式,TS 类型:`React.CSSProperties` | N divider | Boolean | true | 是否显示分隔线 | N label | String | - | 分组别名 | N -### InfinityScroll +### TScroll 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- @@ -93,4 +93,4 @@ bufferSize | Number | 20 | 表示除可视区域外,额外渲染的行数, isFixedRowHeight | Boolean | false | 表示每行内容是否同一个固定高度,仅在 `scroll.type` 为 `virtual` 时有效,该属性设置为 `true` 时,可用于简化虚拟滚动内部计算逻辑,提升性能,此时则需要明确指定 `scroll.rowHeight` 属性的值 | N rowHeight | Number | - | 行高,不会给``元素添加样式高度,仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置,可尽量将该属性设置为每行平均高度,从而使得滚动过程更加平滑 | N threshold | Number | 100 | 启动虚拟滚动的阈值。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动 | N -type | String | - | 必需。滚动加载类型,有两种:懒加载和虚拟滚动。
值为 `lazy` ,表示滚动时会进行懒加载,非可视区域内的内容将不会默认渲染,直到该内容可见时,才会进行渲染,并且已渲染的内容滚动到不可见时,不会被销毁;
值为`virtual`时,表示会进行虚拟滚动,无论滚动条滚动到哪个位置,同一时刻,仅渲染该可视区域内的内容,当需要展示的数据量较大时,建议开启该特性。可选项:lazy/virtual | Y \ No newline at end of file +type | String | - | 必需。滚动加载类型,有两种:懒加载和虚拟滚动。
值为 `lazy` ,表示滚动时会进行懒加载,非可视区域内的内容将不会默认渲染,直到该内容可见时,才会进行渲染,并且已渲染的内容滚动到不可见时,不会被销毁;
值为`virtual`时,表示会进行虚拟滚动,无论滚动条滚动到哪个位置,同一时刻,仅渲染该可视区域内的内容,当需要展示的数据量较大时,建议开启该特性。可选项:lazy/virtual | Y diff --git a/src/select/type.ts b/src/select/type.ts index 1f32030582..dac286fc08 100644 --- a/src/select/type.ts +++ b/src/select/type.ts @@ -12,7 +12,7 @@ import { TagInputProps } from '../tag-input'; import { TagProps } from '../tag'; import { SelectInputValueChangeContext } from '../select-input'; import { PopupVisibleChangeContext } from '../popup'; -import { PlainObject, TNode, TElement, SizeEnum, InfinityScroll } from '../common'; +import { PlainObject, TNode, TElement, SizeEnum, KeysType, InfinityScroll } from '../common'; import { MouseEvent, KeyboardEvent, FocusEvent } from 'react'; export interface TdSelectProps { @@ -74,9 +74,9 @@ export interface TdSelectProps { */ defaultInputValue?: InputValue; /** - * 用来定义 value / label 在 `options` 中对应的字段别名 + * 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */ - keys?: SelectKeysType; + keys?: KeysType; /** * 左侧文本 */ @@ -305,14 +305,9 @@ export interface TdOptionGroupProps { label?: string; } -export interface SelectKeysType { - value?: string; - label?: string; -} - -export type SelectValue = string | number | T | Array>; +export type SelectValue = string | number | boolean | T | Array>; -export type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'; +export type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck' | 'default'; export interface SelectRemoveContext { value: string | number; From 6dedd589f8572747bc636fb0c296db70ba75fcbc Mon Sep 17 00:00:00 2001 From: pengYYY Date: Wed, 16 Aug 2023 15:53:56 +0800 Subject: [PATCH 2/4] feat: add cascader keys disabled --- src/cascader/Cascader.tsx | 1 + src/cascader/cascader.en-US.md | 13 +++++++------ src/cascader/cascader.md | 3 ++- src/cascader/defaultProps.ts | 1 + src/cascader/type.ts | 17 ++++++++--------- 5 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx index 6a9b2bd126..939cacf4df 100644 --- a/src/cascader/Cascader.tsx +++ b/src/cascader/Cascader.tsx @@ -83,6 +83,7 @@ const Cascader: React.FC = (originalProps) => { tips={props.tips} suffix={props.suffix} suffixIcon={renderSuffixIcon()} + borderless={props.borderless} popupProps={{ ...props.popupProps, overlayInnerStyle: panels.length && !props.loading ? { width: 'auto' } : {}, diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md index 8b3fe8b378..b70843b0a2 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 @@ -35,19 +36,19 @@ 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 +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..8ff18aae9b 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 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..578d68241c 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) => void; } -export interface CascaderKeysType { - value?: string; - label?: string; - children?: string | boolean; -} - export type CascaderValue = string | number | T | Array>; export interface CascaderChangeContext { From c041bc1f1ab65d5e94b249fdfa214050374dcf6a Mon Sep 17 00:00:00 2001 From: pengYYY Date: Wed, 16 Aug 2023 15:57:29 +0800 Subject: [PATCH 3/4] feat: tree add keys.disabled api --- src/tree/tree.en-US.md | 2 +- src/tree/tree.md | 2 +- src/tree/type.ts | 10 ++-------- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/tree/tree.en-US.md b/src/tree/tree.en-US.md index 085b389903..154d8a7a3e 100644 --- a/src/tree/tree.en-US.md +++ b/src/tree/tree.en-US.md @@ -28,7 +28,7 @@ expanded | Array | [] | Typescript:`Array` | N filter | Function | - | Typescript:`(node: TreeNodeModel) => boolean` | N hover | Boolean | - | \- | N icon | TNode | true | Typescript:`boolean \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -keys | Object | - | Typescript:`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: string }`。[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/tree/type.ts) | N +keys | Object | - | alias field name in data。Typescript:`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N label | TNode | true | Typescript:`string \| boolean \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N lazy | Boolean | true | \- | N line | TNode | false | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N diff --git a/src/tree/tree.md b/src/tree/tree.md index 16563f3f72..615ccf7aca 100644 --- a/src/tree/tree.md +++ b/src/tree/tree.md @@ -28,7 +28,7 @@ expanded | Array | [] | 展开的节点值。TS 类型:`Array` filter | Function | - | 节点过滤方法,只呈现返回值为 true 的节点,泛型 `T` 表示树节点 TS 类型。TS 类型:`(node: TreeNodeModel) => boolean` | N hover | Boolean | - | 节点是否有悬浮状态 | N icon | TNode | true | 节点图标,可自定义。TS 类型:`boolean \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -keys | Object | - | 用来定义 `value / label / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }`。TS 类型:`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree/type.ts) | N +keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }`。其中,disabled 待开发。。TS 类型:`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N label | TNode | true | 自定义节点内容,值为 `false` 不显示,值为 `true` 显示默认 label,值为字符串直接输出该字符串。泛型 `T` 表示树节点 TS 类型。
如果期望只有点击复选框才选中,而点击节点不选中,可以使用 `label` 自定义节点,然后加上点击事件 `e.preventDefault()`,通过调整自定义节点的宽度和高度决定禁止点击选中的范围。TS 类型:`string \| boolean \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N lazy | Boolean | true | 延迟加载 children 为 true 的节点的子节点数据,即使 expandAll 被设置为 true,也同样延迟加载 | N line | TNode | false | 连接线。值为 false 不显示连接线;值为 true 显示默认连接线;值类型为 Function 表示自定义连接线。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N diff --git a/src/tree/type.ts b/src/tree/type.ts index 3e50bee36a..a1d6f0a873 100644 --- a/src/tree/type.ts +++ b/src/tree/type.ts @@ -5,7 +5,7 @@ * */ import { CheckboxProps } from '../checkbox'; -import { TNode, TreeOptionData, TScroll } from '../common'; +import { TNode, TreeOptionData, TreeKeysType, TScroll } from '../common'; import { MouseEvent, WheelEvent, DragEvent } from 'react'; export interface TdTreeProps { @@ -118,7 +118,7 @@ export interface TdTreeProps { */ icon?: boolean | TNode>; /** - * 用来定义 `value / label / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }` + * 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }`。其中,disabled 待开发。 */ keys?: TreeKeysType; /** @@ -438,10 +438,4 @@ export interface TreeNodeModel extend setData: (data: T) => void; } -export interface TreeKeysType { - value?: string; - label?: string; - children?: string; -} - export type TreeNodeValue = string | number; From b6928951c3cd9b1c836cda2a90c7f06b147d8c37 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Wed, 16 Aug 2023 15:59:20 +0800 Subject: [PATCH 4/4] fix: select KeysType lint --- src/select/base/Option.tsx | 6 +++--- src/select/util/helper.ts | 19 ++++++++----------- src/transfer/transfer.en-US.md | 9 ++++----- src/transfer/transfer.md | 4 ++-- src/transfer/type.ts | 5 ++--- src/tree-select/tree-select.md | 2 +- src/tree-select/type.ts | 6 +++--- 7 files changed, 23 insertions(+), 28 deletions(-) diff --git a/src/select/base/Option.tsx b/src/select/base/Option.tsx index f0eb0f036f..3656418422 100644 --- a/src/select/base/Option.tsx +++ b/src/select/base/Option.tsx @@ -7,8 +7,8 @@ import get from 'lodash/get'; import useConfig from '../../hooks/useConfig'; import useDomRefCallback from '../../hooks/useDomRefCallback'; import useRipple from '../../_util/useRipple'; -import { StyledProps } from '../../common'; -import { SelectValue, TdOptionProps, TdSelectProps, SelectKeysType, SelectOption } from '../type'; +import { StyledProps, KeysType } from '../../common'; +import { SelectValue, TdOptionProps, TdSelectProps, SelectOption } from '../type'; /** * Option 组件属性 @@ -30,7 +30,7 @@ export interface SelectOptionProps ) => void; onCheckAllChange?: (checkAll: boolean, e: React.MouseEvent) => void; restData?: Record; - keys?: SelectKeysType; + keys?: KeysType; optionLength?: number; isVirtual?: boolean; onRowMounted?: (rowData: { ref: HTMLElement; data: SelectOption }) => void; diff --git a/src/select/util/helper.ts b/src/select/util/helper.ts index 0beb1940e7..a13f9ef069 100644 --- a/src/select/util/helper.ts +++ b/src/select/util/helper.ts @@ -4,7 +4,8 @@ import get from 'lodash/get'; import OptionGroup from '../base/OptionGroup'; import Option from '../base/Option'; -import { SelectValue, TdOptionProps, SelectKeysType, TdSelectProps } from '../type'; +import { SelectValue, TdOptionProps, TdSelectProps } from '../type'; +import { KeysType } from '../../common'; type SelectLabeledValue = Required>; @@ -12,7 +13,7 @@ type ValueToOption = { [value: string | number]: TdOptionProps; }; -function setValueToOptionFormOptionDom(dom: ReactElement, valueToOption: ValueToOption, keys: SelectKeysType) { +function setValueToOptionFormOptionDom(dom: ReactElement, valueToOption: ValueToOption, keys: KeysType) { const { value, label, children } = dom.props; // eslint-disable-next-line no-param-reassign valueToOption[value] = { @@ -22,11 +23,7 @@ function setValueToOptionFormOptionDom(dom: ReactElement, valueToOption: ValueTo } // 获取 value => option,用于快速基于 value 找到对应的 option -export const getValueToOption = ( - children: ReactElement, - options: TdOptionProps[], - keys: SelectKeysType, -): ValueToOption => { +export const getValueToOption = (children: ReactElement, options: TdOptionProps[], keys: KeysType): ValueToOption => { const valueToOption = {}; // options 优先级高于 children @@ -80,7 +77,7 @@ export const getLabel = ( children: ReactElement, value: SelectValue, options: TdOptionProps[], - keys: SelectKeysType, + keys: KeysType, ) => { let selectedLabel = ''; // 处理带 options 属性的情况 @@ -144,7 +141,7 @@ export const getLabel = ( return selectedLabel; }; -export const getMultipleTags = (values: SelectValue[], keys: SelectKeysType) => { +export const getMultipleTags = (values: SelectValue[], keys: KeysType) => { const tags = values.map((item) => ({ label: get(item, keys?.label || 'label') || item.toString(), value: get(item, keys?.value || 'value') || item, @@ -157,7 +154,7 @@ export const getSelectValueArr = ( activeValue: SelectValue, selected?: boolean, valueType?: TdSelectProps['valueType'], - keys?: SelectKeysType, + keys?: KeysType, objVal?: SelectValue, ) => { // eslint-disable-next-line no-param-reassign @@ -190,7 +187,7 @@ export const getSelectedOptions = ( value: SelectValue, multiple: TdSelectProps['multiple'], valueType: TdSelectProps['valueType'], - keys: SelectKeysType, + keys: KeysType, tmpPropOptions: Array, ) => { const isObjectType = valueType === 'object'; diff --git a/src/transfer/transfer.en-US.md b/src/transfer/transfer.en-US.md index 0f036b06ad..18195f2c45 100644 --- a/src/transfer/transfer.en-US.md +++ b/src/transfer/transfer.en-US.md @@ -1,7 +1,6 @@ :: BASE_DOC :: ## API - ### Transfer Props name | type | default | description | required @@ -12,16 +11,16 @@ checkboxProps | Object | - | Typescript:`CheckboxProps`,[Checkbox API Docume checked | Array | [] | Typescript:`Array` | N defaultChecked | Array | [] | uncontrolled property。Typescript:`Array` | N data | Array | [] | Typescript:`Array` | N -direction | String | both | options:left/right/both | N -disabled | Boolean / Array | false | Typescript:`boolean \| Array` | N +direction | String | both | options: left/right/both | N +disabled | Boolean / Array | - | Typescript:`boolean \| Array` | N empty | TNode | '' | Typescript:`EmptyType \| Array \| TNode` `type EmptyType = string \| TNode `。[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/transfer/type.ts) | N footer | TNode | - | Typescript:`Array \| TNode<{ type: TransferListType }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -keys | Object | - | Typescript:`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +keys | Object | - | alias field name in data。Typescript:`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N operation | TNode | - | Typescript:`Array \| TNode<{ direction: 'left' \| 'right' }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N pagination | Object / Array | - | Typescript:`PaginationProps \| Array`,[Pagination API Documents](./pagination?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N search | Boolean / Object / Array | false | Typescript:`SearchOption \| Array` `type SearchOption = boolean \| InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N showCheckAll | Boolean / Array | true | Typescript:`boolean \| Array` | N -targetSort | String | original | options:original/push/unshift | N +targetSort | String | original | options: original/push/unshift | N title | TNode | [] | Typescript:`Array \| TNode<{ type: TransferListType }>` `type TitleType = string \| TNode` `type TransferListType = 'source' \| 'target'`。[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/transfer/type.ts) | N transferItem | TElement | - | Typescript:`TNode>` `interface TransferItem { data: T; index: number; type: TransferListType}`。[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/transfer/type.ts) | N tree | TElement | 传入 Tree 组件定义树形结构 | Typescript:`(tree: TreeProps) => TNode`,[Tree API Documents](./tree?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/transfer/type.ts) | N diff --git a/src/transfer/transfer.md b/src/transfer/transfer.md index 7ac2744abf..125c5e6722 100644 --- a/src/transfer/transfer.md +++ b/src/transfer/transfer.md @@ -12,10 +12,10 @@ checked | Array | [] | 数据列表选中项。TS 类型:`Array defaultChecked | Array | [] | 数据列表选中项。非受控属性。TS 类型:`Array` | N data | Array | [] | 全量数据。TS 类型:`Array` | N direction | String | both | 穿梭框可操作方向。可选项:left/right/both | N -disabled | Boolean / Array | false | 禁用全部操作:搜索、选中、移动、分页等。[源列表, 目标列表],示例:[true, false] 或者 true。TS 类型:`boolean \| Array` | N +disabled | Boolean / Array | - | 禁用全部操作:搜索、选中、移动、分页等。[源列表, 目标列表],示例:[true, false] 或者 true。TS 类型:`boolean \| Array` | N empty | TNode | '' | 列表为空时呈现的内容。值类型为数组,则表示分别控制源列表和目标列表数据为空的呈现内容。TS 类型:`EmptyType \| Array \| TNode` `type EmptyType = string \| TNode `。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N footer | TNode | - | 穿梭框底部内容。TS 类型:`Array \| TNode<{ type: TransferListType }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -keys | Object | - | 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +keys | Object | - | 用来定义 value / label / disabled 在 `data` 中对应的字段别名,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N operation | TNode | - | 方向操作按钮。默认显示组件内置操作图标。自定义操作图标示例:['向左', '向右'] 或者 `[() => , () => ]` 或者 `(h, direction) => direction === 'left' ? '《' : '》'`。TS 类型:`Array \| TNode<{ direction: 'left' \| 'right' }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N pagination | Object / Array | - | 分页配置,值为空则不显示。具体 API 参考分页组件。值类型为数组,表示可分别控制源列表和目标列表分页组件。TS 类型:`PaginationProps \| Array`,[Pagination API Documents](./pagination?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N search | Boolean / Object / Array | false | 搜索框配置,值为 false 表示不显示搜索框;值为 true 表示显示默认搜索框;值类型为对象,用于透传 Props 到 Input 组件;值类型为数组,则分别表示控制两侧搜索框。TS 类型:`SearchOption \| Array` `type SearchOption = boolean \| InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N diff --git a/src/transfer/type.ts b/src/transfer/type.ts index f1d23affdf..3cca353354 100644 --- a/src/transfer/type.ts +++ b/src/transfer/type.ts @@ -38,7 +38,6 @@ export interface TdTransferProps { direction?: 'left' | 'right' | 'both'; /** * 禁用全部操作:搜索、选中、移动、分页等。[源列表, 目标列表],示例:[true, false] 或者 true - * @default false */ disabled?: boolean | Array; /** @@ -51,7 +50,7 @@ export interface TdTransferProps { */ footer?: Array | TNode<{ type: TransferListType }>; /** - * 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段 + * 用来定义 value / label / disabled 在 `data` 中对应的字段别名,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段 */ keys?: KeysType; /** @@ -153,7 +152,7 @@ export interface SearchContext { query: string; type: TransferListType; trigger: 'input' | 'enter'; - e: FormEvent | KeyboardEvent; + e: FormEvent | KeyboardEvent; } export type DataOption = { label?: string; value?: TransferValue; disabled?: boolean } & Record; diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md index 3c7c92bb55..06017430e1 100644 --- a/src/tree-select/tree-select.md +++ b/src/tree-select/tree-select.md @@ -20,7 +20,7 @@ filterable | Boolean | false | 是否可搜索 | N inputProps | Object | - | 透传给 输入框 Input 组件的全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N inputValue | String / Number | - | 输入框的值。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N -keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label: 'name', children: 'list' }`。TS 类型:`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }`。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 loading | Boolean | false | 是否正在加载数据 | N loadingText | TNode | - | 远程加载时显示的文字,支持自定义。如加上超链接。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts index 2cb9268c2e..058c4ceb49 100644 --- a/src/tree-select/type.ts +++ b/src/tree-select/type.ts @@ -9,9 +9,9 @@ import { InputValue } from '../input'; import { PopupProps } from '../popup'; import { SelectInputProps, SelectInputBlurContext, SelectInputValueChangeContext } from '../select-input'; import { TagProps } from '../tag'; -import { TreeProps, TreeNodeModel, TreeKeysType } from '../tree'; +import { TreeProps, TreeNodeModel } from '../tree'; import { PopupTriggerEvent, PopupTriggerSource } from '../popup'; -import { TNode, TElement, TreeOptionData } from '../common'; +import { TNode, TElement, TreeOptionData, TreeKeysType } from '../common'; import { MouseEvent, KeyboardEvent, FocusEvent } from 'react'; export interface TdTreeSelectProps< @@ -77,7 +77,7 @@ export interface TdTreeSelectProps< */ defaultInputValue?: InputValue; /** - * 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label: 'name', children: 'list' }` + * 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }` */ keys?: TreeKeysType; /**