Skip to content

Commit

Permalink
fix: groupLabel feat and test error (#942)
Browse files Browse the repository at this point in the history 
* fix: groupLabel

* chore: less bundle

* fix

* chore: add test case

---------

Co-authored-by: 洋 <hetongyang@bytedance.com>
  • Loading branch information
@BoyYangzai
BoyYangzai and 洋 committed May 19, 2023
1 parent 114b045 commit d98542a
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 134 deletions.
7 changes: 2 additions & 5 deletions src/utils/valueUtil.ts
View file
Expand Up @@ -52,9 +52,6 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption

function dig(list: OptionType[], isGroupOption: boolean) {
list.forEach((data) => {

const label = data[isGroupOption ? groupLabel : fieldLabel];

if (isGroupOption || !(fieldOptions in data)) {
const value = data[fieldValue];

Expand All @@ -63,11 +60,11 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
key: getKey(data, flattenList.length),
groupOption: isGroupOption,
data,
label,
label: data[fieldLabel],
value,
});
} else {
let grpLabel = label;
let grpLabel = data[groupLabel];
if (grpLabel === undefined && childrenAsData) {
grpLabel = data.label;
}
Expand Down
45 changes: 30 additions & 15 deletions tests/Select.test.tsx
View file
Expand Up @@ -107,13 +107,13 @@ describe('Select.Basic', () => {

it('should support fieldName', () => {
// groupLabel > fieldNames > self-label
function genOpts(OptLabelName) {
function genOpts(OptLabelName, groupLabel) {
return [
{
groupLabel: 'Manager',
[groupLabel]: 'groupLabel',
options: [
{
data: 'value',
value: 'value',
[OptLabelName]: 'label',
},
],
Expand All @@ -123,34 +123,49 @@ describe('Select.Basic', () => {

const { container: containerFirst } = testingRender(
<Select
options={genOpts('test')}
options={genOpts('label', 'groupLabel')}
fieldNames={{
value: 'data',
label: 'test',
groupLabel: 'groupLabel',
}}
open
/>,
);
const { container: containerSecond } = testingRender(
<Select
options={genOpts('groupLabel')}
fieldNames={{ value: 'data', label: 'groupLabel' }}
options={genOpts('groupLabel', 'groupLabel')}
fieldNames={{ label: 'groupLabel' }}
open
/>,
);
const { container: containerThird } = testingRender(
<Select
options={genOpts('noGroupLabel')}
fieldNames={{ value: 'data', label: 'noGroupLabel' }}
/>,
<Select options={genOpts('label', 'label')} open />,
);

// these generate the same snapshots
expect(containerFirst).toMatchSnapshot();
expect(containerSecond).toMatchSnapshot();
expect(containerThird).toMatchSnapshot();
expect(containerFirst.querySelector('.rc-virtual-list')).toMatchSnapshot();
expect(containerSecond.querySelector('.rc-virtual-list')).toMatchSnapshot();
expect(containerThird.querySelector('.rc-virtual-list')).toMatchSnapshot();
});
});

it('item label should be the same as user enter when set groupLabel', () => {
const { container } = testingRender(
<Select
options={[
{
label: 'itemLabel',
value: 'itemValue',
},
]}
fieldNames={{
groupLabel: 'groupLabel',
}}
open
/>,
);
expect(container.querySelector('.rc-select-item-option-content').innerHTML).toBe('itemLabel');
});

it('convert value to array', () => {
const wrapper = mount(
<Select value="1" optionLabelProp="children">
Expand Down
228 changes: 114 additions & 114 deletions tests/__snapshots__/Select.test.tsx.snap
View file
Expand Up @@ -434,142 +434,142 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
`;

exports[`Select.Basic render should support fieldName 1`] = `
<div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-select rc-select-single rc-select-show-arrow"
class="rc-virtual-list-holder"
style="max-height: 200px; overflow-y: auto;"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="rc-select-selection-placeholder"
/>
<div
class="rc-select-item rc-select-item-group"
title="groupLabel"
>
groupLabel
</div>
<div
aria-selected="false"
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
title="label"
>
<div
class="rc-select-item-option-content"
>
label
</div>
<span
aria-hidden="true"
class="rc-select-item-option-state"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-item-option-state-icon"
/>
</span>
</div>
</div>
</div>
<span
aria-hidden="true"
class="rc-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-arrow-icon"
/>
</span>
</div>
</div>
`;

exports[`Select.Basic render should support fieldName 2`] = `
<div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-select rc-select-single rc-select-show-arrow"
class="rc-virtual-list-holder"
style="max-height: 200px; overflow-y: auto;"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="rc-select-selection-placeholder"
/>
<div
class="rc-select-item rc-select-item-group"
title="groupLabel"
>
groupLabel
</div>
<div
aria-selected="false"
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
title="label"
>
<div
class="rc-select-item-option-content"
>
label
</div>
<span
aria-hidden="true"
class="rc-select-item-option-state"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-item-option-state-icon"
/>
</span>
</div>
</div>
</div>
<span
aria-hidden="true"
class="rc-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-arrow-icon"
/>
</span>
</div>
</div>
`;

exports[`Select.Basic render should support fieldName 3`] = `
<div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-select rc-select-single rc-select-show-arrow"
class="rc-virtual-list-holder"
style="max-height: 200px; overflow-y: auto;"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="rc-select-selection-placeholder"
/>
<div
class="rc-select-item rc-select-item-group"
title="groupLabel"
>
groupLabel
</div>
<div
aria-selected="false"
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
title="label"
>
<div
class="rc-select-item-option-content"
>
label
</div>
<span
aria-hidden="true"
class="rc-select-item-option-state"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-item-option-state-icon"
/>
</span>
</div>
</div>
</div>
<span
aria-hidden="true"
class="rc-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-arrow-icon"
/>
</span>
</div>
</div>
`;
Expand Down

0 comments on commit d98542a

Please sign in to comment.