checkbox add prop id

ZhongAnTech · Aug 16, 2017 · b7135ad · b7135ad
1 parent 4149c01
commit b7135ad
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 13 deletions.
diff --git a/components/Checkbox/Checkbox.jsx b/components/Checkbox/Checkbox.jsx
@@ -35,7 +35,7 @@ class Checkbox extends PureComponent {
   }
 
   render() {
-    const { prefixCls, className, theme, type, value, block, disabled, children } = this.props;
+    const { prefixCls, className, theme, type, value, block, disabled, id, children } = this.props;
     const { checked } = this.state;
 
     const cls = classnames({
@@ -67,8 +67,12 @@ class Checkbox extends PureComponent {
       <div className={cls}>
         <div className={`${prefixCls}-wrapper`}>
           <span className={`${prefixCls}-inner`} />
-          <span className={`${prefixCls}-text`}>{children}</span>
-          <input type="checkbox" className={`${prefixCls}-input`} disabled={disabled} checked={checked} onChange={this.onValueChange} />
+          {
+            children
+              ? <span className={`${prefixCls}-text`}>{children}</span>
+              : null
+          }
+          <input id={id} type="checkbox" className={`${prefixCls}-input`} disabled={disabled} checked={checked} onChange={this.onValueChange} />
         </div>
       </div>
     );

diff --git a/docs/zh-cn/components/Checkbox.md b/docs/zh-cn/components/Checkbox.md
@@ -22,8 +22,12 @@ import { Checkbox } from 'zarm';
 
 ```jsx
 <Checkbox.Group
-  value={this.state.checkbox}
-  onChange={value => console.log(`checkbox to ${value}`)}>
+  value={this.state.value}
+  onChange={value => {
+    this.setState({
+      value,
+    })
+  }}>
   <Checkbox value="0">选项一</Checkbox>
   <Checkbox value="1">选项二</Checkbox>
   <Checkbox value="2">选项三</Checkbox>
@@ -139,10 +143,11 @@ import { Checkbox } from 'zarm';
 | className | string | 无 | | 追加类名 |
 | theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
 | type | string | 无 | 'button', 'cell' | 显示类型 |
+| value | array | [] | | 选中值 |
 | shape | string | 无 | 'radius', 'round' | 形状 |
 | block | bool | false | | 是否为块级元素 |
 | disabled | bool | false | | 是否禁用 |
-| onChange | func | noop | \(value: string, number\) | 值变化时触发的回调函数 |
+| onChange | func | noop | \(value: array\) | 值变化时触发的回调函数 |
 
 
 
diff --git a/examples/pages/CheckboxPage.jsx b/examples/pages/CheckboxPage.jsx
@@ -24,7 +24,9 @@ class Page extends PureComponent {
               <Panel.Title>基本用法</Panel.Title>
             </Panel.Header>
             <Panel.Body>
-              <Cell><Checkbox onChange={checked => console.log(`checkbox to ${checked}`)}>单独使用</Checkbox></Cell>
+              <Cell>
+                <Checkbox onChange={checked => console.log(`checkbox to ${checked}`)}>单独使用</Checkbox>
+              </Cell>
 
               <Cell
                 description={

diff --git a/styles/components/Checkbox.scss b/styles/components/Checkbox.scss
@@ -24,6 +24,10 @@ $prefixCls: za-checkbox;
   }
 
   &-text {
+    color: #333;
+  }
+
+  &-inner + &-text {
     margin-left: r(5);
   }
 
@@ -122,13 +126,19 @@ $prefixCls: za-checkbox;
 
   /* 禁用状态 */
   &.disabled {
-    .#{$prefixCls}-inner {
-      border-color: #d9d9d9;
-      background-color: #f3f3f3;
-      cursor: not-allowed;
+    .#{$prefixCls} {
+      &-inner {
+        border-color: #d9d9d9;
+        background-color: #f3f3f3;
+        cursor: not-allowed;
+
+        &:before {
+          border-color: #ccc;
+        }
+      }
 
-      &:before {
-        border-color: #ccc;
+      &-text {
+        opacity: 0.5;
       }
     }
   }