增强部分功能

.eslintrc.json

@@ -4,7 +4,9 @@
     "react"
   ],
   "env": {
-    "browser": true
+    "browser": true,
+    "node": true,
+    "mocha": true
   },
   "rules": {
     "import/no-extraneous-dependencies": "off",

.gitignore

@@ -26,4 +26,5 @@ spm_modules
 .happypack
 dist
 build
+coverage
 assets/**/*.css

demo/CheckboxGroupDemo.jsx

@@ -20,6 +20,10 @@ class Demo extends React.Component {
       value: ['air'],
       disabled: false,
     };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleChange2 = this.handleChange2.bind(this);
+    this.handleChangeLayout = this.handleChangeLayout.bind(this);
   }
 
   handleChange(value) {
@@ -35,20 +39,38 @@ class Demo extends React.Component {
     });
   }
 
+  handleChangeLayout() {
+    this.setState({
+      verticalAlign: !this.state.verticalAlign,
+    });
+  }
+
   render() {
+    const {
+      disabled,
+      value,
+      verticalAlign,
+    } = this.state;
     return (
-      <div>
+      <div style={{
+        padding: '50px',
+      }}
+      >
         <CheckboxGroup
-          disabled={this.state.disabled}
-          onChange={this.handleChange.bind(this)}
-          value={this.state.value}
+          disabled={disabled}
+          onChange={this.handleChange}
+          value={value}
+          verticalAlign={verticalAlign}
         >
           <Item
             text="天空天空天空"
             value="air"
             addon={
               <Popover overlay={<div>提示</div>}>
-                <i className="kuma-icon kuma-icon-caution" style={{ color: 'blue', fontSize: '12px', marginLeft: '3px' }} />
+                <i
+                  className="kuma-icon kuma-icon-caution"
+                  style={{ color: 'blue', fontSize: '12px', marginLeft: '3px' }}
+                />
               </Popover>
             }
           />
@@ -58,7 +80,8 @@ class Demo extends React.Component {
           <Item text="火车飞机飞机" value="train" />
 
         </CheckboxGroup>
-        <Button onClick={this.handleChange2.bind(this)}>改变 state</Button>
+        <Button onClick={this.handleChange2}>改变 state</Button> &nbsp;
+        <Button onClick={this.handleChangeLayout}>改变布局</Button>
       </div>
     );
   }

src/CheckboxGroup.jsx

@@ -10,7 +10,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Item from './CheckboxItem';
 
-
 const shallowArrayCopy = (a) => {
   const value = a instanceof Array ? [...a] : a;
   return value;
@@ -37,17 +36,25 @@ class CheckboxGroup extends React.Component {
 
   processChild() {
     const me = this;
+    const {
+      value,
+      disabled,
+      verticalAlign,
+    } = me.props;
     const length = React.Children.count(me.props.children);
     if (!length) return false;
     const elements = React.Children.map(me.props.children, (child, index) => {
       if (!!child.type && child.type.displayName === 'CheckboxItem') {
-        const value = me.props.value;
-        return React.cloneElement(child, {
-          jsxdisabled: me.props.disabled,
-          onChange: me.handleChange.bind(me),
-          key: index,
-          checked: ((Array.isArray(value) ? value : [value]).indexOf(child.props.value) !== -1),
-        });
+        return (
+          <span className={`kuma-checkbox-group-${verticalAlign ? 'row' : 'cell'}`}>
+            {React.cloneElement(child, {
+              jsxdisabled: disabled,
+              onChange: me.handleChange.bind(me),
+              key: index,
+              checked: ((Array.isArray(value) ? value : [value]).indexOf(child.props.value) !== -1),
+            })}
+          </span>
+        );
       }
       return null;
     });
@@ -81,6 +88,7 @@ CheckboxGroup.defaultProps = {
   onChange: () => { },
   disabled: false,
   className: 'kuma-checkbox-group',
+  verticalAlign: false,
 };
 
 
@@ -90,6 +98,7 @@ CheckboxGroup.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   className: PropTypes.string,
+  verticalAlign: PropTypes.bool,
 };
 
 CheckboxGroup.displayName = 'CheckboxGroup';

src/CheckboxGroup.less

@@ -26,3 +26,7 @@
         color: @normal-alpha-5;
     }
 }
+
+.@{__checkbox-prefix-cls}-row {
+    display: block;
+}

src/CheckboxItem.jsx

@@ -8,15 +8,26 @@ class CheckboxItem extends React.Component {
     const me = this;
     me.props.onChange(e.currentTarget.checked, me.props.value);
   }
+
   render() {
     const me = this;
-    const { prefixCls, className } = me.props;
+    const {
+      prefixCls,
+      className,
+      checked,
+      addon,
+      showAddonWhenChecked,
+    } = me.props;
     let disabled = false;
     if (me.props.disabled !== undefined) {
       disabled = me.props.disabled;
     } else {
       disabled = me.props.jsxdisabled;
     }
+    let showAddon = true;
+    if (!addon || (showAddonWhenChecked && !checked)) {
+      showAddon = false;
+    }
     return (
       <label
         className={classnames(`${prefixCls}`, {
@@ -27,14 +38,19 @@ class CheckboxItem extends React.Component {
         <input
           type="checkbox"
           disabled={disabled}
-          checked={me.props.checked}
+          checked={checked}
           className="kuma-checkbox"
           onChange={me.handleChange.bind(me)}
         />
         <s />
-        <span className={`${prefixCls}-content`} >
-          <span dangerouslySetInnerHTML={{ __html: me.props.text }} />
-          {me.props.addon}
+        <span className={`${prefixCls}-content`}>
+          <span
+            className="kuma-checkbox-group-item-text"
+            dangerouslySetInnerHTML={{ __html: me.props.text }}
+          />
+          {showAddon ? (
+            <span className="kuma-checkbox-group-item-addon">{addon}</span>
+          ) : null}
         </span>
       </label>
     );
@@ -44,7 +60,10 @@ class CheckboxItem extends React.Component {
 CheckboxItem.defaultProps = {
   value: '',
   prefixCls: 'kuma-checkbox-group-item',
-  onChange() { },
+  onChange() {
+  },
+  addon: null,
+  showAddonWhenChecked: false,
 };
 
 CheckboxItem.propTypes = {
@@ -53,6 +72,8 @@ CheckboxItem.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func,
+  addon: PropTypes.node,
+  showAddonWhenChecked: PropTypes.bool,
 };
 
 CheckboxItem.displayName = 'CheckboxItem';

src/index.js

@@ -6,4 +6,6 @@
  * All rights reserved.
  */
 
-export default from './CheckboxGroup';
+import CheckboxGroup from './CheckboxGroup';
+
+export default CheckboxGroup;