simple-keyboard - npm Package Compare versions

Comparing version 1.1.9 to 2.0.0

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 r in n)("object"===typeof exports?exports:t)[r]=n[r]}}(this,function(t){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},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 r=n(2);e.default=r.a},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(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 a(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),i=n.n(u),s=n(4),c=n.n(s),p=n(9),f=(n.n(p),n(10)),l=n(11),y=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),h=function(t){function e(){var t,n,a,u;r(this,e);for(var i=arguments.length,s=Array(i),c=0;c<i;c++)s[c]=arguments[c];return n=a=o(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(s))),a.state={input:""},a.componentWillReceiveProps=function(t){a.props!==t&&a.setState({layoutName:t.layoutName,layout:t.layout,themeClass:t.theme})},a.clearInput=function(){a.setState({input:""})},a.getInput=function(){return a.state.input},a.setInput=function(t){return new Promise(function(e){a.setState({input:t},function(){e(t)})}).catch(function(t){console.warn(t)})},a.handleButtonClicked=function(t){var e=a.props.debug;if("{//}"===t)return!1;"function"===typeof a.props.onKeyPress&&a.props.onKeyPress(t);var n={newLineOnEnter:!0===a.props.newLineOnEnter},r=l.a.getUpdatedInput(t,a.state.input,n);a.state.input!==r&&a.setState({input:r},function(){e&&console.log("Input changed:",a.state.input),"function"===typeof a.props.onChange&&a.props.onChange(a.state.input)}),e&&console.log("Key pressed:",t)},u=n,o(a,u)}return a(e,t),y(e,[{key:"render",value:function(){var t=this,e=this.props.layoutName||"default",n=this.props.layout||f.a.getLayout(e),r=this.props.theme||"hg-theme-default",o=this.props.layout?"hg-layout-custom":"hg-layout-"+e;return i.a.createElement("div",{className:"simple-keyboard "+r+" "+o},n[e].map(function(e,n){var r=e.split(" ");return i.a.createElement("div",{key:"hg-row-"+n,className:"hg-row"},r.map(function(e,n){var r=l.a.getButtonClass(e),o=l.a.getButtonDisplayName(e,t.props.display);return i.a.createElement("div",{key:"hg-button-"+n,className:"hg-button "+r,onClick:function(){return t.handleButtonClicked(e)}},i.a.createElement("span",null,o))}))}))}}]),e}(u.Component);h.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=h},function(e,n){e.exports=t},function(t,e,n){t.exports=n(5)()},function(t,e,n){"use strict";var r=n(6),o=n(7),a=n(8);t.exports=function(){function t(t,e,n,r,u,i){i!==a&&o(!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=r,n.PropTypes=n,n}},function(t,e,n){"use strict";function r(t){return function(){return t}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(t){return t},t.exports=o},function(t,e,n){"use strict";function r(t,e,n,r,a,u,i,s){if(o(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,r,a,u,i,s],f=0;c=new Error(e.replace(/%s/g,function(){return p[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(t){};t.exports=r},function(t,e,n){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,e){},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var o=function t(){r(this,t)};o.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}"]}:o.getLayout("qwerty")},e.a=o},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),a=function(){function t(){r(this,t)}return o(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}();a.getButtonClass=function(t){var e=t.includes("{")&&"{//}"!==t?"functionBtn":"standardBtn",n=t.replace("{","").replace("}","");return"hg-"+e+("standardBtn"===e?a.normalizeString(n):" hg-button-"+n)},a.getButtonDisplayName=function(t,e){return e=e||a.getDefaultDiplay(),e[t]||t},a.getUpdatedInput=function(t,e,n){var r=e,o=n.newLineOnEnter;return"{bksp}"===t&&r.length>0?r=r.slice(0,-1):"{space}"===t?r+=" ":"{tab}"===t?r+="\t":"{enter}"===t&&o?r+="\n":t.includes("{")||t.includes("{")||(r+=t),r},e.a=a}])});
+!function(t,n){if("object"===typeof exports&&"object"===typeof module)module.exports=n();else if("function"===typeof define&&define.amd)define([],n);else{var e=n();for(var o in e)("object"===typeof exports?exports:t)[o]=e[o]}}(this,function(){return function(t){function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.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 i=e(3),r=(e.n(i),e(4)),a=e(5),u="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"===u(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.input="",this.options.layoutName=this.options.layoutName||"default",this.options.theme=this.options.theme||"hg-theme-default",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},i=a.a.getUpdatedInput(n,t.input,o);t.input!==i&&(t.input=i,e&&console.log("Input changed:",t.input),"function"===typeof t.options.onChange&&t.options.onChange(t.input)),e&&console.log("Key pressed:",n)},this.clearInput=function(){t.input=""},this.getInput=function(){return t.input},this.setInput=function(n){t.input=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||r.a.getLayout(t.options.layoutName);t.keyboardDOM.className+=" "+t.options.theme+" "+n,e[t.options.layoutName].forEach(function(n,e){var o=n.split(" "),i=document.createElement("div");i.className+="hg-row",o.forEach(function(n,e){var o=a.a.getButtonClass(n),r=a.a.getButtonDisplayName(n,t.options.display),u=document.createElement("div");u.className+="hg-button "+o,u.onclick=function(){return t.handleButtonClicked(n)};var s=document.createElement("span");s.innerHTML=r,u.appendChild(s),i.appendChild(u),"function"===typeof t.options.onInit&&t.options.onInit()}),t.keyboardDOM.appendChild(i)})}};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 i=function t(){o(this,t)};i.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}"]}:i.getLayout("qwerty")},n.a=i},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 i=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}}(),r=function(){function t(){o(this,t)}return i(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}();r.getButtonClass=function(t){var n=t.includes("{")&&"{//}"!==t?"functionBtn":"standardBtn",e=t.replace("{","").replace("}","");return"hg-"+n+("standardBtn"===n?r.normalizeString(e):" hg-button-"+e)},r.getButtonDisplayName=function(t,n){return n=n||r.getDefaultDiplay(),n[t]||t},r.getUpdatedInput=function(t,n,e){var o=n,i=e.newLineOnEnter;return"{bksp}"===t&&o.length>0?o=o.slice(0,-1):"{space}"===t?o+=" ":"{tab}"===t?o+="\t":"{enter}"===t&&i?o+="\n":t.includes("{")||t.includes("{")||(o+=t),o},n.a=r}])});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "simple-keyboard",
-  "version": "1.1.9",
-  "description": "React.js Virtual Keyboard",
+  "version": "2.0.0",
+  "description": "On-screen Virtual Keyboard",
   "main": "build/index.js",
@@ -23,4 +23,4 @@ "scripts": {
   "keywords": [
-    "react",
-    "reactjs",
+    "javascript",
+    "es6",
     "digital",
@@ -27,0 +27,0 @@ "keyboard",

README.md

 # simple-keyboard
-
-[![npm](https://img.shields.io/npm/v/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard)
-[![Dependencies](https://img.shields.io/david/hodgef/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard)
-[![npm downloads](https://img.shields.io/npm/dm/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard)
-
-<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="src/demo/images/simple-keyboard.png" align="center"></a>
-> An easily customisable and responsive on-screen virtual keyboard for React.js projects.
-
-<img src="src/demo/images/keyboard.PNG" align="center" width="100%">
-
-<b>[Live Demo](https://franciscohodge.com/simple-keyboard/demo)</b>
-
-
-## Installation
-
-`npm install simple-keyboard --save`
-
-## Usage
-
-````js
-import React, {Component} from 'react';
-import Keyboard from 'simple-keyboard';
-import 'simple-keyboard/build/css/index.css';
-
-class App extends Component {
-
-  onChange = (input) => {
-    console.log("Input changed", input);
-  }
-
-  onKeyPress = (button) => {
-    console.log("Button pressed", button);
-  }
-
-  render(){
-    return (
-      <Keyboard
-        onChange={input =>
-          this.onChange(input)}
-        onKeyPress={button =>
-          this.onKeyPress(button)}
-      />
-    );
-  }
-}
-
-export default App;
-````
-
-> Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js).
-
-## Options
-
-You can customize the Keyboard by passing options (props) to it.
-Here are the available options (the code examples are the defaults):
-
-### layout
-
-> Modify the keyboard layout
-
-```js
-layout={{
-  '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}'
-  ]
-}}
-```
-
-### layoutName
-
-> Specifies which layout should be used.
-
-```js
-layoutName={"default"}
-```
-
-### display
-
-> Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: "delete").
-
-```js
-display={{
-  '{bksp}': 'delete',
-  '{enter}': '< enter',
-  '{shift}': 'shift',
-  '{s}': 'shift',
-  '{tab}': 'tab',
-  '{lock}': 'caps',
-  '{accept}': 'Submit',
-  '{space}': ' ',
-  '{//}': ' '
-}}
-```
-
-### theme
-
-> A prop to add your own css classes. You can add multiple classes separated by a space.
-
-```js
-theme={"hg-theme-default"}
-```
-
-### debug
-
-> Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
-
-```js
-debug={false}
-```
-
-### newLineOnEnter
-
-> Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not.
-
-```js
-newLineOnEnter={false}
-```
-
-## Methods
-
-simple-keybord 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:
-
-```js
-<Keyboard
-  ref={r => this.keyboard = r}
-  [...]
-/>
-
-// Then, on componentDidMount ..
-this.keyboard.methodName(params);
-```
-
-### clearInput
-
-> Clear the keyboard's input.
-
-```js
-this.keyboard.clearInput();
-```
-
-### getInput
-
-> Get the keyboard's input (You can also get it from the _onChange_ prop).
-
-```js
-let input = this.keyboard.getInput();
-```
-
-### setInput
-
-> Set the keyboard's input. Useful if you want the keybord to initialize with a default value, for example.
-
-```js
-this.keyboard.setInput("Hello World!");
-```
-
-It returns a promise, so if you want to run something after it's applied, call it as so:
-
-```js
-let inputSetPromise = this.keyboard.setInput("Hello World!");
-
-inputSetPromise.then((result) => {
-  console.log("Input set");
-});
-```
-
-## Demo
-
-<img src="src/demo/images/demo.gif" align="center" width="600">
-
-### Live demo
-
-[https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo)
-
-### To run demo on your own computer
-
-* Clone this repository
-* `npm install`
-* `npm start`
-* Visit [http://localhost:3000/](http://localhost:3000/)
-
-## Note
-
-This is a work in progress. Feel free to submit any issues you have at:
-[https://github.com/hodgef/simple-keyboard/issues](https://github.com/hodgef/simple-keyboard/issues)
+NOTE: simple-keyboard is now transitioning to native js. This message should be replaced shortly as the transition is finalized.
+**React user? Please install react-simple-keyboard**.

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of medium maintenance alerts

0

decreased by-100%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

591201

decreased by-3.65%

Lines of code

486

decreased by-1.42%

Number of lines in readme file

3

decreased by-98.49%

No dependency changes