Function useNumericInputHandler

src/shared/hooks.ts:89–113

(
    initial: number | null,
    onChange: (value: number | null) => void,
    id: any = ""
)

const NumberRegex = /^-?\d*\.?\d?\d?$/;
const FormatNumber = (value: number | null) => (value !== null ? formatNumber(value, { separator: "" }) : "");
export const useNumericInputHandler = (
    initial: number | null,
    onChange: (value: number | null) => void,
    id: any = ""
) => {
    const [text, setText] = useState(FormatNumber(initial));
    const { onTextChange, setValue } = useMemo(
        () => ({
            onTextChange: handleTextFieldChange((raw) => {
                const value = raw.replaceAll(/[^\-0-9\.]/g, "");
                if (NumberRegex.test(value)) {
                    setText(value);
                    onChange(value === "" ? null : +value);
                }
            }),
            setValue: (value: number | null) => setText(FormatNumber(value)),
        }),
        [setText, onChange]
    );
    useEffect(() => {
        if (FormatNumber(initial) !== text) setText(FormatNumber(initial));
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [id]);
    return { text, setText, setValue, onTextChange };
};

export const useRefToValue = <T>(t: T) => {
    const ref = useRef(t);