web2019/static/js/shop/options/DialogPopup.jsx

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>
    </>);
}