@nex-ui/react/dist/esm/components/modal/Motion.mjs

🎉 A beautiful, modern, and reliable React component library.

import { jsx } from 'react/jsx-runtime';
import { useAnimate, useMotionValue, LazyMotion, AnimatePresence } from 'motion/react';
import * as m from 'motion/react-m';
import { useState, useEffect } from 'react';
import { motionFeatures } from '../utils/motionFeatures/index.mjs';

const transition = {
    ease: 'easeInOut',
    duration: 0.2
};
const variants = {
    visible: {
        opacity: 1
    },
    hidden: {
        opacity: 0
    }
};
const Motion = ({ children, keepMounted, open })=>{
    const [display, setDisplay] = useState('none');
    const [scope, animate] = useAnimate();
    const opacity = useMotionValue(0);
    if (keepMounted && open && display === 'none') {
        setDisplay('block');
    }
    useEffect(()=>{
        if (!scope.current) {
            return;
        }
        const animation = async ()=>{
            if (open) {
                animate(opacity, 1, transition);
            } else {
                await animate(opacity, 0, transition);
                setDisplay('none');
            }
        };
        animation();
    }, [
        animate,
        opacity,
        open,
        scope
    ]);
    return /*#__PURE__*/ jsx(LazyMotion, {
        features: motionFeatures,
        children: keepMounted ? /*#__PURE__*/ jsx(m.div, {
            tabIndex: -1,
            ref: scope,
            style: {
                display,
                opacity
            },
            children: children
        }) : /*#__PURE__*/ jsx(AnimatePresence, {
            children: open ? /*#__PURE__*/ jsx(m.div, {
                tabIndex: -1,
                variants: variants,
                initial: "hidden",
                animate: "visible",
                exit: "hidden",
                transition: transition,
                children: children
            }) : null
        })
    });
};
Motion.displayName = 'ModalMotion';

export { Motion };