Adding MultipleInputsDemo

src/demo/App.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import Keyboard from '../lib';
-import './App.css';
+import './css/App.css';
 
 class App extends Component {
   state = {

src/demo/MultipleInputsDemo.js

@@ -0,0 +1,83 @@
+import React, {Component} from 'react';
+import Keyboard from '../lib';
+import './css/MultipleInputsDemo.css';
+
+class App extends Component {
+  state = {
+    input: '',
+    inputName: 'input1',
+    layoutName: "default"
+  }
+
+  componentDidMount(){
+    /**
+     * Retrieved the rendered simple-keyboard instance
+     */
+    console.log(this.keyboard);
+  }
+
+  onChangeAll = (input) => {
+    this.setState({
+      input: input
+    }, () => {
+      console.log("Inputs changed", input);
+    });
+  }
+
+  onKeyPress = (button) => {
+    console.log(this.keyboard);
+    console.log("Button pressed", button);
+
+    /**
+     * Shift functionality
+     */
+    if(button === "{lock}" || button === "{shift}")
+      this.handleShiftButton();
+  }
+
+  handleShiftButton = () => {
+    let layoutName = this.state.layoutName;
+    let shiftToggle = layoutName === "default" ? "shift" : "default";
+
+    this.setState({
+      layoutName: shiftToggle
+    });
+  }
+
+  setActiveInput = (event) => {
+    console.log("onfocus");
+    let inputId = event.target.id;
+
+    this.setState({
+      inputName: inputId
+    });
+  }
+
+  render(){
+    return (
+      <div className={"demoPage"}>
+
+        <div>
+          <label>Input 1</label>
+          <input id="input1" onFocus={this.setActiveInput} value={this.state.input['input1'] || ""}/>
+        </div>
+
+        <div>
+          <label>Input 2</label>
+          <input id="input2" onFocus={this.setActiveInput} value={this.state.input['input2'] || ""}/>
+        </div>
+
+        <Keyboard
+          ref={r => this.keyboard = r}
+          inputName={this.state.inputName}
+          onChangeAll={inputs => this.onChangeAll(inputs)}
+          onKeyPress={button => this.onKeyPress(button)}
+          layoutName={this.state.layoutName}
+        />
+      </div>
+    );
+  }
+
+}
+
+export default App;

src/demo/css/MultipleInputsDemo.css

@@ -0,0 +1,40 @@
+.demoPage {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding-top: 20px;
+}
+
+.demoPage .screenContainer {
+  background: rgba(0,0,0,0.8);
+  border: 20px solid;
+  height: 300px;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.demoPage .inputContainer {
+  color: white;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: monospace;
+  width: 100%;
+  height: 100%;
+}
+
+.simple-keyboard.hg-layout-custom {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+input {
+  padding: 10px;
+  margin: 10px 0;
+}
+
+label {
+  display: block;
+}