@nish1896/rhf-mui-components/mui/radio-group/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 FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import MuiRadioGroup from '@mui/material/RadioGroup';
import { RHFMuiConfigContext } from '../../config/ConfigProvider';
import { FormControl, FormLabel, FormHelperText } from '../../mui/common';
import { fieldNameToLabel, validateArray, isKeyValueOption } from '../../utils';
const RHFRadioGroup = ({ fieldName, control, registerOptions, options, labelKey, valueKey, onValueChange, disabled, label, showLabelAboveFormField, formLabelProps, radioProps, formControlLabelProps, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, ...rest }) => {
    validateArray('RHFRadioGroup', options, labelKey, valueKey);
    const { defaultFormControlLabelSx } = useContext(RHFMuiConfigContext);
    const fieldLabel = label ?? fieldNameToLabel(fieldName);
    const isError = Boolean(errorMessage);
    const { sx, ...otherFormControlLabelProps } = formControlLabelProps ?? {};
    const appliedFormControlLabelSx = {
        ...defaultFormControlLabelSx,
        ...sx,
    };
    return (_jsxs(FormControl, { error: isError, children: [_jsx(FormLabel, { label: fieldLabel, isVisible: showLabelAboveFormField ?? true, required: required, error: isError, formLabelProps: formLabelProps }), _jsx(Controller, { name: fieldName, control: control, rules: registerOptions, render: ({ field }) => {
                    const { onChange, ...otherFieldParams } = field;
                    return (_jsx(MuiRadioGroup, { ...rest, ...otherFieldParams, value: field.value ?? '', onChange: (event, selectedValue) => {
                            onChange(event);
                            if (onValueChange) {
                                onValueChange(selectedValue, event);
                            }
                        }, "aria-disabled": disabled, children: options.map((option, idx) => {
                            const isObject = isKeyValueOption(option, labelKey, valueKey);
                            const opnValue = isObject
                                ? `${option[valueKey ?? '']}`
                                : option;
                            const opnLabel = isObject
                                ? `${option[labelKey ?? '']}`
                                : option;
                            return (_jsx(FormControlLabel, { control: _jsx(Radio, { ...radioProps }), value: opnValue, label: opnLabel, disabled: disabled, sx: appliedFormControlLabelSx, ...otherFormControlLabelProps }, idx));
                        }) }));
                } }), _jsx(FormHelperText, { error: isError, errorMessage: errorMessage, hideErrorMessage: hideErrorMessage, helperText: helperText, formHelperTextProps: formHelperTextProps })] }));
};
export default RHFRadioGroup;