新增onKeyDown回调

tinper-bee · Apr 23, 2019 · 6326763 · 6326763
1 parent f0605dd
commit 6326763
Show file tree

Hide file tree

Showing 8 changed files with 1,131 additions and 1,090 deletions.
diff --git a/build/Switch.js b/build/Switch.js
@@ -44,7 +44,9 @@ var propTypes = {
   checkedChildren: _propTypes2["default"].any,
   unCheckedChildren: _propTypes2["default"].any,
   onChangeHandler: _propTypes2["default"].func,
-  onChange: _propTypes2["default"].func
+  onChange: _propTypes2["default"].func,
+  onKeyDown: _propTypes2["default"].func,
+  enterKeyDown: _propTypes2["default"].bool //是否启用 enter 和 space 键
 };
 var defaultProps = {
   clsPrefix: "u-switch",
@@ -54,7 +56,9 @@ var defaultProps = {
   size: "",
   disabled: false,
   onChangeHandler: function onChangeHandler() {},
-  onChange: function onChange() {}
+  onChange: function onChange() {},
+  onKeyDown: function onKeyDown() {},
+  enterKeyDown: true
 };
 
 var Switch = function (_Component) {
@@ -172,8 +176,11 @@ var _initialiseProps = function _initialiseProps() {
       _this2.setChecked(true);
     } else if (e.keyCode === 32 || e.keyCode === 13) {
       // Space, Enter
-      _this2.clickHandler();
+      if (_this2.props.enterKeyDown) {
+        _this2.clickHandler();
+      }
     }
+    _this2.props.onKeyDown(e);
   };
 
   this.handleMouseUp = function (e) {

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

diff --git a/dist/demo.css.map b/dist/demo.css.map
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,7 +8,7 @@ import Button from '../src';



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


		class Demo extends Component {
Expand Down