@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.
104 lines (103 loc) • 4.35 kB
JavaScript
"use client";
import { RHFMuiConfigContext } from "../../config/ConfigProvider.js";
import { keepLabelAboveFormField, mergeRefs } from "../../utils/control.js";
import { generateDateAdapterErrMsg } from "../../utils/errors.js";
import FormControl from "../../common/FormControl.js";
import FormHelperText from "../../common/FormHelperText.js";
import FormLabel from "../../common/FormLabel.js";
import { fieldNameToLabel } from "../../utils/text-transform.js";
import { useFieldIds } from "../../utils/useFieldIds.js";
import { forwardRef, useContext } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } from "react-hook-form";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { StaticDateTimePicker } from "@mui/x-date-pickers";
//#region src/mui-pickers/date-time/RHFStaticDateTimePicker.tsx
const RHFStaticDateTimePicker = forwardRef(function RHFStaticDateTimePicker({ fieldName, control, registerOptions, required, onChange: muiOnChange, onAccept: muiOnAccept, customOnChange, onValueChange, disabled: muiDisabled, label, showLabelAboveFormField, formLabelProps, hideLabel, helperText, errorMessage, hideErrorMessage, formHelperTextProps, slotProps: muiSlotProps, customIds, ...otherStaticDateTimePickerProps }, ref) {
const { dateAdapter, allLabelsAboveFields } = useContext(RHFMuiConfigContext);
if (!dateAdapter) throw new Error(generateDateAdapterErrMsg("RHFStaticDateTimePicker"));
const { fieldId, labelId, helperTextId, errorId } = useFieldIds(fieldName, customIds);
const isLabelAboveFormField = keepLabelAboveFormField(showLabelAboveFormField, allLabelsAboveFields);
const fieldLabel = label ?? fieldNameToLabel(fieldName);
const accessibleFieldLabel = typeof fieldLabel === "string" ? fieldLabel : fieldNameToLabel(fieldName);
return /* @__PURE__ */ jsx(LocalizationProvider, {
dateAdapter,
children: /* @__PURE__ */ jsx(Controller, {
name: fieldName,
control,
rules: registerOptions,
render: ({ field: { 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(FormControl, {
error: isError,
disabled: isDisabled,
children: [
!hideLabel && /* @__PURE__ */ jsx(FormLabel, {
label: fieldLabel,
isVisible: isLabelAboveFormField,
required,
error: isError,
disabled: isDisabled,
formLabelProps: {
...formLabelProps,
id: labelId,
htmlFor: fieldId
}
}),
/* @__PURE__ */ jsx("div", {
id: fieldId,
role: "group",
"aria-labelledby": !hideLabel && isLabelAboveFormField ? labelId : void 0,
"aria-label": hideLabel ? accessibleFieldLabel : void 0,
"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
children: /* @__PURE__ */ jsx(StaticDateTimePicker, {
...otherStaticDateTimePickerProps,
ref: mergeRefs(rhfRef, ref),
value: rhfValue ?? null,
disabled: isDisabled,
onChange: (newValue, context) => {
muiOnChange?.(newValue, context);
if (customOnChange) {
customOnChange({
rhfOnChange,
newValue,
context
});
return;
}
if (context.validationError !== null) return;
rhfOnChange(newValue);
onValueChange?.({
newValue,
context
});
},
onAccept: (newValue, context) => {
muiOnAccept?.(newValue, context);
rhfOnBlur();
},
slotProps: muiSlotProps
})
}),
/* @__PURE__ */ jsx(FormHelperText, {
error: isError,
errorMessage: fieldErrorMessage,
hideErrorMessage,
helperText,
showHelperTextElement,
formHelperTextProps: {
...formHelperTextProps,
id: isError ? errorId : helperTextId
}
})
]
});
}
})
});
});
//#endregion
export { RHFStaticDateTimePicker as default };