UNPKG

@yamada-ui/transitions

Version:

Yamada UI transitions components

108 lines (106 loc) 2.67 kB
"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