Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-simple-keyboard

Package Overview
Dependencies
Maintainers
1
Versions
1650
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-simple-keyboard - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

2

build/index.js

@@ -1,2 +0,2 @@

!function(t,e){if("object"===typeof exports&&"object"===typeof module)module.exports=e(require("react"));else if("function"===typeof define&&define.amd)define(["react"],e);else{var n=e("object"===typeof exports?require("react"):t.react);for(var o in n)("object"===typeof exports?exports:t)[o]=n[o]}}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=n(2);e.default=o.a},function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!==typeof e&&"function"!==typeof e?t:e}function i(t,e){if("function"!==typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var u=n(3),a=n.n(u),s=n(4),c=n.n(s),p=n(9),f=n.n(p),l=n(10),y=(n.n(l),function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}()),d=function(t){function e(){var t,n,i,u;o(this,e);for(var a=arguments.length,s=Array(a),c=0;c<a;c++)s[c]=arguments[c];return n=i=r(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(s))),i.state={input:""},i.componentWillReceiveProps=function(t){i.props!==t&&i.setState({layoutName:t.layoutName,layout:t.layout,themeClass:t.theme})},i.clearInput=function(){i.setState({input:""})},i.getInput=function(){return i.state.input},i.setInput=function(t){return new Promise(function(e){i.keyboard.setInput(t),i.setState({input:t},function(){e(t)})}).catch(function(t){console.warn(t)})},i.onKeyPress=function(t){var e=i.props.debug;"function"===typeof i.props.onKeyPress&&i.props.onKeyPress(t),e&&console.log("Key pressed:",t)},i.onChange=function(t){var e=i.props.debug;i.setState({input:t},function(){e&&console.log("Input changed:",i.state.input),"function"===typeof i.props.onChange&&i.props.onChange(i.state.input)})},i.componentWillReceiveProps=function(t){i.keyboard.setOptions(t)},i.initKeyboard=function(t){i.keyboard=new f.a(Object.assign({},t,{onKeyPress:function(t){return i.onKeyPress(t)},onChange:function(t){return i.onChange(t)}})),console.log(i.keyboard)},u=n,r(i,u)}return i(e,t),y(e,[{key:"componentDidMount",value:function(){this.initKeyboard()}},{key:"render",value:function(){return a.a.createElement("div",{className:"simple-keyboard"})}}]),e}(u.Component);d.propTypes={layoutName:c.a.string,layout:c.a.object,theme:c.a.string,display:c.a.object,onChange:c.a.func,onKeyPress:c.a.func,debug:c.a.bool},e.a=d},function(e,n){e.exports=t},function(t,e,n){t.exports=n(5)()},function(t,e,n){"use strict";var o=n(6),r=n(7),i=n(8);t.exports=function(){function t(t,e,n,o,u,a){a!==i&&r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return n.checkPropTypes=o,n.PropTypes=n,n}},function(t,e,n){"use strict";function o(t){return function(){return t}}var r=function(){};r.thatReturns=o,r.thatReturnsFalse=o(!1),r.thatReturnsTrue=o(!0),r.thatReturnsNull=o(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(t){return t},t.exports=r},function(t,e,n){"use strict";function o(t,e,n,o,i,u,a,s){if(r(e),!t){var c;if(void 0===e)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var p=[n,o,i,u,a,s],f=0;c=new Error(e.replace(/%s/g,function(){return p[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var r=function(t){};t.exports=o},function(t,e,n){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,e,n){!function(e,n){t.exports=n()}(0,function(){return function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=n(2);e.default=o.a},function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r=n(3),i=(n.n(r),n(4)),u=n(5),a="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=function t(){o(this,t),c.call(this);var e="string"===typeof(arguments.length<=0?void 0:arguments[0])?arguments.length<=0?void 0:arguments[0]:".simple-keyboard",n="object"===a(arguments.length<=0?void 0:arguments[0])?arguments.length<=0?void 0:arguments[0]:arguments.length<=1?void 0:arguments[1];n||(n={}),this.keyboardDOM=document.querySelector(e),this.options=n,this.input="",this.options.layoutName=this.options.layoutName||"default",this.options.theme=this.options.theme||"hg-theme-default",this.keyboardDOM?this.render():console.error('"'+e+'" was not found in the DOM.')},c=function(){var t=this;this.handleButtonClicked=function(e){var n=t.options.debug;if("{//}"===e)return!1;"function"===typeof t.options.onKeyPress&&t.options.onKeyPress(e);var o={newLineOnEnter:!0===t.options.newLineOnEnter},r=u.a.getUpdatedInput(e,t.input,o);t.input!==r&&(t.input=r,n&&console.log("Input changed:",t.input),"function"===typeof t.options.onChange&&t.options.onChange(t.input)),n&&console.log("Key pressed:",e)},this.clearInput=function(){t.input=""},this.getInput=function(){return t.input},this.setInput=function(e){t.input=e},this.setOptions=function(e){e=e||{},t.options=Object.assign(t.options,e),t.render()},this.clear=function(){t.keyboardDOM.innerHTML=""},this.render=function(){t.clear();var e=t.options.layout?"hg-layout-custom":"hg-layout-"+t.options.layoutName,n=t.options.layout||i.a.getLayout(t.options.layoutName);t.keyboardDOM.className+=" "+t.options.theme+" "+e,n[t.options.layoutName].forEach(function(e,n){var o=e.split(" "),r=document.createElement("div");r.className+="hg-row",o.forEach(function(e,n){var o=u.a.getButtonClass(e),i=u.a.getButtonDisplayName(e,t.options.display),a=document.createElement("div");a.className+="hg-button "+o,a.onclick=function(){return t.handleButtonClicked(e)};var s=document.createElement("span");s.innerHTML=i,a.appendChild(s),r.appendChild(a),"function"===typeof t.options.onInit&&t.options.onInit()}),t.keyboardDOM.appendChild(r)})}};e.a=s},function(t,e){},function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r=function t(){o(this,t)};r.getLayout=function(t){return"qwerty"===t?{default:["` 1 2 3 4 5 6 7 8 9 0 - = {bksp}","{tab} q w e r t y u i o p [ ] \\","{lock} a s d f g h j k l ; ' {enter}","{shift} z x c v b n m , . / {shift}",".com @ {space}"],shift:["~ ! @ # $ % ^ & * ( ) _ + {bksp}","{tab} Q W E R T Y U I O P { } |",'{lock} A S D F G H J K L : " {enter}',"{shift} Z X C V B N M < > ? {shift}",".com @ {space}"]}:"numeric"===t?{default:["1 2 3","4 5 6","7 8 9","{//} 0 {bksp}"]}:r.getLayout("qwerty")},e.a=r},function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),i=function(){function t(){o(this,t)}return r(t,null,[{key:"normalizeString",value:function(t){var e=void 0;return e="@"===t?"at":","===t?"comma":"."===t?"dot":"\\"===t?"backslash":"/"===t?"fordardslash":"*"===t?"asterisk":"&"===t?"ampersand":"$"===t?"dollarsign":"="===t?"equals":"+"===t?"plus":"-"===t?"minus":"'"===t?"apostrophe":";"===t?"colon":"["===t?"openbracket":"]"===t?"closebracket":"//"===t?"emptybutton":"",e?" hg-button-"+e:""}},{key:"getDefaultDiplay",value:function(){return{"{bksp}":"delete","{enter}":"< enter","{shift}":"shift","{s}":"shift","{tab}":"tab","{lock}":"caps","{accept}":"Submit","{space}":" ","{//}":" "}}}]),t}();i.getButtonClass=function(t){var e=t.includes("{")&&"{//}"!==t?"functionBtn":"standardBtn",n=t.replace("{","").replace("}","");return"hg-"+e+("standardBtn"===e?i.normalizeString(n):" hg-button-"+n)},i.getButtonDisplayName=function(t,e){return e=e||i.getDefaultDiplay(),e[t]||t},i.getUpdatedInput=function(t,e,n){var o=e,r=n.newLineOnEnter;return"{bksp}"===t&&o.length>0?o=o.slice(0,-1):"{space}"===t?o+=" ":"{tab}"===t?o+="\t":"{enter}"===t&&r?o+="\n":t.includes("{")||t.includes("{")||(o+=t),o},e.a=i}])})},function(t,e){}])});
!function(t,n){if("object"===typeof exports&&"object"===typeof module)module.exports=n(require("react"));else if("function"===typeof define&&define.amd)define(["react"],n);else{var e=n("object"===typeof exports?require("react"):t.react);for(var o in e)("object"===typeof exports?exports:t)[o]=e[o]}}(this,function(t){return function(t){function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}var e={};return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=0)}([function(t,n,e){t.exports=e(1)},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(2);n.default=o.a},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function r(t,n){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!==typeof n&&"function"!==typeof n?t:n}function i(t,n){if("function"!==typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(t,n):t.__proto__=n)}var u=e(3),a=e.n(u),s=e(4),c=e.n(s),p=e(9),f=e.n(p),l=e(10),y=(e.n(l),function(){function t(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(n,e,o){return e&&t(n.prototype,e),o&&t(n,o),n}}()),d=function(t){function n(){var t,e,i,u;o(this,n);for(var a=arguments.length,s=Array(a),c=0;c<a;c++)s[c]=arguments[c];return e=i=r(this,(t=n.__proto__||Object.getPrototypeOf(n)).call.apply(t,[this].concat(s))),i.state={input:""},i.componentWillReceiveProps=function(t){i.props!==t&&i.setState({layoutName:t.layoutName,layout:t.layout,themeClass:t.theme})},i.clearInput=function(t){t=t||"default",i.setState({input:""}),i.keyboard.clearInput(t)},i.getInput=function(t){return t?i.keyboard.input[t]:i.state.input},i.setInput=function(t,n){return new Promise(function(e){i.keyboard.setInput(t,n),i.setState({input:t},function(){e(t)})}).catch(function(t){console.warn(t)})},i.onKeyPress=function(t){var n=i.props.debug;"function"===typeof i.props.onKeyPress&&i.props.onKeyPress(t),n&&console.log("Key pressed:",t)},i.onChange=function(t){var n=i.props.debug;i.setState({input:t},function(){n&&console.log("Input changed:",i.state.input),"function"===typeof i.props.onChange&&i.props.onChange(i.state.input),"function"===typeof i.props.onChangeAll&&i.props.onChangeAll(i.keyboard.input)})},i.componentWillReceiveProps=function(t){i.keyboard.setOptions(t)},i.initKeyboard=function(t){var n=i.props.debug;i.keyboard=new f.a(Object.assign({},t,{onKeyPress:function(t){return i.onKeyPress(t)},onChange:function(t){return i.onChange(t)}})),n&&console.log(i.keyboard)},u=e,r(i,u)}return i(n,t),y(n,[{key:"componentDidMount",value:function(){this.initKeyboard()}},{key:"render",value:function(){return a.a.createElement("div",{className:"simple-keyboard"})}}]),n}(u.Component);d.propTypes={layoutName:c.a.string,layout:c.a.object,theme:c.a.string,display:c.a.object,onChange:c.a.func,onChangeAll:c.a.func,onKeyPress:c.a.func,debug:c.a.bool},n.a=d},function(n,e){n.exports=t},function(t,n,e){t.exports=e(5)()},function(t,n,e){"use strict";var o=e(6),r=e(7),i=e(8);t.exports=function(){function t(t,n,e,o,u,a){a!==i&&r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function n(){return t}t.isRequired=t;var e={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:n,element:t,instanceOf:n,node:t,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n};return e.checkPropTypes=o,e.PropTypes=e,e}},function(t,n,e){"use strict";function o(t){return function(){return t}}var r=function(){};r.thatReturns=o,r.thatReturnsFalse=o(!1),r.thatReturnsTrue=o(!0),r.thatReturnsNull=o(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(t){return t},t.exports=r},function(t,n,e){"use strict";function o(t,n,e,o,i,u,a,s){if(r(n),!t){var c;if(void 0===n)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var p=[e,o,i,u,a,s],f=0;c=new Error(n.replace(/%s/g,function(){return p[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var r=function(t){};t.exports=o},function(t,n,e){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,n,e){!function(n,e){t.exports=e()}(0,function(){return function(t){function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}var e={};return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=0)}([function(t,n,e){t.exports=e(1)},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(2);n.default=o.a},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var r=e(3),i=(e.n(r),e(4)),u=e(5),a="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=function t(){o(this,t),c.call(this);var n="string"===typeof(arguments.length<=0?void 0:arguments[0])?arguments.length<=0?void 0:arguments[0]:".simple-keyboard",e="object"===a(arguments.length<=0?void 0:arguments[0])?arguments.length<=0?void 0:arguments[0]:arguments.length<=1?void 0:arguments[1];e||(e={}),this.keyboardDOM=document.querySelector(n),this.options=e,this.options.layoutName=this.options.layoutName||"default",this.options.theme=this.options.theme||"hg-theme-default",this.options.inputName=this.options.inputName||"default",this.input={},this.input[this.options.inputName]="",this.keyboardDOM?this.render():console.error('"'+n+'" was not found in the DOM.')},c=function(){var t=this;this.handleButtonClicked=function(n){var e=t.options.debug;if("{//}"===n)return!1;"function"===typeof t.options.onKeyPress&&t.options.onKeyPress(n);var o={newLineOnEnter:!0===t.options.newLineOnEnter};t.input[t.options.inputName]||(t.input[t.options.inputName]="");var r=u.a.getUpdatedInput(n,t.input[t.options.inputName],o);t.input[t.options.inputName]!==r&&(t.input[t.options.inputName]=r,e&&console.log("Input changed:",t.input),"function"===typeof t.options.onChange&&t.options.onChange(t.input[t.options.inputName])),e&&console.log("Key pressed:",n)},this.clearInput=function(n){n=n||t.options.inputName,t.input[t.options.inputName]=""},this.getInput=function(n){return n=n||t.options.inputName,t.input[t.options.inputName]},this.setInput=function(n,e){e=e||t.options.inputName,t.input[e]=n},this.setOptions=function(n){n=n||{},t.options=Object.assign(t.options,n),t.render()},this.clear=function(){t.keyboardDOM.innerHTML=""},this.render=function(){t.clear();var n=t.options.layout?"hg-layout-custom":"hg-layout-"+t.options.layoutName,e=t.options.layout||i.a.getLayout(t.options.layoutName);t.keyboardDOM.className+=" "+t.options.theme+" "+n,e[t.options.layoutName].forEach(function(n,e){var o=n.split(" "),r=document.createElement("div");r.className+="hg-row",o.forEach(function(n,e){var o=u.a.getButtonClass(n),i=u.a.getButtonDisplayName(n,t.options.display),a=document.createElement("div");a.className+="hg-button "+o,a.onclick=function(){return t.handleButtonClicked(n)};var s=document.createElement("span");s.innerHTML=i,a.appendChild(s),r.appendChild(a),"function"===typeof t.options.onInit&&t.options.onInit()}),t.keyboardDOM.appendChild(r)})}};n.a=s},function(t,n){},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var r=function t(){o(this,t)};r.getLayout=function(t){return"qwerty"===t?{default:["` 1 2 3 4 5 6 7 8 9 0 - = {bksp}","{tab} q w e r t y u i o p [ ] \\","{lock} a s d f g h j k l ; ' {enter}","{shift} z x c v b n m , . / {shift}",".com @ {space}"],shift:["~ ! @ # $ % ^ & * ( ) _ + {bksp}","{tab} Q W E R T Y U I O P { } |",'{lock} A S D F G H J K L : " {enter}',"{shift} Z X C V B N M < > ? {shift}",".com @ {space}"]}:"numeric"===t?{default:["1 2 3","4 5 6","7 8 9","{//} 0 {bksp}"]}:r.getLayout("qwerty")},n.a=r},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var r=function(){function t(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(n,e,o){return e&&t(n.prototype,e),o&&t(n,o),n}}(),i=function(){function t(){o(this,t)}return r(t,null,[{key:"normalizeString",value:function(t){var n=void 0;return n="@"===t?"at":","===t?"comma":"."===t?"dot":"\\"===t?"backslash":"/"===t?"fordardslash":"*"===t?"asterisk":"&"===t?"ampersand":"$"===t?"dollarsign":"="===t?"equals":"+"===t?"plus":"-"===t?"minus":"'"===t?"apostrophe":";"===t?"colon":"["===t?"openbracket":"]"===t?"closebracket":"//"===t?"emptybutton":"",n?" hg-button-"+n:""}},{key:"getDefaultDiplay",value:function(){return{"{bksp}":"delete","{enter}":"< enter","{shift}":"shift","{s}":"shift","{tab}":"tab","{lock}":"caps","{accept}":"Submit","{space}":" ","{//}":" "}}}]),t}();i.getButtonClass=function(t){var n=t.includes("{")&&"{//}"!==t?"functionBtn":"standardBtn",e=t.replace("{","").replace("}","");return"hg-"+n+("standardBtn"===n?i.normalizeString(e):" hg-button-"+e)},i.getButtonDisplayName=function(t,n){return n=n||i.getDefaultDiplay(),n[t]||t},i.getUpdatedInput=function(t,n,e){var o=n,r=e.newLineOnEnter;return"{bksp}"===t&&o.length>0?o=o.slice(0,-1):"{space}"===t?o+=" ":"{tab}"===t?o+="\t":"{enter}"===t&&r?o+="\n":t.includes("{")||t.includes("{")||(o+=t),o},n.a=i}])})},function(t,n){}])});
//# sourceMappingURL=index.js.map
{
"name": "react-simple-keyboard",
"version": "1.2.4",
"version": "1.2.5",
"description": "React.js Virtual Keyboard",

@@ -36,3 +36,3 @@ "main": "build/index.js",

"dependencies": {
"simple-keyboard": "latest"
"simple-keyboard": "^2.1.1"
},

@@ -39,0 +39,0 @@ "devDependencies": {

@@ -131,5 +131,37 @@ # react-simple-keyboard

### inputName
> Allows you to use a single simple-keyboard instance for several inputs.
```js
inputName={"default"}
```
### onKeyPress
> Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
```js
onKeyPress={(button) => console.log(button)}
```
### onChange
> Executes the callback function on input change. Returns the current input's string.
```js
onChange={(input) => console.log(input)}
```
### onChangeAll
> Executes the callback function on input change. Returns the input object with all defined inputs. This is useful if you're handling several inputs with simple-keyboard, as specified in the "*[Using several inputs](#using-several-inputs)*" guide.
```js
onChangeAll={(inputs) => console.log(inputs)}
```
## Methods
simple-keybord has a few methods you can use to further control it's behavior.
simple-keyboard has a few methods you can use to further control it's behavior.
To access these functions, you need a `ref` of the simple-keyboard component, like so:

@@ -152,3 +184,8 @@

```js
// For default input (i.e. if you have only one)
this.keyboard.clearInput();
// For specific input
// Must have been previously set using the "inputName" prop.
this.keyboard.clearInput("inputName");
```

@@ -161,3 +198,8 @@

```js
// For default input (i.e. if you have only one)
let input = this.keyboard.getInput();
// For specific input
// Must have been previously set using the "inputName" prop.
let input = this.keyboard.getInput("inputName");
```

@@ -170,3 +212,8 @@

```js
// For default input (i.e. if you have only one)
this.keyboard.setInput("Hello World!");
// For specific input
// Must have been previously set using the "inputName" prop.
this.keyboard.setInput("Hello World!", "inputName");
```

@@ -184,2 +231,55 @@

### setOptions
> Set new option or modify existing ones after initialization. The changes are applied immediately.
```js
this.keyboard.setOptions({
theme: "my-custom-theme"
});
```
## Use-cases
### Using several inputs
Set the *[inputName](#inputname)* option for each input you want to handle with simple-keyboard.
For example:
```js
// Tell simple-keyboard which input is active
setActiveInput = (event) => {
this.setState({
inputName: event.target.id
});
}
// When the inputs are changed
// (retrieves all inputs as an object instead of just the current input's string)
onChangeAll = (input) => {
this.setState({
input: input
}, () => {
console.log("Inputs changed", input);
});
}
render(){
return (
<div>
<input id="input1" onFocus={this.setActiveInput} value={this.state.input['input1'] || ""}/>
<input id="input2" onFocus={this.setActiveInput} value={this.state.input['input2'] || ""}/>
<Keyboard
ref={r => this.keyboard = r}
inputName={this.state.inputName}
onChangeAll={inputs => this.onChangeAll(inputs)}
layoutName={this.state.layoutName}
/>
</div>
);
```
> [See full example](https://github.com/hodgef/react-simple-keyboard/blob/master/src/demo/MultipleInputsDemo.js).
## Demo

@@ -186,0 +286,0 @@

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc