fix: custom keys

Author: RylanBot

packages/components/select/base/Select.tsx

@@ -100,6 +100,9 @@ const Select = forwardRefWithStatics(
     } = props;
 
     const [value, onChange] = useControlled(props, 'value', props.onChange);
+
+    const { valueKey, labelKey, disabledKey } = useMemo(() => getKeyMapping(keys), [keys]);
+
     const selectInputRef = useRef(null);
     const { classPrefix } = useConfig();
     const { overlayClassName, onScroll, onScrollToBottom, ...restPopupProps } = popupProps || {};
@@ -124,9 +127,7 @@ const Select = forwardRefWithStatics(
         const isDisabledCheckAll = (opt: TdOptionProps) => opt.checkAll && opt.disabled;
         if (!multiple || currentOptions.some((opt) => !isSelectOptionGroup(opt) && isDisabledCheckAll(opt))) return;
 
-        const { valueKey } = getKeyMapping(keys);
         const isObjectType = valueType === 'object';
-
         const enabledOptions: SelectOption[] = [];
 
         currentOptions.forEach((option) => {
@@ -184,16 +185,15 @@ const Select = forwardRefWithStatics(
           selectedOptions: currentSelectedOptions,
         });
       },
-      [currentOptions, keys, multiple, onChange, value, valueToOption, valueType],
+      [currentOptions, keys, multiple, value, valueKey, valueToOption, valueType, onChange],
     );
 
     const selectedLabel = useMemo(() => {
-      const { labelKey } = getKeyMapping(keys);
       if (multiple) {
         return selectedOptions.map((selectedOption) => get(selectedOption || {}, labelKey) || '');
       }
       return get(selectedOptions[0] || {}, labelKey) || undefined;
-    }, [selectedOptions, keys, multiple]);
+    }, [multiple, selectedOptions, labelKey]);
 
     // 可以根据触发来源，自由定制标签变化时的筛选器行为
     const onTagChange = (_currentTags: SelectInputValue, context) => {
@@ -291,6 +291,7 @@ const Select = forwardRefWithStatics(
     };
 
     const { hoverIndex, handleKeyDown } = useKeyboardControl({
+      keys,
       displayOptions: flattenedOptions as TdOptionProps[],
       max,
       multiple,
@@ -440,7 +441,6 @@ const Select = forwardRefWithStatics(
         }
         return ({ value: val }) =>
           val.slice(0, minCollapsedNum ? minCollapsedNum : val.length).map((_, index: number) => {
-            const { valueKey, labelKey, disabledKey } = getKeyMapping(keys);
             const targetVal = get(selectedOptions[index], valueKey);
             const targetLabel = get(selectedOptions[index], labelKey);
             const targetOption = valueToOption[targetVal];

packages/components/select/hooks/useKeyboardControl.ts

@@ -1,11 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import useConfig from '../../hooks/useConfig';
-import { getSelectValueArr } from '../util/helper';
+import { getKeyMapping, getSelectValueArr } from '../util/helper';
 
-import type { SelectOption, SelectValue, SelectValueChangeTrigger, TdOptionProps } from '../type';
+import type { SelectOption, SelectValue, SelectValueChangeTrigger, TdOptionProps, TdSelectProps } from '../type';
 
 export type useKeyboardControlType = {
+  keys: TdSelectProps['keys'];
   max: number;
   multiple: boolean;
   value: SelectValue<SelectOption>;
@@ -25,6 +26,7 @@ export type useKeyboardControlType = {
 };
 
 export default function useKeyboardControl({
+  keys,
   max,
   multiple,
   value,
@@ -36,11 +38,26 @@ export default function useKeyboardControl({
   selectInputRef,
   toggleIsScrolling,
 }: useKeyboardControlType) {
-  const [hoverIndex, changeHoverIndex] = useState(-1);
-
   const { classPrefix } = useConfig();
-  // 全选判断
+
   const isCheckAll = useRef(false);
+  const [hoverIndex, changeHoverIndex] = useState(-1);
+
+  const { valueKey, disabledKey } = useMemo(() => getKeyMapping(keys), [keys]);
+
+  useEffect(() => {
+    if (!innerPopupVisible) {
+      changeHoverIndex(-1);
+    } else if (!multiple) {
+      // 单选时，hoverIndex 初始值为选中值的索引
+      const index = displayOptions.findIndex((option) => option.value === value);
+      changeHoverIndex(index >= 0 ? index : -1);
+    } else {
+      changeHoverIndex(-1);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [innerPopupVisible]);
+
   useEffect(() => {
     if (!Array.isArray(value)) return;
     isCheckAll.current =
@@ -67,19 +84,6 @@ export default function useKeyboardControl({
     }
   };
 
-  useEffect(() => {
-    if (!innerPopupVisible) {
-      changeHoverIndex(-1);
-    } else if (!multiple) {
-      // 单选时，hoverIndex 初始值为选中值的索引
-      const index = displayOptions.findIndex((option) => option.value === value);
-      changeHoverIndex(index >= 0 ? index : -1);
-    } else {
-      changeHoverIndex(-1);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [innerPopupVisible]);
-
   const handleKeyDown = (_value: string, { e }: { e: React.KeyboardEvent<HTMLInputElement> }) => {
     const optionsListLength = displayOptions.length;
 
@@ -92,7 +96,7 @@ export default function useKeyboardControl({
         else if (hoverIndex === 0 || hoverIndex > optionsListLength - 1) newIndex = optionsListLength - 1;
         else newIndex -= 1;
 
-        if (displayOptions[newIndex]?.disabled) newIndex -= 1;
+        if (displayOptions[newIndex]?.[disabledKey]) newIndex -= 1;
 
         changeHoverIndex(newIndex);
         handleKeyboardScroll(newIndex);
@@ -119,7 +123,7 @@ export default function useKeyboardControl({
           const selectedOptions = displayOptions[hoverIndex];
 
           if (selectedOptions)
-            handleChange(selectedOptions.value, {
+            handleChange(selectedOptions[valueKey], {
               trigger: 'check',
               e,
             });
@@ -128,17 +132,16 @@ export default function useKeyboardControl({
           handleKeyboardScroll(0);
         } else {
           if (displayOptions[hoverIndex].checkAll) {
-            onCheckAllChange(!isCheckAll.current);
+            onCheckAllChange(!isCheckAll.current, e);
             return;
           }
 
-          const optionValue = displayOptions[hoverIndex]?.value;
-
+          const optionValue = displayOptions[hoverIndex]?.[valueKey];
           if (!optionValue) return;
+
           const newValue = value as Array<SelectValue>;
           const valueIndex = newValue.indexOf(optionValue);
           const isSelected = valueIndex > -1;
-
           const values = getSelectValueArr(value, optionValue, isSelected);
 
           if (max > 0 && values.length > max) return; // 如果已选达到最大值 则不处理

packages/components/select/hooks/useOptions.ts

@@ -1,5 +1,6 @@
+import React, { ReactElement, ReactNode, useEffect, useMemo, useState } from 'react';
 import { get } from 'lodash-es';
-import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
+
 import Option from '../base/Option';
 import OptionGroup from '../base/OptionGroup';
 import { getKeyMapping, getValueToOption, type ValueToOption } from '../util/helper';
@@ -42,6 +43,8 @@ function useOptions(
   const [tmpPropOptions, setTmpPropOptions] = useState<SelectOption[]>([]);
   const [selectedOptions, setSelectedOptions] = useState<SelectOption[]>([]);
 
+  const { valueKey, labelKey } = useMemo(() => getKeyMapping(keys), [keys]);
+
   useEffect(() => {
     setFlattenedOptions(flattenOptions(currentOptions));
   }, [currentOptions]);
@@ -74,7 +77,6 @@ function useOptions(
       transformedOptions = arrayChildren?.map<SelectOption>((v) => handlerOptionElement(v));
     }
     if (keys) {
-      const { valueKey, labelKey } = getKeyMapping(keys);
       // 如果有定制 keys 先做转换
       transformedOptions = transformedOptions?.map<SelectOption>((option) => ({
         ...option,
@@ -91,8 +93,6 @@ function useOptions(
 
   // 同步 value 对应的 options
   useEffect(() => {
-    const { valueKey, labelKey } = getKeyMapping(keys);
-
     setSelectedOptions((oldSelectedOptions: SelectOption[]) => {
       const createOptionFromValue = (item: OptionValueType) => {
         if (valueType === 'value') {