bee-switch - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

build/Switch.js

@@ -7,2 +7,4 @@ "use strict";
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require("react");
@@ -28,2 +30,4 @@
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -65,10 +69,10 @@
     var checked = false;
-    if ("checked" in _this.props) {
-      checked = !!_this.props.checked;
+    if ('checked' in props) {
+      checked = !!props.checked;
+    } else if ('defaultValue' in props) {
+      checked = !!props.defaultValue;
     } else {
-      checked = !!_this.props.defaultChecked;
+      checked = !!props.defaultChecked;
     }
-    _this.state = {
-      checked: checked
-    };
+    _this.state = { checked: checked };
     return _this;
@@ -78,12 +82,11 @@ }
   Switch.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps, nextState) {
-    if (nextProps.checked) {
-      this.setState({ checked: nextProps.checked });
-    } else if (nextProps.defaultChecked) {
-      this.setState({ checked: nextProps.defaultChecked });
+    if ("checked" in nextProps) {
+      this.setState({ checked: !!nextProps.checked });
     }
   };
-
   //点击switch改变状态
 
+  // Handle auto focus when click switch in Chrome
 
+
   Switch.prototype.render = function render() {
@@ -97,5 +100,8 @@ var _props = this.props,
         clsPrefix = _props.clsPrefix,
-        colors = _props.colors;
+        disabled = _props.disabled,
+        colors = _props.colors,
+        others = _objectWithoutProperties(_props, ["checkedChildren", "unCheckedChildren", "onChangeHandler", "size", "className", "clsPrefix", "disabled", "colors"]);
     //获取checked
 
+
     var checked = this.state.checked;
@@ -111,2 +117,4 @@ var classes = {
     }
+    classes[[clsPrefix + "-disabled"]] = disabled;
+
     var classNames = (0, _classnames2["default"])(clsPrefix, classes);
@@ -116,7 +124,10 @@
       "span",
-      {
+      _extends({}, others, {
+        ref: this.saveNode,
         onClick: this.clickHandler,
+        onKeyDown: this.handleKeyDown,
+        onMouseUp: this.handleMouseUp,
         className: (0, _classnames2["default"])(className, classNames),
-        tabIndex: "0"
-      },
+        tabIndex: disabled ? -1 : 0
+      }),
       _react2["default"].createElement(
@@ -136,13 +147,45 @@ "span",
 
-  this.clickHandler = function () {
-    if (_this2.props.checked != undefined) {
+  this.setChecked = function (checked) {
+    if (_this2.props.disabled) {
       return;
     }
-    var checked = _this2.state.checked;
-    _this2.setState({
-      checked: !checked
-    });
-    _this2.props.onChangeHandler(!checked);
-    _this2.props.onChange(!checked);
+    if (!('checked' in _this2.props)) {
+      _this2.setState({
+        checked: checked
+      });
+    }
+    _this2.props.onChangeHandler(checked);
+    _this2.props.onChange(checked);
   };
+
+  this.clickHandler = function () {
+    var checked = !_this2.state.checked;
+    _this2.setChecked(checked);
+  };
+
+  this.handleKeyDown = function (e) {
+    if (e.keyCode === 37) {
+      // Left
+      _this2.setChecked(false);
+    } else if (e.keyCode === 39) {
+      // Right
+      _this2.setChecked(true);
+    } else if (e.keyCode === 32 || e.keyCode === 13) {
+      // Space, Enter
+      _this2.clickHandler();
+    }
+  };
+
+  this.handleMouseUp = function (e) {
+    if (_this2.node) {
+      _this2.node.blur();
+    }
+    if (_this2.props.onMouseUp) {
+      _this2.props.onMouseUp(e);
+    }
+  };
+
+  this.saveNode = function (node) {
+    _this2.node = node;
+  };
 };
@@ -149,0 +192,0 @@

changelog.md

@@ -1,3 +0,5 @@
-|时间|说明|修复版本|
-|---|----|---|
-|2017-8-30|修改示例|0.2.3|
+<a name="1.0.3"></a>
+## [1.0.3](https://github.com/tinper-bee/switch/compare/0.0.1...1.0.3) (2017-11-14)
+
+
+

demo/demolist/Demo1.js

@@ -15,3 +15,3 @@ /**
     this.state = {
-      defaultChecked: true
+      checked: true
     };
@@ -21,3 +21,3 @@ }
     this.setState({
-      defaultChecked: !this.state.defaultChecked
+      checked: !this.state.checked
     });
@@ -33,3 +33,3 @@ };
           <Switch
-            defaultChecked={this.state.defaultChecked}
+            checked={this.state.checked}
             onChange={this.onChange}
@@ -36,0 +36,0 @@ />

demo/demolist/Demo3.js

@@ -32,3 +32,3 @@ /**
           <Switch
-            defaultChecked={this.state.checked}
+            checked={this.state.checked}
             onChange={this.onChange}
@@ -35,0 +35,0 @@ checkedChildren={"on"}

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":" 默认开关","code":"/**\n *\n * @title 默认开关\n * @description\n *\n */\nimport React, { Component } from \"react\";\nimport { Row, Col } from \"bee-layout\";\nimport Switch from \"../../src\";\n\nclass Demo1 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      defaultChecked: true\n    };\n  }\n  onChange = () => {\n    this.setState({\n      defaultChecked: !this.state.defaultChecked\n    });\n  };\n  render() {\n    return (\n      <Row>\n        <Col sm={2}>\n          <Switch />\n        </Col>\n        <Col sm={2}>\n          <Switch\n            defaultChecked={this.state.defaultChecked}\n            onChange={this.onChange}\n          />\n        </Col>\n      </Row>\n    );\n  }\n}\n\n\n","desc":""},{"example":<Demo2 />,"title":" 不同大小的开关","code":"/**\n *\n * @title 不同大小的开关\n * @description 通过`size`属性控制开关的大小\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Row, Col } from \"bee-layout\";\nimport Switch from \"../../src\";\n\nclass Demo2 extends Component {\n  render() {\n    return (\n      <Row>\n        <Col sm={2}>\n          <Switch size=\"sm\" />\n        </Col>\n        <Col sm={2}>\n          <Switch />\n        </Col>\n        <Col sm={2}>\n          <Switch size=\"lg\" />\n        </Col>\n      </Row>\n    );\n  }\n}\n\n\n","desc":" 通过`size`属性控制开关的大小"},{"example":<Demo3 />,"title":" 事件开关","code":"/**\n *\n * @title 事件开关\n * @description 点击开关触发事件\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Row, Col } from \"bee-layout\";\nimport Switch from \"../../src\";\n\nclass Demo3 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      switch: \"\",\n      checked: false\n    };\n  }\n  onChange = e => {\n    this.setState({\n      switch: `${e}`,\n      checked: !this.state.checked\n    });\n  };\n\n  render() {\n    return (\n      <Row>\n        <Col sm={2}>\n          <Switch\n            defaultChecked={this.state.checked}\n            onChange={this.onChange}\n            checkedChildren={\"on\"}\n            unCheckedChildren={\"off\"}\n          />\n        </Col>\n        <Col sm={2}>\n          <span>{this.state.switch}</span>\n        </Col>\n      </Row>\n    );\n  }\n}\n\n\n","desc":" 点击开关触发事件"}]
+var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var DemoArray = [{"example":<Demo1 />,"title":" 默认开关","code":"/**\n *\n * @title 默认开关\n * @description\n *\n */\nimport React, { Component } from \"react\";\nimport { Row, Col } from \"bee-layout\";\nimport Switch from \"../../src\";\n\nclass Demo1 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      checked: true\n    };\n  }\n  onChange = () => {\n    this.setState({\n      checked: !this.state.checked\n    });\n  };\n  render() {\n    return (\n      <Row>\n        <Col sm={2}>\n          <Switch />\n        </Col>\n        <Col sm={2}>\n          <Switch\n            checked={this.state.checked}\n            onChange={this.onChange}\n          />\n        </Col>\n      </Row>\n    );\n  }\n}\n\n\n","desc":""},{"example":<Demo2 />,"title":" 不同大小的开关","code":"/**\n *\n * @title 不同大小的开关\n * @description 通过`size`属性控制开关的大小\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Row, Col } from \"bee-layout\";\nimport Switch from \"../../src\";\n\nclass Demo2 extends Component {\n  render() {\n    return (\n      <Row>\n        <Col sm={2}>\n          <Switch size=\"sm\" />\n        </Col>\n        <Col sm={2}>\n          <Switch />\n        </Col>\n        <Col sm={2}>\n          <Switch size=\"lg\" />\n        </Col>\n      </Row>\n    );\n  }\n}\n\n\n","desc":" 通过`size`属性控制开关的大小"},{"example":<Demo3 />,"title":" 事件开关","code":"/**\n *\n * @title 事件开关\n * @description 点击开关触发事件\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Row, Col } from \"bee-layout\";\nimport Switch from \"../../src\";\n\nclass Demo3 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      switch: \"\",\n      checked: false\n    };\n  }\n  onChange = e => {\n    this.setState({\n      switch: `${e}`,\n      checked: !this.state.checked\n    });\n  };\n\n  render() {\n    return (\n      <Row>\n        <Col sm={2}>\n          <Switch\n            checked={this.state.checked}\n            onChange={this.onChange}\n            checkedChildren={\"on\"}\n            unCheckedChildren={\"off\"}\n          />\n        </Col>\n        <Col sm={2}>\n          <span>{this.state.switch}</span>\n        </Col>\n      </Row>\n    );\n  }\n}\n\n\n","desc":" 点击开关触发事件"},{"example":<Demo4 />,"title":" 被禁用开关","code":"/**\n *\n * @title 被禁用开关\n * @description\n *\n */\nimport React, { Component } from \"react\";\nimport { Row, Col } from \"bee-layout\";\nimport Switch from \"../../src\";\n\nclass Demo4 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n        defaultDisabled: true\n    };\n  }\n  onChange = () => {\n    this.setState({\n      defaultDisabled: !this.state.defaultDisabled\n    });\n  };\n  onConsoleLog=(x)=>{\n    console.log(x) \n  }\n  render() {\n    return (\n      <Row>\n        <Col sm={2}>\n          <Switch disabled={this.state.defaultDisabled}/>\n        </Col>\n        <Col sm={2}>\n          <button onClick={this.onChange}>toggle disabled</button>\n        </Col>\n      </Row>\n    );\n  }\n}\n\n\n","desc":""}]
 
@@ -18,0 +18,0 @@

docs/api.md

@@ -14,5 +14,6 @@ ## Switch 开关
 |onChange	|变化时回调函数,自定义参照demo	|Function(checked:Boolean) |
+|disabled|设置是否禁用|Boolean|false|
 |checkedChildren	|选中时的内容	|React| Node |
-|unCheckedChildren	|非选中时的内容	|React| Node
+|unCheckedChildren	|非选中时的内容	|React| Node|
 |size|	大小设置，oneOf：`primary`,`success`,`info`,`dark`,`warning`|string|''|
 |colors| 颜色设置，oneOf：`sm`, `lg`,''|	string	|''|

package.json

 {
  "name": "bee-switch",
- "version": "1.0.2",
+ "version": "1.0.3",
  "description": "switch ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

src/Switch.js

@@ -27,32 +27,55 @@ import React, { Component } from "react";
     super(props);
-    var checked = false;
-    if ("checked" in this.props) {
-      checked = !!this.props.checked;
-    } else {
-      checked = !!this.props.defaultChecked;
+    let checked = false;
+    if ('checked' in props) {
+      checked = !!props.checked;
+    } else if('defaultValue' in props) {
+      checked = !!props.defaultValue;
+    } else{
+      checked = !!props.defaultChecked;
     }
-    this.state = {
-      checked: checked
-    };
+    this.state = { checked };
   }
   componentWillReceiveProps(nextProps, nextState) {
-    if (nextProps.checked) {
-      this.setState({ checked: nextProps.checked });
-    } else if (nextProps.defaultChecked) {
-      this.setState({ checked: nextProps.defaultChecked });
+    if ("checked" in nextProps) {
+      this.setState({ checked: !!nextProps.checked });
     }
   }
-
+  setChecked=(checked)=>{
+    if (this.props.disabled) {
+      return;
+    }
+    if (!('checked' in this.props)) {
+      this.setState({
+        checked,
+      });
+    }
+    this.props.onChangeHandler(checked);
+    this.props.onChange(checked);
+  }
   //点击switch改变状态
   clickHandler = () => {
-    if (this.props.checked != undefined) {
-      return;
+    const checked = !this.state.checked;
+    this.setChecked(checked);
+  };
+  handleKeyDown = (e) => {
+    if (e.keyCode === 37) { // Left
+      this.setChecked(false);
+    } else if (e.keyCode === 39) { // Right
+      this.setChecked(true);
+    } else if (e.keyCode === 32 || e.keyCode === 13) { // Space, Enter
+      this.clickHandler();
     }
-    let checked = this.state.checked;
-    this.setState({
-      checked: !checked
-    });
-    this.props.onChangeHandler(!checked);
-    this.props.onChange(!checked);
-  };
+  }
+  // Handle auto focus when click switch in Chrome
+  handleMouseUp = (e) => {
+    if (this.node) {
+      this.node.blur();
+    }
+    if (this.props.onMouseUp) {
+      this.props.onMouseUp(e);
+    }
+  }
+  saveNode = (node) => {
+    this.node = node;
+  }
   render() {
@@ -66,3 +89,5 @@ const {
       clsPrefix,
-      colors
+      disabled,
+      colors,
+      ...others
     } = this.props;
@@ -80,2 +105,4 @@ //获取checked
     }
+    classes[[`${clsPrefix}-disabled`]] = disabled;
+
     let classNames = classnames(clsPrefix, classes);
@@ -85,5 +112,9 @@
       <span
+        {...others}
+        ref={this.saveNode}
         onClick={this.clickHandler}
+        onKeyDown={this.handleKeyDown}
+        onMouseUp={this.handleMouseUp}
         className={classnames(className, classNames)}
-        tabIndex="0"
+        tabIndex={disabled ? -1 : 0}
       >
@@ -90,0 +121,0 @@ <span className={`${clsPrefix}-inner`}>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of package files

28

increased by3.7%

Worsened metrics

Total package byte prevSize

1299061

decreased by-5.17%

Lines of code

12268

decreased by-9.2%

No dependency changes