From 469f84cb62bb949373ebbf5232a43182aaefe819 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 8 Jan 2025 22:25:51 +0800 Subject: [PATCH 1/3] feat(auto-complete): support empty api --- src/auto-complete/AutoComplete.tsx | 1 + src/auto-complete/OptionList.tsx | 7 +++++- src/auto-complete/auto-complete.en-US.md | 3 ++- src/auto-complete/auto-complete.md | 3 ++- src/auto-complete/type.ts | 6 ++++- src/config-provider/config-provider.en-US.md | 7 ++++++ src/config-provider/config-provider.md | 7 ++++++ src/config-provider/type.ts | 24 ++++++++++---------- 8 files changed, 42 insertions(+), 16 deletions(-) diff --git a/src/auto-complete/AutoComplete.tsx b/src/auto-complete/AutoComplete.tsx index 87ccc57424..1dacbfb774 100644 --- a/src/auto-complete/AutoComplete.tsx +++ b/src/auto-complete/AutoComplete.tsx @@ -151,6 +151,7 @@ const AutoComplete = forwardRef((originalPro highlightKeyword={props.highlightKeyword} filterable={props.filterable} filter={props.filter} + empty={props.empty} /> ); const topContent = props.panelTopContent; diff --git a/src/auto-complete/OptionList.tsx b/src/auto-complete/OptionList.tsx index cbd64e0bfc..27373edda6 100644 --- a/src/auto-complete/OptionList.tsx +++ b/src/auto-complete/OptionList.tsx @@ -19,6 +19,7 @@ export interface OptionsListProps { highlightKeyword: boolean; filterable: boolean; filter: TdAutoCompleteProps['filter']; + empty: TdAutoCompleteProps['empty']; onSelect: (keyword: string, context: { e: MouseEvent | KeyboardEvent | any }) => void; } @@ -144,7 +145,11 @@ const OptionsList = forwardRef((props: Options activeIndexRef.current = tOptions.findIndex((item) => item.text === active); }, [active, tOptions]); - if (!tOptions.length) return
{global.empty}
; + if (!tOptions.length) { + return ( +
{props.empty ? props.empty : global.empty}
+ ); + } return (
    {tOptions.map((item) => { diff --git a/src/auto-complete/auto-complete.en-US.md b/src/auto-complete/auto-complete.en-US.md index e7351aefae..eb0ae761c2 100644 --- a/src/auto-complete/auto-complete.en-US.md +++ b/src/auto-complete/auto-complete.en-US.md @@ -12,7 +12,8 @@ autofocus | Boolean | - | \- | N borderless | Boolean | false | \- | N children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N clearable | Boolean | - | \- | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N +empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N filter | Function | - | Typescript：`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | true | \- | N highlightKeyword | Boolean | true | \- | N diff --git a/src/auto-complete/auto-complete.md b/src/auto-complete/auto-complete.md index 8f7e7e818b..44b6ab1404 100644 --- a/src/auto-complete/auto-complete.md +++ b/src/auto-complete/auto-complete.md @@ -13,6 +13,7 @@ borderless | Boolean | false | 无边框模式 | N children | TNode | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N clearable | Boolean | - | 是否允许清空 | N disabled | Boolean | - | 是否禁用 | N +empty | TNode | - | 当下拉联想词列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N filter | Function | - | 自定义过滤规则，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`。TS 类型：`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | true | 是否根据输入内容过滤联想词。默认过滤规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则。部分场景下输入关键词和下拉联想词完全不同，此时可以设置为 `false` | N highlightKeyword | Boolean | true | 是否高亮联想词中和输入值的相同部分 | N @@ -21,7 +22,7 @@ options | Array | - | 下拉联想词列表。示例一：`['联想词一', '联 panelBottomContent | TNode | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N panelTopContent | TNode | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N placeholder | String | undefined | 输入框为空时的占位提示。组件本身默认值为 `undefined`，但全局配置存在默认值，不同语言全局默认值不同 | N -popupProps | Object | - | 透传 Popup 组件全部特性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N +popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N readonly | Boolean | - | 是否只读 | 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 diff --git a/src/auto-complete/type.ts b/src/auto-complete/type.ts index b67866c94e..32aacdc9c6 100644 --- a/src/auto-complete/type.ts +++ b/src/auto-complete/type.ts @@ -32,6 +32,10 @@ export interface TdAutoCompleteProps>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N attach | String / Object / Function | - | Typescript：`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +autoComplete | Object | - | AutoComplete global configs。Typescript：`AutoCompleteConfig` | N calendar | Object | - | Calendar global configs。Typescript：`CalendarConfig` | N cascader | Object | - | Cascader global configs。Typescript：`CascaderConfig` | N classPrefix | String | t | \- | N @@ -354,3 +355,9 @@ name | type | default | description | required collapseText | String | - | collapse text | N copiedText | String | - | copied text | N expandText | String | - | expand text | N + +### AutoCompleteConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +empty | String | - | \- | N diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md index c6906be094..ad71f25e19 100644 --- a/src/config-provider/config-provider.md +++ b/src/config-provider/config-provider.md @@ -39,6 +39,7 @@ alert | Object | - | 警告全局配置。TS 类型：`AlertConfig` | N anchor | Object | - | 锚点全局配置。TS 类型：`AnchorConfig` | N animation | Object | - | 动画效果控制，`ripple` 指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`。TS 类型：`Partial>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N attach | String / Object / Function | - | TS 类型：`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +autoComplete | Object | - | 自动填充组件全局配置。TS 类型：`AutoCompleteConfig` | N calendar | Object | - | 日历组件全局配置。TS 类型：`CalendarConfig` | N cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfig` | N classPrefix | String | t | CSS 类名前缀 | N @@ -384,3 +385,9 @@ titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类 collapseText | String | - | 语言配置，“收起”描述文本 | N copiedText | String | - | 语言配置，“复制成功”描述文本 | N expandText | String | - | 语言配置，“展开”描述文本 | N + +### AutoCompleteConfig + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +empty | String | - | 语言配置，“暂无数据”描述文本 | N diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts index 142933a288..9cfa7217ae 100644 --- a/src/config-provider/type.ts +++ b/src/config-provider/type.ts @@ -13,10 +13,6 @@ import { ImageProps } from '../image'; import { TNode, TElement, SizeEnum, AttachNode } from '../common'; export interface GlobalConfigProvider { - /** - * 自动填充全局配置 - */ - autoComplete?: AutoCompleteConfig; /** * 警告全局配置 */ @@ -33,6 +29,10 @@ export interface GlobalConfigProvider { * null */ attach?: AttachNode | { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode }; + /** + * 自动填充组件全局配置 + */ + autoComplete?: AutoCompleteConfig; /** * 日历组件全局配置 */ @@ -156,14 +156,6 @@ export interface GlobalConfigProvider { upload?: UploadConfig; } -export interface AutoCompleteConfig { - /** - * 语言配置，“暂无数据”描述文本 - * @default '' - */ - empty?: string; -} - export interface InputConfig { /** * 是否开启自动填充功能 @@ -972,6 +964,14 @@ export interface TypographyConfig { expandText?: string; } +export interface AutoCompleteConfig { + /** + * 语言配置，“暂无数据”描述文本 + * @default '' + */ + empty?: string; +} + export type AnimationType = 'ripple' | 'expand' | 'fade'; export type IconConfig = GlobalIconConfig; From 353c1e3c4df27b2b61a19fdb74d6b710491a7dcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 8 Jan 2025 22:27:37 +0800 Subject: [PATCH 2/3] chore: update doc --- src/auto-complete/auto-complete.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/auto-complete/auto-complete.en-US.md b/src/auto-complete/auto-complete.en-US.md index eb0ae761c2..ead6e2d60f 100644 --- a/src/auto-complete/auto-complete.en-US.md +++ b/src/auto-complete/auto-complete.en-US.md @@ -12,7 +12,7 @@ autofocus | Boolean | - | \- | N borderless | Boolean | false | \- | N children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N clearable | Boolean | - | \- | N -disabled | Boolean | undefined | \- | N +disabled | Boolean | - | \- | N empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N filter | Function | - | Typescript：`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | true | \- | N From 0efb98c848b8126e806fc750f84e6ee122200711 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 8 Jan 2025 23:01:05 +0800 Subject: [PATCH 3/3] chore: update --- src/auto-complete/OptionList.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/auto-complete/OptionList.tsx b/src/auto-complete/OptionList.tsx index 27373edda6..6ed131af1e 100644 --- a/src/auto-complete/OptionList.tsx +++ b/src/auto-complete/OptionList.tsx @@ -146,9 +146,7 @@ const OptionsList = forwardRef((props: Options }, [active, tOptions]); if (!tOptions.length) { - return ( -
    {props.empty ? props.empty : global.empty}
    - ); + return
    {props.empty || global.empty}
    ; } return (