Merge pull request #742 from sskyy/checkbox-group

checkbox demo complete

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

@@ -0,0 +1,20 @@
+# 基本用法
+
+- order: 3
+
+方便的生成一个 Checkbox 组。
+
+---
+
+````jsx
+import { Checkbox } from 'antd';
+const CheckboxGroup = Checkbox.Group;
+
+function onChange(checkedValues) {
+  console.log('checked = ', checkedValues);
+}
+
+ReactDOM.render(
+  <CheckboxGroup options={['Apple', 'Pear', 'Orange']} defaultValue={['Apple']} onChange={onChange} />
+, document.getElementById('components-checkbox-demo-group'));
+````

components/checkbox/index.jsx

@@ -1,13 +1,18 @@
-import Checkbox from 'rc-checkbox';
+import RcCheckbox from 'rc-checkbox';
 import React from 'react';
+import Group from './Group';
 
-export default React.createClass({
+const Checkbox = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-checkbox'
     };
   },
   render() {
-    return <Checkbox {...this.props} />;
+    return <RcCheckbox {...this.props} />;
   }
 });
+
+Checkbox.Group = Group;
+
+export default Checkbox;

components/checkbox/index.md

@@ -19,6 +19,15 @@
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
-|  checked | 指定当前是否选中 | boolean  |   | false    |
-|  defaultChecked | 初始是否选中 | boolean |  | false |
-|  onChange | 变化时回调函数 | Function(e:Event) |  |  | |
+| checked | 指定当前是否选中 | boolean  |   | false    |
+| defaultChecked | 初始是否选中 | boolean |  | false |
+| onChange | 变化时回调函数 | Function(e:Event) |  |  | |
+
+### Checkbox Group
+
+| 参数      | 说明                                     | 类型       |  可选值 | 默认值 |
+|-----------|------------------------------------------|------------|---------|--------|
+| 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;
+    }
+  }
+}
+
 }