35 lines
1.3 KiB
React
35 lines
1.3 KiB
React
|
import React, {useState} from "react";
|
||
|
|
import {useClickAway} from "@uidotdev/usehooks";
|
||
|
|
import {ProcessOptions} from "./Options.jsx";
|
||
|
|
|
||
|
|
export function DialogPopup({options, data, target, id, big, first, last, options_class}) {
|
||
|
|
const [show, setShow] = useState(false);
|
||
|
|
const ref = useClickAway((e) => {
|
||
|
|
if (e.type === "mousedown") // ignore touchstart
|
||
|
|
setShow(false)
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
let div_classes = `overlayVariant border rounded ${big ? "overlay-bigcard" : "overlay-smallcard"} ${(!big && first) ? "overlay-first" : ""} ${(!big && last) ? "overlay-last" : ""} ${options_class || ""}`;
|
||
|
|
const handleClick = (event) => {
|
||
|
|
setShow(!show);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={ref}>
|
||
|
|
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
|
||
|
|
onClick={handleClick}/>
|
||
|
|
<div style={{'display': show ? 'flex' : 'none'}} className={div_classes}>
|
||
|
|
<ProcessOptions
|
||
|
|
options={options}
|
||
|
|
data={data}
|
||
|
|
key={"processed_options_" + id}
|
||
|
|
id={"processed_options_" + id}
|
||
|
|
target={target}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|