mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
feat(cascader): add Option item disableCheckbox (#42024)
* feat(cascader): add uncheckableItemValues props * feat: add Option disableCheckbox * chore: modify md * chore: add test and lock version * Update package.json --------- Co-authored-by: 洋 <hetongyang@bytedance.com> Co-authored-by: 二货爱吃白萝卜 <smith3816@gmail.com>
This commit is contained in:
parent
1d9cab6466
commit
d32e8e67de
@ -681,4 +681,38 @@ describe('Cascader', () => {
|
|||||||
expect(selectedValue!.join(',')).toBe('zhejiang');
|
expect(selectedValue!.join(',')).toBe('zhejiang');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should be correct expression with disableCheckbox', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<Cascader
|
||||||
|
multiple
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
label: '台湾',
|
||||||
|
value: 'tw',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: '福建',
|
||||||
|
value: 'fj',
|
||||||
|
disableCheckbox: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '兰州',
|
||||||
|
value: 'lz',
|
||||||
|
},
|
||||||
|
{ label: '北京', value: 'bj' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
|
||||||
|
// disabled className
|
||||||
|
fireEvent.click(container.querySelector('.ant-cascader-menu-item')!);
|
||||||
|
expect(container.querySelectorAll('.ant-cascader-checkbox-disabled')).toHaveLength(1);
|
||||||
|
// Check all children except disableCheckbox When the parent checkbox is checked
|
||||||
|
expect(container.querySelectorAll('.ant-cascader-checkbox')).toHaveLength(4);
|
||||||
|
fireEvent.click(container.querySelector('.ant-cascader-checkbox')!);
|
||||||
|
expect(container.querySelectorAll('.ant-cascader-checkbox-checked')).toHaveLength(3);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
## zh-CN
|
## zh-CN
|
||||||
|
|
||||||
一次性选择多个选项。
|
一次性选择多个选项。通过添加 `disableCheckbox` 属性,选择具体某一个`checkbox`禁用 。可以通过类名修改禁用的样式。
|
||||||
|
|
||||||
## en-US
|
## en-US
|
||||||
|
|
||||||
Select multiple options
|
Select multiple options. Disable the `checkbox` by adding the `disableCheckbox` property and selecting a specific item. The style of the disable can be modified by the className.
|
||||||
|
@ -1,10 +1,11 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Cascader } from 'antd';
|
import { Cascader } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
interface Option {
|
interface Option {
|
||||||
value: string | number;
|
value: string | number;
|
||||||
label: string;
|
label: string;
|
||||||
children?: Option[];
|
children?: Option[];
|
||||||
|
disableCheckbox?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const options: Option[] = [
|
const options: Option[] = [
|
||||||
@ -26,6 +27,7 @@ const options: Option[] = [
|
|||||||
{
|
{
|
||||||
label: 'Toy Fish',
|
label: 'Toy Fish',
|
||||||
value: 'fish',
|
value: 'fish',
|
||||||
|
disableCheckbox: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Toy Cards',
|
label: 'Toy Cards',
|
||||||
|
@ -120,7 +120,7 @@
|
|||||||
"copy-to-clipboard": "^3.2.0",
|
"copy-to-clipboard": "^3.2.0",
|
||||||
"dayjs": "^1.11.1",
|
"dayjs": "^1.11.1",
|
||||||
"qrcode.react": "^3.1.0",
|
"qrcode.react": "^3.1.0",
|
||||||
"rc-cascader": "~3.10.0",
|
"rc-cascader": "~3.11.2",
|
||||||
"rc-checkbox": "~3.0.0",
|
"rc-checkbox": "~3.0.0",
|
||||||
"rc-collapse": "~3.5.2",
|
"rc-collapse": "~3.5.2",
|
||||||
"rc-dialog": "~9.1.0",
|
"rc-dialog": "~9.1.0",
|
||||||
|
Loading…
Reference in New Issue
Block a user