84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
import { useState, useRef } from '@wordpress/element';
|
|
import { Popover, ToolbarButton, ColorPalette, __experimentalHStack as HStack } from '@wordpress/components';
|
|
|
|
const ColorControl = ({ name, colors = [], value, onChange, className }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const buttonRef = useRef();
|
|
|
|
// Resolve what to show as the swatch color
|
|
const resolveColorValue = (val) => {
|
|
if (!val) return '';
|
|
if (val.startsWith('var(')) {
|
|
// Convert var(--wp--preset--color--primary) → #hex from the palette
|
|
const match = colors.find(c => val.includes(c.slug));
|
|
return match?.color || val;
|
|
}
|
|
return val;
|
|
};
|
|
|
|
const selectedColor = resolveColorValue(value);
|
|
|
|
const handleChange = (colorValue) => {
|
|
// Find if it matches a theme color
|
|
const match = colors.find(c => c.color === colorValue);
|
|
|
|
let finalValue = colorValue;
|
|
if (match?.slug) {
|
|
// Store CSS variable instead of raw color code
|
|
finalValue = `var(--wp--preset--color--${match.slug})`;
|
|
}
|
|
|
|
if (onChange) onChange(finalValue);
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ToolbarButton
|
|
ref={buttonRef}
|
|
className={className ? className : ''}
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
<span
|
|
style={{
|
|
display: 'inline-block',
|
|
width: '20px',
|
|
height: '20px',
|
|
borderRadius: '50%',
|
|
backgroundColor: selectedColor,
|
|
border: '1px solid #ccc',
|
|
marginRight: '8px',
|
|
}}
|
|
/>
|
|
{name}
|
|
</ToolbarButton>
|
|
|
|
{isOpen && (
|
|
<Popover
|
|
anchorRef={buttonRef}
|
|
placement="bottom-start"
|
|
onClose={() => setIsOpen(false)}
|
|
>
|
|
<div
|
|
style={{
|
|
padding: '16px',
|
|
background: '#f9f9f9',
|
|
borderRadius: '8px',
|
|
minWidth: '250px',
|
|
}}
|
|
>
|
|
<ColorPalette
|
|
colors={colors}
|
|
value={selectedColor}
|
|
onChange={handleChange}
|
|
enableAlpha
|
|
/>
|
|
</div>
|
|
</Popover>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ColorControl;
|