@smitch/fluid/lib/dialog/Dialog.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
import { CloseButton } from "..";
import { useDisableBack } from "./hooks/useDisableBack";
var Dialog = function (_a) {
    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.modal, modal = _c === void 0 ? true : _c, _d = _a.showClose, showClose = _d === void 0 ? true : _d, onClose = _a.onClose, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "lg" : _e, _f = _a.closeBtnSize, closeBtnSize = _f === void 0 ? "md" : _f, _g = _a.titleBold, titleBold = _g === void 0 ? false : _g, children = _a.children;
    useDisableBack(modal);
    var dialog = useRef(null);
    useEffect(function () {
        var dialogRef = dialog.current;
        var handleClose = function () {
            if (modal)
                document.body.style.overflow = "";
        };
        if (dialogRef)
            dialogRef.addEventListener("close", handleClose, false);
        var handleEscape = function (e) {
            if (e.key === "Escape")
                onClose();
        };
        document.addEventListener("keyup", handleEscape, false);
        if (open) {
            if (modal) {
                dialogRef.showModal();
                document.body.style.overflow = "hidden";
            }
            else
                dialogRef.show();
        }
        else
            dialogRef.close();
        return function () {
            handleClose();
            if (dialogRef)
                dialogRef.removeEventListener("close", handleClose, false);
            document.removeEventListener("keyup", handleEscape, false);
        };
    }, [open, modal, onClose]);
    return (_jsxs("dialog", { id: "dialog", ref: dialog, className: "dialog backdrop:bg-black dark:backdrop:bg-light backdrop:opacity-60 border-none ".concat(modal
            ? "shadow-none bg-light dark:bg-dark dark:text-light"
            : "shadow-md shadow-dark dark:shadow-light bg-dark text-light dark:bg-light dark:text-dark rounded-md"), children: [_jsxs("div", { className: "dialog-header p-4", children: [title && (_jsx("h2", { className: "dialog-title ".concat(modal ? "text-center" : "text-start", " text-").concat(titleSize, " ").concat(titleBold ? "font-bold" : "font-normal"), children: title })), showClose && (_jsx(CloseButton, { onClick: onClose, layout: "circle", size: closeBtnSize, className: "absolute right-1 top-1" }))] }), _jsx("div", { className: "dialog-content ".concat(modal ? "p-0" : "p-4", " pt-0 min-w-[280px] max-w-md"), children: children })] }));
};
export default Dialog;
//# sourceMappingURL=Dialog.js.map