Skip to content

Commit d98542a

Browse files
BoyYangzai洋
BoyYangzai
and
洋
authored
fix: groupLabel feat and test error (#942)
* fix: groupLabel * chore: less bundle * fix * chore: add test case --------- Co-authored-by: 洋 <hetongyang@bytedance.com>
1 parent 114b045 commit d98542a

File tree

3 files changed

+146
-134
lines changed

3 files changed

+146
-134
lines changed

‎src/utils/valueUtil.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,6 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
5252

5353
function dig(list: OptionType[], isGroupOption: boolean) {
5454
list.forEach((data) => {
55-
56-
const label = data[isGroupOption ? groupLabel : fieldLabel];
57-
5855
if (isGroupOption || !(fieldOptions in data)) {
5956
const value = data[fieldValue];
6057

@@ -63,11 +60,11 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
6360
key: getKey(data, flattenList.length),
6461
groupOption: isGroupOption,
6562
data,
66-
label,
63+
label: data[fieldLabel],
6764
value,
6865
});
6966
} else {
70-
let grpLabel = label;
67+
let grpLabel = data[groupLabel];
7168
if (grpLabel === undefined && childrenAsData) {
7269
grpLabel = data.label;
7370
}

‎tests/Select.test.tsx‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -107,13 +107,13 @@ describe('Select.Basic', () => {
107107

108108
it('should support fieldName', () => {
109109
// groupLabel > fieldNames > self-label
110-
function genOpts(OptLabelName) {
110+
function genOpts(OptLabelName, groupLabel) {
111111
return [
112112
{
113-
groupLabel: 'Manager',
113+
[groupLabel]: 'groupLabel',
114114
options: [
115115
{
116-
data: 'value',
116+
value: 'value',
117117
[OptLabelName]: 'label',
118118
},
119119
],
@@ -123,34 +123,49 @@ describe('Select.Basic', () => {
123123

124124
const { container: containerFirst } = testingRender(
125125
<Select
126-
options={genOpts('test')}
126+
options={genOpts('label', 'groupLabel')}
127127
fieldNames={{
128-
value: 'data',
129-
label: 'test',
130128
groupLabel: 'groupLabel',
131129
}}
130+
open
132131
/>,
133132
);
134133
const { container: containerSecond } = testingRender(
135134
<Select
136-
options={genOpts('groupLabel')}
137-
fieldNames={{ value: 'data', label: 'groupLabel' }}
135+
options={genOpts('groupLabel', 'groupLabel')}
136+
fieldNames={{ label: 'groupLabel' }}
137+
open
138138
/>,
139139
);
140140
const { container: containerThird } = testingRender(
141-
<Select
142-
options={genOpts('noGroupLabel')}
143-
fieldNames={{ value: 'data', label: 'noGroupLabel' }}
144-
/>,
141+
<Select options={genOpts('label', 'label')} open />,
145142
);
146143

147144
// these generate the same snapshots
148-
expect(containerFirst).toMatchSnapshot();
149-
expect(containerSecond).toMatchSnapshot();
150-
expect(containerThird).toMatchSnapshot();
145+
expect(containerFirst.querySelector('.rc-virtual-list')).toMatchSnapshot();
146+
expect(containerSecond.querySelector('.rc-virtual-list')).toMatchSnapshot();
147+
expect(containerThird.querySelector('.rc-virtual-list')).toMatchSnapshot();
151148
});
152149
});
153150

151+
it('item label should be the same as user enter when set groupLabel', () => {
152+
const { container } = testingRender(
153+
<Select
154+
options={[
155+
{
156+
label: 'itemLabel',
157+
value: 'itemValue',
158+
},
159+
]}
160+
fieldNames={{
161+
groupLabel: 'groupLabel',
162+
}}
163+
open
164+
/>,
165+
);
166+
expect(container.querySelector('.rc-select-item-option-content').innerHTML).toBe('itemLabel');
167+
});
168+
154169
it('convert value to array', () => {
155170
const wrapper = mount(
156171
<Select value="1" optionLabelProp="children">

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

Lines changed: 114 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -434,142 +434,142 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
434434
`;
435435

436436
exports[`Select.Basic render should support fieldName 1`] = `
437-
<div>
437+
<div
438+
class="rc-virtual-list"
439+
style="position: relative;"
440+
>
438441
<div
439-
class="rc-select rc-select-single rc-select-show-arrow"
442+
class="rc-virtual-list-holder"
443+
style="max-height: 200px; overflow-y: auto;"
440444
>
441-
<div
442-
class="rc-select-selector"
443-
>
444-
<span
445-
class="rc-select-selection-search"
445+
<div>
446+
<div
447+
class="rc-virtual-list-holder-inner"
448+
style="display: flex; flex-direction: column;"
446449
>
447-
<input
448-
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
449-
aria-autocomplete="list"
450-
aria-controls="rc_select_TEST_OR_SSR_list"
451-
aria-expanded="false"
452-
aria-haspopup="listbox"
453-
aria-owns="rc_select_TEST_OR_SSR_list"
454-
autocomplete="off"
455-
class="rc-select-selection-search-input"
456-
id="rc_select_TEST_OR_SSR"
457-
readonly=""
458-
role="combobox"
459-
style="opacity: 0;"
460-
type="search"
461-
unselectable="on"
462-
value=""
463-
/>
464-
</span>
465-
<span
466-
class="rc-select-selection-placeholder"
467-
/>
450+
<div
451+
class="rc-select-item rc-select-item-group"
452+
title="groupLabel"
453+
>
454+
groupLabel
455+
</div>
456+
<div
457+
aria-selected="false"
458+
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
459+
title="label"
460+
>
461+
<div
462+
class="rc-select-item-option-content"
463+
>
464+
label
465+
</div>
466+
<span
467+
aria-hidden="true"
468+
class="rc-select-item-option-state"
469+
style="user-select: none;"
470+
unselectable="on"
471+
>
472+
<span
473+
class="rc-select-item-option-state-icon"
474+
/>
475+
</span>
476+
</div>
477+
</div>
468478
</div>
469-
<span
470-
aria-hidden="true"
471-
class="rc-select-arrow"
472-
style="user-select: none;"
473-
unselectable="on"
474-
>
475-
<span
476-
class="rc-select-arrow-icon"
477-
/>
478-
</span>
479479
</div>
480480
</div>
481481
`;
482482

483483
exports[`Select.Basic render should support fieldName 2`] = `
484-
<div>
484+
<div
485+
class="rc-virtual-list"
486+
style="position: relative;"
487+
>
485488
<div
486-
class="rc-select rc-select-single rc-select-show-arrow"
489+
class="rc-virtual-list-holder"
490+
style="max-height: 200px; overflow-y: auto;"
487491
>
488-
<div
489-
class="rc-select-selector"
490-
>
491-
<span
492-
class="rc-select-selection-search"
492+
<div>
493+
<div
494+
class="rc-virtual-list-holder-inner"
495+
style="display: flex; flex-direction: column;"
493496
>
494-
<input
495-
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
496-
aria-autocomplete="list"
497-
aria-controls="rc_select_TEST_OR_SSR_list"
498-
aria-expanded="false"
499-
aria-haspopup="listbox"
500-
aria-owns="rc_select_TEST_OR_SSR_list"
501-
autocomplete="off"
502-
class="rc-select-selection-search-input"
503-
id="rc_select_TEST_OR_SSR"
504-
readonly=""
505-
role="combobox"
506-
style="opacity: 0;"
507-
type="search"
508-
unselectable="on"
509-
value=""
510-
/>
511-
</span>
512-
<span
513-
class="rc-select-selection-placeholder"
514-
/>
497+
<div
498+
class="rc-select-item rc-select-item-group"
499+
title="groupLabel"
500+
>
501+
groupLabel
502+
</div>
503+
<div
504+
aria-selected="false"
505+
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
506+
title="label"
507+
>
508+
<div
509+
class="rc-select-item-option-content"
510+
>
511+
label
512+
</div>
513+
<span
514+
aria-hidden="true"
515+
class="rc-select-item-option-state"
516+
style="user-select: none;"
517+
unselectable="on"
518+
>
519+
<span
520+
class="rc-select-item-option-state-icon"
521+
/>
522+
</span>
523+
</div>
524+
</div>
515525
</div>
516-
<span
517-
aria-hidden="true"
518-
class="rc-select-arrow"
519-
style="user-select: none;"
520-
unselectable="on"
521-
>
522-
<span
523-
class="rc-select-arrow-icon"
524-
/>
525-
</span>
526526
</div>
527527
</div>
528528
`;
529529

530530
exports[`Select.Basic render should support fieldName 3`] = `
531-
<div>
531+
<div
532+
class="rc-virtual-list"
533+
style="position: relative;"
534+
>
532535
<div
533-
class="rc-select rc-select-single rc-select-show-arrow"
536+
class="rc-virtual-list-holder"
537+
style="max-height: 200px; overflow-y: auto;"
534538
>
535-
<div
536-
class="rc-select-selector"
537-
>
538-
<span
539-
class="rc-select-selection-search"
539+
<div>
540+
<div
541+
class="rc-virtual-list-holder-inner"
542+
style="display: flex; flex-direction: column;"
540543
>
541-
<input
542-
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
543-
aria-autocomplete="list"
544-
aria-controls="rc_select_TEST_OR_SSR_list"
545-
aria-expanded="false"
546-
aria-haspopup="listbox"
547-
aria-owns="rc_select_TEST_OR_SSR_list"
548-
autocomplete="off"
549-
class="rc-select-selection-search-input"
550-
id="rc_select_TEST_OR_SSR"
551-
readonly=""
552-
role="combobox"
553-
style="opacity: 0;"
554-
type="search"
555-
unselectable="on"
556-
value=""
557-
/>
558-
</span>
559-
<span
560-
class="rc-select-selection-placeholder"
561-
/>
544+
<div
545+
class="rc-select-item rc-select-item-group"
546+
title="groupLabel"
547+
>
548+
groupLabel
549+
</div>
550+
<div
551+
aria-selected="false"
552+
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
553+
title="label"
554+
>
555+
<div
556+
class="rc-select-item-option-content"
557+
>
558+
label
559+
</div>
560+
<span
561+
aria-hidden="true"
562+
class="rc-select-item-option-state"
563+
style="user-select: none;"
564+
unselectable="on"
565+
>
566+
<span
567+
class="rc-select-item-option-state-icon"
568+
/>
569+
</span>
570+
</div>
571+
</div>
562572
</div>
563-
<span
564-
aria-hidden="true"
565-
class="rc-select-arrow"
566-
style="user-select: none;"
567-
unselectable="on"
568-
>
569-
<span
570-
class="rc-select-arrow-icon"
571-
/>
572-
</span>
573573
</div>
574574
</div>
575575
`;

0 commit comments

Comments
 (0)