Skip to content

Commit

Permalink
fix: groupLabel
Browse files Browse the repository at this point in the history
  • Loading branch information
洋 committed May 19, 2023
1 parent 114b045 commit 685a3dc
Show file tree
Hide file tree
Showing 3 changed files with 229 additions and 22 deletions.
2 changes: 1 addition & 1 deletion src/utils/valueUtil.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
function dig(list: OptionType[], isGroupOption: boolean) {
list.forEach((data) => {

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

if (isGroupOption || !(fieldOptions in data)) {
const value = data[fieldValue];
Expand Down
21 changes: 9 additions & 12 deletions tests/Select.test.tsx
View file
Original file line number Diff line number Diff line change
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,25 +123,22 @@ 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
Expand Down
228 changes: 219 additions & 9 deletions tests/__snapshots__/Select.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,7 +436,7 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
exports[`Select.Basic render should support fieldName 1`] = `
<div>
<div
class="rc-select rc-select-single rc-select-show-arrow"
class="rc-select rc-select-single rc-select-show-arrow rc-select-open"
>
<div
class="rc-select-selector"
Expand All @@ -445,10 +445,10 @@ exports[`Select.Basic render should support fieldName 1`] = `
class="rc-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-activedescendant="rc_select_TEST_OR_SSR_list_1"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-expanded="true"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
Expand All @@ -466,6 +466,76 @@ exports[`Select.Basic render should support fieldName 1`] = `
class="rc-select-selection-placeholder"
/>
</div>
<div
class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
>
<div>
<div
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="height: 0px; width: 0px; overflow: hidden;"
>
<div
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_0"
role="presentation"
/>
<div
aria-label="label"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
>
value
</div>
</div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-virtual-list-holder"
style="max-height: 200px; overflow-y: auto;"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<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>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="rc-select-arrow"
Expand All @@ -483,7 +553,7 @@ exports[`Select.Basic render should support fieldName 1`] = `
exports[`Select.Basic render should support fieldName 2`] = `
<div>
<div
class="rc-select rc-select-single rc-select-show-arrow"
class="rc-select rc-select-single rc-select-show-arrow rc-select-open"
>
<div
class="rc-select-selector"
Expand All @@ -492,10 +562,10 @@ exports[`Select.Basic render should support fieldName 2`] = `
class="rc-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-activedescendant="rc_select_TEST_OR_SSR_list_1"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-expanded="true"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
Expand All @@ -513,6 +583,76 @@ exports[`Select.Basic render should support fieldName 2`] = `
class="rc-select-selection-placeholder"
/>
</div>
<div
class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
>
<div>
<div
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="height: 0px; width: 0px; overflow: hidden;"
>
<div
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_0"
role="presentation"
/>
<div
aria-label="label"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
>
value
</div>
</div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-virtual-list-holder"
style="max-height: 200px; overflow-y: auto;"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<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>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="rc-select-arrow"
Expand All @@ -530,7 +670,7 @@ exports[`Select.Basic render should support fieldName 2`] = `
exports[`Select.Basic render should support fieldName 3`] = `
<div>
<div
class="rc-select rc-select-single rc-select-show-arrow"
class="rc-select rc-select-single rc-select-show-arrow rc-select-open"
>
<div
class="rc-select-selector"
Expand All @@ -539,10 +679,10 @@ exports[`Select.Basic render should support fieldName 3`] = `
class="rc-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-activedescendant="rc_select_TEST_OR_SSR_list_1"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-expanded="true"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
Expand All @@ -560,6 +700,76 @@ exports[`Select.Basic render should support fieldName 3`] = `
class="rc-select-selection-placeholder"
/>
</div>
<div
class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
>
<div>
<div
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="height: 0px; width: 0px; overflow: hidden;"
>
<div
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_0"
role="presentation"
/>
<div
aria-label="label"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
>
value
</div>
</div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-virtual-list-holder"
style="max-height: 200px; overflow-y: auto;"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<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>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="rc-select-arrow"
Expand Down

0 comments on commit 685a3dc

Please sign in to comment.