@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
64 lines (61 loc) • 1.98 kB
JavaScript
"use client";
import { jsx } from 'react/jsx-runtime';
import { nex } from '@nex-ui/styled';
import { useState } from 'react';
import { useEvent } from '@nex-ui/hooks';
import { LazyMotion, AnimatePresence } from 'motion/react';
import * as m from 'motion/react-m';
import { motionFeatures } from './motionFeatures/index.mjs';
const transition = {
ease: 'easeInOut',
duration: 0.2
};
const variants = {
visible: {
opacity: 1
},
hidden: {
opacity: 0
}
};
const PresenceMotion = ({ keepMounted, children, open, ...props })=>{
const [display, setDisplay] = useState(()=>keepMounted ? 'none' : 'block');
if (keepMounted && open && display === 'none') {
setDisplay('block');
}
const onAnimationComplete = useEvent((animation)=>{
if (animation === 'hidden' && keepMounted) setDisplay('none');
props.onAnimationComplete?.(animation);
});
return /*#__PURE__*/ jsx(LazyMotion, {
features: motionFeatures,
children: keepMounted ? /*#__PURE__*/ jsx(nex.div, {
as: m.div,
initial: "hidden",
animate: open ? 'visible' : 'hidden',
transition: transition,
variants: variants,
...props,
style: {
...props.style,
display
},
onAnimationComplete: onAnimationComplete,
children: children
}) : /*#__PURE__*/ jsx(AnimatePresence, {
children: open ? /*#__PURE__*/ jsx(nex.div, {
as: m.div,
initial: "hidden",
animate: "visible",
exit: "hidden",
transition: transition,
variants: variants,
...props,
onAnimationComplete: onAnimationComplete,
children: children
}) : null
})
});
};
PresenceMotion.displayName = 'PresenceMotion';
export { PresenceMotion };