react-key-handler
Version:
React component to handle keyboard events
1 lines • 24 kB
JSON
{"id":"components/examples/component/index.js","dependencies":[{"name":"/Users/adc/Developer/ayrton/react-key-handler/package.json","includedInParent":true,"mtime":1535648238901},{"name":"/Users/adc/Developer/ayrton/react-key-handler/.babelrc","includedInParent":true,"mtime":1535642334213},{"name":"react","loc":{"line":3,"column":18},"parent":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/component/index.js","resolved":"/Users/adc/Developer/ayrton/react-key-handler/node_modules/react/index.js"},{"name":"react-syntax-highlighter/prism","loc":{"line":4,"column":30},"parent":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/component/index.js","resolved":"/Users/adc/Developer/ayrton/react-key-handler/node_modules/react-syntax-highlighter/prism.js"},{"name":"react-syntax-highlighter/styles/prism","loc":{"line":5,"column":22},"parent":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/component/index.js","resolved":"/Users/adc/Developer/ayrton/react-key-handler/node_modules/react-syntax-highlighter/styles/prism/index.js"},{"name":"../ExampleBox","loc":{"line":7,"column":23},"parent":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/component/index.js","resolved":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/ExampleBox.js"},{"name":"../../../../lib","loc":{"line":8,"column":37},"parent":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/component/index.js","resolved":"/Users/adc/Developer/ayrton/react-key-handler/lib/index.js"}],"generated":{"js":"'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = require('react');\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _prism = require('react-syntax-highlighter/prism');\n\nvar _prism2 = _interopRequireDefault(_prism);\n\nvar _prism3 = require('react-syntax-highlighter/styles/prism');\n\nvar _ExampleBox = require('../ExampleBox');\n\nvar _ExampleBox2 = _interopRequireDefault(_ExampleBox);\n\nvar _lib = require('../../../../lib');\n\nvar _lib2 = _interopRequireDefault(_lib);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Component = function (_React$Component) {\n _inherits(Component, _React$Component);\n\n function Component() {\n var _ref;\n\n var _temp, _this, _ret;\n\n _classCallCheck(this, Component);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Component.__proto__ || Object.getPrototypeOf(Component)).call.apply(_ref, [this].concat(args))), _this), _this.state = { showMenu: false }, _this.toggleMenu = function (event) {\n event.preventDefault();\n\n _this.setState({ showMenu: !_this.state.showMenu });\n }, _temp), _possibleConstructorReturn(_this, _ret);\n }\n\n _createClass(Component, [{\n key: 'render',\n value: function render() {\n var showMenu = this.state.showMenu;\n\n\n return _react2.default.createElement(\n _ExampleBox2.default,\n null,\n _react2.default.createElement(_lib2.default, {\n keyEventName: _lib.KEYPRESS,\n keyValue: 's',\n onKeyHandle: this.toggleMenu\n }),\n _react2.default.createElement(\n 'h2',\n null,\n 'Component example:'\n ),\n _react2.default.createElement(\n 'p',\n null,\n 'Press ',\n _react2.default.createElement(\n 'code',\n null,\n 's'\n ),\n ' to ',\n _react2.default.createElement(\n 'strong',\n null,\n 'toggle'\n ),\n ' the menu.'\n ),\n showMenu && _react2.default.createElement(\n 'ol',\n null,\n _react2.default.createElement(\n 'li',\n null,\n 'hello'\n ),\n _react2.default.createElement(\n 'li',\n null,\n 'world'\n )\n ),\n _react2.default.createElement(\n 'h3',\n null,\n 'Code:'\n ),\n _react2.default.createElement(\n _prism2.default,\n { language: 'javascript', style: _prism3.light },\n codeString\n )\n );\n }\n }]);\n\n return Component;\n}(_react2.default.Component);\n\nexports.default = Component;\n\n\nvar codeString = '\\n<KeyHandler\\n keyEventName={KEYPRESS}\\n keyValue=\"s\"\\n onKeyHandle={this.toggleMenu}\\n/>\\n';","map":{"mappings":[{"generated":{"line":9,"column":0},"source":"components/examples/component/index.js","original":{"line":3,"column":0}},{"generated":{"line":13,"column":0},"source":"components/examples/component/index.js","original":{"line":4,"column":0}},{"generated":{"line":17,"column":0},"source":"components/examples/component/index.js","original":{"line":5,"column":0}},{"generated":{"line":19,"column":0},"source":"components/examples/component/index.js","original":{"line":7,"column":0}},{"generated":{"line":23,"column":0},"source":"components/examples/component/index.js","original":{"line":8,"column":0}},{"name":"Component","generated":{"line":35,"column":4},"source":"components/examples/component/index.js","original":{"line":14,"column":21}},{"name":"state","generated":{"line":49,"column":188},"source":"components/examples/component/index.js","original":{"line":15,"column":2}},{"generated":{"line":49,"column":196},"source":"components/examples/component/index.js","original":{"line":15,"column":17}},{"name":"showMenu","generated":{"line":49,"column":198},"source":"components/examples/component/index.js","original":{"line":15,"column":19}},{"generated":{"line":49,"column":208},"source":"components/examples/component/index.js","original":{"line":15,"column":29}},{"generated":{"line":49,"column":213},"source":"components/examples/component/index.js","original":{"line":15,"column":17}},{"name":"toggleMenu","generated":{"line":49,"column":223},"source":"components/examples/component/index.js","original":{"line":48,"column":2}},{"generated":{"line":49,"column":236},"source":"components/examples/component/index.js","original":{"line":48,"column":15}},{"name":"event","generated":{"line":49,"column":246},"source":"components/examples/component/index.js","original":{"line":48,"column":16}},{"generated":{"line":49,"column":251},"source":"components/examples/component/index.js","original":{"line":48,"column":15}},{"generated":{"line":49,"column":253},"source":"components/examples/component/index.js","original":{"line":48,"column":41}},{"name":"event","generated":{"line":50,"column":0},"source":"components/examples/component/index.js","original":{"line":49,"column":4}},{"name":"preventDefault","generated":{"line":50,"column":12},"source":"components/examples/component/index.js","original":{"line":49,"column":10}},{"generated":{"line":50,"column":26},"source":"components/examples/component/index.js","original":{"line":49,"column":4}},{"generated":{"line":52,"column":0},"source":"components/examples/component/index.js","original":{"line":51,"column":4}},{"name":"setState","generated":{"line":52,"column":12},"source":"components/examples/component/index.js","original":{"line":51,"column":9}},{"generated":{"line":52,"column":20},"source":"components/examples/component/index.js","original":{"line":51,"column":4}},{"generated":{"line":52,"column":21},"source":"components/examples/component/index.js","original":{"line":51,"column":18}},{"name":"showMenu","generated":{"line":52,"column":23},"source":"components/examples/component/index.js","original":{"line":51,"column":20}},{"generated":{"line":52,"column":33},"source":"components/examples/component/index.js","original":{"line":51,"column":30}},{"generated":{"line":52,"column":34},"source":"components/examples/component/index.js","original":{"line":51,"column":31}},{"name":"state","generated":{"line":52,"column":40},"source":"components/examples/component/index.js","original":{"line":51,"column":36}},{"generated":{"line":52,"column":45},"source":"components/examples/component/index.js","original":{"line":51,"column":31}},{"name":"showMenu","generated":{"line":52,"column":46},"source":"components/examples/component/index.js","original":{"line":51,"column":42}},{"generated":{"line":52,"column":54},"source":"components/examples/component/index.js","original":{"line":51,"column":18}},{"generated":{"line":52,"column":56},"source":"components/examples/component/index.js","original":{"line":51,"column":4}},{"generated":{"line":53,"column":0},"source":"components/examples/component/index.js","original":{"line":52,"column":3}},{"generated":{"line":58,"column":29},"source":"components/examples/component/index.js","original":{"line":17,"column":11}},{"generated":{"line":59,"column":0},"source":"components/examples/component/index.js","original":{"line":17,"column":11}},{"name":"showMenu","generated":{"line":59,"column":10},"source":"components/examples/component/index.js","original":{"line":18,"column":12}},{"generated":{"line":59,"column":18},"source":"components/examples/component/index.js","original":{"line":17,"column":11}},{"generated":{"line":59,"column":21},"source":"components/examples/component/index.js","original":{"line":18,"column":25}},{"name":"state","generated":{"line":59,"column":26},"source":"components/examples/component/index.js","original":{"line":18,"column":30}},{"generated":{"line":59,"column":31},"source":"components/examples/component/index.js","original":{"line":17,"column":11}},{"name":"showMenu","generated":{"line":59,"column":32},"source":"components/examples/component/index.js","original":{"line":18,"column":12}},{"generated":{"line":59,"column":40},"source":"components/examples/component/index.js","original":{"line":17,"column":11}},{"generated":{"line":62,"column":0},"source":"components/examples/component/index.js","original":{"line":20,"column":4}},{"generated":{"line":62,"column":13},"source":"components/examples/component/index.js","original":{"line":21,"column":6}},{"generated":{"line":63,"column":0},"source":"components/examples/component/index.js","original":{"line":21,"column":7}},{"generated":{"line":63,"column":28},"source":"components/examples/component/index.js","original":{"line":21,"column":6}},{"generated":{"line":64,"column":0},"source":"components/examples/component/index.js","original":{"line":21,"column":6}},{"generated":{"line":65,"column":0},"source":"components/examples/component/index.js","original":{"line":22,"column":8}},{"generated":{"line":65,"column":38},"source":"components/examples/component/index.js","original":{"line":22,"column":9}},{"generated":{"line":65,"column":51},"source":"components/examples/component/index.js","original":{"line":22,"column":8}},{"generated":{"line":66,"column":0},"source":"components/examples/component/index.js","original":{"line":23,"column":10}},{"name":"KEYPRESS","generated":{"line":66,"column":24},"source":"components/examples/component/index.js","original":{"line":23,"column":24}},{"generated":{"line":66,"column":37},"source":"components/examples/component/index.js","original":{"line":22,"column":8}},{"generated":{"line":67,"column":0},"source":"components/examples/component/index.js","original":{"line":24,"column":10}},{"generated":{"line":67,"column":20},"source":"components/examples/component/index.js","original":{"line":24,"column":19}},{"generated":{"line":67,"column":23},"source":"components/examples/component/index.js","original":{"line":22,"column":8}},{"generated":{"line":68,"column":0},"source":"components/examples/component/index.js","original":{"line":25,"column":10}},{"generated":{"line":68,"column":23},"source":"components/examples/component/index.js","original":{"line":25,"column":23}},{"name":"toggleMenu","generated":{"line":68,"column":28},"source":"components/examples/component/index.js","original":{"line":25,"column":28}},{"generated":{"line":69,"column":0},"source":"components/examples/component/index.js","original":{"line":22,"column":8}},{"generated":{"line":69,"column":10},"source":"components/examples/component/index.js","original":{"line":21,"column":6}},{"generated":{"line":70,"column":0},"source":"components/examples/component/index.js","original":{"line":27,"column":8}},{"generated":{"line":71,"column":0},"source":"components/examples/component/index.js","original":{"line":27,"column":8}},{"generated":{"line":72,"column":0},"source":"components/examples/component/index.js","original":{"line":27,"column":8}},{"generated":{"line":73,"column":0},"source":"components/examples/component/index.js","original":{"line":27,"column":8}},{"generated":{"line":74,"column":0},"source":"components/examples/component/index.js","original":{"line":27,"column":8}},{"generated":{"line":74,"column":9},"source":"components/examples/component/index.js","original":{"line":21,"column":6}},{"generated":{"line":75,"column":0},"source":"components/examples/component/index.js","original":{"line":29,"column":8}},{"generated":{"line":76,"column":0},"source":"components/examples/component/index.js","original":{"line":29,"column":8}},{"generated":{"line":77,"column":0},"source":"components/examples/component/index.js","original":{"line":29,"column":8}},{"generated":{"line":78,"column":0},"source":"components/examples/component/index.js","original":{"line":29,"column":8}},{"generated":{"line":79,"column":0},"source":"components/examples/component/index.js","original":{"line":30,"column":16}},{"generated":{"line":80,"column":0},"source":"components/examples/component/index.js","original":{"line":30,"column":16}},{"generated":{"line":81,"column":0},"source":"components/examples/component/index.js","original":{"line":30,"column":16}},{"generated":{"line":82,"column":0},"source":"components/examples/component/index.js","original":{"line":30,"column":16}},{"generated":{"line":83,"column":0},"source":"components/examples/component/index.js","original":{"line":30,"column":16}},{"generated":{"line":83,"column":11},"source":"components/examples/component/index.js","original":{"line":29,"column":8}},{"generated":{"line":84,"column":0},"source":"components/examples/component/index.js","original":{"line":29,"column":8}},{"generated":{"line":85,"column":0},"source":"components/examples/component/index.js","original":{"line":30,"column":34}},{"generated":{"line":86,"column":0},"source":"components/examples/component/index.js","original":{"line":30,"column":34}},{"generated":{"line":87,"column":0},"source":"components/examples/component/index.js","original":{"line":30,"column":34}},{"generated":{"line":88,"column":0},"source":"components/examples/component/index.js","original":{"line":30,"column":34}},{"generated":{"line":89,"column":0},"source":"components/examples/component/index.js","original":{"line":30,"column":34}},{"generated":{"line":89,"column":11},"source":"components/examples/component/index.js","original":{"line":29,"column":8}},{"generated":{"line":90,"column":0},"source":"components/examples/component/index.js","original":{"line":29,"column":8}},{"generated":{"line":91,"column":0},"source":"components/examples/component/index.js","original":{"line":29,"column":8}},{"generated":{"line":91,"column":9},"source":"components/examples/component/index.js","original":{"line":21,"column":6}},{"name":"showMenu","generated":{"line":92,"column":0},"source":"components/examples/component/index.js","original":{"line":33,"column":9}},{"generated":{"line":92,"column":20},"source":"components/examples/component/index.js","original":{"line":34,"column":10}},{"generated":{"line":93,"column":0},"source":"components/examples/component/index.js","original":{"line":34,"column":10}},{"generated":{"line":94,"column":0},"source":"components/examples/component/index.js","original":{"line":34,"column":10}},{"generated":{"line":95,"column":0},"source":"components/examples/component/index.js","original":{"line":35,"column":12}},{"generated":{"line":96,"column":0},"source":"components/examples/component/index.js","original":{"line":35,"column":12}},{"generated":{"line":97,"column":0},"source":"components/examples/component/index.js","original":{"line":35,"column":12}},{"generated":{"line":98,"column":0},"source":"components/examples/component/index.js","original":{"line":35,"column":12}},{"generated":{"line":99,"column":0},"source":"components/examples/component/index.js","original":{"line":35,"column":12}},{"generated":{"line":99,"column":11},"source":"components/examples/component/index.js","original":{"line":34,"column":10}},{"generated":{"line":100,"column":0},"source":"components/examples/component/index.js","original":{"line":36,"column":12}},{"generated":{"line":101,"column":0},"source":"components/examples/component/index.js","original":{"line":36,"column":12}},{"generated":{"line":102,"column":0},"source":"components/examples/component/index.js","original":{"line":36,"column":12}},{"generated":{"line":103,"column":0},"source":"components/examples/component/index.js","original":{"line":36,"column":12}},{"generated":{"line":104,"column":0},"source":"components/examples/component/index.js","original":{"line":36,"column":12}},{"generated":{"line":105,"column":0},"source":"components/examples/component/index.js","original":{"line":34,"column":10}},{"generated":{"line":105,"column":9},"source":"components/examples/component/index.js","original":{"line":21,"column":6}},{"generated":{"line":106,"column":0},"source":"components/examples/component/index.js","original":{"line":40,"column":8}},{"generated":{"line":107,"column":0},"source":"components/examples/component/index.js","original":{"line":40,"column":8}},{"generated":{"line":108,"column":0},"source":"components/examples/component/index.js","original":{"line":40,"column":8}},{"generated":{"line":109,"column":0},"source":"components/examples/component/index.js","original":{"line":40,"column":8}},{"generated":{"line":110,"column":0},"source":"components/examples/component/index.js","original":{"line":40,"column":8}},{"generated":{"line":110,"column":9},"source":"components/examples/component/index.js","original":{"line":21,"column":6}},{"generated":{"line":111,"column":0},"source":"components/examples/component/index.js","original":{"line":41,"column":8}},{"generated":{"line":112,"column":0},"source":"components/examples/component/index.js","original":{"line":41,"column":9}},{"generated":{"line":112,"column":25},"source":"components/examples/component/index.js","original":{"line":41,"column":8}},{"generated":{"line":113,"column":0},"source":"components/examples/component/index.js","original":{"line":41,"column":8}},{"generated":{"line":113,"column":12},"source":"components/examples/component/index.js","original":{"line":41,"column":27}},{"generated":{"line":113,"column":22},"source":"components/examples/component/index.js","original":{"line":41,"column":36}},{"generated":{"line":113,"column":34},"source":"components/examples/component/index.js","original":{"line":41,"column":8}},{"generated":{"line":113,"column":36},"source":"components/examples/component/index.js","original":{"line":41,"column":49}},{"name":"light","generated":{"line":113,"column":43},"source":"components/examples/component/index.js","original":{"line":41,"column":56}},{"generated":{"line":113,"column":56},"source":"components/examples/component/index.js","original":{"line":41,"column":8}},{"name":"codeString","generated":{"line":114,"column":0},"source":"components/examples/component/index.js","original":{"line":42,"column":11}},{"generated":{"line":115,"column":0},"source":"components/examples/component/index.js","original":{"line":41,"column":8}},{"generated":{"line":116,"column":0},"source":"components/examples/component/index.js","original":{"line":21,"column":6}},{"generated":{"line":116,"column":7},"source":"components/examples/component/index.js","original":{"line":20,"column":4}},{"generated":{"line":117,"column":0},"source":"components/examples/component/index.js","original":{"line":46,"column":3}},{"name":"React","generated":{"line":121,"column":2},"source":"components/examples/component/index.js","original":{"line":14,"column":39}},{"name":"Component","generated":{"line":121,"column":18},"source":"components/examples/component/index.js","original":{"line":14,"column":45}},{"name":"Component","generated":{"line":123,"column":18},"source":"components/examples/component/index.js","original":{"line":14,"column":21}},{"generated":{"line":126,"column":0},"source":"components/examples/component/index.js","original":{"line":55,"column":0}},{"name":"codeString","generated":{"line":126,"column":4},"source":"components/examples/component/index.js","original":{"line":55,"column":6}},{"generated":{"line":126,"column":114},"source":"components/examples/component/index.js","original":{"line":55,"column":0}}],"sources":{"components/examples/component/index.js":"/* @flow */\n\nimport React from 'react';\nimport SyntaxHighlighter from 'react-syntax-highlighter/prism';\nimport { light } from 'react-syntax-highlighter/styles/prism';\n\nimport ExampleBox from '../ExampleBox';\nimport KeyHandler, { KEYPRESS } from '../../../../lib';\n\ntype State = {\n showMenu: boolean,\n};\n\nexport default class Component extends React.Component<{||}, State> {\n state: State = { showMenu: false };\n\n render() {\n const { showMenu } = this.state;\n\n return (\n <ExampleBox>\n <KeyHandler\n keyEventName={KEYPRESS}\n keyValue=\"s\"\n onKeyHandle={this.toggleMenu}\n />\n <h2>Component example:</h2>\n\n <p>\n Press <code>s</code> to <strong>toggle</strong> the menu.\n </p>\n\n {showMenu && (\n <ol>\n <li>hello</li>\n <li>world</li>\n </ol>\n )}\n\n <h3>Code:</h3>\n <SyntaxHighlighter language=\"javascript\" style={light}>\n {codeString}\n </SyntaxHighlighter>\n </ExampleBox>\n );\n }\n\n toggleMenu = (event: KeyboardEvent) => {\n event.preventDefault();\n\n this.setState({ showMenu: !this.state.showMenu });\n };\n}\n\nconst codeString = `\n<KeyHandler\n keyEventName={KEYPRESS}\n keyValue=\"s\"\n onKeyHandle={this.toggleMenu}\n/>\n`;\n"},"lineCount":null}},"hash":"f6cb087dc3b905c939332045c7801102","cacheData":{"env":{}}}