@nish1896/rhf-mui-components
Version:
A suite of 20+ reusable Material UI components for React Hook Form to minimize your time and effort in creating and styling forms
32 lines (31 loc) • 2.76 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment } from 'react';
import { Controller } from 'react-hook-form';
import { ColorPicker as ReactColorPicker, Saturation, Hue, useColor } from 'react-color-palette';
import { FormControl, FormLabel, FormHelperText } from '../../mui/common';
import { fieldNameToLabel, colorToString } from '../../utils';
import 'react-color-palette/css';
const RHFColorPicker = ({ fieldName, control, registerOptions, value, valueKey = 'hex', defaultColor = '#000000', excludeAlpha, required, hideInput, onValueChange, disabled, label, showLabelAboveFormField, formLabelProps, helperText, errorMessage, hideErrorMessage, formHelperTextProps, height = 200, ...otherProps }) => {
const [color, setColor] = useColor(value ?? defaultColor);
const renderHSLView = valueKey === 'hsv';
const fieldLabel = label ?? fieldNameToLabel(fieldName);
const isError = Boolean(errorMessage);
return (_jsxs(FormControl, { error: isError, children: [_jsx(FormLabel, { label: fieldLabel, isVisible: showLabelAboveFormField ?? true, required: required, error: isError, formLabelProps: formLabelProps }), _jsx(Controller, { name: fieldName, control: control, rules: registerOptions, render: ({ field: { onChange } }) => (_jsx(Fragment, { children: renderHSLView ? (_jsxs(Fragment, { children: [_jsx(Saturation, { height: height, color: color, disabled: disabled, onChange: color => {
if (!disabled) {
setColor(color);
const appliedColor = colorToString(color[valueKey], excludeAlpha);
onChange(appliedColor);
onValueChange?.(color);
}
} }), _jsx(Hue, { color: color, disabled: disabled, onChange: setColor })] })) : (_jsx(ReactColorPicker, { color: color, onChange: color => {
if (!disabled) {
setColor(color);
const appliedColor = valueKey === 'hex'
? color.hex
: colorToString(color[valueKey], excludeAlpha);
onChange(appliedColor);
onValueChange?.(color);
}
}, height: height, hideInput: disabled ? true : hideInput, ...otherProps })) })) }), _jsx(FormHelperText, { error: isError, errorMessage: errorMessage, hideErrorMessage: hideErrorMessage, helperText: helperText, formHelperTextProps: formHelperTextProps })] }));
};
export default RHFColorPicker;