forked from M-Labs/web2019
47 lines
1.7 KiB
JavaScript
47 lines
1.7 KiB
JavaScript
import React, {useState} from "react";
|
|
import {useClickAway} from "./useClickAway";
|
|
import {ProcessOptions} from "./Options";
|
|
import {Notification} from "./Notification";
|
|
|
|
export function DialogPopup({options, data, target, id, big, first, last, options_class,
|
|
sideMenuIsOpen, displayNotification, onHideNotification}) {
|
|
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}>
|
|
<Notification
|
|
id={"processed_options_notification" + id}
|
|
tip="Customization options available"
|
|
sideMenuIsOpen={sideMenuIsOpen}
|
|
show={displayNotification}
|
|
onHide={onHideNotification}
|
|
content={
|
|
<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>
|
|
);
|
|
}
|
|
|