@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
72 lines (71 loc) • 3.04 kB
JavaScript
"use client";
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_MantineThemeProvider = require("../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_dom = require("react-dom");
react_dom = require_runtime.__toESM(react_dom);
//#region packages/@mantine/core/src/components/Transition/use-transition.ts
function useTransition({ duration, exitDuration, timingFunction, mounted, onEnter, onExit, onEntered, onExited, enterDelay, exitDelay }) {
const theme = require_MantineThemeProvider.useMantineTheme();
const shouldReduceMotion = (0, _mantine_hooks.useReducedMotion)();
const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
const [transitionDuration, setTransitionDuration] = (0, react.useState)(reduceMotion ? 0 : duration);
const [transitionStatus, setStatus] = (0, react.useState)(mounted ? "entered" : "exited");
const transitionTimeoutRef = (0, react.useRef)(-1);
const delayTimeoutRef = (0, react.useRef)(-1);
const rafRef = (0, react.useRef)(-1);
function clearAllTimeouts() {
window.clearTimeout(transitionTimeoutRef.current);
window.clearTimeout(delayTimeoutRef.current);
cancelAnimationFrame(rafRef.current);
}
const handleStateChange = (shouldMount) => {
clearAllTimeouts();
const preHandler = shouldMount ? onEnter : onExit;
const handler = shouldMount ? onEntered : onExited;
const newTransitionDuration = reduceMotion ? 0 : shouldMount ? duration : exitDuration;
setTransitionDuration(newTransitionDuration);
if (newTransitionDuration === 0) {
typeof preHandler === "function" && preHandler();
typeof handler === "function" && handler();
setStatus(shouldMount ? "entered" : "exited");
} else rafRef.current = requestAnimationFrame(() => {
react_dom.default.flushSync(() => {
setStatus(shouldMount ? "pre-entering" : "pre-exiting");
});
rafRef.current = requestAnimationFrame(() => {
typeof preHandler === "function" && preHandler();
setStatus(shouldMount ? "entering" : "exiting");
transitionTimeoutRef.current = window.setTimeout(() => {
typeof handler === "function" && handler();
setStatus(shouldMount ? "entered" : "exited");
}, newTransitionDuration);
});
});
};
const handleTransitionWithDelay = (shouldMount) => {
clearAllTimeouts();
if (typeof (shouldMount ? enterDelay : exitDelay) !== "number") {
handleStateChange(shouldMount);
return;
}
delayTimeoutRef.current = window.setTimeout(() => {
handleStateChange(shouldMount);
}, shouldMount ? enterDelay : exitDelay);
};
(0, _mantine_hooks.useDidUpdate)(() => {
handleTransitionWithDelay(mounted);
}, [mounted]);
(0, react.useEffect)(() => () => {
clearAllTimeouts();
}, []);
return {
transitionDuration,
transitionStatus,
transitionTimingFunction: timingFunction || "ease"
};
}
//#endregion
exports.useTransition = useTransition;
//# sourceMappingURL=use-transition.cjs.map