fix: group select filter (#1026)

* fix: group select filter * fix: radio nil check * test: snap update * test: snap update
Tencent · Jun 22, 2022 · a7cff91 · a7cff91
1 parent 72206c0
commit a7cff91
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 324 deletions.
diff --git a/src/radio/group.tsx b/src/radio/group.tsx
@@ -1,6 +1,7 @@
 import { VNode, defineComponent, h, provide, reactive, ref, computed, onMounted, watch, nextTick, toRefs } from 'vue';
 import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
+import isNil from 'lodash/isNil';
 import props from './radio-group-props';
 import { RadioOptionObj, RadioOption } from './type';
 import Radio from './radio';
@@ -76,7 +77,7 @@ export default defineComponent({
     const radioGroupName = usePrefixClass('radio-group');
     const renderSlot = useTNodeDefault();
     const renderBlock = (): VNode => {
-      if (props.variant.includes('filled') && innerValue.value)
+      if (props.variant.includes('filled') && isNil(innerValue.value))
         return <div style={barStyle.value} class={`${radioGroupName.value}__bg-block`} />;
     };
     const renderOptions = (): VNode[] => {

diff --git a/src/select/helper.ts b/src/select/helper.ts
@@ -4,7 +4,6 @@ import { TdSelectProps, TdOptionProps, SelectValue, SelectOption, SelectOptionGr
 
 export const selectInjectKey: InjectionKey<
   ComputedRef<{
-    slots: Slots;
     hoverIndex: number;
     selectValue: TdSelectProps['value'];
     size: TdSelectProps['size'];

diff --git a/src/select/hooks.ts b/src/select/hooks.ts
@@ -1,20 +1,23 @@
 import { computed, Slots, VNode, Ref } from 'vue';
 import isArray from 'lodash/isArray';
 import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
 
 import { useChildComponentSlots } from '../hooks/slot';
 import { TdSelectProps, TdOptionProps, SelectOptionGroup, SelectKeysType, SelectValue } from './type';
 
+type UniOption = (TdOptionProps | SelectOptionGroup) & {
+  index?: number;
+  slots?: Slots;
+};
+
 export const useSelectOptions = (props: TdSelectProps, keys: Ref<SelectKeysType>) => {
   const getChildComponentSlots = useChildComponentSlots();
 
   const options = computed(() => {
-    let innerOptions = cloneDeep(props.options);
     let dynamicIndex = 0;
 
     // 统一处理 keys,处理通用数据
-    innerOptions = innerOptions.map((option) => {
+    const innerOptions: UniOption[] = props.options.map((option) => {
       const getFormatOption = (option: TdOptionProps) => {
         const { value, label } = keys.value;
         const res = {

diff --git a/src/select/select-panel.tsx b/src/select/select-panel.tsx
@@ -48,7 +48,20 @@ export default defineComponent({
         return option.label?.indexOf(`${props.inputValue}`) > -1;
       };
 
-      return props.options.filter(filterMethods);
+      const res: SelectOption[] = [];
+      props.options.forEach((option) => {
+        if ((option as SelectOptionGroup).group && (option as SelectOptionGroup).children) {
+          res.push({
+            ...option,
+            children: (option as SelectOptionGroup).children.filter(filterMethods),
+          });
+        }
+        if (filterMethods(option)) {
+          res.push(option);
+        }
+      });
+
+      return res;
     });
 
     const isEmpty = computed(() => !displayOptions.value.length);

diff --git a/src/select/select.tsx b/src/select/select.tsx
@@ -82,7 +82,7 @@ export default defineComponent({
 
     const placeholderText = computed(
       () =>
-        ((!props.multiple && innerPopupVisible.value && getSingleContent(innerValue.value, props.options)) ||
+        ((!props.multiple && innerPopupVisible.value && getSingleContent(innerValue.value, optionsList.value)) ||
           props.placeholder) ??
         t(global.value.placeholder),
     );
@@ -186,7 +186,6 @@ export default defineComponent({
     };
 
     const SelectProvide = computed(() => ({
-      slots,
       max: props.max,
       multiple: props.multiple,
       hoverIndex: hoverIndex.value,