@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
78 lines (76 loc) • 2.05 kB
JavaScript
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_children = require('../../utils/children.cjs');
const require_factory = require('../motion/factory.cjs');
const require_hooks_use_timeout_index = require('../../hooks/use-timeout/index.cjs');
const require_text = require('../text/text.cjs');
const require_use_loading_component = require('./use-loading-component.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/loading/background.tsx
const variants = {
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 Background = (0, react.memo)(({ duration, initial, loadingScheme, message, onFinish }) => {
const Component = require_use_loading_component.useLoadingComponent(loadingScheme);
require_hooks_use_timeout_index.useTimeout(onFinish, duration);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.motion.div, {
"data-loading": true,
alignItems: "center",
animate: "animate",
bg: "bg.panel",
bottom: "md",
boxShadow: "lg",
display: "flex",
exit: "exit",
gap: "sm",
initial,
justifyContent: "center",
maxW: "20rem",
p: "sm",
position: "fixed",
right: "md",
rounded: "l2",
variants,
zIndex: "beerus",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { fontSize: "xl" }), message ? require_children.isValidElement(message) ? message : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
fontSize: "sm",
lineClamp: 1,
children: message
}) : null]
});
});
Background.displayName = "Background";
//#endregion
exports.Background = Background;
//# sourceMappingURL=background.cjs.map