fix(Select): fix object type selectall and callback params

Tencent · Dec 19, 2024 · 42f4280 · 42f4280
1 parent 4282c4b
commit 42f4280
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/src/select/base/PopupContent.tsx b/src/select/base/PopupContent.tsx
@@ -30,6 +30,7 @@ interface SelectPopupProps
     value: SelectValue,
     context?: {
       label?: string | number;
+      value?: SelectValue;
       restData?: Record<string, any>;
       e: React.MouseEvent<HTMLLIElement>;
       trigger: SelectValueChangeTrigger;
@@ -109,12 +110,12 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
     if (multiple) {
       // calc multiple select values
       const values = getSelectValueArr(value, selectedValue, selected, valueType, keys, objVal);
-      onChange(values, { label, e: event, trigger: 'check' });
+      onChange(values, { label, value: selectedValue, e: event, trigger: 'check' });
     } else {
       // calc single select value
       const selectVal = valueType === 'object' ? objVal : selectedValue;
 
-      onChange(selectVal, { label, e: event, trigger: 'check' });
+      onChange(selectVal, { label, value: selectVal, e: event, trigger: 'check' });
       setShowPopup(!showPopup);
     }
   };

diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
@@ -28,7 +28,7 @@ import Option from './Option';
 import OptionGroup from './OptionGroup';
 import PopupContent from './PopupContent';
 import Tag from '../../tag';
-import { TdSelectProps, TdOptionProps, SelectOption, SelectValueChangeTrigger } from '../type';
+import { TdSelectProps, TdOptionProps, SelectOption, SelectValueChangeTrigger, SelectValue } from '../type';
 import { StyledProps } from '../../common';
 import { selectDefaultProps } from '../defaultProps';
 import { PopupVisibleChangeContext } from '../../popup';
@@ -157,7 +157,7 @@ const Select = forwardRefWithStatics(
         const values = getSelectValueArr(value, value[closest], true, valueType, keys);
 
         // 处理onChange回调中的selectedOptions参数
-        const currentSelectedOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
+        const { currentSelectedOptions } = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
         onChange(values, { e, trigger, selectedOptions: currentSelectedOptions });
         return;
       }
@@ -172,7 +172,7 @@ const Select = forwardRefWithStatics(
         e?.stopPropagation?.();
         const values = getSelectValueArr(value, value[index], true, valueType, keys);
         // 处理onChange回调中的selectedOptions参数
-        const currentSelectedOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
+        const { currentSelectedOptions } = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
 
         onChange(values, { e, trigger, selectedOptions: currentSelectedOptions });
         if (isFunction(onRemove)) {
@@ -194,19 +194,22 @@ const Select = forwardRefWithStatics(
 
       const values = currentOptions
         .filter((option) => !option.checkAll && !option.disabled)
-        .map((option) => option[keys?.value || 'value']);
+        .map((option) => (valueType === 'object' ? option : option[keys?.value || 'value']));
 
-      const selectableOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
+      const { currentSelectedOptions } = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
 
       const checkAllValue =
-        !checkAll && selectableOptions.length !== (props.value as Array<SelectOption>)?.length ? selectableOptions : [];
+        !checkAll && currentSelectedOptions.length !== (props.value as Array<SelectOption>)?.length
+          ? currentSelectedOptions
+          : [];
+
       onChange?.(checkAllValue, { e, trigger: checkAll ? 'check' : 'uncheck', selectedOptions: checkAllValue });
     };
 
     // 选中 Popup 某项
     const handleChange = (
       value: string | number | Array<string | number | Record<string, string | number>>,
-      context: { e: React.MouseEvent<HTMLLIElement>; trigger: SelectValueChangeTrigger },
+      context: { e: React.MouseEvent<HTMLLIElement>; trigger: SelectValueChangeTrigger; value?: SelectValue },
     ) => {
       if (multiple) {
         !reserveKeyword && inputValue && onInputChange('', { e: context.e, trigger: 'change' });
@@ -217,9 +220,22 @@ const Select = forwardRefWithStatics(
         }
       }
       // 处理onChange回调中的selectedOptions参数
-      const currentSelectedOptions = getSelectedOptions(value, multiple, valueType, keys, tmpPropOptions);
-
-      onChange?.(value, { ...context, selectedOptions: currentSelectedOptions });
+      const selectedValue = multiple ? context.value : value;
+      const { currentSelectedOptions, currentOption } = getSelectedOptions(
+        value,
+        multiple,
+        valueType,
+        keys,
+        tmpPropOptions,
+        selectedValue,
+      );
+
+      onChange?.(value, {
+        e: context.e,
+        trigger: context.trigger,
+        selectedOptions: currentSelectedOptions,
+        option: currentOption,
+      });
     };
 
     // 处理filter逻辑
@@ -352,8 +368,19 @@ const Select = forwardRefWithStatics(
                   e.stopPropagation();
                   const values = getSelectValueArr(value, value[key], true, valueType, keys);
 
-                  const selectedOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
-                  onChange(values, { e, selectedOptions, trigger: 'uncheck' });
+                  const { currentSelectedOptions } = getSelectedOptions(
+                    values,
+                    multiple,
+                    valueType,
+                    keys,
+                    tmpPropOptions,
+                    value,
+                  );
+                  onChange(values, {
+                    e,
+                    selectedOptions: currentSelectedOptions,
+                    trigger: 'uncheck',
+                  });
                   tagProps?.onClose?.({ e });
 
                   onRemove?.({

diff --git a/src/select/util/helper.ts b/src/select/util/helper.ts
@@ -192,8 +192,10 @@ export const getSelectedOptions = (
   valueType: TdSelectProps['valueType'],
   keys: SelectKeysType,
   tmpPropOptions: Array<unknown>,
+  selectedValue?: SelectValue,
 ) => {
   const isObjectType = valueType === 'object';
+  // 当前所有选中的选项
   let currentSelectedOptions = [];
   if (multiple) {
     currentSelectedOptions = isObjectType
@@ -204,5 +206,10 @@ export const getSelectedOptions = (
       ? [value]
       : tmpPropOptions?.filter?.((v) => value === v[keys?.value || 'value']) || [];
   }
-  return currentSelectedOptions;
+  // 当前操作项
+  const currentOption = isObjectType
+    ? value?.[0] ?? value
+    : currentSelectedOptions.find((option) => option[keys?.value || 'value'] === selectedValue);
+
+  return { currentSelectedOptions, currentOption };
 };