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

fix: checkbox group support options other than string #33678

Merged
merged 5 commits into from Jan 12, 2022
Merged

fix: checkbox group support options other than string #33678

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
11903d4
fix: checkbox group support options other than string
MadCcc Jan 11, 2022
e1972d4
docs: update checkbox docs
MadCcc Jan 11, 2022
c586ef7
fix: radio group support value other than string
MadCcc Jan 11, 2022
425b52c
fix: only support number and string
MadCcc Jan 12, 2022
fc325e2
docs: update group options type
MadCcc Jan 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/checkbox/Group.tsx
View file
Open in desktop
Expand Up @@ -17,7 +17,7 @@ export interface CheckboxOptionType {
export interface AbstractCheckboxGroupProps {
prefixCls?: string;
className?: string;
options?: Array<CheckboxOptionType | string>;
options?: Array<CheckboxOptionType | CheckboxValueType>;
disabled?: boolean;
style?: React.CSSProperties;
}
Expand Down Expand Up @@ -69,7 +69,7 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec

const getOptions = () =>
options.map(option => {
if (typeof option === 'string') {
if (typeof option !== 'object') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

按 CheckboxValueType 支持的类型判断？function 和 undefined 之类的情况也会进这段逻辑

Copy link
Member

@afc163 afc163 Jan 12, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

先单独增加对数字类型的支持就好了，最小化改动。

return {
label: option,
value: option,
Expand Down
9 changes: 9 additions & 0 deletions components/checkbox/__tests__/group.test.js
View file
Open in desktop
Expand Up @@ -213,4 +213,13 @@ describe('CheckboxGroup', () => {
/>,
);
});

it('should support number option', () => {
const onChange = jest.fn();

const wrapper = mount(<Checkbox.Group options={[1, 'Pear', 'Orange']} onChange={onChange} />);

wrapper.find('.ant-checkbox-input').at(0).simulate('change');
expect(onChange).toHaveBeenCalledWith([1]);
});
});
10 changes: 5 additions & 5 deletions components/checkbox/index.en-US.md
View file
Open in desktop
Expand Up @@ -34,15 +34,15 @@ Checkbox component.
| defaultValue | Default selected value | string\[] | \[] | |
| disabled | If disable all checkboxes | boolean | false | |
| name | The `name` property of all `input[type="checkbox"]` children | string | - | |
| options | Specifies options | string\[] \| Option\[] | \[] | |
| options | Specifies options | string\[] \| number\[] \| boolean\[] \| Option\[] | \[] | |
| value | Used for setting the currently selected value | string\[] | \[] | |
| onChange | The callback function that is triggered when the state changes | function(checkedValue) | - | |

### Methods

#### Checkbox

| Name | Description | Version |
| --- | --- | --- |
| blur() | Remove focus | |
| focus() | Get focus | |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | Remove focus | |
| focus() | Get focus | |
26 changes: 13 additions & 13 deletions components/checkbox/index.zh-CN.md
View file
Open in desktop
Expand Up @@ -19,14 +19,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg

#### Checkbox

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autoFocus | 自动获取焦点 | boolean | false | |
| checked | 指定当前是否选中 | boolean | false | |
| defaultChecked | 初始是否选中 | boolean | false | |
| disabled | 失效状态 | boolean | false | |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
| onChange | 变化时回调函数 | function(e:Event) | - | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------------- | --------------------------------------- | ----------------- | ------ | ---- |
| autoFocus | 自动获取焦点 | boolean | false | |
| checked | 指定当前是否选中 | boolean | false | |
| defaultChecked | 初始是否选中 | boolean | false | |
| disabled | 失效状态 | boolean | false | |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
| onChange | 变化时回调函数 | function(e:Event) | - | |

#### Checkbox Group

Expand All @@ -35,7 +35,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
| defaultValue | 默认选中的选项 | string\[] | \[] | |
| disabled | 整组失效 | boolean | false | |
| name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - | |
| options | 指定可选项 | string\[] \| Option\[] | \[] | |
| options | 指定可选项 | string\[] \| number\[] \| boolean\[] \| Option\[] | \[] | |
| value | 指定选中的选项 | string\[] | \[] | |
| onChange | 变化时回调函数 | function(checkedValue) | - | |

Expand All @@ -53,7 +53,7 @@ interface Option {

#### Checkbox

| 名称 | 描述 | 版本 |
| --- | --- | --- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
4 changes: 2 additions & 2 deletions components/radio/group.tsx
View file
Open in desktop
Expand Up @@ -50,11 +50,11 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
if (options && options.length > 0) {
const optionsPrefixCls = optionType === 'button' ? `${prefixCls}-button` : prefixCls;
childrenToRender = options.map(option => {
if (typeof option === 'string') {
if (typeof option !== 'object') {
// 此处类型自动推导为 string
return (
<Radio
key={option}
key={option.toString()}
prefixCls={optionsPrefixCls}
disabled={disabled}
value={option}
Expand Down