feat(auto-complete): support empty api

Tencent · Jan 8, 2025 · 469f84c · 469f84c
1 parent e24d41c
commit 469f84c
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 16 deletions.
diff --git a/src/auto-complete/AutoComplete.tsx b/src/auto-complete/AutoComplete.tsx
@@ -151,6 +151,7 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((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
@@ -19,6 +19,7 @@ export interface OptionsListProps {
   highlightKeyword: boolean;
   filterable: boolean;
   filter: TdAutoCompleteProps['filter'];
+  empty: TdAutoCompleteProps['empty'];
   onSelect: (keyword: string, context: { e: MouseEvent<HTMLLIElement> | KeyboardEvent | any }) => void;
 }
 
@@ -144,7 +145,11 @@ const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: Options
     activeIndexRef.current = tOptions.findIndex((item) => item.text === active);
   }, [active, tOptions]);
 
-  if (!tOptions.length) return <div className={`${classPrefix}-auto-complete__panel--empty`}>{global.empty}</div>;
+  if (!tOptions.length) {
+    return (
+      <div className={`${classPrefix}-auto-complete__panel--empty`}>{props.empty ? props.empty : global.empty}</div>
+    );
+  }
   return (
     <ul className={classes}>
       {tOptions.map((item) => {

diff --git 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<boolean>` | 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
@@ -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<boolean>` | 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
@@ -32,6 +32,10 @@ export interface TdAutoCompleteProps<T extends AutoCompleteOption = AutoComplete
    * 是否禁用
    */
   disabled?: boolean;
+  /**
+   * 当下拉联想词列表为空时显示的内容
+   */
+  empty?: TNode;
   /**
    * 自定义过滤规则，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`
    */
@@ -67,7 +71,7 @@ export interface TdAutoCompleteProps<T extends AutoCompleteOption = AutoComplete
    */
   placeholder?: string;
   /**
-   * 透传 Popup 组件全部特性
+   * 透传 Popup 组件全部属性
    */
   popupProps?: PopupProps;
   /**

diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md
@@ -9,6 +9,7 @@ alert | Object | - | Alert global configs。Typescript：`AlertConfig` | N
 anchor | Object | - | Anchor global configs。Typescript：`AnchorConfig` | N
 animation | Object | - | Typescript：`Partial<Record<'include'\|'exclude', Array<AnimationType>>>` `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
@@ -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<Record<'include'\|'exclude', Array<AnimationType>>>` `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
@@ -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;