bee-checkbox - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

build/Checkbox.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
@@ -36,5 +36,5 @@
 
-  colors: _react.PropTypes.oneOf(['', 'dark', 'success', 'info', 'warning', 'danger', 'primary']),
+    colors: _react.PropTypes.oneOf(['', 'dark', 'success', 'info', 'warning', 'danger', 'primary']),
 
-  disabled: _react.PropTypes.bool
+    disabled: _react.PropTypes.bool
 
@@ -44,6 +44,6 @@ };
 var defaultProps = {
-  disabled: false,
-  colors: 'primary',
-  clsPrefix: 'u-checkbox',
-  checked: false
+    disabled: false,
+    colors: 'primary',
+    clsPrefix: 'u-checkbox',
+    defaultChecked: false
 };
@@ -53,78 +53,87 @@ var clsPrefix = 'u-checkbox';
 var Checkbox = function (_React$Component) {
-  _inherits(Checkbox, _React$Component);
+    _inherits(Checkbox, _React$Component);
 
-  function Checkbox(props) {
-    _classCallCheck(this, Checkbox);
+    function Checkbox(props) {
+        _classCallCheck(this, Checkbox);
 
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+        var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
 
-    _this.state = {
-      checked: _this.props.checked
-      //this.changeState = this.changeState.bind(this);
-    };return _this;
-  }
+        _this.state = {
+            checked: 'checked' in props ? props.checked : props.defaultChecked
+        };
+        _this.changeState = _this.changeState.bind(_this);
+        return _this;
+    }
 
-  Checkbox.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProp) {
-    this.setState({ checked: nextProp.checked });
-  };
+    Checkbox.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProp) {
+        if (nextProp.hasOwnProperty('checked')) {
+            this.setState({
+                checked: nextProp.checked
+            });
+        }
+    };
 
-  Checkbox.prototype.changeState = function changeState() {
-    var onChange = this.props.onChange;
+    Checkbox.prototype.changeState = function changeState() {
+        var _props = this.props,
+            onChange = _props.onChange,
+            disabled = _props.disabled;
+        var checked = this.state.checked;
 
-    if (this.props.disabled == false) {
-      this.setState({ checked: !this.state.checked });
-    }
-    if (onChange instanceof Function) {
-      onChange(!this.state.checked);
-    }
-  };
+        if (disabled == false) {
+            this.setState({
+                checked: !checked
+            });
+        }
 
-  Checkbox.prototype.render = function render() {
-    var _props = this.props,
-        disabled = _props.disabled,
-        colors = _props.colors,
-        size = _props.size,
-        className = _props.className,
-        children = _props.children,
-        checked = _props.checked,
-        clsPrefix = _props.clsPrefix,
-        onHandleChange = _props.onHandleChange,
-        others = _objectWithoutProperties(_props, ['disabled', 'colors', 'size', 'className', 'children', 'checked', 'clsPrefix', 'onHandleChange']);
+        if (onChange instanceof Function) {
+            onChange(!this.state.checked);
+        }
+    };
 
-    var input = _react2["default"].createElement('input', _extends({}, others, {
-      onChange: this.changeState.bind(this),
-      type: 'checkbox',
-      disabled: this.props.disabled
-    }));
+    Checkbox.prototype.render = function render() {
+        var _props2 = this.props,
+            disabled = _props2.disabled,
+            colors = _props2.colors,
+            size = _props2.size,
+            className = _props2.className,
+            children = _props2.children,
+            checked = _props2.checked,
+            clsPrefix = _props2.clsPrefix,
+            onChange = _props2.onChange,
+            others = _objectWithoutProperties(_props2, ['disabled', 'colors', 'size', 'className', 'children', 'checked', 'clsPrefix', 'onChange']);
 
-    var classes = {
-      'is-checked': this.state.checked,
-      disabled: disabled
-    };
+        var input = _react2["default"].createElement('input', _extends({}, others, {
+            onChange: this.changeState,
+            type: 'checkbox',
+            disabled: this.props.disabled
+        }));
 
-    if (colors) {
-      classes[clsPrefix + '-' + colors] = true;
-    }
+        var classes = {
+            'is-checked': this.state.checked,
+            disabled: disabled
+        };
 
-    if (size) {
-      classes[clsPrefix + '-' + size] = true;
-    }
+        if (colors) {
+            classes[clsPrefix + '-' + colors] = true;
+        }
 
-    var classNames = (0, _classnames2["default"])(clsPrefix, classes);
+        if (size) {
+            classes[clsPrefix + '-' + size] = true;
+        }
 
-    console.log("render");
+        var classNames = (0, _classnames2["default"])(clsPrefix, classes);
 
-    return _react2["default"].createElement(
-      'label',
-      { className: classNames },
-      input,
-      _react2["default"].createElement(
-        'label',
-        { className: 'u-checkbox-label' },
-        children
-      )
-    );
-  };
+        return _react2["default"].createElement(
+            'label',
+            { className: classNames },
+            input,
+            _react2["default"].createElement(
+                'label',
+                { className: 'u-checkbox-label' },
+                children
+            )
+        );
+    };
 
