import { useEffect, useRef, useState } from "@wordpress/element"; import { Button } from "@wordpress/components"; import { jsonParse } from "@easy-accordion/controls"; import { BorderIcon } from "../../icons"; import "./editor.scss"; const Popup = ({ label, children, toggleButton }) => { const [isContentsVisible, setIsContentsVisible] = useState(false); const popupRef = useRef(null); const buttonRef = useRef(null); const handleButtonClick = () => { setIsContentsVisible((prev) => !prev); }; // Close the dropdown when clicking outside of it. useEffect(() => { const handleClickOutside = (event) => { const typographyPopup = document.querySelector(".sp-easy-accordion-typography-fonts"); if ( popupRef.current && !typographyPopup && !popupRef.current.contains(event.target) && !buttonRef.current.contains(event.target) ) { setIsContentsVisible(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, [popupRef, buttonRef]); const value = toggleButton?.props?.attributes; const isActivePopUpButton = value ? jsonParse(value) : true; return ( <>
{label &&
{label}
} {toggleButton && toggleButton}
} ref={buttonRef} onClick={handleButtonClick} />
{isContentsVisible && isActivePopUpButton && (
{children} {/* Render children content here */}
)} ); }; export default Popup;