Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add groupLabel FieldName #941

Merged
merged 8 commits into from
May 17, 2023
Merged

feat: add groupLabel FieldName #941

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
11a6d4d
fix: OptGroup label not display when set fieldNames
May 13, 2023
9cd6818
feat: groupLabel fieldName
May 16, 2023
0616d46
chore: add test case
May 16, 2023
96ef584
chore: put groupLabel api in fileName
May 16, 2023
a99d26a
chore: separate label and groupLabel
May 17, 2023
93389cd
chore: coding style
May 17, 2023
0d5673e
fix: coding style again
May 17, 2023
c9a7a2e
fix: style
May 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) =
export interface FieldNames {
value?: string;
label?: string;
groupLabel?: string;
options?: string;
}

Expand Down Expand Up @@ -410,7 +411,10 @@ const Select = React.forwardRef(

const displayOptions = React.useMemo(
() =>
flattenOptions(orderedFilteredOptions, { fieldNames: mergedFieldNames, childrenAsData }),
flattenOptions(orderedFilteredOptions, {
fieldNames: mergedFieldNames,
childrenAsData,
}),
[orderedFilteredOptions, mergedFieldNames, childrenAsData],
);

Expand Down
7 changes: 5 additions & 2 deletions src/utils/valueUtil.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,13 @@ function getKey(data: BaseOptionType, index: number) {
}

export function fillFieldNames(fieldNames: FieldNames | undefined, childrenAsData: boolean) {
const { label, value, options } = fieldNames || {};
const { label, value, options, groupLabel } = fieldNames || {};

return {
label: label || (childrenAsData ? 'children' : 'label'),
value: value || 'value',
options: options || 'options',
groupLabel: groupLabel || label || (childrenAsData ? 'children' : 'label')
BoyYangzai marked this conversation as resolved.
Show resolved Hide resolved
};
}

Expand All @@ -45,11 +46,13 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
label: fieldLabel,
value: fieldValue,
options: fieldOptions,
groupLabel
} = fillFieldNames(fieldNames, false);

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

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

if (isGroupOption || !(fieldOptions in data)) {
const value = data[fieldValue];
Expand Down
68 changes: 48 additions & 20 deletions tests/Select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,51 @@ describe('Select.Basic', () => {
);
expect(wrapper).toMatchSnapshot();
});

it('should support fieldName', () => {
// groupLabel > fieldNames > self-label
function genOpts(OptLabelName) {
return [
{
groupLabel: 'Manager',
options: [
{
data: 'value',
[OptLabelName]: 'label',
},
],
},
];
}

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

// these generate the same snapshots
expect(containerFirst).toMatchSnapshot();
expect(containerSecond).toMatchSnapshot();
expect(containerThird).toMatchSnapshot();
});
});

it('convert value to array', () => {
Expand Down Expand Up @@ -1925,30 +1970,13 @@ describe('Select.Basic', () => {
});

it('should support title', () => {
const wrapper1 = mount(
<Select
defaultValue="lucy"
options={[]}
/>,
);
const wrapper1 = mount(<Select defaultValue="lucy" options={[]} />);
expect(wrapper1.find('.rc-select').prop('title')).toBe(undefined);
expect(wrapper1.find('.rc-select-selection-item').prop('title')).toBe('lucy');
const wrapper2 = mount(
<Select
defaultValue="lucy"
options={[]}
title=""
/>,
);
const wrapper2 = mount(<Select defaultValue="lucy" options={[]} title="" />);
expect(wrapper2.find('.rc-select').prop('title')).toBe('');
expect(wrapper2.find('.rc-select-selection-item').prop('title')).toBe('');
const wrapper3 = mount(
<Select
defaultValue="lucy"
options={[]}
title="title"
/>,
);
const wrapper3 = mount(<Select defaultValue="lucy" options={[]} title="title" />);
expect(wrapper3.find('.rc-select').prop('title')).toBe('title');
expect(wrapper3.find('.rc-select-selection-item').prop('title')).toBe('title');
});
Expand Down
149 changes: 145 additions & 4 deletions tests/__snapshots__/Select.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`Select.Basic does not filter when filterOption value is false 1`] = `
<div
class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
>
<div>
<div
Expand Down Expand Up @@ -94,7 +94,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
exports[`Select.Basic filterOption could be true as described in default value 1`] = `
<div
class="rc-select-dropdown rc-select-dropdown-empty rc-select-dropdown-placement-bottomLeft"
style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
>
<div>
<div
Expand Down Expand Up @@ -433,10 +433,151 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
</div>
`;

exports[`Select.Basic render should support fieldName 1`] = `
<div>
<div
class="rc-select rc-select-single rc-select-show-arrow"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
>
<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>
<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-select rc-select-single rc-select-show-arrow"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
>
<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>
<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-select rc-select-single rc-select-show-arrow"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
>
<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>
<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 should contain falsy children 1`] = `
<div
class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
>
<div>
<div
Expand Down Expand Up @@ -529,7 +670,7 @@ exports[`Select.Basic should contain falsy children 1`] = `
exports[`Select.Basic should render custom dropdown correctly 1`] = `
<div
class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
>
<div>
<div>
Expand Down
2 changes: 1 addition & 1 deletion tests/__snapshots__/Tags.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
</div>
<div
class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
>
<div>
<div
Expand Down