@websolutespa/payload-plugin-bowl
Version:
Bowl PayloadCms plugin of the BOM Repository
131 lines (130 loc) • 4.98 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, FieldLabel, useField, usePreferences } from '@payloadcms/ui';
import React, { Fragment, useCallback, useEffect, useState } from 'react';
import { validateHexColor } from './utils';
// Import the SCSS stylesheet
import './styles.scss';
// keep a list of default colors to choose from
const defaultColors = [
'#333333',
'#9A9A9A',
'#F3F3F3',
'#FF6F76',
'#FDFFA4',
'#B2FFD6',
'#F3DDF3'
];
const baseClass = 'custom-color-picker';
const preferenceKey = 'color-picker-colors';
export const ColorField = (props)=>{
const { path, field } = props;
const { label, required } = field;
const { value, setValue } = useField();
const { getPreference, setPreference } = usePreferences();
const [colorOptions, setColorOptions] = useState(defaultColors);
const [isAdding, setIsAdding] = useState(false);
const [colorToAdd, setColorToAdd] = useState('');
useEffect(()=>{
const mergeColorsFromPreferences = async ()=>{
const colorPreferences = await getPreference(preferenceKey);
if (colorPreferences) {
setColorOptions(colorPreferences);
}
};
mergeColorsFromPreferences();
}, [
getPreference,
setColorOptions
]);
const handleAddColor = useCallback(()=>{
setIsAdding(false);
setValue(colorToAdd);
// prevent adding duplicates
if (colorOptions.indexOf(colorToAdd) > -1) {
return;
}
const newOptions = colorOptions;
newOptions.unshift(colorToAdd);
// update state with new colors
setColorOptions(newOptions);
// store the user color preferences for future use
setPreference(preferenceKey, newOptions);
}, [
colorOptions,
setPreference,
colorToAdd,
setIsAdding,
setValue
]);
return /*#__PURE__*/ _jsxs("div", {
className: baseClass,
children: [
/*#__PURE__*/ _jsx(FieldLabel, {
label: label,
path: path,
required: required
}),
isAdding && /*#__PURE__*/ _jsxs("div", {
children: [
/*#__PURE__*/ _jsx("input", {
className: `${baseClass}__input`,
type: "text",
placeholder: "#000000",
value: colorToAdd,
onChange: (e)=>setColorToAdd(e.target.value)
}),
/*#__PURE__*/ _jsx(Button, {
className: `${baseClass}__btn`,
buttonStyle: "primary",
iconPosition: "left",
iconStyle: "with-border",
size: "small",
disabled: validateHexColor(colorToAdd) !== true,
onClick: handleAddColor,
children: "Add"
}),
/*#__PURE__*/ _jsx(Button, {
className: `${baseClass}__btn`,
buttonStyle: "secondary",
iconPosition: "left",
iconStyle: "with-border",
size: "small",
onClick: ()=>setIsAdding(false),
children: "Cancel"
})
]
}),
!isAdding && /*#__PURE__*/ _jsxs(Fragment, {
children: [
/*#__PURE__*/ _jsx("ul", {
className: `${baseClass}__colors`,
children: colorOptions.map((color, i)=>/*#__PURE__*/ _jsx("li", {
children: /*#__PURE__*/ _jsx("button", {
type: "button",
className: `chip ${color === value ? 'chip--selected' : ''} chip--clickable`,
style: {
backgroundColor: color
},
"aria-label": color,
onClick: ()=>setValue(color)
}, color)
}, i))
}),
/*#__PURE__*/ _jsx(Button, {
className: "add-color",
icon: "plus",
buttonStyle: "icon-label",
iconPosition: "left",
iconStyle: "with-border",
onClick: ()=>{
setIsAdding(true);
setValue('');
}
})
]
})
]
});
};
//# sourceMappingURL=ColorField.js.map