diff --git a/src/select-input/SelectInput.tsx b/src/select-input/SelectInput.tsx index 76323b52fd..c84cdc0dac 100644 --- a/src/select-input/SelectInput.tsx +++ b/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, SelectInputProps>((originalProps, ref) => { diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx index cfe4d98637..e589271d36 100644 --- a/src/select-input/useMultiple.tsx +++ b/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(); @@ -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} diff --git a/src/select/_example/custom-selected.tsx b/src/select/_example/custom-selected.tsx index c3a338f48e..0054b6423a 100644 --- a/src/select/_example/custom-selected.tsx +++ b/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,7 +51,7 @@ const CustomSelected = () => { ]} valueDisplay={({ value, onClose }) => Array.isArray(value) && value.length > 0 - ? value.map((v: string, idx: number) => ( + ? value.map((v: SelectOption, idx: number) => ( { @@ -59,7 +59,7 @@ const CustomSelected = () => { onClose(idx); }} closable - >{`${v}选项`} + >{`${v.label}选项`} )) : null } diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx index 26924dccd7..d0a5fe988a 100644 --- 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: 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} diff --git a/src/tag-input/TagInput.tsx b/src/tag-input/TagInput.tsx index 4c4b121903..875080bd94 100644 --- 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 自定义选中项呈现的内容和多选状态下设置折叠项内容 +} const TagInput = forwardRef((originalProps, ref) => { const props = useDefaultProps(originalProps, tagInputDefaultProps); diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx index 2066100780..721669dd7e 100644 --- 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 自定义选中项呈现的内容和多选状态下设置折叠项内容 +} // 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;