@etsoo/materialui/lib/mjs/custom/FieldNumberInput.js

TypeScript Material-UI Implementation

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { NumberInputField } from "../NumberInputField";
import { NumberUtils } from "@etsoo/shared";
import Typography from "@mui/material/Typography";
/**
 * Number input field creator
 * type: number
 * @returns Component
 */
export const FieldNumberInput = ({ field, mref, onChange, defaultValue }) => {
    // Ref
    const inputRef = React.useRef();
    const getValue = () => {
        const value = inputRef.current?.valueAsNumber;
        return NumberUtils.parse(value);
    };
    const setValue = (value) => {
        if (inputRef.current)
            inputRef.current.value = `${value ?? ""}`;
    };
    React.useImperativeHandle(mref, () => ({
        getValue,
        setValue
    }));
    React.useEffect(() => {
        if (defaultValue == null)
            return;
        setValue(defaultValue);
    }, [defaultValue]);
    // Name
    const name = field.name;
    if (!name) {
        return (_jsxs(Typography, { children: ["No name for FieldNumberInput ", JSON.stringify(field)] }));
    }
    return (_jsx(NumberInputField, { label: field.label ?? "", helperText: field.helperText, inputRef: inputRef, name: name, fullWidth: true, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
};