From dddd45a220cab3930535fdb80acb38dde85d667f Mon Sep 17 00:00:00 2001
From: Francisco Hodge <Francisco.Hodge@barco.com>
Date: Thu, 15 Mar 2018 13:07:10 -0400
Subject: [PATCH] Adding more functionality examples to demo

---
 src/demo/App.css | 31 +++++++++++++++++++++++++++++++
 src/demo/App.js  | 42 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 src/demo/App.css

diff --git a/src/demo/App.css b/src/demo/App.css
new file mode 100644
index 00000000..3ef67457
--- /dev/null
+++ b/src/demo/App.css
@@ -0,0 +1,31 @@
+.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;
+}
\ No newline at end of file
diff --git a/src/demo/App.js b/src/demo/App.js
index 8ee8fb04..ff9be150 100644
--- a/src/demo/App.js
+++ b/src/demo/App.js
@@ -1,23 +1,59 @@
 import React, {Component} from 'react';
 import Keyboard from '../lib';
+import './App.css';
 
 class App extends Component {
+  state = {
+    input: '',
+    layoutName: "default"
+  }
+
+  componentDidMount(){
+    this.keyboard.setInput("Hello World!")
+      .then(input => {
+        this.setState({input: input});
+      });
+  }
   
   onChange = (input) => {
-    console.log("Input changed", input);
+    this.setState({
+      input: input
+    }, () => {
+      console.log("Input changed", input);
+    });
   }
 
   onKeyPress = (button) => {
     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
+    });
   }
   
   render(){
     return (
-      <div>
+      <div className={"demoPage"}>
+        <div className={"screenContainer"}>
+          <textarea className={"inputContainer"} value={this.state.input} />
+        </div>
         <Keyboard
+          ref={r => this.keyboard = r}
           onChange={input => this.onChange(input)}
           onKeyPress={button => this.onKeyPress(button)}
-          layoutName={"default"}
+          layoutName={this.state.layoutName}
           layout={{
             'default': [
               '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',