@nish1896/rhf-mui-components/mui/number-input/index.js

A suite of 20+ reusable Material UI components for React Hook Form to minimize your time and effort in creating and styling forms

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext } from 'react';
import { Controller } from 'react-hook-form';
import MuiTextField from '@mui/material/TextField';
import { RHFMuiConfigContext } from '../../config/ConfigProvider';
import { FormControl, FormLabel, FormLabelText, FormHelperText } from '../../mui/common';
import { fieldNameToLabel, keepLabelAboveFormField } from '../../utils';
const RHFNumberInput = ({ fieldName, control, registerOptions, onValueChange, label, showLabelAboveFormField, showMarkers, formLabelProps, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, sx, ...rest }) => {
    const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
    const isError = Boolean(errorMessage);
    const fieldLabel = label ?? fieldNameToLabel(fieldName);
    const isLabelAboveFormField = keepLabelAboveFormField(showLabelAboveFormField, allLabelsAboveFields);
    return (_jsxs(FormControl, { error: isError, children: [_jsx(FormLabel, { label: fieldLabel, isVisible: isLabelAboveFormField, required: required, error: isError, formLabelProps: formLabelProps }), _jsx(Controller, { name: fieldName, control: control, rules: registerOptions, render: ({ field }) => {
                    const { value, onChange, ...otherFieldParams } = field;
                    return (_jsx(MuiTextField, { id: fieldName, type: "number", autoComplete: fieldName, label: !isLabelAboveFormField ? (_jsx(FormLabelText, { label: fieldLabel, required: required })) : undefined, value: value ?? '', onChange: event => {
                            const fieldValue = event.target.value === '' ? null : Number(event.target.value);
                            onChange(fieldValue);
                            if (onValueChange) {
                                onValueChange(fieldValue, event);
                            }
                        }, error: isError, sx: {
                            ...(!showMarkers && {
                                '& input[type=number]': {
                                    MozAppearance: 'textfield',
                                    '&::-webkit-outer-spin-button': { display: 'none' },
                                    '&::-webkit-inner-spin-button': { display: 'none' }
                                }
                            }),
                            ...sx
                        }, ...rest, ...otherFieldParams }));
                } }), _jsx(FormHelperText, { error: isError, errorMessage: errorMessage, hideErrorMessage: hideErrorMessage, helperText: helperText, formHelperTextProps: formHelperTextProps })] }));
};
export default RHFNumberInput;