test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:58:07 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: NestedSelect开启onLeaf后选项children为空也视为叶节点

Browse Source
This commit is contained in:
lurunze1226 2023-11-06 20:55:35 +08:00
parent 8af076ce0e
commit 946633303c
2 changed files with 119 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
packages/amis/__tests__/renderers/Form/nestedSelect.test.tsx
View File

@ -2,12 +2,13 @@
* 组件名称：NestedSelect 级联选择器
* 单测内容：
* 01. maxTagLength
* 02. onlyLeaf
*/
import {render, cleanup, waitFor} from '@testing-library/react';
import {render, cleanup, waitFor, fireEvent} from '@testing-library/react';
import '../../../src';
import {render as amisRender} from '../../../src';
import {makeEnv} from '../../helper';
import {makeEnv, wait} from '../../helper';
import {clearStoresCache} from '../../../src';
afterEach(() => {
@ -113,3 +114,107 @@ describe('Renderer:NestedSelect', () => {
expect(container).toMatchSnapshot();
});
});
describe.only('Renderer:NestedSelect with onlyLeaf', () => {
test('single selection', async () => {
const optionWithNoChild = 'OptionWithNoChild';
const optionWithChild = 'OptionWithChild';
const {container, queryByText} = await setupNestedSelect({
"onlyLeaf": true,
"options": [
{"label": "选项A", "value": "A"},
{"label": optionWithNoChild, "value": "B", "children": []},
{
"label": optionWithChild,
"value": "C",
"children": [
{"label": "选项c1", "value": "c1"},
{"label": "选项c2", "value": "c2"}
]
}
]
});
const trigger = container.querySelector('.cxd-ResultBox');
expect(trigger).toBeInTheDocument();
fireEvent.click(trigger!);
await wait(200);
const parentNum = container.querySelectorAll('.cxd-NestedSelect-optionArrowRight')?.length ?? 0;
expect(parentNum).toEqual(1);
let options = container.querySelectorAll('.cxd-NestedSelect-optionLabel');
expect(options.length).toEqual(3);
/** onlyLeaf开启后，children为空数组的选项也可以选择 */
fireEvent.click(options[1]);
await wait(300);
expect(queryByText(optionWithNoChild)!).toBeInTheDocument();
fireEvent.click(trigger!);
await wait(200);
options = container.querySelectorAll('.cxd-NestedSelect-optionLabel');
fireEvent.click(options[2]);
await wait(300);
fireEvent.click(trigger!);
await wait(200);
expect(queryByText(optionWithNoChild)!).toBeInTheDocument();
/** onlyLeaf开启后，children非空的选项无法选择 */
expect(queryByText(optionWithChild)).toBeNull();
});
test('single selection', async () => {
const optionWithNoChild = 'OptionWithNoChild';
const optionWithChild = 'OptionWithChild';
const {container, queryByText} = await setupNestedSelect({
"onlyLeaf": true,
"multiple": true,
"options": [
{"label": "选项A", "value": "A"},
{"label": optionWithNoChild, "value": "B", "children": []},
{
"label": optionWithChild,
"value": "C",
"children": [
{"label": "选项c1", "value": "c1"},
{"label": "选项c2", "value": "c2"}
]
}
]
});
const trigger = container.querySelector('.cxd-ResultBox');
expect(trigger).toBeInTheDocument();
fireEvent.click(trigger!);
await wait(200);
const parentNum = container.querySelectorAll('.cxd-NestedSelect-optionArrowRight')?.length ?? 0;
expect(parentNum).toEqual(1);
let options = container.querySelectorAll('.cxd-NestedSelect-optionLabel');
expect(options.length).toEqual(3);
/** onlyLeaf开启后，children为空数组的选项也可以选择 */
fireEvent.click(options[1]);
await wait(300);
fireEvent.click(trigger!);
await wait(200);
expect(queryByText(optionWithNoChild)!).toBeInTheDocument();
fireEvent.click(trigger!);
await wait(200);
options = container.querySelectorAll('.cxd-NestedSelect-optionLabel');
fireEvent.click(options[2]);
await wait(300);
fireEvent.click(trigger!);
await wait(200);
expect(queryByText(optionWithNoChild)!).toBeInTheDocument();
/** onlyLeaf开启后，children非空的选项无法选择 */
expect(queryByText(optionWithChild)).toBeNull();
});
});

18
packages/amis/src/renderers/Form/NestedSelect.tsx
View File

@ -172,6 +172,11 @@ export default class NestedSelectControl extends React.Component<
return !!rendererEvent?.prevented;
}
/** 是否为父节点 */
isParentNode(option: Option) {
return Array.isArray(option.children) && option.children.length > 0;
}
@autobind
handleOutClick(e: React.MouseEvent<any>) {
const {options} = this.props;
@ -295,7 +300,7 @@ export default class NestedSelectControl extends React.Component<
return;
}
if (onlyLeaf && option.children) {
if (onlyLeaf && this.isParentNode(option)) {
return;
}
@ -327,7 +332,7 @@ export default class NestedSelectControl extends React.Component<
let valueField = this.props.valueField || 'value';
if (onlyLeaf && !Array.isArray(option) && option.children) {
if (onlyLeaf && !Array.isArray(option) && this.isParentNode(option)) {
return;
}
@ -431,6 +436,7 @@ export default class NestedSelectControl extends React.Component<
allChecked(options: Options): boolean {
const {selectedOptions, withChildren, onlyChildren} = this.props;
return options.every(option => {
if ((withChildren || onlyChildren) && option.children) {
return this.allChecked(option.children);
@ -683,8 +689,8 @@ export default class NestedSelectControl extends React.Component<
if (
!selfChecked &&
onlyChildren &&
option.children &&
this.allChecked(option.children)
this.isParentNode(option) &&
this.allChecked(option.children!)
) {
selfChecked = true;
}
@ -799,8 +805,8 @@ export default class NestedSelectControl extends React.Component<
if (
!isChecked &&
onlyChildren &&
option.children &&
this.allChecked(option.children)
this.isParentNode(option) &&
this.allChecked(option.children!)
) {
isChecked = true;
}