@amxchange/grid-view-web-client/src/modules/Keyboard/useKeyboard.js

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

import React, { useEffect, useRef } from "react";
import { v4 as uuidv4 } from "uuid";
import EventService from "@shared/services/EventService";

export default function useKeyboard(defaultValue, handleInputChange) {
    const inputContext = useRef(uuidv4());

    const openKeyboard = props => {
        EventService.publish("keyboard.show", {
            keyboardProps: {
                inputContext: inputContext.current,
                ...props
            }
        });
    };

    const closeKeyboard = () => {
        EventService.publish("keyboard.hide");
    };

    useEffect(() => {
        let eventInput = EventService.subscribe(`keypad.input.${inputContext.current}`, input => {
            let newValue = `${defaultValue}${input}`;
            handleInputChange(newValue, true);
        });
        let eventBackspace = EventService.subscribe(`keypad.backspace.${inputContext.current}`, () => {
            let newValue = `${defaultValue}`.slice(0, -1);
            handleInputChange(newValue);
        });
        let eventOk = EventService.subscribe(`keypad.ok.${inputContext.current}`, () => {
            closeKeyboard();
        });

        return () => {
            eventInput.remove();
            eventBackspace.remove();
            eventOk.remove();
        };
    }, [defaultValue]);

    useEffect(() => {
        return () => {
            closeKeyboard();
        };
    }, []);

    return {
        openKeyboard,
        closeKeyboard
    };
}