-  return Checkbox;
+    return Checkbox;
 }(_react2["default"].Component);
@@ -131,0 +140,0 @@

demo/demolist/Demo1.js

@@ -1,2 +0,3 @@
-/**
+
+0./**
  * @title Checkbox
@@ -3,0 +4,0 @@ * @description `checked` 参数设置是否选中，`disabled`设置是否可用。

demo/index.js

@@ -15,3 +15,4 @@
 
-/**
+
+0./**
  * @title Checkbox
@@ -81,3 +82,3 @@ * @description `checked` 参数设置是否选中，`disabled`设置是否可用。
 	}
-}var DemoArray = [{"example":<Demo1 />,"title":" Checkbox","code":"/**\n * @title Checkbox\n * @description `checked` 参数设置是否选中，`disabled`设置是否可用。\n */\nclass Demo1 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.onChange = this.onChange.bind(this);\n\t}\n\tonChange() {\n\t\tconsole.log(\"hook\");\n\t}\n\trender () {\n\t\treturn (\n\t\t\t<div className=\"demo-checkbox\">\n\t\t\t\t<Checkbox disabled> checkbox</Checkbox>\n\t\t\t\t<Checkbox ref=\"test\" checked onHandleChange={this.onChange}> checkbox</Checkbox>\n\t\t\t</div>\n\t\t)\n\t}\n}","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用。"},{"example":<Demo2 />,"title":" 多颜色`Checkbox`","code":"/**\n * @title 多颜色`Checkbox`\n * @description `colors`参数控制背景色\n */\nclass Demo2 extends Component {\n\trender(){\n\t\treturn (\n\t\t\t<div className=\"demo-checkbox\">\n\t\t\t\t<Checkbox colors=\"info\"> checkbox</Checkbox>\n\t\t\t\t<Checkbox colors=\"dark\"> checkbox</Checkbox>\n\t\t\t</div>\n\t\t)\n\t}\n}","desc":" `colors`参数控制背景色"},{"example":<Demo3 />,"title":" Checkbox","code":"/**\n * @title Checkbox\n * @description `checked` 参数设置是否选中，`disabled`设置是否可用。\n */\nclass Demo3 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tchecked: false,\n\t\t\tchecked2: false,\n\t\t\tcheckedAll: false,\n\t\t}\n\t\tthis.onChange = this.onChange.bind(this);\n\t\tthis.onCheckedAll = this.onCheckedAll.bind(this);\n\t}\n\tonChange() {\n\t\tthis.setState({checkedAll:!this.state.checkedAll})\n\t}\n\tonCheckedAll() {\n\t\tthis.setState({checkedAll:!this.state.checkedAll,checked:!this.state.checked});\n\t}\n\tchangeCheck() {\n\t\tthis.setState({checked:!this.state.checked});\n\t}\n\trender () {\n\t\treturn (\n\t\t\t<div className=\"demo-checkbox\">\n\t\t\t\t<button onClick={this.changeCheck.bind(this)}>change checkbox</button>\n\t\t\t\t<Checkbox checked={this.state.checked} onHandleChange={this.onChange}> checkbox2</Checkbox>\n\t\t\t</div>\n\t\t)\n\t}\n}","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用。"}]
+}var DemoArray = [{"example":<Demo1 />,"title":" Checkbox","code":"\n0./**\n * @title Checkbox\n * @description `checked` 参数设置是否选中，`disabled`设置是否可用。\n */\nclass Demo1 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.onChange = this.onChange.bind(this);\n\t}\n\tonChange() {\n\t\tconsole.log(\"hook\");\n\t}\n\trender () {\n\t\treturn (\n\t\t\t<div className=\"demo-checkbox\">\n\t\t\t\t<Checkbox disabled> checkbox</Checkbox>\n\t\t\t\t<Checkbox ref=\"test\" checked onHandleChange={this.onChange}> checkbox</Checkbox>\n\t\t\t</div>\n\t\t)\n\t}\n}","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用。"},{"example":<Demo2 />,"title":" 多颜色`Checkbox`","code":"/**\n * @title 多颜色`Checkbox`\n * @description `colors`参数控制背景色\n */\nclass Demo2 extends Component {\n\trender(){\n\t\treturn (\n\t\t\t<div className=\"demo-checkbox\">\n\t\t\t\t<Checkbox colors=\"info\"> checkbox</Checkbox>\n\t\t\t\t<Checkbox colors=\"dark\"> checkbox</Checkbox>\n\t\t\t</div>\n\t\t)\n\t}\n}","desc":" `colors`参数控制背景色"},{"example":<Demo3 />,"title":" Checkbox","code":"/**\n * @title Checkbox\n * @description `checked` 参数设置是否选中，`disabled`设置是否可用。\n */\nclass Demo3 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tchecked: false,\n\t\t\tchecked2: false,\n\t\t\tcheckedAll: false,\n\t\t}\n\t\tthis.onChange = this.onChange.bind(this);\n\t\tthis.onCheckedAll = this.onCheckedAll.bind(this);\n\t}\n\tonChange() {\n\t\tthis.setState({checkedAll:!this.state.checkedAll})\n\t}\n\tonCheckedAll() {\n\t\tthis.setState({checkedAll:!this.state.checkedAll,checked:!this.state.checked});\n\t}\n\tchangeCheck() {\n\t\tthis.setState({checked:!this.state.checked});\n\t}\n\trender () {\n\t\treturn (\n\t\t\t<div className=\"demo-checkbox\">\n\t\t\t\t<button onClick={this.changeCheck.bind(this)}>change checkbox</button>\n\t\t\t\t<Checkbox checked={this.state.checked} onHandleChange={this.onChange}> checkbox2</Checkbox>\n\t\t\t</div>\n\t\t)\n\t}\n}","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用。"}]
 
