bee-checkbox - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

build/Checkbox.js

@@ -62,2 +62,6 @@ 'use strict';
 
+  Checkbox.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProp) {
+    this.setState({ checked: nextProp.checked });
+  };
+
   Checkbox.prototype.changeState = function changeState() {
@@ -64,0 +68,0 @@ var onChange = this.props.onChange;

demo/demolist/Demo1.js

@@ -11,2 +11,3 @@ /**
 	onChange() {
+		debugger;
 		console.log("hook");
@@ -13,0 +14,0 @@ }

demo/index.js

@@ -25,2 +25,3 @@
 	onChange() {
+		debugger;
 		console.log("hook");
@@ -49,3 +50,35 @@ }
 	}
-}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 onChange={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`参数控制背景色"}]
+}/**
+ * @title Checkbox
+ * @description `checked` 参数设置是否选中，`disabled`设置是否可用。
+ */
+class Demo3 extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			checked: false,
+			checked2: false,
+			checkedAll: false,
+		}
+		this.onChange = this.onChange.bind(this);
+		this.onCheckedAll = this.onCheckedAll.bind(this);
+	}
+	onChange() {
+		this.setState({checkedAll:!this.state.checkedAll})
+	}
+	onCheckedAll() {
+		this.setState({checkedAll:!this.state.checkedAll,checked:!this.state.checked});
+	}
+	changeCheck() {
+		this.setState({checked:!this.state.checked});
+	}
+	render () {
+		return (
+			<div className="demo-checkbox">
+				<button onClick={this.changeCheck.bind(this)}>change checkbox</button>
+				<Checkbox checked={this.state.checked} onChange={this.onChange}> checkbox2</Checkbox>
+			</div>
+		)
+	}
+}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\tdebugger;\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 onChange={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} onChange={this.onChange}> checkbox2</Checkbox>\n\t\t\t</div>\n\t\t)\n\t}\n}","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用。"}]
 
@@ -52,0 +85,0 @@

package.json

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

src/Checkbox.js

@@ -28,2 +28,7 @@ import classnames from 'classnames';
 	}
+
+  componentWillReceiveProps(nextProp) {
+    this.setState({checked:nextProp.checked});
+  }
+
 	changeState () {
@@ -30,0 +35,0 @@ const {onChange} = this.props;

No alert changes

Improved metrics

Total package byte prevSize

1212252

increased by0.71%

Number of package files

28

increased by3.7%

Lines of code

11406

increased by1.25%

No dependency changes