bee-checkbox - npm Package Compare versions

Comparing version 0.1.9 to 0.2.0

build/Checkbox.js

@@ -125,7 +125,8 @@ 'use strict';
             'label',
-            { className: classNames },
+            { className: (0, _classnames2["default"])(classNames, className) },
             input,
+            _react2["default"].createElement('label', { className: 'u-checkbox-label' }),
             _react2["default"].createElement(
-                'label',
-                { className: 'u-checkbox-label' },
+                'span',
+                null,
                 children
@@ -132,0 +133,0 @@ )

demo/demolist/Demo1.js

@@ -17,3 +17,3 @@
 			<div className="demo-checkbox">
-				<Checkbox disabled> checkbox</Checkbox>
+				<Checkbox disabled className="test"> checkbox</Checkbox>
 				<Checkbox ref="test" checked onHandleChange={this.onChange}> checkbox</Checkbox>
@@ -20,0 +20,0 @@ </div>

demo/demolist/Demo3.js

@@ -29,3 +29,4 @@ /**
 				<button onClick={this.changeCheck.bind(this)}>change checkbox</button>
-				<Checkbox checked={this.state.checked} onHandleChange={this.onChange}> checkbox2</Checkbox>
+				 <Checkbox checked={this.state.checked}> checkbox2</Checkbox>
+				<Checkbox defaultChecked={this.state.checked}> checkbox2</Checkbox>
 			</div>
@@ -32,0 +33,0 @@ )

demo/index.js

@@ -31,3 +31,3 @@
 			<div className="demo-checkbox">
-				<Checkbox disabled> checkbox</Checkbox>
+				<Checkbox disabled className="test"> checkbox</Checkbox>
 				<Checkbox ref="test" checked onHandleChange={this.onChange}> checkbox</Checkbox>
@@ -78,7 +78,8 @@ </div>
 				<button onClick={this.changeCheck.bind(this)}>change checkbox</button>
-				<Checkbox checked={this.state.checked} onHandleChange={this.onChange}> checkbox2</Checkbox>
+				 <Checkbox checked={this.state.checked}> checkbox2</Checkbox>
+				<Checkbox defaultChecked={this.state.checked}> checkbox2</Checkbox>
 			</div>
 		)
 	}
-}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`设置是否可用。"}]
+}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 className=\"test\"> 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}> 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`设置是否可用。"}]
 
@@ -85,0 +86,0 @@

package.json

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

src/Checkbox.js

@@ -94,5 +94,6 @@ import classnames from 'classnames';
         return (
-            <label className={classNames}>
+            <label className={classnames(classNames, className)}>
                 {input}
-                <label className="u-checkbox-label">{children}</label>
+                <label className="u-checkbox-label"></label>
+                <span>{children}</span>
             </label>
@@ -99,0 +100,0 @@ );

No alert changes

Worsened metrics

Total package byte prevSize

1214819

decreased by-0.09%

Lines of code

11435

decreased by-0.08%

No dependency changes