From c1cb6f491fbbfd462aa7ca730b050c78f60c25a6 Mon Sep 17 00:00:00 2001
From: Francisco Hodge <Francisco.Hodge@barco.com>
Date: Mon, 30 Apr 2018 12:50:38 -0400
Subject: [PATCH] Adding MultipleInputsDemo

---
 src/demo/App.js                     |  2 +-
 src/demo/MultipleInputsDemo.js      | 83 +++++++++++++++++++++++++++++
 src/demo/{ => css}/App.css          |  0
 src/demo/css/MultipleInputsDemo.css | 40 ++++++++++++++
 4 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 src/demo/MultipleInputsDemo.js
 rename src/demo/{ => css}/App.css (100%)
 create mode 100644 src/demo/css/MultipleInputsDemo.css

diff --git a/src/demo/App.js b/src/demo/App.js
index 7439a1436..b553281ad 100644
--- a/src/demo/App.js
+++ b/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 = {
diff --git a/src/demo/MultipleInputsDemo.js b/src/demo/MultipleInputsDemo.js
new file mode 100644
index 000000000..8f473f782
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/demo/App.css b/src/demo/css/App.css
similarity index 100%
rename from src/demo/App.css
rename to src/demo/css/App.css
diff --git a/src/demo/css/MultipleInputsDemo.css b/src/demo/css/MultipleInputsDemo.css
new file mode 100644
index 000000000..c5f3463a6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file