{"id":"components/examples/input/keypress.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/input/keypress.js","resolved":"/Users/adc/Developer/ayrton/react-key-handler/node_modules/react/index.js"},{"name":"../ExampleBox","loc":{"line":4,"column":23},"parent":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/input/keypress.js","resolved":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/ExampleBox.js"},{"name":"react-syntax-highlighter/prism","loc":{"line":5,"column":30},"parent":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/input/keypress.js","resolved":"/Users/adc/Developer/ayrton/react-key-handler/node_modules/react-syntax-highlighter/prism.js"},{"name":"react-syntax-highlighter/styles/prism","loc":{"line":6,"column":22},"parent":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/input/keypress.js","resolved":"/Users/adc/Developer/ayrton/react-key-handler/node_modules/react-syntax-highlighter/styles/prism/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 _ExampleBox = require('../ExampleBox');\n\nvar _ExampleBox2 = _interopRequireDefault(_ExampleBox);\n\nvar _prism = require('react-syntax-highlighter/prism');\n\nvar _prism2 = _interopRequireDefault(_prism);\n\nvar _prism3 = require('react-syntax-highlighter/styles/prism');\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 Keypress = function (_React$Component) {\n  _inherits(Keypress, _React$Component);\n\n  function Keypress() {\n    var _ref;\n\n    var _temp, _this, _ret;\n\n    _classCallCheck(this, Keypress);\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 = Keypress.__proto__ || Object.getPrototypeOf(Keypress)).call.apply(_ref, [this].concat(args))), _this), _this.state = { keyValue: null }, _this.handleKeyPress = function (_ref2) {\n      var key = _ref2.key;\n\n      var keyValue = _this.state.keyValue === key ? null : key;\n\n      _this.setState({ keyValue: keyValue });\n    }, _temp), _possibleConstructorReturn(_this, _ret);\n  }\n\n  _createClass(Keypress, [{\n    key: 'render',\n    value: function render() {\n      return _react2.default.createElement(\n        _ExampleBox2.default,\n        null,\n        _react2.default.createElement(\n          'h2',\n          null,\n          'Input onKeyPress example:'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'Press ',\n          _react2.default.createElement(\n            'code',\n            null,\n            's'\n          ),\n          ' in the following form component to toggle the menu.'\n        ),\n        _react2.default.createElement('input', { onKeyPress: this.handleKeyPress }),\n        this.state.keyValue === 's' && _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 Keypress;\n}(_react2.default.Component);\n\nexports.default = Keypress;\n\n\nvar codeString = '\\nstate: State = { keyValue: null };\\n\\nrender() {\\n  ...\\n  <input onKeyPress={this.handleKeyPress} />\\n  ...\\n}\\n\\nhandleKeyPress = ({ key }) => {\\n  const keyValue = this.state.keyValue === key ? null : key;\\n\\n  this.setState({ keyValue });\\n};\\n';","map":{"mappings":[{"generated":{"line":9,"column":0},"source":"components/examples/input/keypress.js","original":{"line":3,"column":0}},{"generated":{"line":13,"column":0},"source":"components/examples/input/keypress.js","original":{"line":4,"column":0}},{"generated":{"line":17,"column":0},"source":"components/examples/input/keypress.js","original":{"line":5,"column":0}},{"generated":{"line":21,"column":0},"source":"components/examples/input/keypress.js","original":{"line":6,"column":0}},{"name":"Keypress","generated":{"line":31,"column":4},"source":"components/examples/input/keypress.js","original":{"line":12,"column":21}},{"name":"state","generated":{"line":45,"column":186},"source":"components/examples/input/keypress.js","original":{"line":13,"column":2}},{"generated":{"line":45,"column":194},"source":"components/examples/input/keypress.js","original":{"line":13,"column":17}},{"name":"keyValue","generated":{"line":45,"column":196},"source":"components/examples/input/keypress.js","original":{"line":13,"column":19}},{"generated":{"line":45,"column":206},"source":"components/examples/input/keypress.js","original":{"line":13,"column":29}},{"generated":{"line":45,"column":210},"source":"components/examples/input/keypress.js","original":{"line":13,"column":17}},{"name":"handleKeyPress","generated":{"line":45,"column":220},"source":"components/examples/input/keypress.js","original":{"line":42,"column":2}},{"generated":{"line":45,"column":237},"source":"components/examples/input/keypress.js","original":{"line":42,"column":19}},{"generated":{"line":45,"column":254},"source":"components/examples/input/keypress.js","original":{"line":42,"column":74}},{"generated":{"line":46,"column":0},"source":"components/examples/input/keypress.js","original":{"line":42,"column":74}},{"name":"key","generated":{"line":46,"column":10},"source":"components/examples/input/keypress.js","original":{"line":42,"column":22}},{"generated":{"line":46,"column":13},"source":"components/examples/input/keypress.js","original":{"line":42,"column":74}},{"name":"key","generated":{"line":46,"column":22},"source":"components/examples/input/keypress.js","original":{"line":42,"column":22}},{"generated":{"line":46,"column":25},"source":"components/examples/input/keypress.js","original":{"line":42,"column":74}},{"generated":{"line":48,"column":0},"source":"components/examples/input/keypress.js","original":{"line":43,"column":4}},{"name":"keyValue","generated":{"line":48,"column":10},"source":"components/examples/input/keypress.js","original":{"line":43,"column":10}},{"generated":{"line":48,"column":21},"source":"components/examples/input/keypress.js","original":{"line":43,"column":21}},{"name":"state","generated":{"line":48,"column":27},"source":"components/examples/input/keypress.js","original":{"line":43,"column":26}},{"generated":{"line":48,"column":32},"source":"components/examples/input/keypress.js","original":{"line":43,"column":21}},{"name":"keyValue","generated":{"line":48,"column":33},"source":"components/examples/input/keypress.js","original":{"line":43,"column":32}},{"generated":{"line":48,"column":41},"source":"components/examples/input/keypress.js","original":{"line":43,"column":21}},{"name":"key","generated":{"line":48,"column":46},"source":"components/examples/input/keypress.js","original":{"line":43,"column":45}},{"generated":{"line":48,"column":49},"source":"components/examples/input/keypress.js","original":{"line":43,"column":21}},{"generated":{"line":48,"column":52},"source":"components/examples/input/keypress.js","original":{"line":43,"column":51}},{"generated":{"line":48,"column":56},"source":"components/examples/input/keypress.js","original":{"line":43,"column":21}},{"name":"key","generated":{"line":48,"column":59},"source":"components/examples/input/keypress.js","original":{"line":43,"column":58}},{"generated":{"line":48,"column":62},"source":"components/examples/input/keypress.js","original":{"line":43,"column":4}},{"generated":{"line":50,"column":0},"source":"components/examples/input/keypress.js","original":{"line":45,"column":4}},{"name":"setState","generated":{"line":50,"column":12},"source":"components/examples/input/keypress.js","original":{"line":45,"column":9}},{"generated":{"line":50,"column":20},"source":"components/examples/input/keypress.js","original":{"line":45,"column":4}},{"generated":{"line":50,"column":21},"source":"components/examples/input/keypress.js","original":{"line":45,"column":18}},{"name":"keyValue","generated":{"line":50,"column":23},"source":"components/examples/input/keypress.js","original":{"line":45,"column":20}},{"generated":{"line":50,"column":41},"source":"components/examples/input/keypress.js","original":{"line":45,"column":18}},{"generated":{"line":50,"column":43},"source":"components/examples/input/keypress.js","original":{"line":45,"column":4}},{"generated":{"line":51,"column":0},"source":"components/examples/input/keypress.js","original":{"line":46,"column":3}},{"generated":{"line":56,"column":29},"source":"components/examples/input/keypress.js","original":{"line":15,"column":11}},{"generated":{"line":57,"column":0},"source":"components/examples/input/keypress.js","original":{"line":16,"column":4}},{"generated":{"line":57,"column":13},"source":"components/examples/input/keypress.js","original":{"line":17,"column":6}},{"generated":{"line":58,"column":0},"source":"components/examples/input/keypress.js","original":{"line":17,"column":7}},{"generated":{"line":58,"column":28},"source":"components/examples/input/keypress.js","original":{"line":17,"column":6}},{"generated":{"line":59,"column":0},"source":"components/examples/input/keypress.js","original":{"line":17,"column":6}},{"generated":{"line":60,"column":0},"source":"components/examples/input/keypress.js","original":{"line":18,"column":8}},{"generated":{"line":61,"column":0},"source":"components/examples/input/keypress.js","original":{"line":18,"column":8}},{"generated":{"line":62,"column":0},"source":"components/examples/input/keypress.js","original":{"line":18,"column":8}},{"generated":{"line":63,"column":0},"source":"components/examples/input/keypress.js","original":{"line":18,"column":8}},{"generated":{"line":64,"column":0},"source":"components/examples/input/keypress.js","original":{"line":18,"column":8}},{"generated":{"line":64,"column":9},"source":"components/examples/input/keypress.js","original":{"line":17,"column":6}},{"generated":{"line":65,"column":0},"source":"components/examples/input/keypress.js","original":{"line":20,"column":8}},{"generated":{"line":66,"column":0},"source":"components/examples/input/keypress.js","original":{"line":20,"column":8}},{"generated":{"line":67,"column":0},"source":"components/examples/input/keypress.js","original":{"line":20,"column":8}},{"generated":{"line":68,"column":0},"source":"components/examples/input/keypress.js","original":{"line":20,"column":8}},{"generated":{"line":69,"column":0},"source":"components/examples/input/keypress.js","original":{"line":21,"column":16}},{"generated":{"line":70,"column":0},"source":"components/examples/input/keypress.js","original":{"line":21,"column":16}},{"generated":{"line":71,"column":0},"source":"components/examples/input/keypress.js","original":{"line":21,"column":16}},{"generated":{"line":72,"column":0},"source":"components/examples/input/keypress.js","original":{"line":21,"column":16}},{"generated":{"line":73,"column":0},"source":"components/examples/input/keypress.js","original":{"line":21,"column":16}},{"generated":{"line":73,"column":11},"source":"components/examples/input/keypress.js","original":{"line":20,"column":8}},{"generated":{"line":74,"column":0},"source":"components/examples/input/keypress.js","original":{"line":20,"column":8}},{"generated":{"line":75,"column":0},"source":"components/examples/input/keypress.js","original":{"line":20,"column":8}},{"generated":{"line":75,"column":9},"source":"components/examples/input/keypress.js","original":{"line":17,"column":6}},{"generated":{"line":76,"column":0},"source":"components/examples/input/keypress.js","original":{"line":25,"column":8}},{"generated":{"line":76,"column":49},"source":"components/examples/input/keypress.js","original":{"line":25,"column":15}},{"generated":{"line":76,"column":61},"source":"components/examples/input/keypress.js","original":{"line":25,"column":27}},{"name":"handleKeyPress","generated":{"line":76,"column":66},"source":"components/examples/input/keypress.js","original":{"line":25,"column":32}},{"generated":{"line":76,"column":80},"source":"components/examples/input/keypress.js","original":{"line":25,"column":8}},{"generated":{"line":76,"column":83},"source":"components/examples/input/keypress.js","original":{"line":17,"column":6}},{"generated":{"line":77,"column":0},"source":"components/examples/input/keypress.js","original":{"line":27,"column":9}},{"name":"state","generated":{"line":77,"column":13},"source":"components/examples/input/keypress.js","original":{"line":27,"column":14}},{"generated":{"line":77,"column":18},"source":"components/examples/input/keypress.js","original":{"line":27,"column":9}},{"name":"keyValue","generated":{"line":77,"column":19},"source":"components/examples/input/keypress.js","original":{"line":27,"column":20}},{"generated":{"line":77,"column":27},"source":"components/examples/input/keypress.js","original":{"line":27,"column":9}},{"generated":{"line":77,"column":32},"source":"components/examples/input/keypress.js","original":{"line":27,"column":33}},{"generated":{"line":77,"column":35},"source":"components/examples/input/keypress.js","original":{"line":27,"column":9}},{"generated":{"line":77,"column":39},"source":"components/examples/input/keypress.js","original":{"line":28,"column":10}},{"generated":{"line":78,"column":0},"source":"components/examples/input/keypress.js","original":{"line":28,"column":10}},{"generated":{"line":79,"column":0},"source":"components/examples/input/keypress.js","original":{"line":28,"column":10}},{"generated":{"line":80,"column":0},"source":"components/examples/input/keypress.js","original":{"line":29,"column":12}},{"generated":{"line":81,"column":0},"source":"components/examples/input/keypress.js","original":{"line":29,"column":12}},{"generated":{"line":82,"column":0},"source":"components/examples/input/keypress.js","original":{"line":29,"column":12}},{"generated":{"line":83,"column":0},"source":"components/examples/input/keypress.js","original":{"line":29,"column":12}},{"generated":{"line":84,"column":0},"source":"components/examples/input/keypress.js","original":{"line":29,"column":12}},{"generated":{"line":84,"column":11},"source":"components/examples/input/keypress.js","original":{"line":28,"column":10}},{"generated":{"line":85,"column":0},"source":"components/examples/input/keypress.js","original":{"line":30,"column":12}},{"generated":{"line":86,"column":0},"source":"components/examples/input/keypress.js","original":{"line":30,"column":12}},{"generated":{"line":87,"column":0},"source":"components/examples/input/keypress.js","original":{"line":30,"column":12}},{"generated":{"line":88,"column":0},"source":"components/examples/input/keypress.js","original":{"line":30,"column":12}},{"generated":{"line":89,"column":0},"source":"components/examples/input/keypress.js","original":{"line":30,"column":12}},{"generated":{"line":90,"column":0},"source":"components/examples/input/keypress.js","original":{"line":28,"column":10}},{"generated":{"line":90,"column":9},"source":"components/examples/input/keypress.js","original":{"line":17,"column":6}},{"generated":{"line":91,"column":0},"source":"components/examples/input/keypress.js","original":{"line":34,"column":8}},{"generated":{"line":92,"column":0},"source":"components/examples/input/keypress.js","original":{"line":34,"column":8}},{"generated":{"line":93,"column":0},"source":"components/examples/input/keypress.js","original":{"line":34,"column":8}},{"generated":{"line":94,"column":0},"source":"components/examples/input/keypress.js","original":{"line":34,"column":8}},{"generated":{"line":95,"column":0},"source":"components/examples/input/keypress.js","original":{"line":34,"column":8}},{"generated":{"line":95,"column":9},"source":"components/examples/input/keypress.js","original":{"line":17,"column":6}},{"generated":{"line":96,"column":0},"source":"components/examples/input/keypress.js","original":{"line":35,"column":8}},{"generated":{"line":97,"column":0},"source":"components/examples/input/keypress.js","original":{"line":35,"column":9}},{"generated":{"line":97,"column":25},"source":"components/examples/input/keypress.js","original":{"line":35,"column":8}},{"generated":{"line":98,"column":0},"source":"components/examples/input/keypress.js","original":{"line":35,"column":8}},{"generated":{"line":98,"column":12},"source":"components/examples/input/keypress.js","original":{"line":35,"column":27}},{"generated":{"line":98,"column":22},"source":"components/examples/input/keypress.js","original":{"line":35,"column":36}},{"generated":{"line":98,"column":34},"source":"components/examples/input/keypress.js","original":{"line":35,"column":8}},{"generated":{"line":98,"column":36},"source":"components/examples/input/keypress.js","original":{"line":35,"column":49}},{"name":"light","generated":{"line":98,"column":43},"source":"components/examples/input/keypress.js","original":{"line":35,"column":56}},{"generated":{"line":98,"column":56},"source":"components/examples/input/keypress.js","original":{"line":35,"column":8}},{"name":"codeString","generated":{"line":99,"column":0},"source":"components/examples/input/keypress.js","original":{"line":36,"column":11}},{"generated":{"line":100,"column":0},"source":"components/examples/input/keypress.js","original":{"line":35,"column":8}},{"generated":{"line":101,"column":0},"source":"components/examples/input/keypress.js","original":{"line":17,"column":6}},{"generated":{"line":101,"column":7},"source":"components/examples/input/keypress.js","original":{"line":16,"column":4}},{"generated":{"line":102,"column":0},"source":"components/examples/input/keypress.js","original":{"line":40,"column":3}},{"name":"React","generated":{"line":106,"column":2},"source":"components/examples/input/keypress.js","original":{"line":12,"column":38}},{"name":"Component","generated":{"line":106,"column":18},"source":"components/examples/input/keypress.js","original":{"line":12,"column":44}},{"name":"Keypress","generated":{"line":108,"column":18},"source":"components/examples/input/keypress.js","original":{"line":12,"column":21}},{"generated":{"line":111,"column":0},"source":"components/examples/input/keypress.js","original":{"line":49,"column":0}},{"name":"codeString","generated":{"line":111,"column":4},"source":"components/examples/input/keypress.js","original":{"line":49,"column":6}},{"generated":{"line":111,"column":269},"source":"components/examples/input/keypress.js","original":{"line":49,"column":0}}],"sources":{"components/examples/input/keypress.js":"/* @flow */\n\nimport React from 'react';\nimport ExampleBox from '../ExampleBox';\nimport SyntaxHighlighter from 'react-syntax-highlighter/prism';\nimport { light } from 'react-syntax-highlighter/styles/prism';\n\ntype State = {\n  keyValue: ?string,\n};\n\nexport default class Keypress extends React.Component<{||}, State> {\n  state: State = { keyValue: null };\n\n  render() {\n    return (\n      <ExampleBox>\n        <h2>Input onKeyPress example:</h2>\n\n        <p>\n          Press <code>s</code> in the following form component to toggle the\n          menu.\n        </p>\n\n        <input onKeyPress={this.handleKeyPress} />\n\n        {this.state.keyValue === 's' && (\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  handleKeyPress = ({ key }: SyntheticKeyboardEvent<HTMLInputElement>) => {\n    const keyValue = this.state.keyValue === key ? null : key;\n\n    this.setState({ keyValue });\n  };\n}\n\nconst codeString = `\nstate: State = { keyValue: null };\n\nrender() {\n  ...\n  <input onKeyPress={this.handleKeyPress} />\n  ...\n}\n\nhandleKeyPress = ({ key }) => {\n  const keyValue = this.state.keyValue === key ? null : key;\n\n  this.setState({ keyValue });\n};\n`;\n"},"lineCount":null}},"hash":"9b1d84b2b9ef95b2d5d177044ea51dd0","cacheData":{"env":{}}}