Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(auto-complete): support empty api #3319

Merged
merged 3 commits into from
Jan 8, 2025
Merged

feat(auto-complete): support empty api #3319

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
469f84c
feat(auto-complete): support empty api
liweijie0812 Jan 8, 2025
353c1e3
chore: update doc
liweijie0812 Jan 8, 2025
0efb98c
chore: update
liweijie0812 Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/auto-complete/AutoComplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 6 additions & 1 deletion src/auto-complete/OptionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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) => {
Expand Down
1 change: 1 addition & 0 deletions src/auto-complete/auto-complete.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ 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
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
Expand Down
3 changes: 2 additions & 1 deletion src/auto-complete/auto-complete.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
6 changes: 5 additions & 1 deletion src/auto-complete/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ export interface TdAutoCompleteProps<T extends AutoCompleteOption = AutoComplete
* 是否禁用
*/
disabled?: boolean;
/**
* 当下拉联想词列表为空时显示的内容
*/
empty?: TNode;
/**
* 自定义过滤规则，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`
*/
Expand Down Expand Up @@ -67,7 +71,7 @@ export interface TdAutoCompleteProps<T extends AutoCompleteOption = AutoComplete
*/
placeholder?: string;
/**
* 透传 Popup 组件全部特性
* 透传 Popup 组件全部属性
*/
popupProps?: PopupProps;
/**
Expand Down
7 changes: 7 additions & 0 deletions src/config-provider/config-provider.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
7 changes: 7 additions & 0 deletions src/config-provider/config-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -384,3 +385,9 @@ titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类
collapseText | String | - | 语言配置，“收起”描述文本 | N
copiedText | String | - | 语言配置，“复制成功”描述文本 | N
expandText | String | - | 语言配置，“展开”描述文本 | N

### AutoCompleteConfig

名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
empty | String | - | 语言配置，“暂无数据”描述文本 | N
24 changes: 12 additions & 12 deletions src/config-provider/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,6 @@ import { ImageProps } from '../image';
import { TNode, TElement, SizeEnum, AttachNode } from '../common';

export interface GlobalConfigProvider {
/**
* 自动填充全局配置
*/
autoComplete?: AutoCompleteConfig;
/**
* 警告全局配置
*/
Expand All @@ -33,6 +29,10 @@ export interface GlobalConfigProvider {
* null
*/
attach?: AttachNode | { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode };
/**
* 自动填充组件全局配置
*/
autoComplete?: AutoCompleteConfig;
/**
* 日历组件全局配置
*/
Expand Down Expand Up @@ -156,14 +156,6 @@ export interface GlobalConfigProvider {
upload?: UploadConfig;
}

export interface AutoCompleteConfig {
/**
* 语言配置，“暂无数据”描述文本
* @default ''
*/
empty?: string;
}

export interface InputConfig {
/**
* 是否开启自动填充功能
Expand Down Expand Up @@ -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;
Expand Down
Loading