refactor: optimize value display logic

RylanBot · RylanBot · commit a95f2db23ff1 · 2025-10-15T14:45:36.000+08:00
diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
-import { pick } from 'lodash-es';
+import { isObject, pick } from 'lodash-es';
 
 import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
@@ -33,16 +33,30 @@ const COMMON_PROPERTIES = [
   'prefixIcon',
 ];
 
+const DEFAULT_KEYS: TdSelectInputProps['keys'] = {
+  label: 'label',
+  value: 'value',
+};
+
+function getOptionLabel(value: TdSelectInputProps['value'], keys: TdSelectInputProps['keys']) {
+  const iKeys = keys || DEFAULT_KEYS;
+  return isObject(value) ? value[iKeys.label] : value;
+}
+
 export default function useSingle(props: TdSelectInputProps) {
   const { value, loading } = props;
-  const { classPrefix } = useConfig();
 
+  const optionLabel = getOptionLabel(value, props.keys);
+  const singleValueDisplay = props.valueDisplay ?? optionLabel;
+  const showLabelNode = React.isValidElement(singleValueDisplay);
+
+  const { classPrefix } = useConfig();
   const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange);
 
   const inputRef = useRef<InputRef>(null);
   const blurTimeoutRef = useRef(null);
 
-  const [labelWidth, setLabelWidth] = useState(0);
+  const [labelWidth, setLabelWidth] = useState<number>(0);
 
   const commonInputProps: SelectInputCommonProperties = {
     ...pick(props, COMMON_PROPERTIES),
@@ -73,10 +87,6 @@ export default function useSingle(props: TdSelectInputProps) {
     popupVisible: boolean,
     onInnerBlur?: (context: { e: React.FocusEvent<HTMLInputElement> }) => void,
   ) => {
-    const singleValueDisplay = !props.multiple ? props.valueDisplay : null;
-
-    const showPseudoPlaceholder = inputValue?.length < 1 && React.isValidElement(singleValueDisplay);
-
     const handleBlur = (value, ctx) => {
       if (blurTimeoutRef.current) {
         clearTimeout(blurTimeoutRef.current);
@@ -108,32 +118,32 @@ export default function useSingle(props: TdSelectInputProps) {
       if (popupVisible && inputValue) {
         return inputValue;
       }
-      if (popupVisible && singleValueDisplay && !React.isValidElement(singleValueDisplay)) {
+      if (props.allowInput && popupVisible && !showLabelNode) {
         return '';
       }
-      if (!popupVisible && singleValueDisplay && !React.isValidElement(singleValueDisplay)) {
-        return String(singleValueDisplay);
+      if (!showLabelNode) {
+        return singleValueDisplay;
       }
       return inputValue;
     };
 
     const displayedPlaceholder = () => {
-      if (popupVisible && singleValueDisplay && !React.isValidElement(singleValueDisplay)) {
-        return String(singleValueDisplay);
+      if (popupVisible && !showLabelNode) {
+        return singleValueDisplay;
       }
-      if (showPseudoPlaceholder) return '';
+      if (showLabelNode) return '';
       return props.placeholder;
     };
 
-    const pseudoPlaceholder = showPseudoPlaceholder ? (
+    const labelNode = showLabelNode ? (
       <div
         style={{
           position: 'absolute',
           left: `${labelWidth + 16}px`,
           top: '50%',
           transform: 'translateY(-50%)',
           pointerEvents: 'none',
-          textAlign: 'inherit',
+          textAlign: 'initial',
           zIndex: 3,
           // 输入状态，降低透明度，仿造 placeholder 效果
           opacity: popupVisible && props.allowInput ? 0.5 : undefined,
@@ -147,13 +157,16 @@ export default function useSingle(props: TdSelectInputProps) {
       <Input
         ref={inputRef}
         // 当 label 为 自定义节点时，input 为空，确保此时 clear icon 可见
-        showClearIconOnEmpty={props.clearable && !!singleValueDisplay}
+        showClearIconOnEmpty={props.clearable && showLabelNode}
         {...commonInputProps}
         suffix={
-          <>
-            {pseudoPlaceholder}
-            {commonInputProps.suffix}
-          </>
+          labelNode ||
+          (commonInputProps.suffix && (
+            <>
+              {labelNode}
+              {commonInputProps.suffix}
+            </>
+          ))
         }
         autoWidth={props.autoWidth}
         allowInput={props.allowInput}
diff --git a/packages/components/select/base/Select.tsx b/packages/components/select/base/Select.tsx
@@ -1,14 +1,12 @@
 import React, {
   Children,
-  KeyboardEvent,
-  WheelEvent,
   cloneElement,
   isValidElement,
   useCallback,
   useEffect,
   useMemo,
   useRef,
-  useState,
+  useState
 } from 'react';
 import classNames from 'classnames';
 import { debounce, get, isFunction } from 'lodash-es';
@@ -324,7 +322,7 @@ const Select = forwardRefWithStatics(
         return;
       }
       if (isFunction(onSearch)) {
-        onSearch(value, { e: context.e as KeyboardEvent<HTMLDivElement> });
+        onSearch(value, { e: context.e as React.KeyboardEvent<HTMLDivElement> });
         return;
       }
     };
@@ -397,13 +395,7 @@ const Select = forwardRefWithStatics(
 
     const renderValueDisplay = useMemo(() => {
       if (!valueDisplay) {
-        if (!multiple) {
-          // if (typeof selectedLabel !== 'string') {
-          //   return selectedLabel;
-          // }
-          // return '';
-          return selectedLabel;
-        }
+        if (!multiple) return selectedLabel;
         return ({ value: val }) =>
           val.slice(0, minCollapsedNum ? minCollapsedNum : val.length).map((v: string, key: number) => {
             const filterOption: SelectOption & { disabled?: boolean } = options?.find((option) => option.label === v);
@@ -498,11 +490,11 @@ const Select = forwardRefWithStatics(
 
     const { onMouseEnter, onMouseLeave } = props;
 
-    const handleEnter = (_, context: { inputValue: string; e: KeyboardEvent<HTMLDivElement> }) => {
+    const handleEnter = (_, context: { inputValue: string; e: React.KeyboardEvent<HTMLDivElement> }) => {
       onEnter?.({ ...context, value });
     };
 
-    const handleScroll = ({ e }: { e: WheelEvent<HTMLDivElement> }) => {
+    const handleScroll = ({ e }: { e: React.WheelEvent<HTMLDivElement> }) => {
       toggleIsScrolling(true);
 
       onScroll?.({ e });
diff --git a/packages/components/tree-select/TreeSelect.tsx b/packages/components/tree-select/TreeSelect.tsx
@@ -1,25 +1,26 @@
-import React, { useCallback, useMemo, useRef, forwardRef, ElementRef, useImperativeHandle } from 'react';
-import { isFunction } from 'lodash-es';
+import React, { ElementRef, forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import classNames from 'classnames';
-import type { TdTreeSelectProps, TreeSelectValue } from './type';
-import type { StyledProps, TreeOptionData } from '../common';
+import { isFunction } from 'lodash-es';
+import noop from '../_util/noop';
+import parseTNode from '../_util/parseTNode';
 import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
-import Tree from '../tree';
-import type { TreeInstanceFunctions, TreeProps } from '../tree';
-import SelectInput, { SelectInputProps } from '../select-input/SelectInput';
+import useDefaultProps from '../hooks/useDefaultProps';
 import { usePersistFn } from '../hooks/usePersistFn';
 import useSwitch from '../hooks/useSwitch';
-import noop from '../_util/noop';
+import SelectInput, { type SelectInputProps } from '../select-input/SelectInput';
+import Tree from '../tree';
+import { treeSelectDefaultProps } from './defaultProps';
+import { useTreeSelectLocale } from './hooks/useTreeSelectLocale';
+import { useTreeSelectPassThroughProps } from './hooks/useTreeSelectPassthroughProps';
 import { useTreeSelectUtils } from './hooks/useTreeSelectUtils';
 import { SelectArrow } from './SelectArrow';
-import { useTreeSelectPassThroughProps } from './hooks/useTreeSelectPassthroughProps';
-import { useTreeSelectLocale } from './hooks/useTreeSelectLocale';
-import { treeSelectDefaultProps } from './defaultProps';
-import parseTNode from '../_util/parseTNode';
-import useDefaultProps from '../hooks/useDefaultProps';
-import { PopupRef } from '../popup';
-import { InputRef } from '../input';
+
+import type { StyledProps, TreeOptionData } from '../common';
+import type { InputRef } from '../input';
+import type { PopupRef } from '../popup';
+import type { TreeInstanceFunctions, TreeProps } from '../tree';
+import type { TdTreeSelectProps, TreeSelectValue } from './type';
 
 export interface TreeSelectProps<DataOption extends TreeOptionData = TreeOptionData>
   extends TdTreeSelectProps<DataOption>,
@@ -75,6 +76,8 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
     onEnter,
   } = props;
 
+  const showLoading = !disabled && loading;
+
   const selectInputProps = useTreeSelectPassThroughProps(props);
   const [value, onChange] = useControlled(props, 'value', props.onChange);
   const [popupVisible, setPopupVisible] = useControlled(props, 'popupVisible', props.onPopupVisibleChange);
@@ -143,11 +146,7 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [normalizeValue, value, data]);
 
-  const internalInputValue = useMemo(() => {
-    if (multiple) return normalizedValue;
-    // 可筛选、单选、弹框时内容为过滤值
-    return filterable && popupVisible ? filterInput : normalizedValue[0] || '';
-  }, [multiple, normalizedValue, filterable, popupVisible, filterInput]);
+  const internalValue = useMemo(() => (multiple ? normalizedValue : normalizedValue[0]), [multiple, normalizedValue]);
 
   // @ts-ignore TODO: remove it
   const normalizedValueDisplay: SelectInputProps['valueDisplay'] = useMemo(() => {
@@ -164,30 +163,6 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
     return normalizedValue.length ? displayNode : '';
   }, [valueDisplay, multiple, normalizedValue]);
 
-  const internalInputValueDisplay: SelectInputProps['valueDisplay'] = useMemo(() => {
-    // 只有单选且下拉展开时需要隐藏 valueDisplay
-    if (filterable && !multiple && popupVisible) {
-      return undefined;
-    }
-    return normalizedValueDisplay;
-  }, [filterable, popupVisible, multiple, normalizedValueDisplay]);
-
-  const inputPlaceholder = useMemo(() => {
-    // 可筛选、单选、弹框且有值时提示当前值
-    if (filterable && !multiple && popupVisible && normalizedValue.length) {
-      // 设置了 valueDisplay 时，优先展示 valueDisplay
-      const valueDisplayPlaceholder = normalizedValueDisplay;
-      if (typeof valueDisplayPlaceholder === 'string') {
-        return valueDisplayPlaceholder;
-      }
-
-      return typeof normalizedValue[0].label === 'string' ? normalizedValue[0].label : String(normalizedValue[0].value);
-    }
-    return placeholder;
-  }, [filterable, multiple, popupVisible, normalizedValue, placeholder, normalizedValueDisplay]);
-
-  const showLoading = !disabled && loading;
-
   /* ---------------------------------handler---------------------------------------- */
 
   const handleFilter = useCallback<TreeProps['filter']>(
@@ -243,7 +218,7 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
       const { index, e, trigger } = ctx;
       const node = getNodeItem(normalizedValue[index].value);
       onChange(
-        normalizedValue.filter((value, i) => i !== index).map(({ value, label }) => formatValue(value, label)),
+        normalizedValue.filter((_, i) => i !== index).map(({ value, label }) => formatValue(value, label)),
         { node, data: node?.data, trigger, e },
       );
       onRemove?.({
@@ -328,13 +303,13 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
       {...selectInputProps}
       ref={selectInputRef}
       className={classNames(`${classPrefix}-tree-select`, className)}
-      value={internalInputValue}
+      value={internalValue}
       inputValue={filterInput}
       panel={renderTree()}
       allowInput={filterable}
       inputProps={{ ...inputProps, size }}
       tagInputProps={{ size, excessTagsDisplayType: 'break-line', inputProps, tagProps: props.tagProps }}
-      placeholder={inputPlaceholder}
+      placeholder={placeholder}
       popupVisible={popupVisible && !disabled}
       onInputChange={handleFilterChange}
       onPopupVisibleChange={onInnerPopupVisibleChange}
@@ -353,7 +328,7 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
       }
       collapsedItems={collapsedItems}
       label={parseTNode(label || prefixIcon)}
-      valueDisplay={internalInputValueDisplay}
+      valueDisplay={normalizedValueDisplay}
     />
   );
 });
