bee-checkbox - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

build/Checkbox.js

@@ -75,3 +75,3 @@ 'use strict';
         var _props = this.props,
-            onChange = _props.onChange,
+            onHandleChange = _props.onHandleChange,
             disabled = _props.disabled;
@@ -86,4 +86,4 @@ var checked = this.state.checked;
 
-        if (onChange instanceof Function) {
-            onChange(!this.state.checked);
+        if (onHandleChange instanceof Function) {
+            onHandleChange(!this.state.checked);
         }
@@ -102,4 +102,4 @@ };
             clsPrefix = _props2.clsPrefix,
-            onChange = _props2.onChange,
-            others = _objectWithoutProperties(_props2, ['disabled', 'colors', 'size', 'className', 'indeterminate', 'children', 'checked', 'clsPrefix', 'onChange']);
+            onHandleChange = _props2.onHandleChange,
+            others = _objectWithoutProperties(_props2, ['disabled', 'colors', 'size', 'className', 'indeterminate', 'children', 'checked', 'clsPrefix', 'onHandleChange']);
 
@@ -125,6 +125,2 @@ var input = _react2["default"].createElement('input', _extends({}, others, {
 
-        if (size) {
-            classes[clsPrefix + '-' + size] = true;
-        }
-
         if (!checked && indeterminate) {
@@ -131,0 +127,0 @@ classes[clsPrefix + '-indeterminate'] = true;

demo/demolist/Demo1.js

@@ -7,2 +7,3 @@
 
+
 import React, { Component } from 'react';
@@ -14,6 +15,10 @@ import Checkbox from '../../src';
 		super(props);
+		this.state = {
+			checkedFlag:false
+		}
 		this.onChange = this.onChange.bind(this);
 	}
-	onChange() {
-		console.log("hook");
+	onChange(e) {
+		console.log(e);
+		this.setState({checkedFlag:e});
 	}
@@ -24,3 +29,3 @@ render () {
 				<Checkbox disabled className="test"> checkbox</Checkbox>
-				<Checkbox ref="test" checked onHandleChange={this.onChange}> 全选</Checkbox>
+				<Checkbox ref="test" checked={this.state.checkedFlag} onHandleChange={this.onChange}> 全选</Checkbox>
 				<Checkbox ref="test" indeterminate onHandleChange={this.onChange}> 半选</Checkbox>
@@ -27,0 +32,0 @@ </div>

demo/index.js

@@ -15,3 +15,3 @@
 
-var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var DemoArray = [{"example":<Demo1 />,"title":" Checkbox","code":"\n/**\n * @title Checkbox\n * @description `checked` 参数设置是否选中，`disabled`设置是否可用。\n */\n\nimport React, { Component } from 'react';\nimport Checkbox from 'tinper-bee';\n\n\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 className=\"test\"> checkbox</Checkbox>\n\t\t\t\t<Checkbox ref=\"test\" checked onHandleChange={this.onChange}> 全选</Checkbox>\n\t\t\t\t<Checkbox ref=\"test\" indeterminate onHandleChange={this.onChange}> 半选</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 */\n\nimport React, { Component } from 'react';\nimport Checkbox from 'tinper-bee';\n\n\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 */\n\nimport React, { Component } from 'react';\nimport Checkbox from 'tinper-bee';\n\n\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}> checkbox2</Checkbox>\n\t\t\t\t<Checkbox defaultChecked={this.state.checked}> checkbox2</Checkbox>\n\t\t\t</div>\n\t\t)\n\t}\n}","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用。"}]
+var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var DemoArray = [{"example":<Demo1 />,"title":" Checkbox","code":"\n/**\n * @title Checkbox\n * @description `checked` 参数设置是否选中，`disabled`设置是否可用。\n */\n\n\nimport React, { Component } from 'react';\nimport Checkbox from 'tinper-bee';\n\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tcheckedFlag:false\n\t\t}\n\t\tthis.onChange = this.onChange.bind(this);\n\t}\n\tonChange(e) {\n\t\tconsole.log(e);\n\t\tthis.setState({checkedFlag:e});\n\t}\n\trender () {\n\t\treturn (\n\t\t\t<div className=\"demo-checkbox\">\n\t\t\t\t<Checkbox disabled className=\"test\"> checkbox</Checkbox>\n\t\t\t\t<Checkbox ref=\"test\" checked={this.state.checkedFlag} onHandleChange={this.onChange}> 全选</Checkbox>\n\t\t\t\t<Checkbox ref=\"test\" indeterminate onHandleChange={this.onChange}> 半选</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 */\n\nimport React, { Component } from 'react';\nimport Checkbox from 'tinper-bee';\n\n\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 */\n\nimport React, { Component } from 'react';\nimport Checkbox from 'tinper-bee';\n\n\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}> checkbox2</Checkbox>\n\t\t\t\t<Checkbox defaultChecked={this.state.checked}> checkbox2</Checkbox>\n\t\t\t</div>\n\t\t)\n\t}\n}","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用。"}]
 
@@ -18,0 +18,0 @@

package.json

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

src/Checkbox.js

@@ -40,3 +40,3 @@ import classnames from 'classnames';
     changeState() {
-        const {onChange, disabled} = this.props;
+        const {onHandleChange, disabled} = this.props;
         let { checked } = this.state;
@@ -49,4 +49,4 @@ if (disabled == false) {
 
-        if (onChange instanceof Function) {
-            onChange(!this.state.checked);
+        if (onHandleChange instanceof Function) {
+            onHandleChange(!this.state.checked);
         }
@@ -65,3 +65,3 @@ }
             clsPrefix,
-            onChange,
+            onHandleChange,
             ...others
@@ -68,0 +68,0 @@ } = this.props;

No alert changes

Improved metrics

Total package byte prevSize

1228254

increased by0.07%

Lines of code

11496

increased by0.06%

No dependency changes