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

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

import React from "react";
import EventService from "@shared/services/EventService";
import Keyboard from "@shared/modules/utils/Keyboard";

export default class GlobalKeyboard extends React.Component {
    state = {
        keyboardProps: {},
        showKeyboard: false
    };

    componentDidMount() {
        this.eventShow = EventService.subscribe("keyboard.show", async ({ keyboardProps = {} } = {}) => {
            try {
                this.setState({ showKeyboard: true, keyboardProps });
            } catch (error) {
                console.error("could not show keyboard!!");
            }
        });

        this.eventHide = EventService.subscribe("keyboard.hide", () => {
            try {
                this.setState({ showKeyboard: false, keyboardProps: {} });
            } catch (error) {
                console.error("could not hide keyboard!!");
            }
        });
    }

    componentWillUnmount() {
        this.eventShow.remove();
        this.eventHide.remove();
    }

    render() {
        let { keyboardProps, showKeyboard } = this.state;
        return (
            <div className={`keyboard-wrapper ${showKeyboard ? "slideup" : "slidedown"}`}>
                {showKeyboard && <Keyboard key={keyboardProps.inputContext} {...keyboardProps} />}
            </div>
        );
    }
}