@nish1896/rhf-mui-components
Version:
A suite of 20+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.
100 lines (99 loc) • 3.81 kB
JavaScript
"use client";
import { RHFMuiConfigContext } from "../../config/ConfigProvider.js";
import { validateArray } from "../../utils/array.js";
import { getOptionValue, isKeyValueOption, normalizeSelectValue } from "../../utils/object.js";
import { fieldNameToLabel } from "../../utils/text-transform.js";
import { useFieldIds } from "../../utils/useFieldIds.js";
import FormControl from "../../common/FormControl.js";
import FormHelperText from "../../common/FormHelperText.js";
import FormLabel from "../../common/FormLabel.js";
import { useContext } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } from "react-hook-form";
import FormControlLabel from "@mui/material/FormControlLabel";
import Radio from "@mui/material/Radio";
import MuiRadioGroup from "@mui/material/RadioGroup";
//#region src/mui/radio-group/index.tsx
const RHFRadioGroup = ({ fieldName, control, registerOptions, options, labelKey, valueKey, onValueChange, disabled: muiDisabled, label, showLabelAboveFormField, formLabelProps, radioProps, formControlLabelProps, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, onBlur, ...rest }) => {
validateArray("RHFRadioGroup", options, labelKey, valueKey);
const { fieldId, labelId, helperTextId, errorId } = useFieldIds(fieldName);
const fieldLabel = label ?? fieldNameToLabel(fieldName);
const { defaultFormControlLabelSx } = useContext(RHFMuiConfigContext);
const { sx, ...otherFormControlLabelProps } = formControlLabelProps ?? {};
const appliedFormControlLabelSx = {
...defaultFormControlLabelSx,
...sx
};
const isError = !!errorMessage;
const showHelperTextElement = !!helperText || isError && !hideErrorMessage;
return /* @__PURE__ */ jsxs(FormControl, {
component: "fieldset",
error: isError,
children: [
/* @__PURE__ */ jsx(FormLabel, {
label: fieldLabel,
isVisible: showLabelAboveFormField ?? true,
required,
error: isError,
formLabelProps: {
id: labelId,
component: "legend",
...formLabelProps
}
}),
/* @__PURE__ */ jsx(Controller, {
name: fieldName,
control,
rules: registerOptions,
render: ({ field: { name: rhfFieldName, value: rhfValue, onChange: rhfOnChange, onBlur: rhfOnBlur } }) => {
return /* @__PURE__ */ jsx(MuiRadioGroup, {
id: fieldId,
name: rhfFieldName,
value: rhfValue ?? "",
onChange: (event, selectedValue) => {
const normalizedValue = normalizeSelectValue(selectedValue, options, labelKey, valueKey);
rhfOnChange(normalizedValue);
if (onValueChange) onValueChange(normalizedValue, event);
},
onBlur: (blurEvent) => {
rhfOnBlur();
onBlur?.(blurEvent);
},
"aria-labelledby": labelId,
"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
...rest,
children: options.map((option) => {
const isObject = isKeyValueOption(option, labelKey, valueKey);
const opnValue = getOptionValue(option, valueKey);
const opnLabel = isObject ? String(option[labelKey]) : String(option);
return /* @__PURE__ */ jsx(FormControlLabel, {
control: /* @__PURE__ */ jsx(Radio, {
id: `${fieldId}-${opnValue}`,
...radioProps
}),
value: opnValue,
label: opnLabel,
disabled: muiDisabled,
sx: appliedFormControlLabelSx,
...otherFormControlLabelProps
}, opnValue);
})
});
}
}),
/* @__PURE__ */ jsx(FormHelperText, {
error: isError,
errorMessage,
hideErrorMessage,
helperText,
showHelperTextElement,
formHelperTextProps: {
id: isError ? errorId : helperTextId,
...formHelperTextProps
}
})
]
});
};
//#endregion
export { RHFRadioGroup as default };