@amxchange/grid-view-web-client/src/modules/FormField/NumberField.jsx

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

import React, { useState, useEffect } from "react";
import MuiTextField from "@mui/material/TextField";
// import useKeyboard from "@shared/modules/utils/Keyboard/useKeyboard";
// import EventService from "@shared/services/EventService";

const NumberField = React.forwardRef(
    (
        {
            label,
            errorMsg,
            value,
            onChangeInput,
            decimalsAllowed,
            sizeRange,
            minMax,
            containerClass,
            // showKeyboard = true,
            ...restProps
        },
        ref
    ) => {
        // const [brVal, setBrVal ] = useState(true);
        // useEffect(() => {
        //     let eventInput = EventService.subscribe("keypad.blur", bool => {
        //         setBrVal(bool)
        //       })
        //     return () => {
        //         eventInput.remove();
        //     };
        // });

        const handleInputChange = newValue => {
            if (isValid(newValue)) {
                onChangeInput(newValue);
            }
        };

        // const handelBlur =() =>{
        //     if(brVal){
        //         EventService.publish("keyboard.hide");
        //     }
        //     else{
        //         ref.current.focus()
        //         setBrVal(true)
        //     }
        // }

        const isValid = newValue => {
            if (isNaN(newValue) && newValue !== "-") return false;

            if (decimalsAllowed) {
                if (String(newValue).split(".")[1] && String(newValue).split(".")[1].length > decimalsAllowed)
                    return false;
            }

            if (sizeRange) {
                let max = sizeRange[1];
                if (max !== -1 && String(newValue).split(".")[0].length > max) {
                    return false;
                }
            }

            if (minMax) {
                let max = minMax[1];
                if (newValue > max) return false;
            }

            return true;
        };

        // const { openKeyboard } = useKeyboard(value, handleInputChange);

        return (
            <div className={`input-field-sec ${errorMsg ? "error-field" : ""} ${containerClass || ""}`}>
                <MuiTextField
                    error={!!errorMsg}
                    inputRef={ref}
                    label={label}
                    value={value}
                    onChange={e => handleInputChange(e.target.value)}
                    // onFocus={() =>
                    //     showKeyboard &&
                    //     openKeyboard({
                    //         layoutName: restProps.virtualKeyboardLayout || "numbers",
                    //         virtualKeyboardLang: restProps.virtualKeyboardLang
                    //     })
                    // }
                    {...restProps}
                    // onBlur={handelBlur}
                    type="text"
                    variant="outlined"
                />
                {errorMsg && <span className="helperTextError">{errorMsg}</span>}
            </div>
        );
    }
);

export default NumberField;