@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.
109 lines (108 loc) • 4.3 kB
JavaScript
"use client";
import { RHFMuiConfigContext } from "../../config/ConfigProvider.js";
import { colorToString } from "../../utils/color.js";
import { resolveLabelAboveControl } from "../../utils/control.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 { Fragment, useContext } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller, useWatch } from "react-hook-form";
import { ColorPicker, Hue, Saturation, useColor } from "react-color-palette";
import "react-color-palette/css";
//#region src/misc/color-picker/index.tsx
const RHFColorPicker = ({ fieldName, control, registerOptions, valueKey = "hex", defaultColor = "#000000", excludeAlpha, required, hideInput, customOnChange, onValueChange, disabled: muiDisabled, label, showLabelAboveFormField, formLabelProps, hideLabel, helperText, errorMessage, hideErrorMessage, formHelperTextProps, height = 200, customIds, hideAlpha }) => {
const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
const { labelId, helperTextId, errorId } = useFieldIds(fieldName, customIds);
const [color, setColor] = useColor(useWatch({
control,
name: fieldName
}) ?? defaultColor);
const renderHSLView = valueKey === "hsv";
const defaultFieldLabel = fieldNameToLabel(fieldName);
const fieldLabel = label ?? defaultFieldLabel;
const accessibleFieldLabel = typeof fieldLabel === "string" ? fieldLabel : defaultFieldLabel;
const isLabelAboveControl = resolveLabelAboveControl(showLabelAboveFormField, allLabelsAboveFields);
const getFormattedColor = (color) => valueKey === "hex" ? color.hex : colorToString(color[valueKey], excludeAlpha);
return /* @__PURE__ */ jsx(Controller, {
name: fieldName,
control,
rules: registerOptions,
render: ({ field: { onChange: rhfOnChange, disabled: rhfDisabled }, fieldState: { error: fieldStateError } }) => {
const isDisabled = muiDisabled || rhfDisabled;
const fieldErrorMessage = fieldStateError?.message?.toString() ?? errorMessage;
const isError = !!fieldErrorMessage;
const showHelperTextElement = !!(helperText || isError && !hideErrorMessage);
const wrappedSetColor = (newColor) => {
setColor(newColor);
rhfOnChange(getFormattedColor(newColor));
};
const handleColorChange = (newColor) => {
if (customOnChange) {
customOnChange({
color: newColor,
setColor: wrappedSetColor
});
return;
}
setColor(newColor);
rhfOnChange(getFormattedColor(newColor));
onValueChange?.(newColor);
};
return /* @__PURE__ */ jsxs(FormControl, {
component: "fieldset",
error: isError,
disabled: isDisabled,
"aria-labelledby": !hideLabel && isLabelAboveControl ? labelId : void 0,
"aria-label": hideLabel || !isLabelAboveControl ? accessibleFieldLabel : void 0,
"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
children: [
!hideLabel && /* @__PURE__ */ jsx(FormLabel, {
label: fieldLabel,
required,
error: isError,
isVisible: isLabelAboveControl,
disabled: isDisabled,
formLabelProps: {
...formLabelProps,
id: labelId,
component: "legend"
}
}),
renderHSLView ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Saturation, {
height,
color,
disabled: isDisabled,
onChange: handleColorChange
}), /* @__PURE__ */ jsx(Hue, {
color,
disabled: isDisabled,
onChange: handleColorChange
})] }) : /* @__PURE__ */ jsx(ColorPicker, {
color,
disabled: isDisabled,
onChange: handleColorChange,
height,
hideInput: isDisabled ? true : hideInput,
hideAlpha
}),
/* @__PURE__ */ jsx(FormHelperText, {
error: isError,
errorMessage: fieldErrorMessage,
hideErrorMessage,
helperText,
showHelperTextElement,
formHelperTextProps: {
...formHelperTextProps,
id: isError ? errorId : helperTextId
}
})
]
});
}
});
};
//#endregion
export { RHFColorPicker as default };