@@ -84,0 +85,0 @@

docs/api.md

@@ -14,4 +14,7 @@ ## Checkbox
 |disabled|是否可用|bool|false|
+|onChange|监听改变|function|-|
+|defaultChecked|默认是否选中|bool|false|
+|checked|是否选中|bool|-|
 
 
 

package.json

 {
  "name": "bee-checkbox",
- "version": "0.1.8",
+ "version": "0.1.9",
  "description": "checkbox ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -41,6 +41,9 @@ # bee-checkbox
 |---|----|---|------|
+|className|类名|string|-|
 |color|one of: `primary` `success` `info` `error`  `warning` `dark`|string|''|
 |disabled|是否可用|bool|false|
+|onChange|监听改变|function|-|
+|defaultChecked|默认是否选中|bool|false|
+|checked|是否选中|bool|-|
 
-
 #### 开发调试
@@ -47,0 +50,0 @@

src/Checkbox.js

 import classnames from 'classnames';
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import {createChainedFunction} from 'tinper-bee-core';
@@ -9,5 +9,5 @@ //import warning from 'warning';
 
-  colors: PropTypes.oneOf(['', 'dark', 'success', 'info', 'warning', 'danger','primary']),
+    colors: PropTypes.oneOf(['', 'dark', 'success', 'info', 'warning', 'danger', 'primary']),
 
-  disabled: PropTypes.bool,
+    disabled: PropTypes.bool,
 
@@ -17,79 +17,86 @@ };
 const defaultProps = {
-  disabled: false,
-  colors: 'primary',
-  clsPrefix: 'u-checkbox',
-  checked:false
+    disabled: false,
+    colors: 'primary',
+    clsPrefix: 'u-checkbox',
+    defaultChecked: false
 };
 const clsPrefix = 'u-checkbox';
 class Checkbox extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			checked : this.props.checked
