2.21.0

src/demo/App.js

@@ -1,5 +1,5 @@
-import Keyboard from '../lib';
-import './css/App.css';
+import Keyboard from "../lib";
+import "./css/App.css";
 
 /**
  * simple-keyboard demo
@@ -8,8 +8,8 @@ class App {
   /**
    * Instantiates the demo class
    */
-  constructor(){
-    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+  constructor() {
+    document.addEventListener("DOMContentLoaded", this.onDOMLoaded);
 
     /**
      * Default input name
@@ -33,53 +33,55 @@ class App {
       newLineOnEnter: true,
       physicalKeyboardHighlight: true
     });
-  
+
     /**
      * Adding preview (demo only)
      */
-    document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
+    document.querySelector(".simple-keyboard").insertAdjacentHTML(
+      "beforebegin",
+      `
     <div class="simple-keyboard-preview">
       <textarea class="input"></textarea>
     </div>
-    `);
-  
-    document.querySelector('.input').addEventListener('input', (event) => {
+    `
+    );
+
+    document.querySelector(".input").addEventListener("input", event => {
       this.keyboard.setInput(event.target.value);
     });
-  }
+  };
 
   /**
    * Handles shift functionality
    */
   handleShiftButton = () => {
     let layoutName = this.layoutName;
-    let shiftToggle = this.layoutName = layoutName === "default" ? "shift" : "default";
-  
+    let shiftToggle = (this.layoutName =
+      layoutName === "default" ? "shift" : "default");
+
     this.keyboard.setOptions({
       layoutName: shiftToggle
     });
-  }
+  };
 
   /**
    * Called when simple-keyboard input has changed
    */
   onChange = input => {
-    document.querySelector('.input').value = input;
-  }
+    document.querySelector(".input").value = input;
+  };
 
   /**
    * Called when a simple-keyboard key is pressed
    */
   onKeyPress = button => {
     console.log("Button pressed", button);
-  
-      /**
-       * Shift functionality
-       */
-      if(button === "{lock}" || button === "{shift}")
-        this.handleShiftButton();
-  }
 
+    /**
+     * Shift functionality
+     */
+    if (button === "{lock}" || button === "{shift}") this.handleShiftButton();
+  };
 }
 
-export default App;
+export default App;

src/demo/css/App.css

@@ -1,13 +1,14 @@
 #root {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
+    Helvetica, Arial, "Lucida Grande", sans-serif;
   max-width: 850px;
   margin: 0 auto;
   padding-top: 20px;
 }
 
 #root .simple-keyboard-preview {
-  background: rgba(0,0,0,0.8);
-  border: 20px solid rgba(0,0,0,0.1);
+  background: rgba(0, 0, 0, 0.8);
+  border: 20px solid rgba(0, 0, 0, 0.1);
   height: 200px;
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
@@ -16,7 +17,7 @@
 }
 
 #root .input {
-  color: rgba(255,255,255,0.9);
+  color: rgba(255, 255, 255, 0.9);
   background: transparent;
   border: none;
   outline: none;
@@ -29,4 +30,4 @@
 .simple-keyboard.hg-layout-custom {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
-}
+}

src/demo/index.js

@@ -1,6 +1,6 @@
-import App from './App';
+import App from "./App";
 
 /**
  * Initializing demo
  */
-new App();
+new App();