| Server IP : 104.21.64.1 / Your IP : 216.73.216.145 Web Server : LiteSpeed System : Linux premium151.web-hosting.com 4.18.0-553.44.1.lve.el8.x86_64 #1 SMP Thu Mar 13 14:29:12 UTC 2025 x86_64 User : tempvsty ( 647) PHP Version : 8.0.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/tempvsty/eaabusiness.com/wp-content/themes/zakra/assets/js/meta/components/ |
Upload File : |
import { ColorIndicator, ColorPicker, Popover } from '@wordpress/components';
import React, { useState } from 'react';
import { useDebounceCallback } from '../hooks/useDebounceCallback';
interface ColorPickerComponentProps {
value?: string;
onChange: (val: string) => void;
}
const ColorPickerComponent = ({
value: _value,
onChange,
}: ColorPickerComponentProps) => {
const [value, setValue] = useState(_value);
const debouncedOnChange = useDebounceCallback((v) => {
onChange(v);
});
const [isVisible, setIsVisible] = useState(false);
const toggleVisible = () => {
setIsVisible((prev) => !prev);
};
return (
<>
<ColorIndicator colorValue={value} onClick={toggleVisible} />
{isVisible && (
<Popover onFocusOutside={() => setIsVisible(false)}>
<ColorPicker
onChange={(v) => {
setValue(v);
debouncedOnChange(v);
}}
/>
</Popover>
)}
</>
);
};
export default ColorPickerComponent;