@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.
81 lines (80 loc) • 2.94 kB
JavaScript
"use client";
import { colorToString } from "../../utils/color.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 { Fragment } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } 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, value, valueKey = "hex", defaultColor = "#000000", excludeAlpha, required, hideInput, onValueChange, disabled: muiDisabled, label, showLabelAboveFormField, formLabelProps, helperText, errorMessage, hideErrorMessage, formHelperTextProps, height = 200, ...otherProps }) => {
const { labelId, helperTextId, errorId } = useFieldIds(fieldName);
const [color, setColor] = useColor(value ?? defaultColor);
const renderHSLView = valueKey === "hsv";
const fieldLabel = label ?? fieldNameToLabel(fieldName);
const isError = !!errorMessage;
const showHelperTextElement = !!helperText || isError && !hideErrorMessage;
const getFormattedColor = (color) => valueKey === "hex" ? color.hex : colorToString(color[valueKey], excludeAlpha);
return /* @__PURE__ */ jsxs(FormControl, {
error: isError,
children: [
/* @__PURE__ */ jsx(FormLabel, {
label: fieldLabel,
isVisible: showLabelAboveFormField ?? true,
required,
error: isError,
formLabelProps: {
id: labelId,
...formLabelProps
}
}),
/* @__PURE__ */ jsx(Controller, {
name: fieldName,
control,
rules: registerOptions,
render: ({ field: { onChange: rhfOnChange } }) => /* @__PURE__ */ jsx(Fragment, { children: renderHSLView ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Saturation, {
height,
color,
disabled: muiDisabled,
onChange: (color) => {
setColor(color);
rhfOnChange(getFormattedColor(color));
onValueChange?.(color);
}
}), /* @__PURE__ */ jsx(Hue, {
color,
disabled: muiDisabled,
onChange: setColor
})] }) : /* @__PURE__ */ jsx(ColorPicker, {
color,
disabled: muiDisabled,
onChange: (color) => {
setColor(color);
rhfOnChange(getFormattedColor(color));
onValueChange?.(color);
},
height,
hideInput: muiDisabled ? true : hideInput,
...otherProps
}) })
}),
/* @__PURE__ */ jsx(FormHelperText, {
error: isError,
errorMessage,
hideErrorMessage,
helperText,
showHelperTextElement,
formHelperTextProps: {
id: isError ? errorId : helperTextId,
...formHelperTextProps
}
})
]
});
};
//#endregion
export { RHFColorPicker as default };