@fluido/react-components/dist/dialog/index.js

Fluido webapp components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const classnames_1 = __importDefault(require("classnames"));
const framer_motion_1 = require("framer-motion");
const react_1 = require("react");
const md_1 = require("react-icons/md");
const react_portal_1 = require("react-portal");
const styled_components_1 = __importDefault(require("styled-components"));
const icon_button_1 = __importDefault(require("../icon-button"));
const dialog_actions_1 = __importDefault(require("./dialog-actions"));
const dialogVariants = {
    close: {
        opacity: 0,
        y: '-100%',
        transition: {
            ease: 'easeOut',
        },
    },
    open: {
        opacity: 1,
        y: 0,
        transition: {
            delay: 0.1,
            ease: 'easeOut',
        },
    },
};
const StyledDialog = styled_components_1.default.div `
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 200;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: collapse;
  backdrop-filter: blur(0);
  transition: backdrop-filter 0.2s ease-in-out, visibility 0.2s ease-in-out;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--on-surface-disabled);
    opacity: 0;
    z-index: 201;
    transition: opacity 0.2s ease-in-out;
  }

  &.open {
    visibility: visible;
    backdrop-filter: blur(2px);
    transition: backdrop-filter 0.2s ease-in-out, visibility 0 0.2s ease-in-out;
  }
  &.open::after {
    opacity: 0.3;
  }

  .dialog {
    position: relative;
    z-index: 202;
    width: 100%;
    min-width: 20rem;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    background-color: var(--surface);
    border: 2px solid var(--on-surface-divider);
    fieldset {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      padding: 0;
      margin: 0;
      border: none;
    }
  }

  .dialog.sm {
    width: unset;
    min-height: 3rem;
    max-width: 40rem;
  }

  .dialog fieldset > header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 3rem;
    border-bottom: 1px solid var(--on-surface-divider, rgba(0, 0, 0, 0.38));
  }

  .dialog fieldset > header h1 {
    flex: 1 0;
    margin: 0 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dialog fieldset > div {
    flex: 1 0 auto;
    padding: 1rem 1rem 1rem;
  }

  .dialog fieldset > footer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0.5rem;
    border-top: 1px solid var(--on-surface-divider, rgba(0, 0, 0, 0.38));
    &:empty {
      display: none;
    }
  }
`;
const Dialog = ({ children, actions, footer, title, lock, loading, open, browser = false, fullscreen = false, onClose, onSubmit, }) => {
    const handleClose = () => {
        if (onClose)
            onClose(false);
    };
    const handleScrimClick = (ev) => {
        const target = ev.target;
        if (target.getAttribute('data-scrim') === 'true' && !lock) {
            handleClose();
        }
    };
    react_1.useEffect(() => {
        if (browser) {
            if (open && !document.body.classList.contains('modal-opened-block')) {
                document.body.classList.add('modal-opened-block');
            }
            else if (!open &&
                document.body.classList.contains('modal-opened-block')) {
                document.body.classList.remove('modal-opened-block');
            }
            const escapePress = (ev) => {
                if (open && !lock && ev.key === 'Escape' && onClose) {
                    onClose(false);
                }
            };
            document.addEventListener('keydown', escapePress, true);
            return () => {
                document.removeEventListener('keydown', escapePress, true);
            };
        }
    }, [browser, open]);
    return (jsx_runtime_1.jsx(react_portal_1.Portal, { children: jsx_runtime_1.jsx(StyledDialog, Object.assign({ className: classnames_1.default({
                open: open,
            }), "data-scrim": 'true', onMouseDown: handleScrimClick }, { children: jsx_runtime_1.jsx(framer_motion_1.motion.form, Object.assign({ role: 'dialog', "aria-labelledby": 'dialog-title', variants: dialogVariants, initial: 'close', animate: open ? 'open' : 'close', onSubmit: onSubmit, className: classnames_1.default('dialog', { sm: !fullscreen }) }, { children: jsx_runtime_1.jsxs("fieldset", Object.assign({ disabled: loading }, { children: [jsx_runtime_1.jsxs("header", { children: [jsx_runtime_1.jsx("h1", Object.assign({ id: 'dialog-title', className: 'type-h5' }, { children: title }), void 0),
                                !lock && (jsx_runtime_1.jsx(icon_button_1.default, Object.assign({ onClick: handleClose }, { children: jsx_runtime_1.jsx(md_1.MdClose, { size: '24' }, void 0) }), void 0))] }, void 0),
                        jsx_runtime_1.jsx("div", { children: children }, void 0),
                        jsx_runtime_1.jsx("footer", { children: footer ? (footer) : (jsx_runtime_1.jsx(dialog_actions_1.default, { actions: actions, onClose: handleClose }, void 0)) }, void 0)] }), void 0) }), void 0) }), void 0) }, void 0));
};
exports.default = Dialog;