react-keyboard-event-handler
Version:
A React component for handling keyboard events.
133 lines (122 loc) • 1.2 MB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./demo/src/demo.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./demo/src/demo.js":
/*!**************************!*\
!*** ./demo/src/demo.js ***!
\**************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactDom = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n\nvar _reactDom2 = _interopRequireDefault(_reactDom);\n\nvar _KeyboardEventHandler = __webpack_require__(/*! ../../src/KeyboardEventHandler */ \"./src/KeyboardEventHandler.js\");\n\nvar _KeyboardEventHandler2 = _interopRequireDefault(_KeyboardEventHandler);\n\nvar _reactProvideState = __webpack_require__(/*! react-provide-state */ \"./node_modules/react-provide-state/lib/react-provide-state.js\");\n\nvar _reactProvideState2 = _interopRequireDefault(_reactProvideState);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar ComponentACode = \"<KeyboardEventHandler handleKeys={['a', 'b', 'c']} onKeyEvent={(key, e) => props.setEventKey(key)}/>\";\nvar ComponentA = function ComponentA(props) {\n return _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'I handle \\'a\\', \\'b\\' and \\'c\\' only'\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentACode } })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-footer text-success' },\n 'key detected: ',\n _react2.default.createElement(\n 'strong',\n null,\n _react2.default.createElement(\n 'mark',\n null,\n props.eventKey\n )\n )\n ),\n _react2.default.createElement(_KeyboardEventHandler2.default, {\n handleKeys: ['a', 'b', 'c'],\n onKeyEvent: function onKeyEvent(key, e) {\n return props.setEventKey(key);\n } })\n );\n};\nvar ComponentAWithKeyState = (0, _reactProvideState2.default)({ namespace: Symbol(), name: 'eventKey' })(ComponentA);\n\nvar ComponentBCode = \"<KeyboardEventHandler handleKeys={['numeric']} onKeyEvent={(key, e) => props.setEventKey(key)} />\";\nvar ComponentB = function ComponentB(props) {\n return _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'I handle all ',\n _react2.default.createElement(\n 'strong',\n null,\n 'numeric'\n ),\n ' keys'\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentBCode } })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-footer text-success' },\n 'key detected: ',\n _react2.default.createElement(\n 'strong',\n null,\n _react2.default.createElement(\n 'mark',\n null,\n props.eventKey\n )\n )\n ),\n _react2.default.createElement(_KeyboardEventHandler2.default, { handleKeys: ['numeric'],\n onKeyEvent: function onKeyEvent(key, e) {\n return props.setEventKey(key);\n } })\n );\n};\nvar ComponentBWithKeyState = (0, _reactProvideState2.default)({ namespace: Symbol(), name: 'eventKey' })(ComponentB);\n\nvar ComponentCCode = \"<KeyboardEventHandler handleKeys={['all']} onKeyEvent={(key) => props.setEventKey(key)} />\";\nvar ComponentC = function ComponentC(props) {\n return _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'I handle ',\n _react2.default.createElement(\n 'strong',\n null,\n 'all'\n ),\n ' keys'\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentCCode } })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-footer text-success' },\n 'key detected: ',\n _react2.default.createElement(\n 'strong',\n null,\n _react2.default.createElement(\n 'mark',\n null,\n props.eventKey\n )\n )\n ),\n _react2.default.createElement(_KeyboardEventHandler2.default, { handleKeys: ['all'], onKeyEvent: function onKeyEvent(key, e) {\n return props.setEventKey(key);\n } })\n );\n};\nvar ComponentCWithKeyState = (0, _reactProvideState2.default)({ namespace: Symbol(), name: 'eventKey' })(ComponentC);\n\nvar ComponentJCode = \"<KeyboardEventHandler handleKeys={['all']} onKeyEvent={(key, e) => props.setEventData({key, e})} />\";\nvar ComponentJ = function ComponentJ(props) {\n return _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'Using the ',\n _react2.default.createElement(\n 'strong',\n null,\n 'raw'\n ),\n ' key event'\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement(\n 'p',\n null,\n _react2.default.createElement(\n 'small',\n { className: 'text-success' },\n 'You can use the raw key event if you want to handle keys outside of the provided key names/alias. E.g. You keyboard has special keys.'\n )\n ),\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentJCode } })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-footer' },\n _react2.default.createElement(\n 'table',\n null,\n _react2.default.createElement(\n 'tbody',\n null,\n _react2.default.createElement(\n 'tr',\n null,\n _react2.default.createElement(\n 'td',\n { className: 'text-success' },\n 'key'\n ),\n _react2.default.createElement(\n 'td',\n null,\n props.eventData.key\n )\n ),\n _react2.default.createElement(\n 'tr',\n null,\n _react2.default.createElement(\n 'td',\n { className: 'text-success' },\n 'event.key'\n ),\n _react2.default.createElement(\n 'td',\n null,\n props.eventData.e.key\n )\n ),\n _react2.default.createElement(\n 'tr',\n null,\n _react2.default.createElement(\n 'td',\n { className: 'text-success' },\n 'event.which'\n ),\n _react2.default.createElement(\n 'td',\n null,\n props.eventData.e.which\n )\n ),\n _react2.default.createElement(\n 'tr',\n null,\n _react2.default.createElement(\n 'td',\n { className: 'text-success' },\n 'event.code'\n ),\n _react2.default.createElement(\n 'td',\n null,\n props.eventData.e.code\n )\n )\n )\n )\n ),\n _react2.default.createElement(_KeyboardEventHandler2.default, { handleKeys: ['all'], onKeyEvent: function onKeyEvent(key, e) {\n return props.setEventData({ key: key, e: e });\n } })\n );\n};\nvar ComponentJWithKeyState = (0, _reactProvideState2.default)({ namespace: Symbol(), name: 'eventData', initValue: { key: null, e: {} } })(ComponentJ);\n\nvar ComponentDCode = \"<KeyboardEventHandler handleKeys={['ctrl+a', 'alt+b', 'meta+c']} onKeyEvent={(key) => props.setEventKey(key)} />\";\nvar ComponentD = function ComponentD(props) {\n return _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'I handle ',\n _react2.default.createElement(\n 'strong',\n null,\n '\\'ctrl+a\\', \\'alt+b\\', and \\'meta+c\\''\n )\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentDCode } })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-footer text-success' },\n 'key detected: ',\n _react2.default.createElement(\n 'strong',\n null,\n _react2.default.createElement(\n 'mark',\n null,\n props.eventKey\n )\n )\n ),\n _react2.default.createElement(_KeyboardEventHandler2.default, { handleKeys: ['ctrl+a', 'alt+b', 'meta+c'],\n onKeyEvent: function onKeyEvent(key, e) {\n return props.setEventKey(key);\n } })\n );\n};\nvar ComponentDWithKeyState = (0, _reactProvideState2.default)({ namespace: Symbol(), name: 'eventKey' })(ComponentD);\n\nvar ComponentHCode = \"<KeyboardEventHandler handleKeys={['function']} onKeyEvent={(key) => props.setEventKey(key)} />\";\nvar ComponentH = function ComponentH(props) {\n return _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'I handle ',\n _react2.default.createElement(\n 'strong',\n null,\n '\\'f1\\' ... \\'f19\\''\n ),\n ' function keys'\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentHCode } })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-footer text-success' },\n 'key detected: ',\n _react2.default.createElement(\n 'strong',\n null,\n _react2.default.createElement(\n 'mark',\n null,\n props.eventKey\n )\n )\n ),\n _react2.default.createElement(_KeyboardEventHandler2.default, { handleKeys: ['function'],\n onKeyEvent: function onKeyEvent(key, e) {\n return props.setEventKey(key);\n } })\n );\n};\nvar ComponentHWithKeyState = (0, _reactProvideState2.default)({ namespace: Symbol(), name: 'eventKey' })(ComponentH);\n\nvar ComponentICode = \"<KeyboardEventHandler handleKeys={['alphanumeric']} onKeyEvent={(key) => props.setEventKey(key)} />\";\nvar ComponentI = function ComponentI(props) {\n return _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'I handle ',\n _react2.default.createElement(\n 'strong',\n null,\n 'alphanumeric'\n ),\n ' keys'\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentICode } })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-footer text-success' },\n 'key detected: ',\n _react2.default.createElement(\n 'strong',\n null,\n _react2.default.createElement(\n 'mark',\n null,\n props.eventKey\n )\n )\n ),\n _react2.default.createElement(_KeyboardEventHandler2.default, { handleKeys: ['alphanumeric'],\n onKeyEvent: function onKeyEvent(key, e) {\n return props.setEventKey(key);\n } })\n );\n};\nvar ComponentIWithKeyState = (0, _reactProvideState2.default)({ namespace: Symbol(), name: 'eventKey' })(ComponentI);\n\nvar modalStateConfig = { namespace: Symbol(), name: 'show' };\n\nvar ComponentModalCode = \"<KeyboardEventHandler \\\nisExclusive={props.show} \\\nhandleKeys={['all']} \\\nonKeyEvent={(key, e) => { \\\n props.setEventKey(key); \\\n if (key === 'esc') { \\\n props.setShow(false) \\\n } \\\n} } />\";\n\nvar ComponentModal = function ComponentModal(props) {\n return _react2.default.createElement(\n 'div',\n null,\n _react2.default.createElement(\n 'div',\n { className: 'modal fade ' + (props.show ? 'show' : ''), style: { display: props.show ? \"block\" : \"none\" } },\n _react2.default.createElement(\n 'div',\n { className: 'modal-dialog' },\n _react2.default.createElement(\n 'div',\n { className: 'modal-content' },\n _react2.default.createElement(\n 'div',\n { className: 'modal-header' },\n _react2.default.createElement(\n 'h4',\n { className: 'modal-title' },\n 'Exclusive Key handler'\n ),\n _react2.default.createElement(\n 'button',\n { type: 'button', className: 'close', 'data-dismiss': 'modal' },\n '\\xD7'\n )\n ),\n _react2.default.createElement(\n 'div',\n { className: 'modal-body' },\n _react2.default.createElement(\n 'p',\n null,\n 'When prop `isExclusive` is set, this `KeyboardEventHandler` instance suppress all other handlers. ',\n _react2.default.createElement(\n 'strong',\n null,\n 'Note that handlers in the background stop working.'\n )\n ),\n _react2.default.createElement(\n 'p',\n null,\n 'You can press \\'ESC\\' key to close this modal.'\n ),\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentModalCode } })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'modal-footer' },\n 'key detected:',\n _react2.default.createElement(\n 'strong',\n null,\n _react2.default.createElement(\n 'mark',\n null,\n props.eventKey\n )\n )\n ),\n _react2.default.createElement(_KeyboardEventHandler2.default, {\n isExclusive: props.show,\n isDisabled: !props.show,\n handleKeys: ['all'],\n onKeyEvent: function onKeyEvent(key, e) {\n props.setEventKey(key);\n if (key === 'esc') {\n props.setShow(false);\n }\n } })\n )\n )\n ),\n _react2.default.createElement('div', { className: props.show ? 'modal-backdrop fade show' : '' })\n );\n};\n\nvar ComponentModalWithKeyState = (0, _reactProvideState2.default)({ namespace: Symbol(), name: 'eventKey' })(ComponentModal);\nComponentModalWithKeyState = (0, _reactProvideState2.default)(modalStateConfig)(ComponentModalWithKeyState);\n\nvar ComponentTriggerCode = \"<KeyboardEventHandler handleKeys={['ctrl+o']} onKeyEvent={(key, e) => props.setShow(true)}/>\";\nvar ComponentTrigger = function ComponentTrigger(props) {\n return _react2.default.createElement(\n 'div',\n null,\n _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'Open a Model ',\n _react2.default.createElement(\n 'strong',\n null,\n 'ctrl+o'\n )\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentTriggerCode } })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-footer text-success' },\n 'Open a modal by keying \\'ctrl+o\\' to see how \\'exclusive handler\\' works'\n ),\n _react2.default.createElement(_KeyboardEventHandler2.default, { handleKeys: ['ctrl+o'], onKeyEvent: function onKeyEvent(key, e) {\n return props.setShow(true);\n } })\n )\n );\n};\nvar ComponentTriggerWithKeyState = (0, _reactProvideState2.default)(modalStateConfig)(ComponentTrigger);\n\nvar ComponentECode = '<KeyboardEventHandler handleKeys={[\\'all\\']} onKeyEvent={(key, e) => props.setEventKey(key)} >\\n <p>\\n <input type=\"text\" placeholder=\"Key events will be handled\"/>\\n </p>\\n <p>\\n <a href=\"#\" >Example focusable element. Key event will be handled</a>\\n </p>\\n </KeyboardEventHandler>';\nvar ComponentE = function ComponentE(props) {\n return _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'I handle ',\n _react2.default.createElement(\n 'strong',\n null,\n 'all'\n ),\n ' key events from my wrapped children'\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentECode } })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-footer text-success' },\n 'key detected: ',\n _react2.default.createElement(\n 'strong',\n null,\n _react2.default.createElement(\n 'mark',\n null,\n props.eventKey\n ),\n _react2.default.createElement(\n _KeyboardEventHandler2.default,\n { handleKeys: ['all'], onKeyEvent: function onKeyEvent(key, e) {\n return props.setEventKey(key);\n } },\n _react2.default.createElement(\n 'p',\n null,\n _react2.default.createElement('input', { type: 'text', placeholder: 'Key events will be handled' })\n ),\n _react2.default.createElement(\n 'p',\n null,\n _react2.default.createElement(\n 'a',\n { href: '#' },\n 'Example focusable element. Key event will be handled'\n )\n )\n )\n )\n )\n );\n};\nvar ComponentECodeWithKeyState = (0, _reactProvideState2.default)({ namespace: Symbol(), name: 'eventKey' })(ComponentE);\n\nvar ComponentF = function ComponentF(props) {\n return _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'I ',\n _react2.default.createElement(\n 'strong',\n null,\n 'don\\'t'\n ),\n ' handle form controls or links by default'\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement(\n 'small',\n null,\n 'By default, key events on focusable elements (i.e. form controls, links, tab-enabled elements) are not handled. Handler will not interfere form controls.'\n ),\n _react2.default.createElement('input', { type: 'text', placeholder: 'Please type', size: '20' })\n )\n );\n};\n\nvar ComponentGCode = '<KeyboardEventHandler\\n handleKeys={['all']}\\n handleFocusableElements\\n onKeyEvent={(key, e) => props.setEventKey(key)} />';\nvar ComponentG = function ComponentG(props) {\n return _react2.default.createElement(\n 'div',\n { className: 'card card-with-margin' },\n _react2.default.createElement(\n 'div',\n { className: 'card-header' },\n 'I ',\n _react2.default.createElement(\n 'strong',\n null,\n 'DO'\n ),\n ' handle key events from all elements'\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-body ' },\n _react2.default.createElement('small', { dangerouslySetInnerHTML: { __html: ComponentGCode } }),\n _react2.default.createElement(_KeyboardEventHandler2.default, {\n handleKeys: ['all'],\n handleFocusableElements: true,\n onKeyEvent: function onKeyEvent(key, e) {\n return props.setEventKey(key);\n } }),\n _react2.default.createElement(\n 'p',\n null,\n 'If \\'handleFocusableElements\\' props is \\'true\\', key events sourced from all elements will be handled.'\n ),\n _react2.default.createElement('input', { type: 'text', placeholder: 'Please type', size: '20' })\n ),\n _react2.default.createElement(\n 'div',\n { className: 'card-footer text-success' },\n 'key detected: ',\n _react2.default.createElement(\n 'strong',\n null,\n _react2.default.createElement(\n 'mark',\n null,\n props.eventKey\n )\n )\n )\n );\n};\n\nvar ComponentGCodeWithKeyState = (0, _reactProvideState2.default)({ namespace: Symbol(), name: 'eventKey' })(ComponentG);\n\n_reactDom2.default.render(_react2.default.createElement(\n 'div',\n { className: 'row' },\n _react2.default.createElement(\n 'div',\n { className: 'col-4' },\n _react2.default.createElement(ComponentCWithKeyState, null)\n ),\n _react2.default.createElement(\n 'div',\n { className: 'col-4' },\n _react2.default.createElement(ComponentAWithKeyState, null)\n ),\n _react2.default.createElement(\n 'div',\n { className: 'col-4' },\n _react2.default.createElement(ComponentBWithKeyState, null)\n ),\n _react2.default.createElement(\n 'div',\n { className: 'col-4' },\n _react2.default.createElement(ComponentDWithKeyState, null)\n ),\n _react2.default.createElement(\n 'div',\n { className: 'col-4' },\n _react2.default.createElement(ComponentHWithKeyState, null)\n ),\n _react2.default.createElement(\n 'div',\n { className: 'col-4' },\n _react2.default.createElement(ComponentIWithKeyState, null)\n ),\n _react2.default.createElement(\n 'div',\n { className: 'col-4' },\n _react2.default.createElement(ComponentTriggerWithKeyState, null),\n _react2.default.createElement(ComponentModalWithKeyState, null)\n ),\n _react2.default.createElement(\n 'div',\n { className: 'col-4' },\n _react2.default.createElement(ComponentF, null)\n ),\n _react2.default.createElement(\n 'div',\n { className: 'col-12' },\n _react2.default.createElement(ComponentJWithKeyState, null)\n ),\n _react2.default.createElement(\n 'div',\n { className: 'col-12' },\n _react2.default.createElement(ComponentECodeWithKeyState, null)\n ),\n _react2.default.createElement(\n 'div',\n { className: 'col-12' },\n _react2.default.createElement(ComponentGCodeWithKeyState, null)\n )\n), document.querySelector('#root'));\n\n//# sourceURL=webpack:///./demo/src/demo.js?");
/***/ }),
/***/ "./node_modules/object-assign/index.js":
/*!*********************************************!*\
!*** ./node_modules/object-assign/index.js ***!
\*********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\n\n\n/* eslint-disable no-unused-vars */\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\nfunction toObject(val) {\n\tif (val === null || val === undefined) {\n\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t}\n\n\treturn Object(val);\n}\n\nfunction shouldUseNative() {\n\ttry {\n\t\tif (!Object.assign) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Detect buggy property enumeration order in older V8 versions.\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\tvar test1 = new String('abc'); // eslint-disable-line no-new-wrappers\n\t\ttest1[5] = 'de';\n\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test2 = {};\n\t\tfor (var i = 0; i < 10; i++) {\n\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t}\n\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\treturn test2[n];\n\t\t});\n\t\tif (order2.join('') !== '0123456789') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test3 = {};\n\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\ttest3[letter] = letter;\n\t\t});\n\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} catch (err) {\n\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\treturn false;\n\t}\n}\n\nmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\tvar from;\n\tvar to = toObject(target);\n\tvar symbols;\n\n\tfor (var s = 1; s < arguments.length; s++) {\n\t\tfrom = Object(arguments[s]);\n\n\t\tfor (var key in from) {\n\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\tto[key] = from[key];\n\t\t\t}\n\t\t}\n\n\t\tif (getOwnPropertySymbols) {\n\t\t\tsymbols = getOwnPropertySymbols(from);\n\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn to;\n};\n\n\n//# sourceURL=webpack:///./node_modules/object-assign/index.js?");
/***/ }),
/***/ "./node_modules/prop-types/checkPropTypes.js":
/*!***************************************************!*\
!*** ./node_modules/prop-types/checkPropTypes.js ***!
\***************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar printWarning = function() {};\n\nif (true) {\n var ReactPropTypesSecret = __webpack_require__(/*! ./lib/ReactPropTypesSecret */ \"./node_modules/prop-types/lib/ReactPropTypesSecret.js\");\n var loggedTypeFailures = {};\n var has = Function.call.bind(Object.prototype.hasOwnProperty);\n\n printWarning = function(text) {\n var message = 'Warning: ' + text;\n if (typeof console !== 'undefined') {\n console.error(message);\n }\n try {\n // --- Welcome to debugging React ---\n // This error was thrown as a convenience so that you can use this stack\n // to find the callsite that caused this warning to fire.\n throw new Error(message);\n } catch (x) {}\n };\n}\n\n/**\n * Assert that the values match with the type specs.\n * Error messages are memorized and will only be shown once.\n *\n * @param {object} typeSpecs Map of name to a ReactPropType\n * @param {object} values Runtime values that need to be type-checked\n * @param {string} location e.g. \"prop\", \"context\", \"child context\"\n * @param {string} componentName Name of the component for error messages.\n * @param {?Function} getStack Returns the component stack.\n * @private\n */\nfunction checkPropTypes(typeSpecs, values, location, componentName, getStack) {\n if (true) {\n for (var typeSpecName in typeSpecs) {\n if (has(typeSpecs, typeSpecName)) {\n var error;\n // Prop type validation may throw. In case they do, we don't want to\n // fail the render phase where it didn't fail before. So we log it.\n // After these have been cleaned up, we'll let them throw.\n try {\n // This is intentionally an invariant that gets caught. It's the same\n // behavior as without this statement except with a better message.\n if (typeof typeSpecs[typeSpecName] !== 'function') {\n var err = Error(\n (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +\n 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'\n );\n err.name = 'Invariant Violation';\n throw err;\n }\n error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);\n } catch (ex) {\n error = ex;\n }\n if (error && !(error instanceof Error)) {\n printWarning(\n (componentName || 'React class') + ': type specification of ' +\n location + ' `' + typeSpecName + '` is invalid; the type checker ' +\n 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +\n 'You may have forgotten to pass an argument to the type checker ' +\n 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +\n 'shape all require an argument).'\n );\n }\n if (error instanceof Error && !(error.message in loggedTypeFailures)) {\n // Only monitor this failure once because there tends to be a lot of the\n // same error.\n loggedTypeFailures[error.message] = true;\n\n var stack = getStack ? getStack() : '';\n\n printWarning(\n 'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')\n );\n }\n }\n }\n }\n}\n\n/**\n * Resets warning cache when testing.\n *\n * @private\n */\ncheckPropTypes.resetWarningCache = function() {\n if (true) {\n loggedTypeFailures = {};\n }\n}\n\nmodule.exports = checkPropTypes;\n\n\n//# sourceURL=webpack:///./node_modules/prop-types/checkPropTypes.js?");
/***/ }),
/***/ "./node_modules/prop-types/factoryWithTypeCheckers.js":
/*!************************************************************!*\
!*** ./node_modules/prop-types/factoryWithTypeCheckers.js ***!
\************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar ReactIs = __webpack_require__(/*! react-is */ \"./node_modules/react-is/index.js\");\nvar assign = __webpack_require__(/*! object-assign */ \"./node_modules/object-assign/index.js\");\n\nvar ReactPropTypesSecret = __webpack_require__(/*! ./lib/ReactPropTypesSecret */ \"./node_modules/prop-types/lib/ReactPropTypesSecret.js\");\nvar checkPropTypes = __webpack_require__(/*! ./checkPropTypes */ \"./node_modules/prop-types/checkPropTypes.js\");\n\nvar has = Function.call.bind(Object.prototype.hasOwnProperty);\nvar printWarning = function() {};\n\nif (true) {\n printWarning = function(text) {\n var message = 'Warning: ' + text;\n if (typeof console !== 'undefined') {\n console.error(message);\n }\n try {\n // --- Welcome to debugging React ---\n // This error was thrown as a convenience so that you can use this stack\n // to find the callsite that caused this warning to fire.\n throw new Error(message);\n } catch (x) {}\n };\n}\n\nfunction emptyFunctionThatReturnsNull() {\n return null;\n}\n\nmodule.exports = function(isValidElement, throwOnDirectAccess) {\n /* global Symbol */\n var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;\n var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.\n\n /**\n * Returns the iterator method function contained on the iterable object.\n *\n * Be sure to invoke the function with the iterable as context:\n *\n * var iteratorFn = getIteratorFn(myIterable);\n * if (iteratorFn) {\n * var iterator = iteratorFn.call(myIterable);\n * ...\n * }\n *\n * @param {?object} maybeIterable\n * @return {?function}\n */\n function getIteratorFn(maybeIterable) {\n var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);\n if (typeof iteratorFn === 'function') {\n return iteratorFn;\n }\n }\n\n /**\n * Collection of methods that allow declaration and validation of props that are\n * supplied to React components. Example usage:\n *\n * var Props = require('ReactPropTypes');\n * var MyArticle = React.createClass({\n * propTypes: {\n * // An optional string prop named \"description\".\n * description: Props.string,\n *\n * // A required enum prop named \"category\".\n * category: Props.oneOf(['News','Photos']).isRequired,\n *\n * // A prop named \"dialog\" that requires an instance of Dialog.\n * dialog: Props.instanceOf(Dialog).isRequired\n * },\n * render: function() { ... }\n * });\n *\n * A more formal specification of how these methods are used:\n *\n * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)\n * decl := ReactPropTypes.{type}(.isRequired)?\n *\n * Each and every declaration produces a function with the same signature. This\n * allows the creation of custom validation functions. For example:\n *\n * var MyLink = React.createClass({\n * propTypes: {\n * // An optional string or URI prop named \"href\".\n * href: function(props, propName, componentName) {\n * var propValue = props[propName];\n * if (propValue != null && typeof propValue !== 'string' &&\n * !(propValue instanceof URI)) {\n * return new Error(\n * 'Expected a string or an URI for ' + propName + ' in ' +\n * componentName\n * );\n * }\n * }\n * },\n * render: function() {...}\n * });\n *\n * @internal\n */\n\n var ANONYMOUS = '<<anonymous>>';\n\n // Important!\n // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.\n var ReactPropTypes = {\n array: createPrimitiveTypeChecker('array'),\n bool: createPrimitiveTypeChecker('boolean'),\n func: createPrimitiveTypeChecker('function'),\n number: createPrimitiveTypeChecker('number'),\n object: createPrimitiveTypeChecker('object'),\n string: createPrimitiveTypeChecker('string'),\n symbol: createPrimitiveTypeChecker('symbol'),\n\n any: createAnyTypeChecker(),\n arrayOf: createArrayOfTypeChecker,\n element: createElementTypeChecker(),\n elementType: createElementTypeTypeChecker(),\n instanceOf: createInstanceTypeChecker,\n node: createNodeChecker(),\n objectOf: createObjectOfTypeChecker,\n oneOf: createEnumTypeChecker,\n oneOfType: createUnionTypeChecker,\n shape: createShapeTypeChecker,\n exact: createStrictShapeTypeChecker,\n };\n\n /**\n * inlined Object.is polyfill to avoid requiring consumers ship their own\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\n */\n /*eslint-disable no-self-compare*/\n function is(x, y) {\n // SameValue algorithm\n if (x === y) {\n // Steps 1-5, 7-10\n // Steps 6.b-6.e: +0 != -0\n return x !== 0 || 1 / x === 1 / y;\n } else {\n // Step 6.a: NaN == NaN\n return x !== x && y !== y;\n }\n }\n /*eslint-enable no-self-compare*/\n\n /**\n * We use an Error-like object for backward compatibility as people may call\n * PropTypes directly and inspect their output. However, we don't use real\n * Errors anymore. We don't inspect their stack anyway, and creating them\n * is prohibitively expensive if they are created too often, such as what\n * happens in oneOfType() for any type before the one that matched.\n */\n function PropTypeError(message) {\n this.message = message;\n this.stack = '';\n }\n // Make `instanceof Error` still work for returned errors.\n PropTypeError.prototype = Error.prototype;\n\n function createChainableTypeChecker(validate) {\n if (true) {\n var manualPropTypeCallCache = {};\n var manualPropTypeWarningCount = 0;\n }\n function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {\n componentName = componentName || ANONYMOUS;\n propFullName = propFullName || propName;\n\n if (secret !== ReactPropTypesSecret) {\n if (throwOnDirectAccess) {\n // New behavior only for users of `prop-types` package\n var err = new Error(\n 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +\n 'Use `PropTypes.checkPropTypes()` to call them. ' +\n 'Read more at http://fb.me/use-check-prop-types'\n );\n err.name = 'Invariant Violation';\n throw err;\n } else if ( true && typeof console !== 'undefined') {\n // Old behavior for people using React.PropTypes\n var cacheKey = componentName + ':' + propName;\n if (\n !manualPropTypeCallCache[cacheKey] &&\n // Avoid spamming the console because they are often not actionable except for lib authors\n manualPropTypeWarningCount < 3\n ) {\n printWarning(\n 'You are manually calling a React.PropTypes validation ' +\n 'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +\n 'and will throw in the standalone `prop-types` package. ' +\n 'You may be seeing this warning due to a third-party PropTypes ' +\n 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'\n );\n manualPropTypeCallCache[cacheKey] = true;\n manualPropTypeWarningCount++;\n }\n }\n }\n if (props[propName] == null) {\n if (isRequired) {\n if (props[propName] === null) {\n return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));\n }\n return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));\n }\n return null;\n } else {\n return validate(props, propName, componentName, location, propFullName);\n }\n }\n\n var chainedCheckType = checkType.bind(null, false);\n chainedCheckType.isRequired = checkType.bind(null, true);\n\n return chainedCheckType;\n }\n\n function createPrimitiveTypeChecker(expectedType) {\n function validate(props, propName, componentName, location, propFullName, secret) {\n var propValue = props[propName];\n var propType = getPropType(propValue);\n if (propType !== expectedType) {\n // `propValue` being instance of, say, date/regexp, pass the 'object'\n // check, but we can offer a more precise error message here rather than\n // 'of type `object`'.\n var preciseType = getPreciseType(propValue);\n\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createAnyTypeChecker() {\n return createChainableTypeChecker(emptyFunctionThatReturnsNull);\n }\n\n function createArrayOfTypeChecker(typeChecker) {\n function validate(props, propName, componentName, location, propFullName) {\n if (typeof typeChecker !== 'function') {\n return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');\n }\n var propValue = props[propName];\n if (!Array.isArray(propValue)) {\n var propType = getPropType(propValue);\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));\n }\n for (var i = 0; i < propValue.length; i++) {\n var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret);\n if (error instanceof Error) {\n return error;\n }\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createElementTypeChecker() {\n function validate(props, propName, componentName, location, propFullName) {\n var propValue = props[propName];\n if (!isValidElement(propValue)) {\n var propType = getPropType(propValue);\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createElementTypeTypeChecker() {\n function validate(props, propName, componentName, location, propFullName) {\n var propValue = props[propName];\n if (!ReactIs.isValidElementType(propValue)) {\n var propType = getPropType(propValue);\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createInstanceTypeChecker(expectedClass) {\n function validate(props, propName, componentName, location, propFullName) {\n if (!(props[propName] instanceof expectedClass)) {\n var expectedClassName = expectedClass.name || ANONYMOUS;\n var actualClassName = getClassName(props[propName]);\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createEnumTypeChecker(expectedValues) {\n if (!Array.isArray(expectedValues)) {\n if (true) {\n if (arguments.length > 1) {\n printWarning(\n 'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +\n 'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'\n );\n } else {\n printWarning('Invalid argument supplied to oneOf, expected an array.');\n }\n }\n return emptyFunctionThatReturnsNull;\n }\n\n function validate(props, propName, componentName, location, propFullName) {\n var propValue = props[propName];\n for (var i = 0; i < expectedValues.length; i++) {\n if (is(propValue, expectedValues[i])) {\n return null;\n }\n }\n\n var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {\n var type = getPreciseType(value);\n if (type === 'symbol') {\n return String(value);\n }\n return value;\n });\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));\n }\n return createChainableTypeChecker(validate);\n }\n\n function createObjectOfTypeChecker(typeChecker) {\n function validate(props, propName, componentName, location, propFullName) {\n if (typeof typeChecker !== 'function') {\n return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');\n }\n var propValue = props[propName];\n var propType = getPropType(propValue);\n if (propType !== 'object') {\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));\n }\n for (var key in propValue) {\n if (has(propValue, key)) {\n var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);\n if (error instanceof Error) {\n return error;\n }\n }\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createUnionTypeChecker(arrayOfTypeCheckers) {\n if (!Array.isArray(arrayOfTypeCheckers)) {\n true ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : undefined;\n return emptyFunctionThatReturnsNull;\n }\n\n for (var i = 0; i < arrayOfTypeCheckers.length; i++) {\n var checker = arrayOfTypeCheckers[i];\n if (typeof checker !== 'function') {\n printWarning(\n 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +\n 'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'\n );\n return emptyFunctionThatReturnsNull;\n }\n }\n\n function validate(props, propNa