bee-checkbox - npm Package Compare versions

Comparing version 2.0.8 to 2.0.9-alpha.0

build/Checkbox.js

@@ -25,2 +25,4 @@ 'use strict';
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -65,3 +67,4 @@
         _this.state = {
-            checked: 'checked' in props ? props.checked : props.defaultChecked
+            checked: 'checked' in props ? props.checked : props.defaultChecked,
+            focused: false
         };
@@ -81,2 +84,4 @@ _this.doubleClickFlag = null;
     Checkbox.prototype.render = function render() {
+        var _classes;
+
         var _props = this.props,
@@ -99,9 +104,8 @@ disabled = _props.disabled,
             type: 'checkbox',
-            disabled: this.props.disabled
+            disabled: this.props.disabled,
+            onFocus: this.handleFocus,
+            onBlur: this.handleBlur
         }));
 
-        var classes = {
-            'is-checked': this.state.checked,
-            disabled: disabled
-        };
+        var classes = (_classes = {}, _defineProperty(_classes, clsPrefix + '-focused', this.state.focused), _defineProperty(_classes, 'is-checked', this.state.checked), _defineProperty(_classes, 'disabled', disabled), _classes);
 
@@ -189,2 +193,18 @@ if (inverse) {
     };
+
+    this.handleFocus = function (e) {
+        if (e.target && e.target.type == 'checkbox') {
+            _this2.setState({
+                focused: true
+            });
+        }
+    };
+
+    this.handleBlur = function (e) {
+        if (e.target && e.target.type == 'checkbox') {
+            _this2.setState({
+                focused: false
+            });
+        }
+    };
 };
@@ -191,0 +211,0 @@

build/CheckboxGroup.js