-		}
-    //this.changeState = this.changeState.bind(this);
-	}
+    constructor(props) {
+        super(props);
+        this.state = {
+            checked: 'checked' in props ? props.checked : props.defaultChecked
+        }
+        this.changeState = this.changeState.bind(this);
+    }
 
-  componentWillReceiveProps(nextProp) {
-    this.setState({checked:nextProp.checked});
-  }
- 
-changeState () {
-    const {onChange} = this.props;
-		if(this.props.disabled == false){
-			this.setState({checked:!this.state.checked});
-		}
-    if(onChange instanceof Function) {
-      onChange(!this.state.checked);
+    componentWillReceiveProps(nextProp) {
+        if(nextProp.hasOwnProperty('checked')){
+            this.setState({
+                checked: nextProp.checked
+            });
+        }
     }
-}
 
+    changeState() {
+        const {onChange, disabled} = this.props;
+        let { checked } = this.state;
+        if (disabled == false) {
+            this.setState({
+                checked: !checked
+            });
+        }
 
-  	render() {
-	    const {
-	      disabled,
-	      colors,
-	      size,
-	      className,
-	      children,
-        checked,
-        clsPrefix,
-        onHandleChange,
-	      ...others
-    	} = this.props;
+        if (onChange instanceof Function) {
+            onChange(!this.state.checked);
+        }
+    }
 
-    
-    const input = (
-      	<input
-        {...others}
-        onChange={this.changeState.bind(this)}
-        type="checkbox"
-        disabled={this.props.disabled}
-        />
-    );
 
-    let classes = {
-    	'is-checked':this.state.checked,
-    	disabled
-    };
+    render() {
+        const {
+            disabled,
+            colors,
+            size,
+            className,
+            children,
+            checked,
+            clsPrefix,
+            onChange,
+            ...others
+        } = this.props;
 
-    if (colors) {
-        classes[`${clsPrefix}-${colors}`] = true;
-    }
 
-    if (size) {
-      classes[`${clsPrefix}-${size}`] = true;
-    }
+        const input = (
+            <input
+                {...others}
+                onChange={this.changeState}
+                type="checkbox"
+                disabled={this.props.disabled}
+            />
+        );
 
-    let classNames = classnames(clsPrefix, classes);
+        let classes = {
+            'is-checked': this.state.checked,
+            disabled
+        };
 
-    console.log("render");
+        if (colors) {
+            classes[`${clsPrefix}-${colors}`] = true;
+        }
 
-    return (
-        <label className={classNames}>
-          {input}
-          <label className="u-checkbox-label">{children}</label>
-        </label>
-    );
-  }
+        if (size) {
+            classes[`${clsPrefix}-${size}`] = true;
+        }
+
+        let classNames = classnames(clsPrefix, classes);
+
+
+        return (
+            <label className={classNames}>
+                {input}
+                <label className="u-checkbox-label">{children}</label>
+            </label>
+        );
+    }
 }
@@ -96,0 +103,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1215937

increased by0.17%

Lines of code

11444

increased by0.19%

Number of lines in readme file

56

increased by5.66%

No dependency changes