@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
116 lines (114 loc) • 2.18 kB
JavaScript
import { isValidElement as isValidElement$1 } from "../../utils/children.js";
import { motion } from "../motion/factory.js";
import { useTimeout } from "../../hooks/use-timeout/index.js";
import { Text } from "../text/text.js";
import { useLoadingComponent } from "./use-loading-component.js";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/loading/page.tsx
const variants = {
overlay: {
animate: {
opacity: 1,
transition: {
duration: .4,
ease: [
.4,
0,
.2,
1
]
}
},
exit: {
opacity: 0,
transition: {
duration: .4,
ease: [
.4,
0,
1,
1
]
}
},
initial: { opacity: 0 }
},
panel: {
animate: {
opacity: 1,
scale: 1,
transition: {
duration: .4,
ease: [
.4,
0,
.2,
1
]
}
},
exit: {
opacity: 0,
scale: .95,
transition: {
duration: .4,
ease: [
.4,
0,
1,
1
]
}
},
initial: {
opacity: 0,
scale: .95
}
}
};
const Page = memo(({ duration, initial, loadingScheme, message, onFinish }) => {
const Component = useLoadingComponent(loadingScheme);
useTimeout(onFinish, duration);
return /* @__PURE__ */ jsx(motion.div, {
"data-loading": true,
alignItems: "center",
animate: "animate",
bg: "bg.overlay",
display: "flex",
exit: "exit",
h: "100dvh",
initial,
inset: 0,
justifyContent: "center",
p: "md",
position: "fixed",
variants: variants.overlay,
w: "100vw",
zIndex: "beerus",
children: /* @__PURE__ */ jsxs(motion.div, {
alignItems: "center",
animate: "animate",
bg: "bg.panel",
boxShadow: "lg",
display: "flex",
exit: "exit",
flexDirection: "column",
gap: "sm",
initial,
justifyContent: "center",
maxW: "24rem",
p: "md",
rounded: "l2",
variants: variants.panel,
children: [/* @__PURE__ */ jsx(Component, { fontSize: "6xl" }), message ? isValidElement$1(message) ? message : /* @__PURE__ */ jsx(Text, {
lineClamp: 3,
children: message
}) : null]
})
});
});
Page.displayName = "Page";
//#endregion
export { Page };
//# sourceMappingURL=page.js.map