From e4c5ab9c69af1418dd6ff69896673f03f082c75c Mon Sep 17 00:00:00 2001 From: Randy Date: Mon, 31 Jul 2017 11:33:47 +0800 Subject: [PATCH] Radiogroup with `name` (#7009) * Add a name property for RadioGroup * Add document for RadioGroup's name property * Add test case for RadioGroup name property --- .../__tests__/__snapshots__/demo.test.js.snap | 84 +++++++++++++++++++ components/radio/__tests__/group.test.js | 11 +++ components/radio/demo/radiogroup-with-name.md | 32 +++++++ components/radio/group.tsx | 2 + components/radio/index.en-US.md | 1 + components/radio/index.zh-CN.md | 1 + components/radio/radio.tsx | 1 + 7 files changed, 132 insertions(+) create mode 100644 components/radio/demo/radiogroup-with-name.md diff --git a/components/radio/__tests__/__snapshots__/demo.test.js.snap b/components/radio/__tests__/__snapshots__/demo.test.js.snap index 73602d9846..da6643aa4e 100644 --- a/components/radio/__tests__/__snapshots__/demo.test.js.snap +++ b/components/radio/__tests__/__snapshots__/demo.test.js.snap @@ -675,6 +675,90 @@ exports[`renders ./components/radio/demo/radiogroup-options.md correctly 1`] = ` `; +exports[`renders ./components/radio/demo/radiogroup-with-name.md correctly 1`] = ` +
+ + + + +
+`; + exports[`renders ./components/radio/demo/size.md correctly 1`] = `
diff --git a/components/radio/__tests__/group.test.js b/components/radio/__tests__/group.test.js index 69a1059db3..21ac1606fb 100644 --- a/components/radio/__tests__/group.test.js +++ b/components/radio/__tests__/group.test.js @@ -101,4 +101,15 @@ describe('Radio', () => { expect(radios.length).toBe(3); }); + + it('all children should have a name property', () => { + const GROUP_NAME = 'radiogroup'; + const wrapper = mount( + createRadioGroup({ name: GROUP_NAME }) + ); + + expect(wrapper.find('input[type="radio"]').forEach((el) => { + expect(el.props().name).toEqual(GROUP_NAME); + })); + }); }); diff --git a/components/radio/demo/radiogroup-with-name.md b/components/radio/demo/radiogroup-with-name.md new file mode 100644 index 0000000000..9d2a52000f --- /dev/null +++ b/components/radio/demo/radiogroup-with-name.md @@ -0,0 +1,32 @@ +--- +order: 4 +title: + zh-CN: 单选组合 - 配合 name 使用 + en-US: RadioGroup with name +--- + +## zh-CN + +可以为 RadioGroup 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 RadioGroup 下的 Radio 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。 + +## en-US + +Passing the `name` property to all `input[type="radio"]` that are in the same RadioGroup. It is usually used to let the browser see your RadioGroup as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same RadioGroup. + +```jsx +import { Radio } from 'antd'; +const RadioGroup = Radio.Group; + +function App() { + return ( + + A + B + C + D + + ); +} + +ReactDOM.render(, mountNode); +``` diff --git a/components/radio/group.tsx b/components/radio/group.tsx index a1a058a816..8f57fdd010 100644 --- a/components/radio/group.tsx +++ b/components/radio/group.tsx @@ -24,6 +24,7 @@ export interface RadioGroupProps extends AbstractCheckboxGroupProps { size?: 'large' | 'default' | 'small'; onMouseEnter?: React.FormEventHandler; onMouseLeave?: React.FormEventHandler; + name?: string; } export default class RadioGroup extends React.Component { @@ -57,6 +58,7 @@ export default class RadioGroup extends React.Component { onChange: this.onRadioChange, value: this.state.value, disabled: this.props.disabled, + name: this.props.name, }, }; } diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md index 0523b1bb8f..cedb78e1af 100644 --- a/components/radio/index.en-US.md +++ b/components/radio/index.en-US.md @@ -27,6 +27,7 @@ radio group，wrap a group of `Radio`。 | Property | Description | Type | optional | Default | |----------------|----------------------------------|-------------------|--------|--------| +| name | The `name` property of all `input[type="radio"]` children | string | | none | | onChange | The callback function that is triggered when the state changes. | Function(e:Event) | none | none | | value | Used for setting the currently selected value. | any | none | none | | defaultValue | Default selected value | any | none | none | diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md index 7e46d66f1b..087dce45e9 100644 --- a/components/radio/index.zh-CN.md +++ b/components/radio/index.zh-CN.md @@ -28,6 +28,7 @@ title: Radio | 参数 | 说明 | 类型 | 可选值 | 默认值 | |----------------|----------------------------------|-------------------|--------|--------| +| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | | 无 | | onChange | 选项变化时的回调函数 | Function(e:Event) | 无 | 无 | | value | 用于设置当前选中的值 | any | 无 | 无 | | defaultValue | 默认选中的值 | any | 无 | 无 | diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx index 8dc470c32f..9aa8c1ac99 100644 --- a/components/radio/radio.tsx +++ b/components/radio/radio.tsx @@ -40,6 +40,7 @@ export default class Radio extends React.Component { const { radioGroup } = context; let radioProps: RadioProps = { ...restProps }; if (radioGroup) { + radioProps.name = radioGroup.name; radioProps.onChange = radioGroup.onChange; radioProps.checked = props.value === radioGroup.value; radioProps.disabled = props.disabled || radioGroup.disabled;