From efd768bf076f0e138d0efaa2b2fd18fc53ea5218 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Sat, 20 Feb 2016 16:39:49 +0800 Subject: [PATCH 1/4] allow more value type for radiogroup --- components/radio/demo/radiogroup.md | 13 ++++---- components/radio/group.jsx | 46 ++++++++++++++++++++++------- package.json | 4 +-- 3 files changed, 44 insertions(+), 19 deletions(-) diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md index 820bab872c..7bd3991de0 100644 --- a/components/radio/demo/radiogroup.md +++ b/components/radio/demo/radiogroup.md @@ -13,11 +13,11 @@ const RadioGroup = Radio.Group; const App = React.createClass({ getInitialState() { return { - value: 'a' + value: 1 }; }, onChange(e) { - console.log(`radio checked:${e.target.value}`); + console.log(`radio checked`, e.target.value); this.setState({ value: e.target.value }); @@ -26,12 +26,11 @@ const App = React.createClass({ return (
- A - B - C - D + A + B + C + D -
你选中的: {this.state.value}
); } diff --git a/components/radio/group.jsx b/components/radio/group.jsx index 293288e687..f6c486b63e 100644 --- a/components/radio/group.jsx +++ b/components/radio/group.jsx @@ -1,13 +1,17 @@ import React from 'react'; function getCheckedValue(children) { - let checkedValue = null; + let value = null; + let matched = 0; React.Children.forEach(children, (radio) => { if (radio.props && radio.props.checked) { - checkedValue = radio.props.value; + value = radio.props.value; + matched = 1; } }); - return checkedValue; + return matched ? { + value, + } : undefined; } export default React.createClass({ @@ -21,29 +25,51 @@ export default React.createClass({ }, getInitialState() { let props = this.props; + let value; + if ('value' in props) { + value = props.value; + } else if ('defaultValue' in props) { + value = props.defaultValue; + } else { + const checkedValue = getCheckedValue(props.children); + value = checkedValue && checkedValue.value; + } return { - value: props.value || props.defaultValue || getCheckedValue(props.children) + value, }; }, componentWillReceiveProps(nextProps) { - if ('value' in nextProps || getCheckedValue(nextProps.children)) { + if ('value' in nextProps) { this.setState({ - value: nextProps.value || getCheckedValue(nextProps.children) + value: nextProps.value }); + } else { + const checkedValue = getCheckedValue(nextProps.children); + if (checkedValue) { + this.setState({ + value: checkedValue.value + }); + } } }, onRadioChange(ev) { - this.setState({ - value: ev.target.value - }); + if (!('value' in this.props)) { + this.setState({ + value: ev.target.value + }); + } this.props.onChange(ev); }, render() { const props = this.props; const children = React.Children.map(props.children, (radio) => { if (radio.props) { + const keyProps = {}; + if (!('key' in radio) && typeof radio.props.value === 'string') { + keyProps.key = radio.props.value; + } return React.cloneElement(radio, { - key: radio.props.value, + ...keyProps, ...radio.props, onChange: this.onRadioChange, checked: this.state.value === radio.props.value, diff --git a/package.json b/package.json index bf2b5111ed..a41ce18464 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.3", + "version": "0.12.2", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", @@ -41,7 +41,7 @@ "rc-animate": "~2.0.2", "rc-calendar": "~5.4.0", "rc-cascader": "~0.9.0", - "rc-checkbox": "~1.2.0", + "rc-checkbox": "~1.3.0", "rc-collapse": "~1.4.4", "rc-dialog": "~5.3.1", "rc-dropdown": "~1.4.3", From 5a032af8e92190478ee2622a1e18405abb647f18 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 21 Feb 2016 14:04:08 +0800 Subject: [PATCH 2/4] update some code style --- components/radio/group.jsx | 16 +++++++--------- package.json | 2 +- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/components/radio/group.jsx b/components/radio/group.jsx index f6c486b63e..113b470690 100644 --- a/components/radio/group.jsx +++ b/components/radio/group.jsx @@ -2,16 +2,14 @@ import React from 'react'; function getCheckedValue(children) { let value = null; - let matched = 0; + let matched = false; React.Children.forEach(children, (radio) => { if (radio.props && radio.props.checked) { value = radio.props.value; - matched = 1; + matched = true; } }); - return matched ? { - value, - } : undefined; + return matched ? { value } : undefined; } export default React.createClass({ @@ -20,7 +18,7 @@ export default React.createClass({ prefixCls: 'ant-radio-group', disabled: false, onChange() { - } + }, }; }, getInitialState() { @@ -41,13 +39,13 @@ export default React.createClass({ componentWillReceiveProps(nextProps) { if ('value' in nextProps) { this.setState({ - value: nextProps.value + value: nextProps.value, }); } else { const checkedValue = getCheckedValue(nextProps.children); if (checkedValue) { this.setState({ - value: checkedValue.value + value: checkedValue.value, }); } } @@ -55,7 +53,7 @@ export default React.createClass({ onRadioChange(ev) { if (!('value' in this.props)) { this.setState({ - value: ev.target.value + value: ev.target.value, }); } this.props.onChange(ev); diff --git a/package.json b/package.json index a41ce18464..3d2ab70cbc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.2", + "version": "0.12.3", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From e539e08f4ea6c4cb2d6ae0b84108c60189331f8c Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 21 Feb 2016 14:13:33 +0800 Subject: [PATCH 3/4] Fix CheckboxGroup initial state --- components/checkbox/Group.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx index 7071094228..e90d13e63b 100644 --- a/components/checkbox/Group.jsx +++ b/components/checkbox/Group.jsx @@ -16,10 +16,14 @@ export default React.createClass({ onChange: React.PropTypes.func, }, getInitialState() { - const { value, defaultValue } = this.props; - return { - value: value || defaultValue, - }; + const props = this.props; + let value; + if ('value' in props) { + value = props.value; + } else if ('defaultValue' in props) { + value = props.defaultValue; + } + return { value }; }, componentWillReceiveProps(nextProps) { if ('value' in nextProps) { From c63f0b806032a83e8be0df5d641f7d2089693558 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 21 Feb 2016 14:14:59 +0800 Subject: [PATCH 4/4] update demo text --- components/checkbox/demo/group.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md index 89b03f9949..b7dacc4f69 100644 --- a/components/checkbox/demo/group.md +++ b/components/checkbox/demo/group.md @@ -2,7 +2,7 @@ - order: 3 -方便的生成一个 Checkbox 组。 +方便的从数组生成 Checkbox 组。若需要 label 和 value 分离请直接使用 Checkbox。 ---