@amxchange/grid-view-web-client/src/modules/Keyboard/index.jsx

amxchange grid view framework web client in react ( a module extracted from existing jax )

import React, { Component } from "react";
import ReactSimpleKeyboard from "react-simple-keyboard";
import EventService from "@shared/services/EventService";

export default class Keyboard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            layoutName: "default"
        };
    }

    componentDidMount() {
        if (this.props.layoutName) {
            this.setState({
                layoutName: this.props.layoutName
            });
        }
    }

    componentDidUpdate(prevProps) {
        if (this.props.layoutName && this.props.layoutName != prevProps.layoutName) {
            this.setState({
                layoutName: this.props.layoutName
            });
        }
    }

    onKeyPress = button => {
        if (button === "{shift}" || button === "{lock}") {
            this.handleShift();
        } else if (button === "{numbers}" || button === "{abc}") {
            this.handleNumbers();
        } else if (button === "{backspace}") {
            EventService.publish(`keypad.backspace.${this.props.inputContext}`);
            EventService.publish('keypad.blur',false);
        } else if (button === "OK") {
            EventService.publish(`keypad.ok.${this.props.inputContext}`);
            EventService.publish('keypad.blur',true);
        } else {
            if (button === "{space}") {
                button = " ";
            }
            if (button === "{tab}") {
                button = "    ";
            }
            EventService.publish(`keypad.input.${this.props.inputContext}`, button);
            EventService.publish('keypad.blur',false);
        }
    };

    handleNumbers = () => {
        let { layoutName } = this.state;
        EventService.publish('keypad.blur',false);
        this.setState({ layoutName: layoutName !== "numbers" ? "numbers" : "default" });
    };

    handleShift = () => {
        let { layoutName } = this.state;
        EventService.publish('keypad.blur',false);
        this.setState({ layoutName: layoutName === "default" ? "shift" : "default" });
    };

    getLayout = () => {
        let lang = this.props.virtualKeyboardLang || "en";
        const layoutMap = {
            en: {
                default: [
                    "q w e r t y u i o p",
                    "a s d f g h j k l",
                    "{shift} z x c v b n m {backspace}",
                    "{numbers} {space} {tab}",
                    "OK"
                ],
                shift: [
                    "Q W E R T Y U I O P",
                    "A S D F G H J K L",
                    "{shift} Z X C V B N M {backspace}",
                    "{numbers} {space} {tab}",
                    "OK"
                ],
                numbers: ['. 1 2 3 "', ", 4 5 6 _", "/ 7 8 9 -", "OK 0 {abc} {backspace}"]
            },
            ar: {
                default: [
                    "ذ 1 2 3 4 5 6 7 8 9 0",
                    "ض ص ث ق ف غ ع ه خ ح ج د",
                    "ش س ي ب ل ا ت ن م ك ط",
                    "ئ ء ؤ ر لا ى ة و ز ظ",
                    "- {space} {backspace}",
                    "OK"
                ]
            }
        };
        return layoutMap[lang];
    };

    render() {
        return (
            <ReactSimpleKeyboard
                className="simple-keyboard"
                layout={this.getLayout()}
                layoutName={this.state.layoutName}
                theme={`hg-theme-default KioskThem ${this.props.virtualKeyboardLang ==="ar"?"arabic-keyboard":""}`}
                mergeDisplay={true}
                buttonTheme={[
                    {
                        class: "hg-red",
                        buttons: "OK"
                    },
                    {
                        class: "space-button",
                        buttons: "{space}"
                    },
                    {
                        class: "hg-highlight2",
                        buttons: '1 2 3 4 5 6 7 8 9 0 {abc} {backspace} . , / - _ "'
                    },
                    {
                        class: "hlg-top",
                        buttons: '. "'
                    },
                    {
                        class: "hlg-bottom",
                        buttons: "/ -"
                    },
                    {
                        class: "hlg-mid",
                        buttons: ", _"
                    },
                    {
                        class: "alpha-button",
                        buttons:
                            "q w e r t y u i o p a s d f g h j k l  z x c v b n m  Q W E R T Y U I O P A S D F G H J K L Z X C V B N M ئ ء ؤ ر لا ى ة و ز ظ ش س ي ب ل ا ت ن م ك ط ض ص ث ق ف غ ع ه خ ح ج د  ذ"
                    },
                    {
                        class: "shift-button",
                        buttons: "{backspace} {shift} {tab} {numbers}"
                    }
                ]}
                display={{
                    "{numbers}": "123",
                    "{tab}": "⇥",
                    "{backspace}": "⌫",
                    "{capslock}": "caps lock ⇪",
                    "{abc}": "ABC",
                    "{shift}": "⇧",
                    ".": "	&#46;",
                    ",": "	&#44;",
                    "{space}" : "SPACEBAR"
                }}
                onKeyPress={button => this.onKeyPress(button)}
            />
        );
    }
}