improve checkbox group

1. Add basic style
2. make it controlled component
3. code style

components/checkbox/Group.js

@@ -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 (<div className="ant-checkbox-group">
-      {options.map(option =>
-        [<Checkbox disabled={this.props.disabled} checked={this.state.value.indexOf(option) !== -1} onChange={this.toggleOption.bind(this, option)}/>, option])
-      }
-    </div>);
-  },
-});

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 <div className="ant-checkbox-group">
+      {
+        options.map(option =>
+          <label className="ant-checkbox-group-item" key={option}>
+            <Checkbox disabled={this.props.disabled}
+            checked={this.state.value.indexOf(option) !== -1}
+            onChange={this.toggleOption.bind(this, option)} />
+            {option}
+          </label>
+        )
+      }
+    </div>;
+  },
+});

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(<label>
-  <CheckboxGroup options={['apple', 'pear']}onChange={onChange} />
-</label>, document.getElementById('components-checkbox-demo-group'));
+ReactDOM.render(
+  <CheckboxGroup options={['Apple', 'Pear', 'Orange']} defaultValue={['Apple']} onChange={onChange} />
+, document.getElementById('components-checkbox-demo-group'));
 ````

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) |  |  | |

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;
+    }
+  }
+}
+
 }