@deep-foundation/deepcase/imports/modal-window.js

[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-

import { jsx as _jsx } from "react/jsx-runtime";
import { AnimatePresence, motion, useAnimation } from 'framer-motion';
import React, { useEffect, useRef } from 'react';
import { Box, Center, Portal, useOutsideClick } from '@chakra-ui/react';
const spring = {
    type: "spring",
    damping: 10,
    stiffness: 100,
    duration: 2
};
const invitationForm = {
    active: {
        scale: 1,
        opacity: 1,
        display: 'block',
        transition: spring
    },
    inactive: {
        scale: 0,
        opacity: 0,
        display: 'none',
        transition: spring
    }
};
const backdrop = {
    active: {
        scale: 1,
        opacity: 1,
        display: 'flex',
        transition: spring
    },
    inactive: {
        scale: 0,
        opacity: 0,
        display: 'none',
        transition: spring
    }
};
export const ModalWindow = React.memo(({ portalOpen = false, onClosePortal, children, }) => {
    const control = useAnimation();
    const ref = useRef();
    useOutsideClick({
        ref: ref,
        handler: onClosePortal,
    });
    useEffect(() => {
        if (portalOpen === true) {
            control.start("active");
        }
        else {
            control.start("inactive");
        }
    }, [control, portalOpen]);
    return (_jsx(Portal, { children: _jsx(AnimatePresence, { children: _jsx(Center, { as: motion.div, animate: control, initial: portalOpen ? 'active' : 'inactive', variants: backdrop, exit: 'inactive', width: '100vw', height: '100vh', position: 'fixed', top: 0, left: 0, zIndex: 3, backdropFilter: portalOpen ? `
            blur(2px) 
            contrast(1.2)` : '', backdropInvert: '25%', children: portalOpen && _jsx(AnimatePresence, { children: _jsx(Box, { as: motion.div, animate: control, exit: 'inactive', variants: invitationForm, ref: ref, children: children }) }) }) }) }));
});
//# sourceMappingURL=modal-window.js.map