fix: checkbox group support options other than string (ant-design#33678)

* fix: checkbox group support options other than string * docs: update checkbox docs * fix: radio group support value other than string * fix: only support number and string * docs: update group options type
Amour1688 · Jan 30, 2022 · 15969af · 15969af
1 parent 4fcd7b7
commit 15969af
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 38 deletions.
diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
@@ -17,7 +17,7 @@ export interface CheckboxOptionType {
 export interface AbstractCheckboxGroupProps {
   prefixCls?: string;
   className?: string;
-  options?: Array<CheckboxOptionType | string>;
+  options?: Array<CheckboxOptionType | string | number>;
   disabled?: boolean;
   style?: React.CSSProperties;
 }
@@ -69,7 +69,7 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
 
   const getOptions = () =>
     options.map(option => {
-      if (typeof option === 'string') {
+      if (typeof option === 'string' || typeof option === 'number') {
         return {
           label: option,
           value: option,

diff --git a/components/checkbox/__tests__/group.test.js b/components/checkbox/__tests__/group.test.js
@@ -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]);
+  });
 });
diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
@@ -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\[] \| 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    |         |
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
@@ -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
 
@@ -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\[] \| Option\[] | \[] |  |
 | value | 指定选中的选项 | string\[] | \[] |  |
 | onChange | 变化时回调函数 | function(checkedValue) | - |  |
 
@@ -53,7 +53,7 @@ interface Option {
 
 #### Checkbox
 
-| 名称 | 描述 | 版本 |
-| --- | --- | --- |
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |
+| 名称    | 描述     | 版本 |
+| ------- | -------- | ---- |
+| blur()  | 移除焦点 |      |
+| focus() | 获取焦点 |      |
diff --git a/components/radio/group.tsx b/components/radio/group.tsx
@@ -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 === 'string' || typeof option === 'number') {
           // 此处类型自动推导为 string
           return (
             <Radio
-              key={option}
+              key={option.toString()}
               prefixCls={optionsPrefixCls}
               disabled={disabled}
               value={option}

diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md
@@ -34,7 +34,7 @@ Radio group can wrap a group of `Radio`。
 | defaultValue | Default selected value | any | - |  |
 | disabled | Disable all radio buttons | boolean | false |  |
 | name | The `name` property of all `input[type="radio"]` children | string | - |  |
-| options | Set children optional | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - |  |
+| options | Set children optional | string\[] \| number\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - |  |
 | optionType | Set Radio optionType | `default` \| `button` | `default` | 4.4.0 |
 | size | The size of radio button style | `large` \| `middle` \| `small` | - |  |
 | value | Used for setting the currently selected value | any | - |  |
@@ -44,7 +44,7 @@ Radio group can wrap a group of `Radio`。
 
 ### Radio
 
-| Name | Description |
-| --- | --- |
-| blur() | Remove focus |
-| focus() | Get focus |
+| Name    | Description  |
+| ------- | ------------ |
+| blur()  | Remove focus |
+| focus() | Get focus    |
diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md
@@ -17,13 +17,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
 
 ### Radio/Radio.Button
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| autoFocus | 自动获取焦点 | boolean | false |
-| checked | 指定当前是否选中 | boolean | false |
-| defaultChecked | 初始是否选中 | boolean | false |
-| disabled | 禁用 Radio | boolean | false |
-| value | 根据 value 进行比较，判断是否选中 | any | - |
+| 参数           | 说明                              | 类型    | 默认值 |
+| -------------- | --------------------------------- | ------- | ------ |
+| autoFocus      | 自动获取焦点                      | boolean | false  |
+| checked        | 指定当前是否选中                  | boolean | false  |
+| defaultChecked | 初始是否选中                      | boolean | false  |
+| disabled       | 禁用 Radio                        | boolean | false  |
+| value          | 根据 value 进行比较，判断是否选中 | any     | -      |
 
 ### RadioGroup
 
@@ -35,7 +35,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
 | defaultValue | 默认选中的值 | any | - |  |  |
 | disabled | 禁选所有子单选器 | boolean | false |  |  |
 | name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | - |  |  |
-| options | 以配置形式设置子元素 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - |  |  |
+| options | 以配置形式设置子元素 | string\[] \| number\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - |  |  |
 | optionType | 用于设置 Radio `options` 类型 | `default` \| `button` | `default` | 4.4.0 |  |
 | size | 大小，只对按钮样式生效 | `large` \| `middle` \| `small` | - |  |  |
 | value | 用于设置当前选中的值 | any | - |  |  |
@@ -45,7 +45,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
 
 ### Radio
 
-| 名称 | 描述 |
-| --- | --- |
-| blur() | 移除焦点 |
+| 名称    | 描述     |
+| ------- | -------- |
+| blur()  | 移除焦点 |
 | focus() | 获取焦点 |