£Á°è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 { LabelControl } from './label'; import { useState, useRef, useEffect } from '@wordpress/element'; export const FilterControl = (props) =>{ const { prop, value, setAttributes } = props; const { name } = prop['c']; const [isFilterVisible, setFilterVisible] = useState(false); var values = !pagelayer_empty(value) ? value : [0,100,100,0,0,100,100]; if(pagelayer_is_string(values)){ values = values.split(','); } const filterRef = useRef(null); const filters = [['blur','10','0.1'],['brightness','200','1'],['contrast','200','1'],['grayscale','200','1'],['hue','360','1'],['opacity','100','1'],['saturate','200','1']]; useEffect(() => { const handleDocumentClick = (e) => { if( filterRef.current && !filterRef.current.contains(e.target) ){ setFilterVisible(false); } }; document.addEventListener('click', handleDocumentClick); return () => { document.removeEventListener('click', handleDocumentClick); }; }, []); // Convert the jQuery function to a React method const handleInputChange = (index,e) => { const newValue = parseFloat(e.target.value); let newValues = [...values]; newValues[index] = newValue; setAttributes({[name]: newValues}); }; return (
setFilterVisible(!isFilterVisible)} > { isFilterVisible &&
{ filters.map((obj, key) => (
handleInputChange(key, e)} />
)) }
}
); }