import React, {useEffect, useState} from "react"; import {useClickAway} from "./useClickAway"; import {FilterOptions, true_type_of} from "./utils"; export function SummaryPopup({id, options, data}) { const [show, setShow] = useState(false); const [position, setPosition] = useState({x: 0, y: 0}); const [size, setSize] = useState({w: 0, h: 0}); let display_options = FilterOptions(options, data); const close = () => { setShow(false); document.removeEventListener("scroll", handleScroll, true); } const ref = useClickAway(close); const reposition = () => { let popup_button = document.getElementById(id + "img"); if (!popup_button) { document.removeEventListener("scroll", handleScroll, true); return; } let rect = popup_button.getBoundingClientRect() let pos_x = (rect.left + rect.right) / 2; let pos_y = (rect.top + rect.bottom) / 2; if (pos_x + size.w > window.innerWidth) { setPosition({x: pos_x - size.w - 20, y: pos_y - size.h / 2}); } else { setPosition({x: pos_x - size.w / 2, y: pos_y - size.h - 20}); } } const handleScroll = (e) => { if (e.target !== document.getElementById(id)) { close(); } } useEffect(() => { if (show) { let popup = document.getElementById(id); let width = popup.offsetWidth; let height = popup.offsetHeight; setSize({w: width, h: height}); reposition() } }, [show]) useEffect(() => { if (show) { reposition(); } }, [show, size]) const handleClick = (_event) => { setShow(!show); if (!show) { document.addEventListener("scroll", handleScroll, true); } }; const stringify = (value) => { let value_type = true_type_of(value); if (value_type === "string") { return value; } else if (value_type === "object") { if (value.checked === false) { return "off"; } else if (value.checked === true && value.text) { return value.text; } } return JSON.stringify(value); } return ( <div ref={ref}> <img className="alert-info d-block" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"} id={id + "img"} onClick={handleClick}/> <div style={{'display': show ? 'flex' : 'none', 'top': position.y, 'left': position.x}} className="overlayVariant card border rounded" id={id}> <div className="card-body"> {Array.from(Object.entries(display_options) .filter(([key, value], _) => key !== "ext_data") .map(([key, value], _) => { return (<p className="card-text" key={id + key}><i>{key}</i>: {stringify(value)}</p>); }))} </div> </div> </div> ); }