@nish1896/rhf-mui-components
Version:
A suite of 25+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.
91 lines (90 loc) • 3.54 kB
JavaScript
"use client";
import { RHFMuiConfigContext } from "../../config/ConfigProvider.js";
import { mergeRefs } from "../../utils/control.js";
import FormHelperText from "../../common/FormHelperText.js";
import { fieldNameToLabel } from "../../utils/text-transform.js";
import { useFieldIds } from "../../utils/useFieldIds.js";
import { Fragment, forwardRef, useContext } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } from "react-hook-form";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
//#region src/mui/switch/index.tsx
const RHFSwitch = forwardRef(function RHFSwitch({ fieldName, control, registerOptions, customOnChange, onValueChange, disabled: muiDisabled, label, formControlLabelProps, hideLabel, helperText, errorMessage, hideErrorMessage, formHelperTextProps, onBlur: muiOnBlur, slotProps: muiSlotProps, customIds, ...otherSwitchProps }, ref) {
const { fieldId, helperTextId, errorId } = useFieldIds(fieldName, customIds);
const defaultFieldLabel = fieldNameToLabel(fieldName);
const fieldLabel = label ?? defaultFieldLabel;
const accessibleFieldLabel = typeof fieldLabel === "string" ? fieldLabel : defaultFieldLabel;
const { defaultFormControlLabelSx } = useContext(RHFMuiConfigContext);
const { sx, ...otherFormControlLabelProps } = formControlLabelProps ?? {};
const appliedFormControlLabelSx = {
...defaultFormControlLabelSx,
...sx
};
const { input: slotPropsInput, ...otherSlotProps } = muiSlotProps ?? {};
return /* @__PURE__ */ jsx(Controller, {
name: fieldName,
control,
rules: registerOptions,
render: ({ field: { name: rhfFieldName, value: rhfValue, onChange: rhfOnChange, onBlur: rhfOnBlur, ref: rhfRef, disabled: rhfDisabled }, fieldState: { error: fieldStateError } }) => {
const isDisabled = muiDisabled || rhfDisabled;
const fieldErrorMessage = fieldStateError?.message?.toString() ?? errorMessage;
const isError = !!fieldErrorMessage;
const showHelperTextElement = !!(helperText || isError && !hideErrorMessage);
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormControlLabel, {
...otherFormControlLabelProps,
control: /* @__PURE__ */ jsx(Switch, {
...otherSwitchProps,
id: fieldId,
name: rhfFieldName,
checked: Boolean(rhfValue),
disabled: isDisabled,
onChange: (event, isChecked) => {
if (customOnChange) {
customOnChange({
rhfOnChange,
newValue: isChecked,
event
});
return;
}
rhfOnChange(isChecked);
onValueChange?.({
newValue: isChecked,
event
});
},
onBlur: (blurEvent) => {
rhfOnBlur();
muiOnBlur?.(blurEvent);
},
"aria-label": hideLabel ? accessibleFieldLabel : void 0,
"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
"aria-invalid": isError || void 0,
slotProps: {
...otherSlotProps,
input: {
...slotPropsInput,
ref: mergeRefs(rhfRef, ref)
}
}
}),
label: hideLabel ? void 0 : fieldLabel,
sx: appliedFormControlLabelSx,
disabled: isDisabled
}), /* @__PURE__ */ jsx(FormHelperText, {
error: isError,
errorMessage: fieldErrorMessage,
hideErrorMessage,
helperText,
showHelperTextElement,
formHelperTextProps: {
...formHelperTextProps,
id: isError ? errorId : helperTextId
}
})] });
}
});
});
//#endregion
export { RHFSwitch as default };