nice-ui/lib/7-fullscreen/Modal/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Modal = void 0;
const React = require("react");
const use_t_1 = require("use-t");
const nano_theme_1 = require("nano-theme");
const Modal_1 = require("libreact/lib/Modal");
const BasicButtonClose_1 = require("../../2-inline-block/BasicButton/BasicButtonClose");
const theme = nano_theme_1.lightTheme;
const { useCallback, useEffect } = React;
const className = (0, nano_theme_1.rule)({
    pos: 'relative',
    minW: '280px',
    minH: '80px',
    maxH: '100vh',
    bxz: 'border-box',
    fz: '14px',
    ov: 'hidden',
    animation: 'fadeInScaleIn .15s',
    overflowY: 'auto',
});
const bordersClass = (0, nano_theme_1.rule)({
    boxShadow: '0 0 3px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.02)',
    bdrad: '4px',
    '&:hover': {
        out: '1px solid rgba(0,0,0,.08)',
    },
});
const bordersContrastClass = (0, nano_theme_1.rule)({
    boxShadow: '0 0 3px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.02), 0 0 33px rgba(0,0,0,.04), 0 20px 44px rgba(0,0,0,.05)',
    bdrad: '4px',
});
const classNameNoBg = (0, nano_theme_1.rule)({
    bg: 'transparent',
});
const classNameTitle = (0, nano_theme_1.rule)({
    ...theme.font.ui3.lite,
    pos: 'absolute',
    fz: theme.fontSize(-1) + 'px',
    top: theme.space(1) + 'px',
    left: theme.space(1) + 'px',
    userSelect: 'none',
});
const classNameClose = (0, nano_theme_1.rule)({
    pos: 'absolute',
    z: 3,
    top: theme.space(0) + 'px',
    right: theme.space(0) + 'px',
    pd: 0,
    mr: 0,
    bd: 0,
    out: 0,
    bg: 'transparent',
});
const classNameContent = (0, nano_theme_1.rule)({
    pos: 'relative',
    z: 2,
    pd: `${theme.space(2) + theme.space(1)}px ${theme.space(1)}px  ${theme.space(2)}px`,
});
const modalGlobalClassName = '__nice_ui_modal';
const addBodyClass = () => document.body.classList.add(modalGlobalClassName);
const removeBodyClass = () => document.body.classList.remove(modalGlobalClassName);
const Modal = ({ noAnimation, title, raise, contrast, noBorders, noBackground, noPadding, dontLockFocus = false, onEsc, onOutsideClick, onCloseClick, color, rounder, children, }) => {
    const theme = (0, nano_theme_1.useTheme)();
    const [t] = (0, use_t_1.useT)();
    const onElement = useCallback((el) => {
        el.style.zIndex = '' + nano_theme_1.ZINDEX.MODAL;
    }, []);
    useEffect(() => {
        addBodyClass();
        return removeBodyClass;
    }, []);
    let titleElement = null;
    if (title) {
        titleElement = (React.createElement("div", { className: classNameTitle, style: {
                color: theme.g(0.1, 0.6),
            } }, title));
    }
    const contentClasses = (noAnimation ? '' : 'fadeInScale') +
        className +
        (noBorders ? '' : contrast ? bordersContrastClass : bordersClass) +
        (noBackground ? classNameNoBg : '');
    const style = {
        background: noBackground ? 'transparent' : theme.bg,
        boxShadow: theme.isLight ? undefined : `0 0 0 1px ${theme.g(0.1, 0.16)}`,
    };
    if (rounder) {
        style.borderRadius = '12px';
    }
    if (noAnimation) {
        style.animation = 'none';
    }
    let content = (React.createElement("div", { className: contentClasses, style: style },
        titleElement,
        noPadding ? children : React.createElement("div", { className: classNameContent }, children),
        onCloseClick && (React.createElement("div", { className: classNameClose },
            React.createElement(BasicButtonClose_1.BasicButtonClose, { onClick: onCloseClick, tabIndex: -1, title: `${t('Close')} (Esc)`, size: 32 })))));
    if (raise) {
        content = (React.createElement("div", { style: {
                height: '100vh',
                padding: '100px 0 0',
            } }, content));
    }
    const BaseModalUntyped = Modal_1.Modal;
    return (React.createElement(BaseModalUntyped, { dontLockFocus: dontLockFocus, onElement: onElement, onClick: onOutsideClick, onEsc: onEsc, color: color ? color : theme.isLight ? (contrast ? 'rgba(0,0,64,.4)' : nano_theme_1.lightTheme.g(0, 0.04)) : 'rgba(0,0,0,.4)' }, content));
};
exports.Modal = Modal;