@@ -92,3 +92,3 @@ 'use strict';
     CheckboxGroup.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-        if (!(0, _lodash2["default"])(nextProps.value, this.state.values)) {
+        if (nextProps.value && !(0, _lodash2["default"])(nextProps.value, this.state.values)) {
             this.setState({
@@ -126,2 +126,3 @@ values: nextProps.value
         var classes = clsPrefix;
+        console.log('state.values: ', state.values);
         if (className) classes += ' ' + className;
@@ -128,0 +129,0 @@ if (options && options.length > 0) {

demo/CheckboxDemo.js

@@ -0,0 +0,0 @@ import Checkbox from '../src';

demo/demolist/Demo1.js

@@ -0,0 +0,0 @@ /**

demo/demolist/Demo2.js

@@ -7,14 +7,52 @@ /**
 import React, { Component } from 'react';
+import {KeyCode} from 'tinper-bee-core';
 import Checkbox from '../../src';
 
 class Demo2 extends Component {
+	constructor(props){
+		super(props);
+		this.state = {
+			focusIndex: -1
+		}
+	}
+	componentDidMount(){
+		this.checkboxGroup = document.getElementById('demo-checkbox');
+	}
+	focusOne = () => {
+		this.checkboxGroup.childNodes[0].focus();
+		this.setState({
+			focusIndex: 0
+		})
+	}
+	handleKeyDown = (e) => {
+		if(e.keyCode !== KeyCode.SPACE){
+			e.stopPropagation();
+			e.preventDefault();
+		}
+		let { focusIndex } = this.state;
+		let newFocusIndex = -1;
+		const min = 0; const max = this.checkboxGroup.childNodes.length - 1;
+		if(e.keyCode == KeyCode.DOWN){
+			newFocusIndex = ++focusIndex <= max ? focusIndex++ : max;
+			this.checkboxGroup.childNodes[newFocusIndex].focus();
+		} else if (e.keyCode == KeyCode.UP){
+			newFocusIndex = --focusIndex >= min ? focusIndex-- : min;
+			this.checkboxGroup.childNodes[newFocusIndex].focus();
+		}
+		this.setState({
+			focusIndex: newFocusIndex
+		})
+	}
 	render(){
 		return (
-			<div className="demo-checkbox">
-				<Checkbox colors="primary">primary</Checkbox>
-				<Checkbox colors="success">success</Checkbox>
-				<Checkbox colors="info">info</Checkbox>
-				<Checkbox colors="danger">danger</Checkbox>
-				<Checkbox colors="warning">warning</Checkbox>
-				<Checkbox colors="dark">dark</Checkbox>
+			<div>
+				<button onClick={this.focusOne}>focus</button>
+				<div id="demo-checkbox" onKeyDown={this.handleKeyDown}>
+					<Checkbox colors="primary">primary</Checkbox>
+					<Checkbox colors="success">success</Checkbox>
+					<Checkbox colors="info">info</Checkbox>
+					<Checkbox colors="danger">danger</Checkbox>
+					<Checkbox colors="warning">warning</Checkbox>
+					<Checkbox colors="dark">dark</Checkbox>
+				</div>
 			</div>
@@ -21,0 +59,0 @@ )

demo/demolist/Demo3.js

@@ -0,0 +0,0 @@ /**

demo/demolist/Demo6.js

@@ -0,0 +0,0 @@ /**

demo/index-demo-base.js

@@ -0,0 +0,0 @@ import React, { Component } from 'react';

demo/index.js

@@ -11,3 +11,3 @@ import React, { Component } from 'react';
 
-var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var DemoArray = [{"example":<Demo1 />,"title":" 基本用法","code":"/**\r\n * @title 基本用法\r\n * @description `checked` 参数设置是否选中，`disabled`设置是否可用，`onDoubleClick`定义双击事件。\r\n */\r\n\r\n\r\nimport React, {Component} from 'react';\nimport { Checkbox } from 'tinper-bee';\r\n\r\n\r\nclass Demo1 extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            checkedFlag: true\r\n        }\r\n        this.onChange = this.onChange.bind(this);\r\n    }\r\n\r\n    onChange(e) {\r\n        console.log(e);\r\n        this.setState({checkedFlag: e});\r\n    }\r\n\r\n    handleDblClick = (state) => {\r\n\t\tconsole.log(state);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"demo-checkbox\">\r\n                <Checkbox\r\n                    disabled\r\n                    className=\"test\" >\r\n                </Checkbox>\r\n                <Checkbox\r\n                    disabled\r\n                    checked={true}\r\n                    className=\"test\" >\r\n                </Checkbox>\r\n                <Checkbox\r\n                    // onDoubleClick={ this.handleDblClick }\r\n                    ref=\"test\"\r\n                    checked={this.state.checkedFlag}\r\n                    onChange={this.onChange}>\r\n                    Checkbox\r\n                </Checkbox>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\r\nexport default Demo1;","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用，`onDoubleClick`定义双击事件。","scss_code":""},{"example":<Demo2 />,"title":" 不同颜色的 Checkbox","code":"/**\r\n * @title 不同颜色的 Checkbox\r\n * @description `colors`参数控制背景色\r\n */\r\n\r\nimport React, { Component } from 'react';\nimport { Checkbox } from 'tinper-bee';\r\n\r\n\r\nclass Demo2 extends Component {\r\n\trender(){\r\n\t\treturn (\r\n\t\t\t<div className=\"demo-checkbox\">\r\n\t\t\t\t<Checkbox colors=\"primary\">primary</Checkbox>\r\n\t\t\t\t<Checkbox colors=\"success\">success</Checkbox>\r\n\t\t\t\t<Checkbox colors=\"info\">info</Checkbox>\r\n\t\t\t\t<Checkbox colors=\"danger\">danger</Checkbox>\r\n\t\t\t\t<Checkbox colors=\"warning\">warning</Checkbox>\r\n\t\t\t\t<Checkbox colors=\"dark\">dark</Checkbox>\r\n\t\t\t</div>\r\n\t\t)\r\n\t}\r\n}\r\nexport default Demo2;\r\n","desc":" `colors`参数控制背景色","scss_code":""},{"example":<Demo3 />,"title":" 受控的 Checkbox","code":"/**\r\n * @title 受控的 Checkbox\r\n * @description `checked` 参数设置是否选中，`disabled`设置是否可用。\r\n */\r\n\r\nimport React, { Component } from 'react';\nimport { Button, Checkbox } from 'tinper-bee';\r\n\r\n\n\r\nclass Demo3 extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\tchecked: false,\r\n\t\t\tdisabled: false\r\n\t\t}\r\n\t}\r\n\tchangeCheck=()=> {\r\n\t\tthis.setState({checked:!this.state.checked});\r\n\t}\r\n\tchangeDisabled=()=> {\r\n\t\tthis.setState({disabled:!this.state.disabled});\r\n\t}\r\n\trender () {\r\n\t\tconst label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;\r\n\t\treturn (\r\n\t\t\t<div className=\"demo-checkbox\">\r\n\t\t\t\t<p>\r\n\t\t\t\t\t<Button \r\n\t\t\t\t\t\tcolors=\"secondary\" \r\n\t\t\t\t\t\tonClick={this.changeCheck.bind(this)}\r\n\t\t\t\t\t\tstyle={{marginRight:\"8px\"}}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{!this.state.checked ? 'Check' : 'Uncheck'}\r\n\t\t\t\t\t</Button>\r\n\t\t\t\t\t<Button \r\n\t\t\t\t\t\tcolors=\"secondary\" \r\n\t\t\t\t\t\tonClick={this.changeDisabled.bind(this)}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{!this.state.disabled ? 'Disable' : 'Enable'}\r\n\t\t\t\t\t</Button>\r\n\t\t\t\t</p>\t\r\n\t\t\t\t<p>\r\n\t\t\t\t\t<Checkbox \r\n\t\t\t\t\t\tchecked={this.state.checked} \r\n\t\t\t\t\t\tdisabled={this.state.disabled} \r\n\t\t\t\t\t\tonChange={this.changeCheck}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{label }\r\n\t\t\t\t\t</Checkbox>\r\n\t\t\t\t</p>\r\n\t\t\t</div>\r\n\t\t)\r\n\t}\r\n}\r\nexport default Demo3;","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用。","scss_code":""},{"example":<Demo4 />,"title":" CheckboxGroup基本使用","code":"/**\r\n * @title CheckboxGroup基本使用\r\n * @description 方便的从数组生成 Checkbox 组。\r\n */\r\n\r\nimport React, { Component } from 'react';\nimport { Checkbox } from 'tinper-bee';\r\n\r\nconst CheckboxGroup = Checkbox.CheckboxGroup;\r\n\r\nconst plainOptions = ['Apple', 'Pear', 'Orange'];\r\nconst options = [\r\n  { label: 'Apple', value: 'Apple' },\r\n  { label: 'Pear', value: 'Pear' },\r\n  { label: 'Orange', value: 'Orange' },\r\n];\r\nconst optionsWithDisabled = [\r\n  { label: 'Apple', value: 'Apple' },\r\n  { label: 'Pear', value: 'Pear' },\r\n  { label: 'Orange', value: 'Orange', disabled: false },\r\n];\r\n\r\nclass Demo4 extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t}\r\n\tonChange(checkedValues) {\r\n\t\tconsole.log('checked = ', checkedValues);\r\n\t}\r\n\trender () {\r\n\t\treturn (\r\n\t\t\t<div className=\"demo-checkbox\">\r\n\t\t\t\t<CheckboxGroup options={plainOptions} defaultValue={['Apple']} onChange={this.onChange} />\r\n\t\t\r\n\t\t\t\t<CheckboxGroup options={options} defaultValue={['Pear']} onChange={this.onChange} />\r\n\t\t\t\r\n\t\t\t\t<CheckboxGroup\r\n\t\t\t\toptions={optionsWithDisabled}\r\n\t\t\t\tdisabled\r\n\t\t\t\tdefaultValue={['Apple']}\r\n\t\t\t\tonChange={this.onChange}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t)\r\n\t}\r\n}\r\nexport default Demo4;","desc":" 方便的从数组生成 Checkbox 组。"},{"example":<Demo5 />,"title":" CheckboxGroup在form中使用","code":"/**\n * @title CheckboxGroup在form中使用\n * @description `value` 参数设置默认值，`onChange`设置值改变的回调。\n */\n\nimport React, { Component } from 'react';\nimport { Button, Form, Checkbox } from 'tinper-bee';\n\n\n\nconst CheckboxGroup = Checkbox.CheckboxGroup;\n\nclass Demo4 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tvalue:['3','4']\n\t\t}\n\t}\n\tchange=(value)=>{\n\t\tthis.setState({\n\t\t\tvalue\n\t\t})\n\t}\n\tclick=()=>{\n\t\tthis.props.form.validateFields((error,values)=>{\n\t\t\tconsole.log(values)\n\t\t})\n\t}\n\trender () {\n\t\tconst self = this;\n\t\tconst { getFieldProps, getFieldError }  = this.props.form;\n\t\treturn (\n\t\t\t<div className=\"demo-checkbox\">\n\t\t\t\t<CheckboxGroup \n\t\t\t\t\t{\n\t\t\t\t\t\t...getFieldProps('name',{\n\t\t\t\t\t\t\tinitialValue:['2','3'],\n\t\t\t\t\t\t\tonChange:self.change\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Checkbox value='1'>\n\t\t\t\t\t\t1\n\t\t\t\t\t</Checkbox>\n\t\t\t\t\t<Checkbox value='2'>\n\t\t\t\t\t\t2\n\t\t\t\t\t</Checkbox>\n\t\t\t\t\t<Checkbox value='3'>\n\t\t\t\t\t\t3\n\t\t\t\t\t</Checkbox>\n\t\t\t\t\t<Checkbox value='4'>\n\t\t\t\t\t\t4\n\t\t\t\t\t</Checkbox>\n\t\t\t\t\t<Checkbox value='5'>\n\t\t\t\t\t\t5\n\t\t\t\t\t</Checkbox>\n\t\t\t\t</CheckboxGroup>\n\t\t\t\t<Button colors=\"secondary\" onClick={this.click}>submit</Button>\n\t\t\t</div>\n\t\t)\n\t}\n}\nexport default Form.createForm()(Demo4);","desc":" `value` 参数设置默认值，`onChange`设置值改变的回调。"},{"example":<Demo6 />,"title":" 全选","code":"/**\r\n * @title 全选\r\n * @description `indeterminate` 参数设置部分选中状态。\r\n */\r\n\r\n\r\nimport React, {Component} from 'react';\nimport { Checkbox } from 'tinper-bee';\r\n\r\n\r\nconst CheckboxGroup = Checkbox.CheckboxGroup;\r\n\r\nconst plainOptions = ['1','2','3','4','5'];\r\nconst defaultCheckedList = ['2','3'];\r\n\r\nclass Demo7 extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            checkedList: defaultCheckedList,\r\n            indeterminate: true,\r\n            checkAll: false\r\n        }\r\n        this.onChange = this.onChange.bind(this);\r\n    }\r\n\r\n    onCheckAllChange = (e) => {\r\n        console.log(e);\r\n        this.setState({\r\n          checkedList: e ? plainOptions : [],\r\n          indeterminate: false,\r\n          checkAll: e,\r\n        });\r\n    }\r\n\r\n    onChange(checkedList) {\r\n        console.log(checkedList)\r\n        this.setState({\r\n            checkedList: checkedList,\r\n            indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),\r\n            checkAll: checkedList.length === plainOptions.length\r\n        });\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"demo-checkbox\">\r\n                <Checkbox\r\n                    ref=\"test\"\r\n                    indeterminate={this.state.indeterminate}\r\n                    onChange={this.onCheckAllChange}\r\n                    checked={this.state.checkAll}>\r\n                    全选\r\n                </Checkbox>\r\n                <br/>\r\n                <CheckboxGroup value={this.state.checkedList} onChange={this.onChange}>\r\n                    <Checkbox value='1'>1</Checkbox>\r\n                    <Checkbox value='2'>2</Checkbox>\r\n                    <Checkbox value='3'>3</Checkbox>\r\n                    <Checkbox value='4'>4</Checkbox>\r\n                    <Checkbox value='5'>5</Checkbox>\r\n                </CheckboxGroup>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\r\nexport default Demo7;","desc":" `indeterminate` 参数设置部分选中状态。"},{"example":<Demo7 />,"title":" 红色填充的 Checkbox","code":"/**\r\n * @title 红色填充的 Checkbox\r\n * @description `inverse` 参数设置选中为红色填充。\r\n */\r\n\r\n\r\nimport React, {Component} from 'react';\nimport { Checkbox } from 'tinper-bee';\r\n\r\n\r\nclass Demo7 extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            checkedFlag: false\r\n        }\r\n        this.onChange = this.onChange.bind(this);\r\n    }\r\n\r\n    onChange(e) {\r\n        console.log(e);\r\n        this.setState({checkedFlag: e});\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"demo-checkbox\">\r\n                <Checkbox\r\n                    disabled\r\n                    inverse\r\n                    checked={true}>\r\n                    禁用\r\n                </Checkbox>\r\n                <Checkbox\r\n                    inverse\r\n                    checked={this.state.checkedFlag}\r\n                    onChange={this.onChange}>\r\n                    全选\r\n                </Checkbox>\r\n                <Checkbox\r\n                    inverse\r\n                    indeterminate>\r\n                    半选\r\n                </Checkbox>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\r\nexport default Demo7;","desc":" `inverse` 参数设置选中为红色填充。"}]
+var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var DemoArray = [{"example":<Demo1 />,"title":" 基本用法","code":"/**\n * @title 基本用法\n * @description `checked` 参数设置是否选中，`disabled`设置是否可用，`onDoubleClick`定义双击事件。\n */\n\n\nimport React, {Component} from 'react';\nimport { Checkbox } from 'tinper-bee';\n\n\nclass Demo1 extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            checkedFlag: true\n        }\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(e) {\n        console.log(e);\n        this.setState({checkedFlag: e});\n    }\n\n    handleDblClick = (state) => {\n\t\tconsole.log(state);\n    }\n\n    render() {\n        return (\n            <div className=\"demo-checkbox\">\n                <Checkbox\n                    disabled\n                    className=\"test\" >\n                </Checkbox>\n                <Checkbox\n                    disabled\n                    checked={true}\n                    className=\"test\" >\n                </Checkbox>\n                <Checkbox\n                    // onDoubleClick={ this.handleDblClick }\n                    ref=\"test\"\n                    checked={this.state.checkedFlag}\n                    onChange={this.onChange}>\n                    Checkbox\n                </Checkbox>\n            </div>\n        )\n    }\n}\n\nexport default Demo1;","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用，`onDoubleClick`定义双击事件。","scss_code":""},{"example":<Demo2 />,"title":" 不同颜色的 Checkbox","code":"/**\n * @title 不同颜色的 Checkbox\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react';\nimport { Checkbox } from 'tinper-bee';\nimport {KeyCode} from 'tinper-bee-core';\n\n\nclass Demo2 extends Component {\n\tconstructor(props){\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tfocusIndex: -1\n\t\t}\n\t}\n\tcomponentDidMount(){\n\t\tthis.checkboxGroup = document.getElementById('demo-checkbox');\n\t}\n\tfocusOne = () => {\n\t\tthis.checkboxGroup.childNodes[0].focus();\n\t\tthis.setState({\n\t\t\tfocusIndex: 0\n\t\t})\n\t}\n\thandleKeyDown = (e) => {\n\t\tif(e.keyCode !== KeyCode.SPACE){\n\t\t\te.stopPropagation();\n\t\t\te.preventDefault();\n\t\t}\n\t\tlet { focusIndex } = this.state;\n\t\tlet newFocusIndex = -1;\n\t\tconst min = 0; const max = this.checkboxGroup.childNodes.length - 1;\n\t\tif(e.keyCode == KeyCode.DOWN){\n\t\t\tnewFocusIndex = ++focusIndex <= max ? focusIndex++ : max;\n\t\t\tthis.checkboxGroup.childNodes[newFocusIndex].focus();\n\t\t} else if (e.keyCode == KeyCode.UP){\n\t\t\tnewFocusIndex = --focusIndex >= min ? focusIndex-- : min;\n\t\t\tthis.checkboxGroup.childNodes[newFocusIndex].focus();\n\t\t}\n\t\tthis.setState({\n\t\t\tfocusIndex: newFocusIndex\n\t\t})\n\t}\n\trender(){\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<button onClick={this.focusOne}>focus</button>\n\t\t\t\t<div id=\"demo-checkbox\" onKeyDown={this.handleKeyDown}>\n\t\t\t\t\t<Checkbox colors=\"primary\">primary</Checkbox>\n\t\t\t\t\t<Checkbox colors=\"success\">success</Checkbox>\n\t\t\t\t\t<Checkbox colors=\"info\">info</Checkbox>\n\t\t\t\t\t<Checkbox colors=\"danger\">danger</Checkbox>\n\t\t\t\t\t<Checkbox colors=\"warning\">warning</Checkbox>\n\t\t\t\t\t<Checkbox colors=\"dark\">dark</Checkbox>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t}\n}\nexport default Demo2;\n","desc":" `colors`参数控制背景色","scss_code":""},{"example":<Demo3 />,"title":" 受控的 Checkbox","code":"/**\n * @title 受控的 Checkbox\n * @description `checked` 参数设置是否选中，`disabled`设置是否可用。\n */\n\nimport React, { Component } from 'react';\nimport { Button, Checkbox } from 'tinper-bee';\n\n\nclass Demo3 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tchecked: false,\n\t\t\tdisabled: false\n\t\t}\n\t}\n\tchangeCheck=()=> {\n\t\tthis.setState({checked:!this.state.checked});\n\t}\n\tchangeDisabled=()=> {\n\t\tthis.setState({disabled:!this.state.disabled});\n\t}\n\trender () {\n\t\tconst label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;\n\t\treturn (\n\t\t\t<div className=\"demo-checkbox\">\n\t\t\t\t<p>\n\t\t\t\t\t<Button \n\t\t\t\t\t\tcolors=\"secondary\" \n\t\t\t\t\t\tonClick={this.changeCheck.bind(this)}\n\t\t\t\t\t\tstyle={{marginRight:\"8px\"}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!this.state.checked ? 'Check' : 'Uncheck'}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button \n\t\t\t\t\t\tcolors=\"secondary\" \n\t\t\t\t\t\tonClick={this.changeDisabled.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!this.state.disabled ? 'Disable' : 'Enable'}\n\t\t\t\t\t</Button>\n\t\t\t\t</p>\t\n\t\t\t\t<p>\n\t\t\t\t\t<Checkbox \n\t\t\t\t\t\tchecked={this.state.checked} \n\t\t\t\t\t\tdisabled={this.state.disabled} \n\t\t\t\t\t\tonChange={this.changeCheck}\n\t\t\t\t\t>\n\t\t\t\t\t\t{label }\n\t\t\t\t\t</Checkbox>\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t)\n\t}\n}\nexport default Demo3;","desc":" `checked` 参数设置是否选中，`disabled`设置是否可用。","scss_code":""},{"example":<Demo4 />,"title":" CheckboxGroup基本使用","code":"/**\r\n * @title CheckboxGroup基本使用\r\n * @description 方便的从数组生成 Checkbox 组。\r\n */\r\n\r\nimport React, { Component } from 'react';\nimport { Checkbox } from 'tinper-bee';\r\n\r\nconst CheckboxGroup = Checkbox.CheckboxGroup;\r\n\r\nconst plainOptions = ['Apple', 'Pear', 'Orange'];\r\nconst options = [\r\n  { label: 'Apple', value: 'Apple' },\r\n  { label: 'Pear', value: 'Pear' },\r\n  { label: 'Orange', value: 'Orange' },\r\n];\r\nconst optionsWithDisabled = [\r\n  { label: 'Apple', value: 'Apple' },\r\n  { label: 'Pear', value: 'Pear' },\r\n  { label: 'Orange', value: 'Orange', disabled: false },\r\n];\r\n\r\nclass Demo4 extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t}\r\n\tonChange(checkedValues) {\r\n\t\tconsole.log('checked = ', checkedValues);\r\n\t}\r\n\trender () {\r\n\t\treturn (\r\n\t\t\t<div className=\"demo-checkbox\">\r\n\t\t\t\t<CheckboxGroup options={plainOptions} defaultValue={['Apple']} onChange={this.onChange} />\r\n\t\t\r\n\t\t\t\t<CheckboxGroup options={options} defaultValue={['Pear']} onChange={this.onChange} />\r\n\t\t\t\r\n\t\t\t\t<CheckboxGroup\r\n\t\t\t\toptions={optionsWithDisabled}\r\n\t\t\t\tdisabled\r\n\t\t\t\tdefaultValue={['Apple']}\r\n\t\t\t\tonChange={this.onChange}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t)\r\n\t}\r\n}\r\nexport default Demo4;","desc":" 方便的从数组生成 Checkbox 组。"},{"example":<Demo5 />,"title":" CheckboxGroup在form中使用","code":"/**\n * @title CheckboxGroup在form中使用\n * @description `value` 参数设置默认值，`onChange`设置值改变的回调。\n */\n\nimport React, { Component } from 'react';\nimport { Button, Form, Checkbox } from 'tinper-bee';\n\n\n\nconst CheckboxGroup = Checkbox.CheckboxGroup;\n\nclass Demo4 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tvalue:['3','4']\n\t\t}\n\t}\n\tchange=(value)=>{\n\t\tthis.setState({\n\t\t\tvalue\n\t\t})\n\t}\n\tclick=()=>{\n\t\tthis.props.form.validateFields((error,values)=>{\n\t\t\tconsole.log(values)\n\t\t})\n\t}\n\trender () {\n\t\tconst self = this;\n\t\tconst { getFieldProps, getFieldError }  = this.props.form;\n\t\treturn (\n\t\t\t<div className=\"demo-checkbox\">\n\t\t\t\t<CheckboxGroup \n\t\t\t\t\t{\n\t\t\t\t\t\t...getFieldProps('name',{\n\t\t\t\t\t\t\tinitialValue:['2','3'],\n\t\t\t\t\t\t\tonChange:self.change\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Checkbox value='1'>\n\t\t\t\t\t\t1\n\t\t\t\t\t</Checkbox>\n\t\t\t\t\t<Checkbox value='2'>\n\t\t\t\t\t\t2\n\t\t\t\t\t</Checkbox>\n\t\t\t\t\t<Checkbox value='3'>\n\t\t\t\t\t\t3\n\t\t\t\t\t</Checkbox>\n\t\t\t\t\t<Checkbox value='4'>\n\t\t\t\t\t\t4\n\t\t\t\t\t</Checkbox>\n\t\t\t\t\t<Checkbox value='5'>\n\t\t\t\t\t\t5\n\t\t\t\t\t</Checkbox>\n\t\t\t\t</CheckboxGroup>\n\t\t\t\t<Button colors=\"secondary\" onClick={this.click}>submit</Button>\n\t\t\t</div>\n\t\t)\n\t}\n}\nexport default Form.createForm()(Demo4);","desc":" `value` 参数设置默认值，`onChange`设置值改变的回调。"},{"example":<Demo6 />,"title":" 全选","code":"/**\n * @title 全选\n * @description `indeterminate` 参数设置部分选中状态。\n */\n\n\nimport React, {Component} from 'react';\nimport { Checkbox } from 'tinper-bee';\n\n\nconst CheckboxGroup = Checkbox.CheckboxGroup;\n\nconst plainOptions = ['1','2','3','4','5'];\nconst defaultCheckedList = ['2','3'];\n\nclass Demo7 extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            checkedList: defaultCheckedList,\n            indeterminate: true,\n            checkAll: false\n        }\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onCheckAllChange = (e) => {\n        console.log(e);\n        this.setState({\n          checkedList: e ? plainOptions : [],\n          indeterminate: false,\n          checkAll: e,\n        });\n    }\n\n    onChange(checkedList) {\n        console.log(checkedList)\n        this.setState({\n            checkedList: checkedList,\n            indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),\n            checkAll: checkedList.length === plainOptions.length\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"demo-checkbox\">\n                <Checkbox\n                    ref=\"test\"\n                    indeterminate={this.state.indeterminate}\n                    onChange={this.onCheckAllChange}\n                    checked={this.state.checkAll}>\n                    全选\n                </Checkbox>\n                <br/>\n                <CheckboxGroup value={this.state.checkedList} onChange={this.onChange}>\n                    <Checkbox value='1'>1</Checkbox>\n                    <Checkbox value='2'>2</Checkbox>\n                    <Checkbox value='3'>3</Checkbox>\n                    <Checkbox value='4'>4</Checkbox>\n                    <Checkbox value='5'>5</Checkbox>\n                </CheckboxGroup>\n            </div>\n        )\n    }\n}\n\nexport default Demo7;","desc":" `indeterminate` 参数设置部分选中状态。"},{"example":<Demo7 />,"title":" 红色填充的 Checkbox","code":"/**\r\n * @title 红色填充的 Checkbox\r\n * @description `inverse` 参数设置选中为红色填充。\r\n */\r\n\r\n\r\nimport React, {Component} from 'react';\nimport { Checkbox } from 'tinper-bee';\r\n\r\n\r\nclass Demo7 extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            checkedFlag: false\r\n        }\r\n        this.onChange = this.onChange.bind(this);\r\n    }\r\n\r\n    onChange(e) {\r\n        console.log(e);\r\n        this.setState({checkedFlag: e});\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"demo-checkbox\">\r\n                <Checkbox\r\n                    disabled\r\n                    inverse\r\n                    checked={true}>\r\n                    禁用\r\n                </Checkbox>\r\n                <Checkbox\r\n                    inverse\r\n                    checked={this.state.checkedFlag}\r\n                    onChange={this.onChange}>\r\n                    全选\r\n                </Checkbox>\r\n                <Checkbox\r\n                    inverse\r\n                    indeterminate>\r\n                    半选\r\n                </Checkbox>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\r\nexport default Demo7;","desc":" `inverse` 参数设置选中为红色填充。"}]
 
@@ -14,0 +14,0 @@

docs/api_en.md

@@ -0,0 +0,0 @@ ## Tile

package.json

 {
  "name": "bee-checkbox",
- "version": "2.0.8",
+ "version": "2.0.9-alpha.0",
  "description": "checkbox ui component for react",
@@ -41,2 +41,3 @@ "keywords": [
   "lodash.isequal": "^4.5.0",
+  "react-sortablejs": "^2.0.11",
   "tinper-bee-core": "latest"
@@ -65,2 +66,2 @@ },
  }
-}
+}

