feat(Select): valueDisplay and collapsibleItems params expanded o…

…ptions (#3185)

* feat(select): `valueDisplay` and `collapsible Items` params expanded to option

* fix: pass option separately

* fix: tag-input 不存在选项

* fix: 修复 valueDisplay 参数问题

src/select-input/SelectInput.tsx

@@ -13,6 +13,7 @@ import { InputRef } from '../input';
 
 export interface SelectInputProps extends TdSelectInputProps, StyledProps {
   updateScrollTop?: (content: HTMLDivElement) => void;
+  options?: any[]; // 参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
 }
 
 const SelectInput = React.forwardRef<Partial<PopupRef & InputRef>, SelectInputProps>((originalProps, ref) => {

src/select-input/useMultiple.tsx

@@ -7,6 +7,7 @@ import { SelectInputCommonProperties } from './interface';
 import useControlled from '../hooks/useControlled';
 import useConfig from '../hooks/useConfig';
 import { InputRef } from '../input';
+import { StyledProps } from '../common';
 
 export interface RenderSelectMultipleParams {
   commonInputProps: SelectInputCommonProperties;
@@ -21,7 +22,11 @@ const DEFAULT_KEYS = {
   children: 'children',
 };
 
-export default function useMultiple(props: TdSelectInputProps) {
+export interface SelectInputProps extends TdSelectInputProps, StyledProps {
+  options?: any[]; // 参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+}
+
+export default function useMultiple(props: SelectInputProps) {
   const { value } = props;
   const { classPrefix } = useConfig();
   const tagInputRef = useRef<InputRef>();
@@ -57,6 +62,7 @@ export default function useMultiple(props: TdSelectInputProps) {
       tag={props.tag}
       valueDisplay={props.valueDisplay}
       placeholder={tPlaceholder}
+      options={props.options}
       value={tags}
       inputValue={p.popupVisible && p.allowInput ? tInputValue : ''}
       onChange={onTagInputChange}

src/select/_example/custom-selected.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Select, Tag, Space } from 'tdesign-react';
+import { Select, Tag, Space, SelectOption } from 'tdesign-react';
 
 const options = [
   { label: '选项一', value: '1' },
@@ -51,15 +51,15 @@ const CustomSelected = () => {
         ]}
         valueDisplay={({ value, onClose }) =>
           Array.isArray(value) && value.length > 0
-            ? value.map((v: string, idx: number) => (
+            ? value.map((v: SelectOption, idx: number) => (
                 <Tag
                   key={idx}
                   onClose={(context) => {
                     context.e && context.e.stopPropagation();
                     onClose(idx);
                   }}
                   closable
-                >{`${v}选项`}</Tag>
+                >{`${v.label}选项`}</Tag>
               ))
             : null
         }

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: selectedOptions, onClose });
       }
       return parseContentTNode(valueDisplay, { value: selectedLabel, onClose: noop });
     };
@@ -434,6 +434,7 @@ const Select = forwardRefWithStatics(
           allowInput={(filterable ?? local.filterable) || isFunction(filter)}
           multiple={multiple}
           value={selectedLabel}
+          options={props.options}
           valueDisplay={renderValueDisplay()}
           clearable={clearable}
           disabled={disabled}

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 自定义选中项呈现的内容和多选状态下设置折叠项内容
+}
 
 const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
   const props = useDefaultProps<TagInputProps>(originalProps, tagInputDefaultProps);

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 自定义选中项呈现的内容和多选状态下设置折叠项内容
+}
 
 // handle tag add and remove
 export default function useTagList(props: TagInputProps) {
@@ -99,11 +101,13 @@ export default function useTagList(props: TagInputProps) {
     // 超出省略
     if (newList.length !== tagValue.length) {
       const len = tagValue.length - newList.length;
+      // 这里会从selectInput/SelectInput中传递options参数，用于自定义选中项呈现的内容和多选状态下设置折叠项内容
+      const options = Array.isArray(props?.options) ? props.options : tagValue;
       const params = {
         value: tagValue,
         count: tagValue.length - minCollapsedNum,
         collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length),
-        collapsedSelectedItems: tagValue.slice(minCollapsedNum, tagValue.length),
+        collapsedSelectedItems: options.slice(minCollapsedNum, tagValue.length),
         onClose,
       };
       const more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;