react-simple-game-engine/lib/ui-components/modal.js

[WIP] not able to use in currently. <!-- Document cumming soon... -->

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useEffect, useState, useCallback, forwardRef, cloneElement, useImperativeHandle, useRef, memo, } from "react";
import * as ReactDOM from "react-dom";
import { getClassName } from "../utils";
export var Modal = forwardRef(function (_a, ref) {
    var _b;
    var backgroundStyle = _a.backgroundStyle, trigger = _a.children, content = _a.content, _c = _a.defaultOpen, defaultOpen = _c === void 0 ? false : _c, onClose = _a.onClose, _d = _a.event, event = _d === void 0 ? "onClick" : _d;
    var _e = useState(defaultOpen), isOpen = _e[0], setOpen = _e[1];
    var container = useMemo(function () {
        var c = document.createElement("div");
        c.className = getClassName("game-modal");
        return c;
    }, []);
    useEffect(function () {
        var stack = document.getElementById("scene-modal-stack");
        stack.appendChild(container);
        return function () {
            stack.removeChild(container);
        };
    }, [container]);
    var handleOpen = useCallback(function () {
        setOpen(true);
    }, []);
    var handleClose = useCallback(function () {
        setOpen(false);
        onClose === null || onClose === void 0 ? void 0 : onClose();
    }, [onClose]);
    useImperativeHandle(ref, function () { return ({
        open: handleOpen,
        close: handleClose,
    }); }, [handleOpen, handleClose]);
    return (_jsxs(_Fragment, { children: [trigger
                ? cloneElement(trigger, (_b = {},
                    _b[event] = handleOpen,
                    _b), trigger.props.children)
                : null, ReactDOM.createPortal(isOpen ? (_jsx(ModalWrap, { content: content, backgroundStyle: backgroundStyle, handleClose: handleClose })) : null, container)] }));
});
var ModalWrap = memo(function (_a) {
    var content = _a.content, backgroundStyle = _a.backgroundStyle, handleClose = _a.handleClose;
    var refModal = useRef(null);
    useEffect(function () {
        var handleClickClose = function () {
            setTimeout(function () {
                handleClose();
            }, 0);
        };
        var buttons = refModal.current.querySelectorAll('[data-role="close"]');
        for (var _i = 0, _a = Array.from(buttons); _i < _a.length; _i++) {
            var btn = _a[_i];
            btn.addEventListener("click", handleClickClose);
        }
        return function () {
            for (var _i = 0, _a = Array.from(buttons); _i < _a.length; _i++) {
                var btn = _a[_i];
                btn.removeEventListener("click", handleClickClose);
            }
        };
    }, [handleClose]);
    var el = useMemo(function () {
        return cloneElement(content, {
            close: handleClose,
        }, content.props.children);
    }, [content]);
    return (_jsx("div", __assign({ className: getClassName("modal-content-wrap") }, { children: _jsxs("div", __assign({ className: getClassName("modal-content-centered"), ref: refModal }, { children: [_jsx("div", { className: getClassName("modal-content-closer"), style: __assign({}, backgroundStyle), onClick: handleClose }), _jsx("main", __assign({ className: getClassName("modal-content-main") }, { children: el }))] })) })));
});