fix(auto-complete): the display effect is abnormal when the option is…

… empty
Tencent · Jan 8, 2025 · ef8c0c5 · ef8c0c5
1 parent 6f1a2f1
commit ef8c0c5
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/auto-complete/AutoComplete.tsx b/src/auto-complete/AutoComplete.tsx
@@ -157,7 +157,7 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((originalPro
   const bottomContent = props.panelBottomContent;
   const panelContent =
     topContent || listContent || bottomContent ? (
-      <div className={`${classPrefix}-autocomplete__panel`}>
+      <div className={`${classPrefix}-auto-complete__panel`}>
         {topContent}
         {listContent}
         {bottomContent}

diff --git a/src/auto-complete/OptionList.tsx b/src/auto-complete/OptionList.tsx
@@ -8,6 +8,7 @@ import { CommonClassNameType } from '../hooks/useCommonClassName';
 import { AutoCompleteOptionObj, TdAutoCompleteProps } from './type';
 import HighlightOption from './HighlightOption';
 import { on, off } from '../_util/dom';
+import { useLocaleReceiver } from '../locale/LocalReceiver';
 
 export interface OptionsListProps {
   sizeClassNames: CommonClassNameType['sizeClassNames'];
@@ -18,7 +19,7 @@ export interface OptionsListProps {
   highlightKeyword: boolean;
   filterable: boolean;
   filter: TdAutoCompleteProps['filter'];
-  onSelect?: (keyword: string, context: { e: MouseEvent<HTMLLIElement> | KeyboardEvent | any }) => void;
+  onSelect: (keyword: string, context: { e: MouseEvent<HTMLLIElement> | KeyboardEvent | any }) => void;
 }
 
 export interface OptionsListRef {
@@ -32,6 +33,8 @@ const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: Options
   const [active, setActive] = useState('');
   const activeIndexRef = useRef(-1);
 
+  const [global] = useLocaleReceiver('autoComplete');
+
   const classes = `${classPrefix}-select__list`;
   const optionClasses = [
     `${classPrefix}-select-option`,
@@ -81,7 +84,7 @@ const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: Options
     }
     const keyword = liNode.getAttribute('title');
     setActive(keyword);
-    onSelect?.(keyword, { e });
+    onSelect(keyword, { e });
   };
 
   // 键盘事件，上下选择
@@ -90,10 +93,10 @@ const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: Options
       const currentIndex = activeIndexRef.current;
 
       if (currentIndex === -1) {
-        return
+        return;
       }
 
-      onSelect?.(tOptions[activeIndexRef.current].text, { e });
+      onSelect(tOptions[activeIndexRef.current].text, { e });
     } else {
       const index = activeIndexRef.current;
       let newIndex;
@@ -141,7 +144,7 @@ const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: Options
     activeIndexRef.current = tOptions.findIndex((item) => item.text === active);
   }, [active, tOptions]);
 
-  if (!tOptions.length) return null;
+  if (!tOptions.length) return <div className={`${classPrefix}-auto-complete__panel--empty`}>{global.empty}</div>;
   return (
     <ul className={classes}>
       {tOptions.map((item) => {

diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts
@@ -13,6 +13,10 @@ import { ImageProps } from '../image';
 import { TNode, TElement, SizeEnum, AttachNode } from '../common';
 
 export interface GlobalConfigProvider {
+  /**
+   * 自动填充全局配置
+   */
+  autoComplete?: AutoCompleteConfig;
   /**
    * 警告全局配置
    */
@@ -152,6 +156,14 @@ export interface GlobalConfigProvider {
   upload?: UploadConfig;
 }
 
+export interface AutoCompleteConfig {
+  /**
+   * 语言配置，“暂无数据”描述文本
+   * @default ''
+   */
+  empty?: string;
+}
+
 export interface InputConfig {
   /**
    * 是否开启自动填充功能
+1 −1		docs/mobile/flutter_design/pull-down-refresh.md
+2 −0		js/common.ts
+1 −0		js/global-config/default-config.ts
+3 −0		js/global-config/locale/ar_KW.ts
+3 −0		js/global-config/locale/en_US.ts
+3 −0		js/global-config/locale/it_IT.ts
+3 −0		js/global-config/locale/ja_JP.ts
+3 −0		js/global-config/locale/ko_KR.ts
+3 −0		js/global-config/locale/ru_RU.ts
+3 −0		js/global-config/locale/zh_CN.ts
+3 −0		js/global-config/locale/zh_TW.ts
+8 −4		js/input-number/large-number.ts
+4 −4		js/tree-v1/tree-node.ts
+4 −4		js/tree/tree-node.ts
+8 −10		package.json
+324 −0		style/mobile/components/color-picker/_index.less
+34 −0		style/mobile/components/color-picker/_var.less
+1 −0		style/mobile/components/input/v2/_index.less
+1 −0		style/mobile/components/input/v2/_var.less
+9 −0		style/web/components/auto-complete/_index.less
+2 −0		style/web/components/auto-complete/_var.less
+0 −40		test/script/jest.base.conf.js
+0 −34		test/script/jest.unit.conf.js
+1 −0		test/unit/date-picker/utils.test.js
+1 −0		test/unit/input-number/compareLargeNumber.test.js
+17 −0		test/unit/input-number/formatDecimal.test.js
+1 −0		test/unit/input-number/largeIntNumberAdd.test.js
+1 −0		test/unit/input-number/largeNumberAdd.test.js
+1 −0		test/unit/input-number/largeNumberSubtract.test.js
+1 −0		test/unit/input-number/largeNumberToFixed.test.js
+2 −1		test/unit/input-number/number.test.js
+1 −0		test/unit/time-picker/utils.test.js
+1 −0		test/unit/tree/activable.test.js
+1 −0		test/unit/tree/append.test.js
+1 −0		test/unit/tree/checkable.test.js
+1 −0		test/unit/tree/disabled.test.js
+1 −0		test/unit/tree/event.test.js
+1 −0		test/unit/tree/expand.test.js
+1 −0		test/unit/tree/filter.test.js
+1 −0		test/unit/tree/get-node.test.js
+1 −0		test/unit/tree/init.test.js
+1 −0		test/unit/tree/lazy.test.js
+1 −0		test/unit/tree/model.test.js
+1 −0		test/unit/upload/returnFileSize.test.js
+1 −0		test/unit/upload/utils.test.js
+1 −1		tsconfig.json
+13 −0		vitest.config.mts