From 0648172973a169f0e6afb601a28238b2c88ae705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=AD=90=E6=AF=85?= <576625322@qq.com>
Date: Tue, 28 Mar 2017 11:56:38 +0800
Subject: [PATCH] fix jslint (#5514)

---
 components/radio/__tests__/group.test.js     | 24 +++++++
 components/radio/demo/radiogroup-optional.md | 68 ++++++++++++++++++++
 components/radio/group.tsx                   | 47 +++++++++++++-
 components/radio/index.en-US.md              |  1 +
 components/radio/index.zh-CN.md              |  1 +
 5 files changed, 138 insertions(+), 3 deletions(-)
 create mode 100644 components/radio/demo/radiogroup-optional.md

diff --git a/components/radio/__tests__/group.test.js b/components/radio/__tests__/group.test.js
index 064e777147..69a1059db3 100644
--- a/components/radio/__tests__/group.test.js
+++ b/components/radio/__tests__/group.test.js
@@ -16,6 +16,21 @@ describe('Radio', () => {
     );
   }
 
+  function createRadioGroupByOption(props) {
+    const options = [
+      { label: 'A', value: 'A' },
+      { label: 'B', value: 'B' },
+      { label: 'C', value: 'C' },
+    ];
+
+    return (
+      <RadioGroup
+        {...props}
+        options={options}
+      />
+    );
+  }
+
   it('responses hover events', () => {
     const onMouseEnter = jest.fn();
     const onMouseLeave = jest.fn();
@@ -77,4 +92,13 @@ describe('Radio', () => {
     radios.at(0).simulate('change');
     expect(onChange.mock.calls.length).toBe(0);
   });
+
+  it('optional should correct render', () => {
+    const wrapper = mount(
+      createRadioGroupByOption()
+    );
+    const radios = wrapper.find('input');
+
+    expect(radios.length).toBe(3);
+  });
 });
diff --git a/components/radio/demo/radiogroup-optional.md b/components/radio/demo/radiogroup-optional.md
new file mode 100644
index 0000000000..7abda0b425
--- /dev/null
+++ b/components/radio/demo/radiogroup-optional.md
@@ -0,0 +1,68 @@
+---
+order: 2
+title:
+  zh-CN: RadioGroup 组合 - 配置方式
+  en-US: RadioGroup group - optional
+---
+
+## zh-CN
+
+通过配置参数来控制渲染单选框。
+
+## en-US
+
+Render radios by configuring parameters.
+
+```jsx
+import { Radio } from 'antd';
+const RadioGroup = Radio.Group;
+
+const plainOptions = ['Apple', 'Pear', 'Orange'];
+const options = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange' },
+];
+const optionsWithDisabled = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange', disabled: false },
+];
+
+class App extends React.Component {
+  state = {
+    value1: 'Apple',
+    value2: 'Apple',
+    value3: 'Apple',
+  }
+  onChange1 = (e) => {
+    console.log('radio1 checked', e.target.value);
+    this.setState({
+      value1: e.target.value,
+    });
+  }
+  onChange2 = (e) => {
+    console.log('radio2 checked', e.target.value);
+    this.setState({
+      value2: e.target.value,
+    });
+  }
+  onChange3 = (e) => {
+    console.log('radio3 checked', e.target.value);
+    this.setState({
+      value3: e.target.value,
+    });
+  }
+  render() {
+    return (
+      <div>
+        <RadioGroup options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
+        <RadioGroup options={options} onChange={this.onChange2} value={this.state.value2} />
+        <RadioGroup options={optionsWithDisabled} onChange={this.onChange3} value={this.state.value3} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+```
\ No newline at end of file
diff --git a/components/radio/group.tsx b/components/radio/group.tsx
index 313def58d1..bddeb5e407 100644
--- a/components/radio/group.tsx
+++ b/components/radio/group.tsx
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import shallowEqual from 'shallowequal';
+import Radio from './radio';
 
 function getCheckedValue(children) {
   let value = null;
@@ -29,6 +30,12 @@ export interface RadioGroupProps {
   disabled?: boolean;
   onMouseEnter?: React.FormEventHandler<any>;
   onMouseLeave?: React.FormEventHandler<any>;
+  /** 以配置的方式设置 Radio 子元素，设置了此参数，会忽略 children */
+  options?: Array<string | {
+    label: string;
+    value: string;
+    disabled?: boolean;
+  }>;
 }
 
 export default class RadioGroup extends React.Component<RadioGroupProps, any> {
@@ -83,8 +90,8 @@ export default class RadioGroup extends React.Component<RadioGroupProps, any> {
 
   shouldComponentUpdate(nextProps, nextState, nextContext) {
     return !shallowEqual(this.props, nextProps) ||
-           !shallowEqual(this.state, nextState) ||
-           !shallowEqual(this.context.group, nextContext.group);
+      !shallowEqual(this.state, nextState) ||
+      !shallowEqual(this.context.group, nextContext.group);
   }
 
   onRadioChange = (ev) => {
@@ -103,10 +110,44 @@ export default class RadioGroup extends React.Component<RadioGroupProps, any> {
   }
   render() {
     const props = this.props;
-    const { prefixCls = 'ant-radio-group', className = '', children } = props;
+    const { prefixCls = 'ant-radio-group', className = '' } = props;
     const classString = classNames(prefixCls, {
       [`${prefixCls}-${props.size}`]: props.size,
     }, className);
+
+    let children: React.ReactChildren[] | React.ReactElement<any>[] | React.ReactNode = props.children;
+
+    // 如果存在 options, 优先使用
+    if (props.options && props.options.length > 0) {
+      children = props.options.map((option, index) => {
+        if (typeof option === 'string') { // 此处类型自动推导为 string
+          return (
+            <Radio
+              key={index}
+              disabled={this.props.disabled}
+              value={option}
+              onChange={this.onRadioChange}
+              checked={this.state.value === option}
+            >
+              {option}
+            </Radio>
+          );
+        } else { // 此处类型自动推导为 { label: string value: string }
+          return (
+            <Radio
+              key={index}
+              disabled={option.disabled || this.props.disabled}
+              value={option.value}
+              onChange={this.onRadioChange}
+              checked={this.state.value === option.value}
+            >
+              {option.label}
+            </Radio>
+          );
+        }
+      });
+    }
+
     return (
       <div
         className={classString}
diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md
index b2d4c23956..e5d6a508ab 100644
--- a/components/radio/index.en-US.md
+++ b/components/radio/index.en-US.md
@@ -31,3 +31,4 @@ radio group，wrap a group of `Radio`。
 | value | Used for setting the currently selected value. | any            | none     | none     |
 | defaultValue   | Default selected value                     | any            | none     | none     |
 | size           | Size, only on radio style           | string            | `large` `default` `small` | `default` |
+| options        | set children optional               | string[] \| Array<{ label: string value: string disabled?: boolean }>            | 无     | 无     |
diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md
index 13e20d26ca..7e46d66f1b 100644
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@@ -32,3 +32,4 @@ title: Radio
 | value          | 用于设置当前选中的值             | any            | 无     | 无     |
 | defaultValue   | 默认选中的值                     | any            | 无     | 无     |
 | size           | 大小，只对按钮样式生效           | string            | `large` `default` `small` | `default` |
+| options        | 以配置形式设置子元素             | string[] \| Array<{ label: string value: string disabled?: boolean }>            | 无     | 无     |