First commit

2026-04-30 00:00:04 +08:00 · 2018-03-02 11:31:12 -05:00
commit 4f1111b49e
32 changed files with 13856 additions and 0 deletions
@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './Keyboard.css';
+
+// Services
+import KeyboardLayout from '../services/KeyboardLayout';
+import Utilities from '../services/Utilities';
+
+class App extends Component {
+  state = {
+    input: ''
+  }
+
+  componentWillReceiveProps = (nextProps) => {
+    if(
+      this.props !== nextProps
+    ){
+      this.setState({
+        layoutName: nextProps.layoutName,
+        layout: nextProps.layout,
+        themeClass: nextProps.theme
+      });
+    }
+  }
+
+  handleButtonClicked = (button) => {
+    let debug = this.props.debug;
+    
+    /**
+     * Ignoring placeholder buttons
+     */
+    if(button === '{//}')
+      return false;
+
+    /**
+     * Calling onKeyPress
+     */
+    if(typeof this.props.onKeyPress === "function")
+      this.props.onKeyPress(button);
+
+    /**
+     * Updating input
+     */
+    let updatedInput = Utilities.getUpdatedInput(button, this.state.input);
+
+    if(this.state.input !== updatedInput){
+      this.setState({
+        input: updatedInput
+      }, () => {
+        if(debug){
+          console.log('Input changed:', this.state.input);
+        }
+        
+        /**
+         * Calling onChange
+         */
+        if(typeof this.props.onChange === "function")
+          this.props.onChange(this.state.input);
+      });
+    }
+    
+    if(debug){
+      console.log("Key pressed:", button);
+    }
+  }
+
+  render() {
+    let layoutName = this.state.layoutName || "default";
+    let layout = this.state.layout || KeyboardLayout.getLayout(layoutName);
+    let themeClass = this.state.theme || `hg-theme-default`;
+
+    return (
+      <div className={`hodgefkeyboard ${themeClass} hg-layout-${layoutName}`}>
+        {layout.default.map((row, index) => {
+          let rowArray = row.split(' ');
+
+          return (
+            <div key={`hg-row-${index}`} className="hg-row">
+              {rowArray.map((button, index) => {
+                let fctBtnClass = Utilities.getButtonClass(button);
+                let buttonDisplayName = Utilities.getButtonDisplayName(button, this.props.display);
+
+                return (
+                  <div
+                    key={`hg-button-${index}`}
+                    className={`hg-button ${fctBtnClass}`}
+                    onClick={() => this.handleButtonClicked(button)}
+                  ><span>{buttonDisplayName}</span></div>
+                );
+              })}
+            </div>
+          );
+          
+        })}
+      </div>
+    );
+  }
+}
+
+App.propTypes = {
+  layoutName: PropTypes.string,
+  layout: PropTypes.array,
+  theme:  PropTypes.string,
+  display: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  debug: PropTypes.bool
+};
+
+export default App;