@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
25 lines (24 loc) • 1.57 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect } from "react";
import { useTransition } from "react-transition-state";
import { InnerContainer, PageContainer, PageContents } from "./styles";
export function ModalPageRenderer({ pages, pageId, currentDepth, prevDepth, positionInside, transitionState, contentRef, rendered, }) {
return (_jsx(InnerContainer, { children: Object.keys(pages).map((key) => (_jsx(Page, { open: key === pageId, initial: !positionInside && transitionState !== "entered", enterAnim: key === pageId && currentDepth > prevDepth ? "active-scale-up" : "active", exitAnim: key !== pageId && currentDepth < prevDepth ? "exit-scale-down" : "exit", children: _jsx(PageContents, { ref: contentRef, style: { pointerEvents: key === pageId && rendered ? "auto" : "none" }, children: pages[key] }, `inner-${key}`) }, key))) }));
}
const Page = ({ children, open, initial, enterAnim, exitAnim }) => {
const [state, setOpen] = useTransition({
timeout: 400,
preEnter: true,
initialEntered: open,
mountOnEnter: true,
unmountOnExit: true,
});
const mounted = !(state === "exited" || state === "unmounted");
const rendered = state === "preEnter" || state !== "exiting";
useEffect(() => {
setOpen(open);
}, [open, setOpen]);
if (!mounted)
return null;
return (_jsx(PageContainer, { className: rendered ? enterAnim : exitAnim, style: { animationDuration: initial ? "0ms" : undefined, animationDelay: initial ? "0ms" : undefined }, children: children }));
};