diff --git a/assets/index.less b/assets/index.less index cbd4a1309..e9c6e11e5 100644 --- a/assets/index.less +++ b/assets/index.less @@ -117,8 +117,20 @@ } } + .@{select-prefix}-selection-overflow { + display: flex; + flex-wrap: wrap; + width: 100%; + + &-item { + flex: none; + max-width: 100%; + } + } + .@{select-prefix}-selection-search { position: relative; + max-width: 100%; &-input, &-mirror { diff --git a/examples/tags.tsx b/examples/tags.tsx index 20368ce26..c76dab474 100644 --- a/examples/tags.tsx +++ b/examples/tags.tsx @@ -14,10 +14,20 @@ for (let i = 10; i < 36; i += 1) { const Test: React.FC = () => { const [disabled, setDisabled] = React.useState(false); - const [value, setValue] = React.useState(['name2', 'name3']); - const [maxTagCount, setMaxTagCount] = React.useState(null); + const [value, setValue] = React.useState([ + 'name1', + 'name2', + 'name3', + 'name4', + 'name5', + 'a10', + 'b11', + 'c12', + 'd13', + ]); + const [maxTagCount, setMaxTagCount] = React.useState('responsive'); - const toggleMaxTagCount = (count: number) => { + const toggleMaxTagCount = (count: number | 'responsive') => { setMaxTagCount(count); }; @@ -29,7 +39,7 @@ const Test: React.FC = () => { + + {/* Measure Node */} + + {inputValue}  + + + ); + + // >>> Selections + const selectionNode = ( + ); return ( <> {selectionNode} - { - setFocused(true); - }} - onBlur={() => { - setFocused(false); - }} - > - - - {/* Measure Node */} - - {inputValue}  - - - {!values.length && !inputValue && ( - {placeholder} + {placeholder} )} ); diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx index ddc276d42..7c3350df5 100644 --- a/src/Selector/index.tsx +++ b/src/Selector/index.tsx @@ -69,7 +69,7 @@ export interface SelectorProps { removeIcon?: RenderNode; // Tags - maxTagCount?: number; + maxTagCount?: number | 'responsive'; maxTagTextLength?: number; maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode); tagRender?: (props: CustomTagProps) => React.ReactElement; diff --git a/src/generate.tsx b/src/generate.tsx index 5a6d1cac1..a3b38ad71 100644 --- a/src/generate.tsx +++ b/src/generate.tsx @@ -129,7 +129,7 @@ export interface SelectProps extends Re getInputElement?: () => JSX.Element; optionLabelProp?: string; maxTagTextLength?: number; - maxTagCount?: number; + maxTagCount?: number | 'responsive'; maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode); tokenSeparators?: string[]; tagRender?: (props: CustomTagProps) => React.ReactElement; diff --git a/src/interface/generator.ts b/src/interface/generator.ts index f56dad888..ccccea005 100644 --- a/src/interface/generator.ts +++ b/src/interface/generator.ts @@ -14,24 +14,18 @@ export interface LabelValueType { value?: RawValueType; label?: React.ReactNode; } -export type DefaultValueType = - | RawValueType - | RawValueType[] - | LabelValueType - | LabelValueType[]; +export type DefaultValueType = RawValueType | RawValueType[] | LabelValueType | LabelValueType[]; export interface DisplayLabelValueType extends LabelValueType { disabled?: boolean; } -export type SingleType = MixType extends (infer Single)[] - ? Single - : MixType; +export type SingleType = MixType extends (infer Single)[] ? Single : MixType; export type OnClear = () => void; export type CustomTagProps = { - label: DefaultValueType; + label: React.ReactNode; value: DefaultValueType; disabled: boolean; onClose: (event?: React.MouseEvent) => void; @@ -59,19 +53,12 @@ export type FilterOptions = ( }, ) => OptionsType; -export type FilterFunc = ( - inputValue: string, - option?: OptionType, -) => boolean; +export type FilterFunc = (inputValue: string, option?: OptionType) => boolean; export declare function RefSelectFunc( - Component: React.RefForwardingComponent< - RefSelectProps, - SelectProps - >, + Component: React.RefForwardingComponent>, ): React.ForwardRefExoticComponent< - React.PropsWithoutRef> & - React.RefAttributes + React.PropsWithoutRef> & React.RefAttributes >; export type FlattenOptionsType = { diff --git a/tests/__snapshots__/Multiple.test.tsx.snap b/tests/__snapshots__/Multiple.test.tsx.snap index 03be8fbcd..d3f03dbbc 100644 --- a/tests/__snapshots__/Multiple.test.tsx.snap +++ b/tests/__snapshots__/Multiple.test.tsx.snap @@ -7,33 +7,42 @@ exports[`Select.Multiple render not display maxTagPlaceholder if maxTagCount not
- - - - + +
+ @@ -48,86 +57,110 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
- - - One - - - - - - Two - -
`; @@ -139,86 +172,110 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
- - - One - - - - - - Two - -
`; @@ -230,75 +287,94 @@ exports[`Select.Multiple render truncates values by maxTagTextLength 1`] = `
- - - On... - - - - - - Tw... - -
`; diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap index 592568685..1be6a1c65 100644 --- a/tests/__snapshots__/Tags.test.tsx.snap +++ b/tests/__snapshots__/Tags.test.tsx.snap @@ -8,73 +8,92 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
- - - Jack - - - - - - foo - -
- - - - + +
+
@@ -252,83 +280,107 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
- - - One - - - - - - Two - -
`; @@ -340,83 +392,107 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
- - - One - - - - - - Two - -
`; @@ -428,72 +504,91 @@ exports[`Select.Tags render truncates values by maxTagTextLength 1`] = `
- - - On... - - - - - - Tw... - -
`;