UNPKG

react-key-handler

Version:

React component to handle keyboard events

2 lines (1 loc) 4.97 kB
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("exenv")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","exenv"],n):n(e.ReactKeyHandler={},e.React,e.PropTypes,e.exenv)}(this,function(e,n,t,r){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n,t=t&&t.hasOwnProperty("default")?t.default:t;var o="keydown",a="keypress",u="keyup",i={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},c={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"};function l(e,n){return Array.isArray(e)?e.includes(n):e===n}function f(e,n){var t=n.keyCode,r=n.keyValue,o=n.code;if(!y(r)&&l(r,p(e)))return!0;if(!y(o)&&l(o,e.code))return!0;if(!y(t)&&l(t,e.keyCode||e.which))return!0;return!1}function y(e){return null==e}function p(e){var n=e.key,t=e.keyCode,r=e.type;if(n){var l=i[n]||n;if("Unidentified"!==l)return l}if(r===a){var f=function(e){var n=e.charCode,t=e.keyCode;if("charCode"in e){if(0===n&&13===t)return 13}else n=t;if(n>=32||13===n)return n;return 0}(e);return 13===f?"Enter":String.fromCharCode(f)}return r===o||r===u?c[String(t)]||"Unidentified":""}var d=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},s=function(){function e(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(n,t,r){return t&&e(n.prototype,t),r&&e(n,r),n}}(),k=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},h=function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)},v=function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n},m=function(e){function n(e){d(this,n);var t=v(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.handleKey=function(e){var n=t.props,r=n.keyValue,o=n.keyCode,a=n.code,u=n.onKeyHandle;if(u){var i=e.target;i instanceof window.HTMLElement&&function(e){if(!e)return!1;var n=e.tagName,t=function(e){return"function"==typeof e.getAttribute&&!!e.getAttribute("contenteditable")}(e);return"INPUT"===n||"TEXTAREA"===n||t}(i)||f(e,{keyValue:r,keyCode:o,code:a})&&u(e)}},e.keyCode&&console.warn("Warning: Deprecated propType: `keyCode` is deprecated in favour of `code` for `KeyHandler`."),e.keyValue||e.keyCode||e.code||console.error("Warning: Failed propType: Missing prop `code`, `keyValue` or `keyCode` for `KeyHandler`."),t}return h(n,e),s(n,[{key:"shouldComponentUpdate",value:function(){return!1}}]),s(n,[{key:"componentDidMount",value:function(){r.canUseDOM&&window.document.addEventListener(this.props.keyEventName,this.handleKey)}},{key:"componentWillUnmount",value:function(){r.canUseDOM&&window.document.removeEventListener(this.props.keyEventName,this.handleKey)}},{key:"render",value:function(){return null}}]),n}(n.Component);function w(e){return function(t){var r=t||{},o=r.keyValue,a=r.keyCode,u=r.code,i=r.keyEventName;return function(t){return function(r){function c(){var n,t,r;d(this,c);for(var o=arguments.length,a=Array(o),u=0;u<o;u++)a[u]=arguments[u];return t=r=v(this,(n=c.__proto__||Object.getPrototypeOf(c)).call.apply(n,[this].concat(a))),r.state={keyCode:null,keyValue:null,code:null},r.handleKey=function(n){e&&e(n,r.state)?r.setState({keyValue:null,keyCode:null}):r.setState({keyValue:p(n),keyCode:n.keyCode})},v(r,t)}return h(c,r),s(c,[{key:"render",value:function(){return n.createElement(n.Fragment,null,n.createElement(m,{keyValue:o,keyCode:a,code:u,keyEventName:i,onKeyHandle:this.handleKey}),n.createElement(t,k({},this.props,this.state)))}}]),c}(n.Component)}}}m.propTypes={keyValue:t.oneOfType([t.string,t.arrayOf(t.string)]),keyCode:t.oneOfType([t.number,t.arrayOf(t.number)]),code:t.oneOfType([t.string,t.arrayOf(t.string)]),keyEventName:t.oneOf([o,a,u]),onKeyHandle:t.func},m.defaultProps={keyEventName:u};var C=w(),b=w(f);e.default=m,e.KEYDOWN=o,e.KEYPRESS=a,e.KEYUP=u,e.keyHandleDecorator=w,e.keyToggleHandler=b,e.keyHandler=C,Object.defineProperty(e,"__esModule",{value:!0})});