src/Checkbox.js

@@ -29,3 +29,4 @@ import classnames from 'classnames';
         this.state = {
-            checked: 'checked' in props ? props.checked : props.defaultChecked
+            checked: 'checked' in props ? props.checked : props.defaultChecked,
+            focused: false
         }
@@ -85,2 +86,18 @@ this.doubleClickFlag = null;
 
+    handleFocus = (e) => {
+        if(e.target && e.target.type == 'checkbox'){
+            this.setState({
+                focused: true
+            });
+        }
+    }
+
+    handleBlur = (e) => {
+        if(e.target && e.target.type == 'checkbox'){
+            this.setState({
+                focused: false
+            });
+        }
+    }
+
     render() {
@@ -109,2 +126,4 @@ const {
                 disabled={this.props.disabled}
+                onFocus={this.handleFocus}
+                onBlur={this.handleBlur}
             />
@@ -114,2 +133,3 @@ );
         let classes = {
+            [`${clsPrefix}-focused`]: this.state.focused,
             'is-checked': this.state.checked,
@@ -116,0 +136,0 @@ disabled

src/CheckboxGroup.js

@@ -30,3 +30,3 @@ import React from 'react';
     componentWillReceiveProps(nextProps){
-        if(!isEqual(nextProps.value,this.state.values)){
+        if(nextProps.value && !isEqual(nextProps.value,this.state.values)){
             this.setState({
@@ -80,2 +80,3 @@ values:nextProps.value
         let classes = clsPrefix;
+        console.log('state.values: ',state.values)
         if(className)classes += ' '+className;
@@ -82,0 +83,0 @@ if (options && options.length > 0) {

test/Checkbox.test.js

@@ -0,0 +0,0 @@ import React from 'react';

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2049359

increased by0.47%

Lines of code

23875

increased by0.59%

Worsened metrics

Dependency count

7

increased by16.67%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

57

increased by3.64%

Dependency changes

• + Addedreact-sortablejs@^2.0.11

• + Added@types/sortablejs@1.15.8(transitive)

• + Addedreact-sortablejs@2.1.0(transitive)

• + Addedsortablejs@1.15.6(transitive)

• + Addedtiny-invariant@1.3.3(transitive)