react-key-handler
Version:
React component to handle keyboard events
1 lines • 31.2 kB
JSON
{"id":"components/examples/input/code-explore.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/code-explore.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/code-explore.js","resolved":"/Users/adc/Developer/ayrton/react-key-handler/demo/components/examples/ExampleBox.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\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 CodeExplore = function (_React$Component) {\n _inherits(CodeExplore, _React$Component);\n\n function CodeExplore() {\n var _ref;\n\n var _temp, _this, _ret;\n\n _classCallCheck(this, CodeExplore);\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 = CodeExplore.__proto__ || Object.getPrototypeOf(CodeExplore)).call.apply(_ref, [this].concat(args))), _this), _this.state = { codes: [] }, _this.handleKeyPress = function (e) {\n var codes = _this.state.codes;\n\n\n codes.push({\n // $FlowFixMe\n code: e.nativeEvent.code,\n value: e.key\n });\n if (codes.length > 3) {\n codes.shift();\n }\n\n _this.setState({ codes: codes });\n }, _temp), _possibleConstructorReturn(_this, _ret);\n }\n\n _createClass(CodeExplore, [{\n key: 'render',\n value: function render() {\n var codes = this.state.codes;\n\n var undefCodes = [undefined, undefined, undefined];\n var elements = undefCodes.concat(codes).reverse().slice(0, 3).map(function (code, i) {\n if (code === undefined) {\n return _react2.default.createElement(\n 'li',\n { key: i },\n '...'\n );\n }\n return _react2.default.createElement(\n 'li',\n { key: i },\n code.code,\n ' => ',\n code.value\n );\n });\n\n return _react2.default.createElement(\n _ExampleBox2.default,\n null,\n _react2.default.createElement(\n 'h2',\n null,\n 'Input\\xA0',\n _react2.default.createElement(\n 'code',\n null,\n 'KeyboardEvent'\n ),\n '\\xA0',\n _react2.default.createElement(\n 'code',\n null,\n '.code'\n ),\n '\\xA0 and ',\n _react2.default.createElement(\n 'code',\n null,\n '.value'\n ),\n '\\xA0 explore:'\n ),\n _react2.default.createElement('input', { onKeyPress: this.handleKeyPress }),\n _react2.default.createElement(\n 'p',\n null,\n 'Last 3 values (code => value):'\n ),\n _react2.default.createElement(\n 'ol',\n null,\n elements\n )\n );\n }\n }]);\n\n return CodeExplore;\n}(_react2.default.Component);\n\nexports.default = CodeExplore;","map":{"mappings":[{"generated":{"line":9,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":3,"column":0}},{"generated":{"line":13,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":4,"column":0}},{"name":"CodeExplore","generated":{"line":25,"column":4},"source":"components/examples/input/code-explore.js","original":{"line":11,"column":21}},{"name":"state","generated":{"line":39,"column":192},"source":"components/examples/input/code-explore.js","original":{"line":12,"column":2}},{"generated":{"line":39,"column":200},"source":"components/examples/input/code-explore.js","original":{"line":12,"column":17}},{"name":"codes","generated":{"line":39,"column":202},"source":"components/examples/input/code-explore.js","original":{"line":12,"column":19}},{"generated":{"line":39,"column":209},"source":"components/examples/input/code-explore.js","original":{"line":12,"column":26}},{"generated":{"line":39,"column":211},"source":"components/examples/input/code-explore.js","original":{"line":12,"column":17}},{"name":"handleKeyPress","generated":{"line":39,"column":221},"source":"components/examples/input/code-explore.js","original":{"line":51,"column":2}},{"generated":{"line":39,"column":238},"source":"components/examples/input/code-explore.js","original":{"line":51,"column":19}},{"name":"e","generated":{"line":39,"column":248},"source":"components/examples/input/code-explore.js","original":{"line":51,"column":20}},{"generated":{"line":39,"column":249},"source":"components/examples/input/code-explore.js","original":{"line":51,"column":19}},{"generated":{"line":39,"column":251},"source":"components/examples/input/code-explore.js","original":{"line":51,"column":68}},{"generated":{"line":40,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":51,"column":68}},{"name":"codes","generated":{"line":40,"column":10},"source":"components/examples/input/code-explore.js","original":{"line":52,"column":12}},{"generated":{"line":40,"column":15},"source":"components/examples/input/code-explore.js","original":{"line":51,"column":68}},{"generated":{"line":40,"column":18},"source":"components/examples/input/code-explore.js","original":{"line":52,"column":22}},{"name":"state","generated":{"line":40,"column":24},"source":"components/examples/input/code-explore.js","original":{"line":52,"column":27}},{"generated":{"line":40,"column":29},"source":"components/examples/input/code-explore.js","original":{"line":51,"column":68}},{"name":"codes","generated":{"line":40,"column":30},"source":"components/examples/input/code-explore.js","original":{"line":52,"column":12}},{"generated":{"line":40,"column":35},"source":"components/examples/input/code-explore.js","original":{"line":51,"column":68}},{"name":"codes","generated":{"line":43,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":54,"column":4}},{"name":"push","generated":{"line":43,"column":12},"source":"components/examples/input/code-explore.js","original":{"line":54,"column":10}},{"generated":{"line":43,"column":16},"source":"components/examples/input/code-explore.js","original":{"line":54,"column":4}},{"generated":{"line":43,"column":17},"source":"components/examples/input/code-explore.js","original":{"line":54,"column":15}},{"generated":{"line":44,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":55,"column":6}},{"name":"code","generated":{"line":45,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":56,"column":6}},{"name":"e","generated":{"line":45,"column":14},"source":"components/examples/input/code-explore.js","original":{"line":56,"column":12}},{"name":"nativeEvent","generated":{"line":45,"column":16},"source":"components/examples/input/code-explore.js","original":{"line":56,"column":14}},{"generated":{"line":45,"column":27},"source":"components/examples/input/code-explore.js","original":{"line":56,"column":12}},{"name":"code","generated":{"line":45,"column":28},"source":"components/examples/input/code-explore.js","original":{"line":56,"column":26}},{"generated":{"line":45,"column":32},"source":"components/examples/input/code-explore.js","original":{"line":54,"column":15}},{"name":"value","generated":{"line":46,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":57,"column":6}},{"name":"e","generated":{"line":46,"column":15},"source":"components/examples/input/code-explore.js","original":{"line":57,"column":13}},{"name":"key","generated":{"line":46,"column":17},"source":"components/examples/input/code-explore.js","original":{"line":57,"column":15}},{"generated":{"line":47,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":54,"column":15}},{"generated":{"line":47,"column":7},"source":"components/examples/input/code-explore.js","original":{"line":54,"column":4}},{"generated":{"line":48,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":59,"column":4}},{"name":"codes","generated":{"line":48,"column":10},"source":"components/examples/input/code-explore.js","original":{"line":59,"column":8}},{"name":"length","generated":{"line":48,"column":16},"source":"components/examples/input/code-explore.js","original":{"line":59,"column":14}},{"generated":{"line":48,"column":22},"source":"components/examples/input/code-explore.js","original":{"line":59,"column":8}},{"generated":{"line":48,"column":25},"source":"components/examples/input/code-explore.js","original":{"line":59,"column":23}},{"generated":{"line":48,"column":26},"source":"components/examples/input/code-explore.js","original":{"line":59,"column":4}},{"generated":{"line":48,"column":28},"source":"components/examples/input/code-explore.js","original":{"line":59,"column":26}},{"name":"codes","generated":{"line":49,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":60,"column":6}},{"name":"shift","generated":{"line":49,"column":14},"source":"components/examples/input/code-explore.js","original":{"line":60,"column":12}},{"generated":{"line":49,"column":19},"source":"components/examples/input/code-explore.js","original":{"line":60,"column":6}},{"generated":{"line":50,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":61,"column":5}},{"generated":{"line":52,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":63,"column":4}},{"name":"setState","generated":{"line":52,"column":12},"source":"components/examples/input/code-explore.js","original":{"line":63,"column":9}},{"generated":{"line":52,"column":20},"source":"components/examples/input/code-explore.js","original":{"line":63,"column":4}},{"generated":{"line":52,"column":21},"source":"components/examples/input/code-explore.js","original":{"line":63,"column":18}},{"name":"codes","generated":{"line":52,"column":23},"source":"components/examples/input/code-explore.js","original":{"line":63,"column":20}},{"generated":{"line":52,"column":35},"source":"components/examples/input/code-explore.js","original":{"line":63,"column":18}},{"generated":{"line":52,"column":37},"source":"components/examples/input/code-explore.js","original":{"line":63,"column":4}},{"generated":{"line":53,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":64,"column":3}},{"generated":{"line":58,"column":29},"source":"components/examples/input/code-explore.js","original":{"line":14,"column":11}},{"generated":{"line":59,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":14,"column":11}},{"name":"codes","generated":{"line":59,"column":10},"source":"components/examples/input/code-explore.js","original":{"line":15,"column":12}},{"generated":{"line":59,"column":15},"source":"components/examples/input/code-explore.js","original":{"line":14,"column":11}},{"generated":{"line":59,"column":18},"source":"components/examples/input/code-explore.js","original":{"line":15,"column":22}},{"name":"state","generated":{"line":59,"column":23},"source":"components/examples/input/code-explore.js","original":{"line":15,"column":27}},{"generated":{"line":59,"column":28},"source":"components/examples/input/code-explore.js","original":{"line":14,"column":11}},{"name":"codes","generated":{"line":59,"column":29},"source":"components/examples/input/code-explore.js","original":{"line":15,"column":12}},{"generated":{"line":59,"column":34},"source":"components/examples/input/code-explore.js","original":{"line":14,"column":11}},{"generated":{"line":61,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":16,"column":4}},{"name":"undefCodes","generated":{"line":61,"column":10},"source":"components/examples/input/code-explore.js","original":{"line":16,"column":10}},{"generated":{"line":61,"column":23},"source":"components/examples/input/code-explore.js","original":{"line":16,"column":43}},{"name":"undefined","generated":{"line":61,"column":24},"source":"components/examples/input/code-explore.js","original":{"line":16,"column":44}},{"generated":{"line":61,"column":33},"source":"components/examples/input/code-explore.js","original":{"line":16,"column":43}},{"name":"undefined","generated":{"line":61,"column":35},"source":"components/examples/input/code-explore.js","original":{"line":16,"column":55}},{"generated":{"line":61,"column":44},"source":"components/examples/input/code-explore.js","original":{"line":16,"column":43}},{"name":"undefined","generated":{"line":61,"column":46},"source":"components/examples/input/code-explore.js","original":{"line":16,"column":66}},{"generated":{"line":61,"column":55},"source":"components/examples/input/code-explore.js","original":{"line":16,"column":43}},{"generated":{"line":61,"column":56},"source":"components/examples/input/code-explore.js","original":{"line":16,"column":4}},{"generated":{"line":62,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":4}},{"name":"elements","generated":{"line":62,"column":10},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":10}},{"name":"undefCodes","generated":{"line":62,"column":21},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":21}},{"name":"concat","generated":{"line":62,"column":32},"source":"components/examples/input/code-explore.js","original":{"line":18,"column":7}},{"generated":{"line":62,"column":38},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":21}},{"name":"codes","generated":{"line":62,"column":39},"source":"components/examples/input/code-explore.js","original":{"line":18,"column":14}},{"generated":{"line":62,"column":44},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":21}},{"name":"reverse","generated":{"line":62,"column":46},"source":"components/examples/input/code-explore.js","original":{"line":19,"column":7}},{"generated":{"line":62,"column":53},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":21}},{"name":"slice","generated":{"line":62,"column":56},"source":"components/examples/input/code-explore.js","original":{"line":20,"column":7}},{"generated":{"line":62,"column":61},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":21}},{"generated":{"line":62,"column":62},"source":"components/examples/input/code-explore.js","original":{"line":20,"column":13}},{"generated":{"line":62,"column":63},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":21}},{"generated":{"line":62,"column":65},"source":"components/examples/input/code-explore.js","original":{"line":20,"column":16}},{"generated":{"line":62,"column":66},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":21}},{"name":"map","generated":{"line":62,"column":68},"source":"components/examples/input/code-explore.js","original":{"line":21,"column":7}},{"generated":{"line":62,"column":71},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":21}},{"generated":{"line":62,"column":72},"source":"components/examples/input/code-explore.js","original":{"line":21,"column":11}},{"name":"code","generated":{"line":62,"column":82},"source":"components/examples/input/code-explore.js","original":{"line":21,"column":12}},{"generated":{"line":62,"column":86},"source":"components/examples/input/code-explore.js","original":{"line":21,"column":11}},{"name":"i","generated":{"line":62,"column":88},"source":"components/examples/input/code-explore.js","original":{"line":21,"column":18}},{"generated":{"line":62,"column":89},"source":"components/examples/input/code-explore.js","original":{"line":21,"column":11}},{"generated":{"line":62,"column":91},"source":"components/examples/input/code-explore.js","original":{"line":21,"column":24}},{"generated":{"line":63,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":22,"column":8}},{"name":"code","generated":{"line":63,"column":12},"source":"components/examples/input/code-explore.js","original":{"line":22,"column":12}},{"name":"undefined","generated":{"line":63,"column":21},"source":"components/examples/input/code-explore.js","original":{"line":22,"column":21}},{"generated":{"line":63,"column":30},"source":"components/examples/input/code-explore.js","original":{"line":22,"column":8}},{"generated":{"line":63,"column":32},"source":"components/examples/input/code-explore.js","original":{"line":22,"column":32}},{"generated":{"line":64,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":23,"column":10}},{"generated":{"line":64,"column":17},"source":"components/examples/input/code-explore.js","original":{"line":23,"column":17}},{"generated":{"line":65,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":23,"column":17}},{"generated":{"line":66,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":23,"column":17}},{"generated":{"line":66,"column":14},"source":"components/examples/input/code-explore.js","original":{"line":23,"column":21}},{"name":"i","generated":{"line":66,"column":19},"source":"components/examples/input/code-explore.js","original":{"line":23,"column":26}},{"generated":{"line":66,"column":20},"source":"components/examples/input/code-explore.js","original":{"line":23,"column":17}},{"generated":{"line":67,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":23,"column":17}},{"generated":{"line":68,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":23,"column":17}},{"generated":{"line":68,"column":11},"source":"components/examples/input/code-explore.js","original":{"line":23,"column":10}},{"generated":{"line":69,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":24,"column":9}},{"generated":{"line":70,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":25,"column":8}},{"generated":{"line":70,"column":15},"source":"components/examples/input/code-explore.js","original":{"line":26,"column":10}},{"generated":{"line":71,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":26,"column":10}},{"generated":{"line":72,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":26,"column":10}},{"generated":{"line":72,"column":12},"source":"components/examples/input/code-explore.js","original":{"line":26,"column":14}},{"name":"i","generated":{"line":72,"column":17},"source":"components/examples/input/code-explore.js","original":{"line":26,"column":19}},{"generated":{"line":72,"column":18},"source":"components/examples/input/code-explore.js","original":{"line":26,"column":10}},{"name":"code","generated":{"line":73,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":27,"column":13}},{"name":"code","generated":{"line":73,"column":15},"source":"components/examples/input/code-explore.js","original":{"line":27,"column":18}},{"generated":{"line":73,"column":19},"source":"components/examples/input/code-explore.js","original":{"line":26,"column":10}},{"generated":{"line":74,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":26,"column":10}},{"name":"code","generated":{"line":75,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":27,"column":31}},{"name":"value","generated":{"line":75,"column":15},"source":"components/examples/input/code-explore.js","original":{"line":27,"column":36}},{"generated":{"line":76,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":26,"column":10}},{"generated":{"line":76,"column":9},"source":"components/examples/input/code-explore.js","original":{"line":25,"column":8}},{"generated":{"line":77,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":30,"column":7}},{"generated":{"line":77,"column":7},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":21}},{"generated":{"line":77,"column":8},"source":"components/examples/input/code-explore.js","original":{"line":17,"column":4}},{"generated":{"line":79,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":32,"column":4}},{"generated":{"line":79,"column":13},"source":"components/examples/input/code-explore.js","original":{"line":33,"column":6}},{"generated":{"line":80,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":33,"column":7}},{"generated":{"line":80,"column":28},"source":"components/examples/input/code-explore.js","original":{"line":33,"column":6}},{"generated":{"line":81,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":33,"column":6}},{"generated":{"line":82,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":83,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":84,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":85,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":86,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":36,"column":10}},{"generated":{"line":87,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":36,"column":10}},{"generated":{"line":88,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":36,"column":10}},{"generated":{"line":89,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":36,"column":10}},{"generated":{"line":90,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":36,"column":10}},{"generated":{"line":90,"column":11},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":91,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":92,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":38,"column":10}},{"generated":{"line":93,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":38,"column":10}},{"generated":{"line":94,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":38,"column":10}},{"generated":{"line":95,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":38,"column":10}},{"generated":{"line":96,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":38,"column":10}},{"generated":{"line":96,"column":11},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":97,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":98,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":39,"column":21}},{"generated":{"line":99,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":39,"column":21}},{"generated":{"line":100,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":39,"column":21}},{"generated":{"line":101,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":39,"column":21}},{"generated":{"line":102,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":39,"column":21}},{"generated":{"line":102,"column":11},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":103,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":104,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":34,"column":8}},{"generated":{"line":104,"column":9},"source":"components/examples/input/code-explore.js","original":{"line":33,"column":6}},{"generated":{"line":105,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":43,"column":8}},{"generated":{"line":105,"column":49},"source":"components/examples/input/code-explore.js","original":{"line":43,"column":15}},{"generated":{"line":105,"column":61},"source":"components/examples/input/code-explore.js","original":{"line":43,"column":27}},{"name":"handleKeyPress","generated":{"line":105,"column":66},"source":"components/examples/input/code-explore.js","original":{"line":43,"column":32}},{"generated":{"line":105,"column":80},"source":"components/examples/input/code-explore.js","original":{"line":43,"column":8}},{"generated":{"line":105,"column":83},"source":"components/examples/input/code-explore.js","original":{"line":33,"column":6}},{"generated":{"line":106,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":45,"column":8}},{"generated":{"line":107,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":45,"column":8}},{"generated":{"line":108,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":45,"column":8}},{"generated":{"line":109,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":45,"column":8}},{"generated":{"line":110,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":45,"column":8}},{"generated":{"line":110,"column":9},"source":"components/examples/input/code-explore.js","original":{"line":33,"column":6}},{"generated":{"line":111,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":46,"column":8}},{"generated":{"line":112,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":46,"column":8}},{"generated":{"line":113,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":46,"column":8}},{"name":"elements","generated":{"line":114,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":46,"column":13}},{"generated":{"line":115,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":46,"column":8}},{"generated":{"line":116,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":33,"column":6}},{"generated":{"line":116,"column":7},"source":"components/examples/input/code-explore.js","original":{"line":32,"column":4}},{"generated":{"line":117,"column":0},"source":"components/examples/input/code-explore.js","original":{"line":49,"column":3}},{"name":"React","generated":{"line":121,"column":2},"source":"components/examples/input/code-explore.js","original":{"line":11,"column":41}},{"name":"Component","generated":{"line":121,"column":18},"source":"components/examples/input/code-explore.js","original":{"line":11,"column":47}},{"name":"CodeExplore","generated":{"line":123,"column":18},"source":"components/examples/input/code-explore.js","original":{"line":11,"column":21}}],"sources":{"components/examples/input/code-explore.js":"/* @flow */\n\nimport React from 'react';\nimport ExampleBox from '../ExampleBox';\n\ntype code = {| code: string, value: string |};\ntype State = {\n codes: code[],\n};\n\nexport default class CodeExplore extends React.Component<{||}, State> {\n state: State = { codes: [] };\n\n render() {\n const { codes } = this.state;\n const undefCodes: Array<code | void> = [undefined, undefined, undefined];\n const elements = undefCodes\n .concat(codes)\n .reverse()\n .slice(0, 3)\n .map((code, i) => {\n if (code === undefined) {\n return <li key={i}>...</li>;\n }\n return (\n <li key={i}>\n {code.code} => {code.value}\n </li>\n );\n });\n\n return (\n <ExampleBox>\n <h2>\n Input \n <code>KeyboardEvent</code>\n \n <code>.code</code>\n and <code>.value</code>\n explore:\n </h2>\n\n <input onKeyPress={this.handleKeyPress} />\n\n <p>Last 3 values (code => value):</p>\n <ol>{elements}</ol>\n </ExampleBox>\n );\n }\n\n handleKeyPress = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {\n const { codes } = this.state;\n\n codes.push({\n // $FlowFixMe\n code: e.nativeEvent.code,\n value: e.key,\n });\n if (codes.length > 3) {\n codes.shift();\n }\n\n this.setState({ codes });\n };\n}\n"},"lineCount":null}},"hash":"6813bc28fb3bac5f243f1eb945da11c0","cacheData":{"env":{}}}