feat: checkbox add indeterminate (#2905)

components/checkbox/demo/check-all.md

@@ -0,0 +1,65 @@
+---
+order: 4
+title:
+    zh-CN: 全选
+    en-US: Check all
+---
+
+## zh-CN
+
+在实现全选效果时，你可能会用到 `indeterminate` 属性。
+
+## en-US
+
+The `indeterminate` property can help you to achieve a 'check all' effect.
+
+````jsx
+import { Checkbox } from 'antd';
+const CheckboxGroup = Checkbox.Group;
+
+const plainOptions = ['Apple', 'Pear', 'Orange'];
+const defaultCheckedList = ['Apple', 'Orange'];
+
+const App = React.createClass({
+  getInitialState() {
+    return {
+      checkedList: defaultCheckedList,
+      indeterminate: true,
+      checkAll: false,
+    };
+  },
+  render() {
+    return (
+      <div>
+        <div style={{ borderBottom: '1px solid #E9E9E9' }}>
+          <Checkbox
+            indeterminate={this.state.indeterminate}
+            onChange={this.onCheckAllChange}
+            checked={this.state.checkAll}
+          >
+						全选
+          </Checkbox>
+        </div>
+        <br />
+        <CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
+      </div>
+    );
+  },
+  onChange(checkedList) {
+    this.setState({
+      checkedList,
+      indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
+      checkAll: checkedList.length === plainOptions.length,
+    });
+  },
+  onCheckAllChange(e) {
+    this.setState({
+      checkedList: e.target.checked ? plainOptions : [],
+      indeterminate: false,
+      checkAll: e.target.checked,
+    });
+  },
+});
+
+ReactDOM.render(<App />, mountNode);
+````

components/checkbox/index.tsx

@@ -10,6 +10,8 @@ export interface CheckboxProps {
   checked?: boolean;
   /** 初始是否选中 */
   defaultChecked?: boolean;
+  /** indeterminate 状态，只负责样式控制 */
+  indeterminate?: boolean;
   /** 变化时回调函数 */
   onChange?: React.FormEventHandler;
   style?: React.CSSProperties;
@@ -21,21 +23,30 @@ export default class Checkbox extends React.Component<CheckboxProps, any> {
   static Group = CheckboxGroup;
   static defaultProps = {
     prefixCls: 'ant-checkbox',
+    indeterminate: false,
   };
   shouldComponentUpdate(...args) {
     return PureRenderMixin.shouldComponentUpdate.apply(this, args);
   }
   render() {
-    const [{ prefixCls, style, children, className }, restProps] = splitObject(
-      this.props, ['prefixCls', 'style', 'children', 'className']
+    const [{ prefixCls, style, children, className, indeterminate }, restProps] = splitObject(
+      this.props, ['prefixCls', 'style', 'children', 'className', 'indeterminate']
     );
     const classString = classNames({
       [className]: !!className,
       [`${prefixCls}-wrapper`]: true,
     });
+    const checkboxClass = classNames({
+      [`${prefixCls}-indeterminate`]: indeterminate,
+    });
     return (
       <label className={classString} style={style}>
-        <RcCheckbox {...restProps} prefixCls={prefixCls} children={null} />
+        <RcCheckbox
+          {...restProps}
+          prefixCls={prefixCls}
+          className={checkboxClass}
+          children={null}
+        />
         {children !== undefined ? <span>{children}</span> : null}
       </label>
     );

components/checkbox/index.zh-CN.md

@@ -21,6 +21,7 @@ english: Checkbox
 | checked | 指定当前是否选中 | Boolean  | false |
 | defaultChecked | 初始是否选中 | Boolean | false |
 | onChange | 变化时回调函数 | Function(e:Event) | - |
+| indeterminate | 设置 indeterminate 状态，只负责样式控制 | Boolean | false |
 
 ### Checkbox Group