£Á°èZ¨Ä…–K§‚«“ô4“ÒÙ´dîfUÙÃÅ WKbyʦ•êŽ…È®FÒ¿ÊÎóCozá¬S@6{Í:›œêZÌ:Š•_%:¢¾¾~;‘Ã~芩ÊǍí`ÔÑ©ú뙵'5I¿fš×WO%ø9¾«¾DK|€ùÍD”Ýs]nHÕ¶êםӼ㞪éUWŸÈË%DÒÕ¬ï‘]/Åcx ‰ï2ß]ä6G[]S£Ôϯrs{úëóµmÒï#UQxo·õÞCe]"±/aÙ&Eã4ú9Jé_ÞåëdãöKë)AÞ ¯¹ægƒÛowЍø^d™ý½ßB7áyMä9ÜÖUã !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! import { __ } from '@wordpress/i18n'; import { LabelControl } from './label'; import { useState, useRef, useEffect } from '@wordpress/element'; import { ColorPicker } from '@wordpress/components'; // TODO: re-arrang the content export const BoxShadowControl = (props) =>{ const { prop, value, setAttributes } = props; const { name } = prop['c']; var values = !pagelayer_empty(value) ? value : ['','','','','','']; // Do we have a val ? if(pagelayer_is_string(values)){ values = values.split(','); } const [isColorPickerVisible, setIsColorPickerVisible] = useState(false); const [isBoxShadowVisible, setBoxShadowVisible] = useState(false); const colorPreviewRef = useRef(null); const colorPickerRef = useRef(null); const boxShadowRef = useRef(null); const handleInputChange = (index, newValue) => { const newValues = [...values]; newValues[index] = newValue; setAttributes({ [name]: newValues}); }; const onChange = (color = '') => { handleInputChange(3, color); } const handleRemoveColor = (e) => { handleInputChange(3, ''); setIsColorPickerVisible(false); }; useEffect(() => { const handleDocumentClick = (e) => { // ColorPicker Handler if ( colorPickerRef.current && !colorPickerRef.current.contains(e.target) && colorPreviewRef.current && !colorPreviewRef.current.contains(e.target) ) { setIsColorPickerVisible(false); } // Shodow Modal Handler if( boxShadowRef.current && !boxShadowRef.current.contains(e.target) ){ setBoxShadowVisible(false); } }; document.addEventListener('click', handleDocumentClick); return () => { document.removeEventListener('click', handleDocumentClick); }; }, []); var blank = 'pagelayer-blank-preview'; return (
setBoxShadowVisible(!isBoxShadowVisible)} > { isBoxShadowVisible &&
handleInputChange(0, parseFloat(e.target.value))} />
handleInputChange(1, parseFloat(e.target.value))} />
handleInputChange(2, parseFloat(e.target.value))} />
handleInputChange(4, parseFloat(e.target.value))} />
setIsColorPickerVisible(!isColorPickerVisible)} style={{ backgroundColor: values[3] }} >
{isColorPickerVisible && (
{ if (val.rgb) { onChange( val.rgb.a != 1 ? "rgba(" + val.rgb.r + "," + val.rgb.g + "," + val.rgb.b + "," + val.rgb.a + ")" : val.hex ); } }} disableAlpha={false} />
)}
}
); }