feat(select): valueDisplay and collapsible Items params expanded …

…to option
Tencent · Nov 6, 2024 · 5a51fe0 · 5a51fe0
1 parent fc9fec8
commit 5a51fe0
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx
@@ -46,6 +46,13 @@ export default function useMultiple(props: TdSelectInputProps) {
     props.onTagChange?.(val, context);
   };
 
+  const getOptions = () => {
+    if (props.multiple && Array.isArray(props.value)) {
+      return props.value;
+    }
+    return [];
+  };
+
   const renderSelectMultiple = (p: RenderSelectMultipleParams) => (
     <TagInput
       ref={tagInputRef}
@@ -57,6 +64,7 @@ export default function useMultiple(props: TdSelectInputProps) {
       tag={props.tag}
       valueDisplay={props.valueDisplay}
       placeholder={tPlaceholder}
+      options={getOptions()}
       value={tags}
       inputValue={p.popupVisible && p.allowInput ? tInputValue : ''}
       onChange={onTagInputChange}

diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
@@ -369,7 +369,7 @@ const Select = forwardRefWithStatics(
         return valueDisplay;
       }
       if (multiple) {
-        return ({ onClose }) => parseContentTNode(valueDisplay, { value: selectedLabel, onClose });
+        return ({ onClose }) => parseContentTNode(valueDisplay, { value: props.options, onClose });
       }
       return parseContentTNode(valueDisplay, { value: selectedLabel, onClose: noop });
     };
@@ -433,7 +433,7 @@ const Select = forwardRefWithStatics(
           autofocus={props.autofocus}
           allowInput={(filterable ?? local.filterable) || isFunction(filter)}
           multiple={multiple}
-          value={selectedLabel}
+          value={props.options}
           valueDisplay={renderValueDisplay()}
           clearable={clearable}
           disabled={disabled}

diff --git a/src/tag-input/TagInput.tsx b/src/tag-input/TagInput.tsx
@@ -15,7 +15,9 @@ import { StyledProps } from '../common';
 import { tagInputDefaultProps } from './defaultProps';
 import useDefaultProps from '../hooks/useDefaultProps';
 
-export interface TagInputProps extends TdTagInputProps, StyledProps {}
+export interface TagInputProps extends TdTagInputProps, StyledProps {
+  options?: any[]; // 参数穿透options, 给SelectInput/SelectInput在 multiple 模式下使用
+}
 
 const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
   const props = useDefaultProps<TagInputProps>(originalProps, tagInputDefaultProps);

diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx
@@ -9,7 +9,9 @@ import { DragSortInnerProps } from '../hooks/useDragSorter';
 
 export type ChangeParams = [TagInputChangeContext];
 
-interface TagInputProps extends TdTagInputProps, DragSortInnerProps {}
+interface TagInputProps extends TdTagInputProps, DragSortInnerProps {
+  options?: any[]; // 参数穿透options, 给SelectInput/SelectInput在 multiple 模式下使用
+}
 
 // handle tag add and remove
 export default function useTagList(props: TagInputProps) {
@@ -103,7 +105,7 @@ export default function useTagList(props: TagInputProps) {
         value: tagValue,
         count: tagValue.length - minCollapsedNum,
         collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length),
-        collapsedSelectedItems: tagValue.slice(minCollapsedNum, tagValue.length),
+        collapsedSelectedItems: props.options.slice(minCollapsedNum, tagValue.length),
         onClose,
       };
       const more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;