96 lines
3.1 KiB
JavaScript
96 lines
3.1 KiB
JavaScript
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>
|
|
);
|
|
}
|