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

TypeScript Material-UI Implementation

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