Skip to content

Commit 42fcf0a

Browse files
zombieJzombieJ
committed
fix: Not show maxTagPlaceholder if max count not reach
1 parent 65a1438 commit 42fcf0a

File tree

6 files changed

+470
-46
lines changed

6 files changed

+470
-46
lines changed

‎src/Selector/MultipleSelector.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ interface SelectorProps extends InnerSelectorProps {
1717
// Tags
1818
maxTagCount?: number;
1919
maxTagTextLength?: number;
20-
maxTagPlaceholder?: (omittedValues: LabelValueType[]) => React.ReactNode;
20+
maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode);
2121
tokenSeparators?: string[];
2222

2323
// Motion
@@ -103,7 +103,7 @@ const SelectSelector: React.FC<SelectorProps> = ({
103103
}
104104

105105
// Fill rest
106-
if (restCount) {
106+
if (restCount > 0) {
107107
displayValues.push({
108108
key: REST_TAG_KEY,
109109
label:

‎src/Selector/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export interface SelectorProps {
6565
// Tags
6666
maxTagCount?: number;
6767
maxTagTextLength?: number;
68-
maxTagPlaceholder?: (omittedValues: LabelValueType[]) => React.ReactNode;
68+
maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode);
6969

7070
// Motion
7171
choiceTransitionName?: string;

‎src/generate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export interface SelectProps<OptionsType extends object[], ValueType> extends Re
103103
optionLabelProp?: string;
104104
maxTagTextLength?: number;
105105
maxTagCount?: number;
106-
maxTagPlaceholder?: (omittedValues: LabelValueType[]) => React.ReactNode;
106+
maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode);
107107
tokenSeparators?: string[];
108108
showAction?: ('focus' | 'click')[];
109109
tabIndex?: number;

‎tests/__snapshots__/Multiple.test.tsx.snap‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,219 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Select.Multiple render not display maxTagPlaceholder if maxTagCount not reach 1`] = `
4+
<div
5+
class="rc-select rc-select-multiple rc-select-show-search"
6+
>
7+
<div
8+
class="rc-select-selector"
9+
>
10+
<span
11+
class="rc-select-selection-search"
12+
style="width: 0px;"
13+
>
14+
<input
15+
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
16+
aria-autocomplete="list"
17+
aria-controls="rc_select_TEST_OR_SSR_list"
18+
aria-haspopup="listbox"
19+
aria-owns="rc_select_TEST_OR_SSR_list"
20+
autocomplete="off"
21+
class="rc-select-selection-search-input"
22+
id="rc_select_TEST_OR_SSR"
23+
role="combobox"
24+
style="opacity: 0;"
25+
value=""
26+
/>
27+
<span
28+
aria-hidden="true"
29+
class="rc-select-selection-search-mirror"
30+
>
31+
 
32+
</span>
33+
</span>
34+
<span
35+
class="rc-select-selection-placeholder"
36+
/>
37+
</div>
38+
</div>
39+
`;
40+
41+
exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPlaceholder 1`] = `
42+
<div
43+
class="rc-select rc-select-multiple rc-select-show-search"
44+
>
45+
<div
46+
class="rc-select-selector"
47+
>
48+
<span
49+
class="rc-select-selection-item"
50+
>
51+
<span
52+
class="rc-select-selection-item-content"
53+
>
54+
One
55+
</span>
56+
<span
57+
aria-hidden="true"
58+
class="rc-select-selection-item-remove"
59+
style="user-select: none;"
60+
unselectable="on"
61+
>
62+
<span
63+
class="rc-select-selection-item-remove-icon"
64+
>
65+
×
66+
</span>
67+
</span>
68+
</span>
69+
<span
70+
class="rc-select-selection-item"
71+
>
72+
<span
73+
class="rc-select-selection-item-content"
74+
>
75+
Two
76+
</span>
77+
<span
78+
aria-hidden="true"
79+
class="rc-select-selection-item-remove"
80+
style="user-select: none;"
81+
unselectable="on"
82+
>
83+
<span
84+
class="rc-select-selection-item-remove-icon"
85+
>
86+
×
87+
</span>
88+
</span>
89+
</span>
90+
<span
91+
class="rc-select-selection-item"
92+
>
93+
<span
94+
class="rc-select-selection-item-content"
95+
>
96+
<span>
97+
Omitted
98+
</span>
99+
</span>
100+
</span>
101+
<span
102+
class="rc-select-selection-search"
103+
style="width: 0px;"
104+
>
105+
<input
106+
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
107+
aria-autocomplete="list"
108+
aria-controls="rc_select_TEST_OR_SSR_list"
109+
aria-haspopup="listbox"
110+
aria-owns="rc_select_TEST_OR_SSR_list"
111+
autocomplete="off"
112+
class="rc-select-selection-search-input"
113+
id="rc_select_TEST_OR_SSR"
114+
role="combobox"
115+
style="opacity: 0;"
116+
value=""
117+
/>
118+
<span
119+
aria-hidden="true"
120+
class="rc-select-selection-search-mirror"
121+
>
122+
 
123+
</span>
124+
</span>
125+
</div>
126+
</div>
127+
`;
128+
129+
exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPlaceholder function 1`] = `
130+
<div
131+
class="rc-select rc-select-multiple rc-select-show-search"
132+
>
133+
<div
134+
class="rc-select-selector"
135+
>
136+
<span
137+
class="rc-select-selection-item"
138+
>
139+
<span
140+
class="rc-select-selection-item-content"
141+
>
142+
One
143+
</span>
144+
<span
145+
aria-hidden="true"
146+
class="rc-select-selection-item-remove"
147+
style="user-select: none;"
148+
unselectable="on"
149+
>
150+
<span
151+
class="rc-select-selection-item-remove-icon"
152+
>
153+
×
154+
</span>
155+
</span>
156+
</span>
157+
<span
158+
class="rc-select-selection-item"
159+
>
160+
<span
161+
class="rc-select-selection-item-content"
162+
>
163+
Two
164+
</span>
165+
<span
166+
aria-hidden="true"
167+
class="rc-select-selection-item-remove"
168+
style="user-select: none;"
169+
unselectable="on"
170+
>
171+
<span
172+
class="rc-select-selection-item-remove-icon"
173+
>
174+
×
175+
</span>
176+
</span>
177+
</span>
178+
<span
179+
class="rc-select-selection-item"
180+
>
181+
<span
182+
class="rc-select-selection-item-content"
183+
>
184+
<span>
185+
1 values omitted
186+
</span>
187+
</span>
188+
</span>
189+
<span
190+
class="rc-select-selection-search"
191+
style="width: 0px;"
192+
>
193+
<input
194+
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
195+
aria-autocomplete="list"
196+
aria-controls="rc_select_TEST_OR_SSR_list"
197+
aria-haspopup="listbox"
198+
aria-owns="rc_select_TEST_OR_SSR_list"
199+
autocomplete="off"
200+
class="rc-select-selection-search-input"
201+
id="rc_select_TEST_OR_SSR"
202+
role="combobox"
203+
style="opacity: 0;"
204+
value=""
205+
/>
206+
<span
207+
aria-hidden="true"
208+
class="rc-select-selection-search-mirror"
209+
>
210+
 
211+
</span>
212+
</span>
213+
</div>
214+
</div>
215+
`;
216+
3217
exports[`Select.Multiple render truncates values by maxTagTextLength 1`] = `
4218
<div
5219
class="rc-select rc-select-multiple rc-select-show-search"

0 commit comments

Comments
 (0)