@yamada-ui/transitions
Version:
Yamada UI transitions components
108 lines (106 loc) • 2.67 kB
JavaScript
"use client"
// src/slide.tsx
import { omitThemeProps, useComponentStyle } from "@yamada-ui/core";
import {
AnimatePresence,
motion,
MOTION_TRANSITION_VARIANTS,
motionForwardRef,
transitionEnter,
transitionExit
} from "@yamada-ui/motion";
import { useValue } from "@yamada-ui/use-value";
import { cx } from "@yamada-ui/utils";
import { jsx } from "react/jsx-runtime";
var getSlideProps = (placement = "right") => {
switch (placement) {
case "right":
return MOTION_TRANSITION_VARIANTS.slideRight;
case "left":
return MOTION_TRANSITION_VARIANTS.slideLeft;
case "bottom":
return MOTION_TRANSITION_VARIANTS.slideDown;
case "top":
return MOTION_TRANSITION_VARIANTS.slideUp;
}
};
var variants = {
enter: ({
delay,
duration,
enter,
placement,
transition,
transitionEnd
} = {}) => ({
...getSlideProps(placement).enter,
transition: transitionEnter(transition == null ? void 0 : transition.enter)(delay, duration),
transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
...enter
}),
exit: ({
delay,
duration,
exit,
placement,
transition,
transitionEnd
} = {}) => ({
...getSlideProps(placement).exit,
transition: transitionExit(transition == null ? void 0 : transition.exit)(delay, duration),
transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
...exit
})
};
var slideProps = {
animate: "enter",
exit: "exit",
initial: "exit",
variants
};
var Slide = motionForwardRef((props, ref) => {
const [style, mergedProps] = useComponentStyle("Slide", props);
const {
className,
delay,
duration = { enter: 0.4, exit: 0.3 },
isOpen,
open = isOpen,
placement: _placement,
transition,
transitionEnd,
unmountOnExit,
__css,
...rest
} = omitThemeProps(mergedProps);
const animate = open || unmountOnExit ? "enter" : "exit";
const placement = useValue(_placement);
const custom = { delay, duration, placement, transition, transitionEnd };
const { position } = getSlideProps(placement);
const resolvedOpen = unmountOnExit ? open && unmountOnExit : true;
const css = {
...style,
...__css,
...position
};
return /* @__PURE__ */ jsx(AnimatePresence, { custom, children: resolvedOpen ? /* @__PURE__ */ jsx(
motion.div,
{
ref,
className: cx("ui-slide", className),
custom,
...slideProps,
animate,
__css: css,
...rest
}
) : null });
});
Slide.displayName = "Slide";
Slide.__ui__ = "Slide";
export {
getSlideProps,
slideProps,
Slide
};
//# sourceMappingURL=chunk-SM3EHDEP.mjs.map