simple-keyboard - npm Package Compare versions

Comparing version 0.0.2 to 1.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),f=n(9),l=(n.n(f),n(10)),p=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.handleButtonClicked=function(t){var e=a.props.debug;if("{//}"===t)return!1;"function"===typeof a.props.onKeyPress&&a.props.onKeyPress(t);var n=p.a.getUpdatedInput(t,a.state.input);a.state.input!==n&&a.setState({input:n},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.state.layoutName||"default",n=this.state.layout||l.a.getLayout(e),r=this.state.theme||"hg-theme-default";return i.a.createElement("div",{className:"hodgefkeyboard "+r+" hg-layout-"+e},n.default.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=p.a.getButtonClass(e),o=p.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.array,theme:c.a.string,display:c.a.string,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 f=[n,r,a,u,i,s],l=0;c=new Error(e.replace(/%s/g,function(){return f[l++]})),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?"minus":"'"===t?"apostrophe":";"===t?"colon":"["===t?"openbracket":"]"===t?"closebracket":"",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("{")?"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){var n=e;return"{bksp}"===t&&n.length>0?n=n.slice(0,-1):"{space}"===t?n+=" ":t.includes("{")||t.includes("{")||(n+=t),n},e.a=a}])});
+!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.handleButtonClicked=function(t){var e=a.props.debug;if("{//}"===t)return!1;"function"===typeof a.props.onKeyPress&&a.props.onKeyPress(t);var n=l.a.getUpdatedInput(t,a.state.input);a.state.input!==n&&a.setState({input:n},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";return i.a.createElement("div",{className:"hodgefkeyboard "+r+" hg-layout-"+e},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?"minus":"'"===t?"apostrophe":";"===t?"colon":"["===t?"openbracket":"]"===t?"closebracket":"",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("{")?"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){var n=e;return"{bksp}"===t&&n.length>0?n=n.slice(0,-1):"{space}"===t?n+=" ":t.includes("{")||t.includes("{")||(n+=t),n},e.a=a}])});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "simple-keyboard",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "React.js Virtual Keyboard",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -1,2 +0,113 @@
-# react-simple-keyboard
-Simple React.js Virtual Keyboard - no jQuery dependency.
+# simple-keyboard [![npm](https://img.shields.io/npm/v/simple-keyboard.svg)]()
+[![Dependencies](https://img.shields.io/david/hodgef/simple-keyboard.svg)]()
+[![Dev Dependencies](https://img.shields.io/david/dev/hodgef/simple-keyboard.svg)]()
+[![npm downloads](https://img.shields.io/npm/dm/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard)
+
+[![NPM](https://nodei.co/npm/simple-keyboard.png)](https://npmjs.com/package/simple-keyboard)
+
+> An easily customisable and responsive on-screen virtual keyboard for React.js projects.
+
+## Installation
+
+`npm i simple-keyboard --save` or `yarn add simple-keyboard`
+
+## Usage
+
+````
+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;
+````
+
+# 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
+```
+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.
+```
+layoutName={"default"}
+```
+
+### display
+> Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: "delete").
+```
+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.
+```
+theme={"hg-theme-default"}
+```
+
+### debug
+> Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
+```
+debug={false}
+```
+
+## Demo
+
+To run demo on your own computer:
+
+* Clone this repository
+* `npm install`
+* `npm start`
+* Visit 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

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63371

increased by6.41%

Number of downloads

39986

increased by23.57%

Number of package files

8

increased by14.29%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

113

increased by3666.67%

No dependency changes