57 lines
2.0 KiB
JavaScript
57 lines
2.0 KiB
JavaScript
import React, {useRef, useState} from "react";
|
|
import {ProcessOptions} from "./Options";
|
|
import {Notification} from "./Notification";
|
|
import {Overlay} from "react-bootstrap";
|
|
|
|
export function DialogPopup({options, data, target, id, options_class,
|
|
sideMenuIsOpen, displayNotification, onHideNotification, horizontal}) {
|
|
const [show, setShow] = useState(false);
|
|
const ref = useRef(null);
|
|
|
|
let div_classes = `overlayVariant border rounded ${options_class || ""}`;
|
|
|
|
const handleClick = (_event) => {
|
|
setShow(!show);
|
|
};
|
|
|
|
return (<>
|
|
<Notification
|
|
id={"processed_options_notification" + id}
|
|
tip="Customization options available"
|
|
sideMenuIsOpen={sideMenuIsOpen}
|
|
show={displayNotification}
|
|
onHide={onHideNotification}
|
|
content={
|
|
<img className="alert-info" ref={ref}
|
|
src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
|
|
onClick={handleClick}/>
|
|
}
|
|
/>
|
|
<Overlay target={ref.current}
|
|
show={show}
|
|
placement={horizontal ? "right" : "bottom"}
|
|
onHide={() => setShow(false)}
|
|
rootClose={true}>
|
|
{({
|
|
placement: _placement,
|
|
arrowProps: _arrowProps,
|
|
show: _show,
|
|
popper: _popper,
|
|
hasDoneInitialMeasure: _hasDoneInitialMeasure,
|
|
...props
|
|
}) => (
|
|
<div style={{'display': show ? 'flex' : 'none', ...props.style}} {...props} className={div_classes}>
|
|
<ProcessOptions
|
|
options={options}
|
|
data={data}
|
|
key={"processed_options_" + id}
|
|
id={"processed_options_" + id}
|
|
target={target}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Overlay>
|
|
</>);
|
|
}
|
|
|