@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
28 lines (27 loc) • 1.68 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) => {
const routeKey = Number(key);
return (_jsx(Page, { open: routeKey === pageId, initial: !positionInside && transitionState !== "entered", enterAnim: routeKey === pageId && currentDepth > prevDepth ? "active-scale-up" : "active", exitAnim: routeKey !== pageId && currentDepth < prevDepth ? "exit-scale-down" : "exit", children: _jsx(PageContents, { ref: contentRef, style: { pointerEvents: routeKey === pageId && rendered ? "auto" : "none" }, children: pages[routeKey] }, `inner-${routeKey}`) }, routeKey));
}) }));
}
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 }));
};