fix: select cache options (#1908)

* fix: select cache options * test: snap update * fix: selectCache update
Tencent · Oct 26, 2022 · 324a12a · 324a12a
1 parent 36246be
commit 324a12a
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 46 deletions.
diff --git a/src/cascader/hooks.ts b/src/cascader/hooks.ts
@@ -147,7 +147,6 @@ export const useCascaderContext = (props: TdCascaderProps) => {
         store.append(options);
         statusContext.treeStore = store;
       } else {
-        if (isEqual(treeStore.config.options, options)) return;
         treeStore.reload(options);
         treeStore.refreshNodes();
       }

diff --git a/src/select/__tests__/__snapshots__/index.test.jsx.snap b/src/select/__tests__/__snapshots__/index.test.jsx.snap
@@ -819,7 +819,7 @@ exports[`Select OptionGroup > :props > :value 1`] = `
 >
   
   <div
-    class="t-input__wrap t-select-input t-select"
+    class="t-input__wrap t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input t-is-default t-is-readonly t-input--prefix t-input--suffix"

diff --git a/src/select/helper.ts b/src/select/helper.ts
@@ -1,6 +1,6 @@
-import { InjectionKey, ComputedRef, Slots } from 'vue';
+import { InjectionKey, ComputedRef } from 'vue';
 import cloneDeep from 'lodash/cloneDeep';
-import { TdSelectProps, TdOptionProps, SelectValue, SelectOption, SelectOptionGroup } from './type';
+import { TdSelectProps, TdOptionProps, SelectValue, SelectOption } from './type';
 
 export const selectInjectKey: InjectionKey<
   ComputedRef<{
@@ -22,19 +22,21 @@ export const selectInjectKey: InjectionKey<
   }>
 > = Symbol('selectProvide');
 
-export const getSingleContent = (value: TdSelectProps['value'], options: SelectOption[]): string => {
-  for (const option of options) {
-    if ((option as TdOptionProps).value === value) {
-      return option?.label;
-    }
-  }
-  return value as string;
+export const getSingleContent = (
+  value: TdSelectProps['value'],
+  optionsMap: ComputedRef<Map<SelectValue<SelectOption>, TdOptionProps>>,
+): string => {
+  const option = optionsMap.value.get(value);
+  return option?.label as string;
 };
 
-export const getMultipleContent = (value: SelectValue[], options: SelectOption[]) => {
+export const getMultipleContent = (
+  value: SelectValue[],
+  optionsMap: ComputedRef<Map<SelectValue<SelectOption>, TdOptionProps>>,
+) => {
   const res = [];
   for (const iterator of value) {
-    const resLabel = getSingleContent(iterator, options);
+    const resLabel = getSingleContent(iterator, optionsMap);
     if (resLabel) {
       res.push(resLabel);
     }

diff --git a/src/select/hooks/useSelectOptions.ts b/src/select/hooks/useSelectOptions.ts
@@ -1,9 +1,9 @@
-import { computed, Slots, VNode, Ref } from 'vue';
+import { computed, Slots, VNode, Ref, ref } from 'vue';
 import isArray from 'lodash/isArray';
 import get from 'lodash/get';
 
 import { useChildComponentSlots } from '../../hooks/slot';
-import { TdSelectProps, TdOptionProps, SelectOptionGroup, SelectKeysType, SelectValue } from '../type';
+import { TdSelectProps, TdOptionProps, SelectOptionGroup, SelectKeysType, SelectValue, SelectOption } from '../type';
 
 type UniOption = (TdOptionProps | SelectOptionGroup) & {
   index?: number;
@@ -12,6 +12,7 @@ type UniOption = (TdOptionProps | SelectOptionGroup) & {
 
 export const useSelectOptions = (props: TdSelectProps, keys: Ref<SelectKeysType>) => {
   const getChildComponentSlots = useChildComponentSlots();
+  const optionsCache = ref<SelectOption[]>([]);
 
   const options = computed(() => {
     let dynamicIndex = 0;
@@ -94,7 +95,7 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref<SelectKeysType>
 
   const optionsMap = computed(() => {
     const res = new Map<SelectValue, TdOptionProps>();
-    optionsList.value.forEach((option: TdOptionProps) => {
+    optionsList.value.concat(optionsCache.value).forEach((option: TdOptionProps) => {
       res.set(option.value, option);
     });
     return res;
@@ -104,5 +105,6 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref<SelectKeysType>
     options,
     optionsMap,
     optionsList,
+    optionsCache,
   };
 };
diff --git a/src/select/select.tsx b/src/select/select.tsx
@@ -41,7 +41,7 @@ export default defineComponent({
       label: props.keys?.label || 'label',
       value: props.keys?.value || 'value',
     }));
-    const { options, optionsMap, optionsList } = useSelectOptions(props, keys);
+    const { options, optionsMap, optionsList, optionsCache } = useSelectOptions(props, keys);
 
     // 内部数据,格式化过的
     const innerValue = computed(() => {
@@ -50,7 +50,7 @@ export default defineComponent({
           ? orgValue.value[keys.value.value]
           : (orgValue.value as SelectValue[]).map((option) => option[keys.value.value]);
       }
-      return orgValue.value;
+      return orgValue.value || (!props.multiple ? undefined : []);
     });
     const setInnerValue: TdSelectProps['onChange'] = (newVal: SelectValue | SelectValue[], e) => {
       if (props.valueType === 'object') {
@@ -86,16 +86,16 @@ export default defineComponent({
 
     const placeholderText = computed(
       () =>
-        ((!props.multiple && innerPopupVisible.value && getSingleContent(innerValue.value, optionsList.value)) ||
+        ((!props.multiple && innerPopupVisible.value && getSingleContent(innerValue.value, optionsMap)) ||
           props.placeholder) ??
         t(globalConfig.value.placeholder),
     );
 
     // selectInput 展示值
     const displayText = computed(() =>
       props.multiple
-        ? getMultipleContent(innerValue.value as SelectValue[], optionsList.value)
-        : getSingleContent(innerValue.value, optionsList.value),
+        ? getMultipleContent(innerValue.value as SelectValue[], optionsMap)
+        : getSingleContent(innerValue.value, optionsMap),
     );
 
     // valueDisplayParams参数
@@ -269,10 +269,31 @@ export default defineComponent({
       props.onSearch?.(`${value}`);
     }, 300);
 
+    const addCache = (val: SelectValue) => {
+      if (props.multiple) {
+        const newCache = [];
+        for (const item of (val as SelectValue[]) || []) {
+          const option = optionsMap.value.get(item);
+          if (option) {
+            newCache.push(option);
+          }
+        }
+        optionsCache.value = Array.from(new Set([...newCache, ...optionsCache.value]));
+      } else {
+        const option = optionsMap.value.get(val);
+        if (option) {
+          optionsCache.value = Array.from(new Set([option, ...optionsCache.value]));
+        }
+      }
+    };
+
     watch(
       orgValue,
-      () => {
+      (val) => {
         checkValueInvalid();
+        nextTick(() => {
+          addCache(val);
+        });
       },
       {
         immediate: true,

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -45803,7 +45803,7 @@ exports[`csr snapshot test > csr test ./src/date-picker/_example/panel.vue 1`] =
                   >
 
                     <div
-                      class="t-input__wrap t-select-input t-select"
+                      class="t-input__wrap t-select-input t-select-input--empty t-select"
                     >
                       <div
                         class="t-input t-is-default t-is-readonly t-input--prefix t-input--suffix"
@@ -98976,7 +98976,7 @@ exports[`csr snapshot test > csr test ./src/select/_example/disabled.vue 1`] = `
     >
 
       <div
-        class="t-input__wrap t-tag-input t-tag-input--break-line t-select-input t-select-input--multiple t-select"
+        class="t-input__wrap t-tag-input t-tag-input--break-line t-select-input t-select-input--multiple t-select-input--empty t-select"
       >
         <div
           class="t-input t-is-disabled t-is-default t-is-readonly t-input--prefix t-input--suffix"
@@ -98986,31 +98986,20 @@ exports[`csr snapshot test > csr test ./src/select/_example/disabled.vue 1`] = `
             class="t-input__prefix"
           >
 
-            <span
-              class="t-tag t-tag--default t-tag--dark t-tag--disabled t-size-m"
-            >
-              <!---->
-
-              shanghai
-
-              <!---->
-            </span>
-            <span
-              class="t-tag t-tag--default t-tag--dark t-tag--disabled t-size-m"
-            >
-              <!---->
-
-              beijing
-
-              <!---->
-            </span>
 
           </div>
-          <!---->
+          <input
+            class="t-input__inner"
+            disabled=""
+            placeholder="-请选择-"
+            readonly=""
+            type="text"
+            unselectable="on"
+          />
           <span
             class="t-input__input-pre"
           >
-
+            -请选择-
           </span>
           <!---->
           <!---->

diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
-Original file line number
+Diff line change
@@ Expand Up / @@ -819,7 +819,7 @@ exports[`Select OptionGroup > :props > :value 1`] = ` @@
     >
       <div
-        class="t-input__wrap t-select-input t-select"
+        class="t-input__wrap t-select-input t-select-input--empty t-select"
       >
         <div
           class="t-input t-is-default t-is-readonly t-input--prefix t-input--suffix"
@@ Expand Down @@