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

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

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

const TextField = React.forwardRef(
    (
        {
            label,
            errorMsg,
            value,
            onChangeInput,
            sizeRange,
            allowedSizes,
            containerClass,
            // showKeyboard = true,
            ...restProps
        },
        ref
    ) => {
        // const [brVal, setBrVal] = useState(true);
        // const [focus, setFocus] = useState(false);

        // 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");
        //         setFocus(false);
        //     } else {
        //         ref.current.focus();
        //         setBrVal(true);
        //         focus(true);
        //     }
        // };

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

            if (allowedSizes && allowedSizes.length !== 0) {
                let largest = Math.max(...allowedSizes);
                if (String(value).length > largest) return false;
            }

            return true;
        };

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

export default TextField;