diff --git a/components/checkbox/Group.js b/components/checkbox/Group.js deleted file mode 100644 index 1c9e3e9775..0000000000 --- a/components/checkbox/Group.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import Checkbox from '../index'; - -export default React.createClass({ - propTypes: { - value: React.PropTypes.array.isOptional, - options: React.PropTypes.array.isRequired, - onChange: React.PropTypes.any.isOptional, - }, - getInitialState() { - const value = this.props.value ? this.props.value.slice() : []; - - return { value }; - }, - componentWillReceiveProps(nextProps) { - const value = nextProps.value ? nextProps.value.slice() : []; - this.setState({ value }); - }, - toggleOption(option, e) { - e.preventDefault(); - const optionIndex = this.state.value.indexOf(option); - const value = this.state.value.slice(); - if (optionIndex === - 1) { - value.push(option); - } else { - value.splice(optionIndex, 1); - } - this.setState({ value }); - return this.props.onChange && this.props.onChange(value.slice()); - }, - render() { - const options = this.props.options; - return (
- {options.map(option => - [, option]) - } -
); - }, -}); diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx new file mode 100644 index 0000000000..eb6db6680f --- /dev/null +++ b/components/checkbox/Group.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import Checkbox from './index'; + +export default React.createClass({ + getDefaultProps() { + return { + options: [], + onChange() {}, + }; + }, + propTypes: { + defaultValue: React.PropTypes.array, + value: React.PropTypes.array, + options: React.PropTypes.array.isRequired, + onChange: React.PropTypes.func, + }, + getInitialState() { + const { value, defaultValue } = this.props; + return { + value: value || defaultValue || [], + }; + }, + componentWillReceiveProps(nextProps) { + if ('value' in nextProps) { + this.setState({ + value: nextProps.value, + }); + } + }, + toggleOption(option) { + const optionIndex = this.state.value.indexOf(option); + const value = this.state.value; + if (optionIndex === - 1) { + value.push(option); + } else { + value.splice(optionIndex, 1); + } + if (!('value' in this.props)) { + this.setState({ value }); + } + this.props.onChange(value); + }, + render() { + const options = this.props.options; + return
+ { + options.map(option => + + ) + } +
; + }, +}); diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md index 4db2c75b40..4d44e5e6a0 100644 --- a/components/checkbox/demo/group.md +++ b/components/checkbox/demo/group.md @@ -2,7 +2,7 @@ - order: 3 -checkbox 组。 +方便的生成一个 Checkbox 组。 --- @@ -14,7 +14,7 @@ function onChange(checkedValues) { console.log('checked = ', checkedValues); } -ReactDOM.render(, document.getElementById('components-checkbox-demo-group')); +ReactDOM.render( + +, document.getElementById('components-checkbox-demo-group')); ```` diff --git a/components/checkbox/index.md b/components/checkbox/index.md index f033fb5fc5..b5357ec224 100644 --- a/components/checkbox/index.md +++ b/components/checkbox/index.md @@ -19,14 +19,15 @@ | 参数 | 说明 | 类型 | 可选值 |默认值 | |-----------|------------------------------------------|------------|-------|--------| -| checked | 指定当前是否选中 | boolean | | false | -| defaultChecked | 初始是否选中 | boolean | | false | -| onChange | 变化时回调函数 | Function(e:Event) | | | | +| checked | 指定当前是否选中 | boolean | | false | +| defaultChecked | 初始是否选中 | boolean | | false | +| onChange | 变化时回调函数 | Function(e:Event) | | | | ### Checkbox Group -| 参数 | 说明 | 类型 | 可选值 |默认值 | -|-----------|------------------------------------------|------------|-------|--------| -| value | 指定选中的选项| array| | []| -| options | 指定可选项| array| | []| -| onChange | 变化时回调函数 | Function(e:Event) | | | | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|-----------|------------------------------------------|------------|---------|--------| +| defaultValue | 默认选中的选项 | array | | [] | +| value | 指定选中的选项| array | | [] | +| options | 指定可选项 | array | | [] | +| onChange | 变化时回调函数 | Function(checkedValue) | | | | diff --git a/style/components/checkbox.less b/style/components/checkbox.less index 9d2c3f83ac..f0da1aefd2 100644 --- a/style/components/checkbox.less +++ b/style/components/checkbox.less @@ -161,4 +161,15 @@ margin-left: 8px; } +.@{checkbox-wrap-prefix-cls}-group { + font-size: @font-size-base; + &-item { + display: inline-block; + margin-left: 16px; + &:first-child { + margin-left: 0; + } + } +} + }