@yamada-ui/transitions
Version:
Yamada UI transitions components
1 lines • 5.59 kB
Source Map (JSON)
{"version":3,"sources":["../src/slide-fade.tsx"],"sourcesContent":["import type { ThemeProps, Token } from \"@yamada-ui/core\"\nimport type {\n MotionProps,\n MotionTransitionVariants,\n MotionVariants,\n WithTransitionProps,\n} from \"@yamada-ui/motion\"\nimport { omitThemeProps, useComponentStyle } from \"@yamada-ui/core\"\nimport {\n AnimatePresence,\n motion,\n motionForwardRef,\n transitionEnter,\n transitionExit,\n} from \"@yamada-ui/motion\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\n\nconst variants: MotionVariants = {\n enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n opacity: 1,\n transition: transitionEnter(transition?.enter)(delay, duration),\n transitionEnd: transitionEnd?.enter,\n x: 0,\n y: 0,\n ...enter,\n }),\n exit: ({\n delay,\n duration,\n exit,\n offsetX,\n offsetY,\n reverse,\n transition,\n transitionEnd,\n } = {}) => ({\n opacity: 0,\n transition: transitionExit(transition?.exit)(delay, duration),\n ...(reverse\n ? { transitionEnd: transitionEnd?.exit, x: offsetX, y: offsetY }\n : { transitionEnd: { x: offsetX, y: offsetY, ...transitionEnd?.exit } }),\n ...exit,\n }),\n initial: ({\n delay,\n duration,\n initial,\n offsetX,\n offsetY,\n transition,\n transitionEnd,\n }) => ({\n opacity: 0,\n transition: transitionExit(transition?.exit)(delay, duration),\n transitionEnd: transitionEnd?.exit,\n x: offsetX,\n y: offsetY,\n ...initial,\n }),\n} satisfies MotionTransitionVariants\n\nexport const slideFadeProps = {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants,\n}\n\ninterface SlideFadeOptions {\n /**\n * The offset on the horizontal or `x` axis.\n *\n * @default 0\n */\n offsetX?: Token<number | string>\n /**\n * The offset on the vertical or `y` axis.\n *\n * @default 8\n */\n offsetY?: Token<number | string>\n /**\n * If `true`, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out.\n *\n * @default true\n */\n reverse?: boolean\n}\n\nexport interface SlideFadeProps\n extends WithTransitionProps<MotionProps>,\n SlideFadeOptions,\n ThemeProps<\"SlideFade\"> {}\n\n/**\n * `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position.\n *\n * @see Docs https://yamada-ui.com/components/transitions/slide-fade\n */\nexport const SlideFade = motionForwardRef<SlideFadeProps, \"div\">(\n (props, ref) => {\n const [style, mergedProps] = useComponentStyle(\"SlideFade\", props)\n const {\n className,\n delay,\n duration,\n isOpen,\n offsetX: _offsetX,\n offsetY: _offsetY,\n open = isOpen,\n reverse,\n transition,\n transitionEnd,\n unmountOnExit,\n ...rest\n } = omitThemeProps(mergedProps)\n const animate = open || unmountOnExit ? \"enter\" : \"exit\"\n const offsetX = useValue(_offsetX)\n const offsetY = useValue(_offsetY)\n const custom = {\n delay,\n duration,\n offsetX,\n offsetY,\n reverse,\n transition,\n transitionEnd,\n }\n const resolvedOpen = unmountOnExit ? open && unmountOnExit : true\n\n return (\n <AnimatePresence custom={custom}>\n {resolvedOpen ? (\n <motion.div\n ref={ref}\n className={cx(\"ui-slide-fade\", className)}\n custom={custom}\n {...slideFadeProps}\n animate={animate}\n __css={style}\n {...rest}\n />\n ) : null}\n </AnimatePresence>\n )\n },\n)\n\nSlideFade.displayName = \"SlideFade\"\nSlideFade.__ui__ = \"SlideFade\"\n"],"mappings":";;;AAOA,SAAS,gBAAgB,yBAAyB;AAClD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAsHT;AApHV,IAAM,WAA2B;AAAA,EAC/B,OAAO,CAAC,EAAE,OAAO,UAAU,OAAO,YAAY,cAAc,IAAI,CAAC,OAAO;AAAA,IACtE,SAAS;AAAA,IACT,YAAY,gBAAgB,yCAAY,KAAK,EAAE,OAAO,QAAQ;AAAA,IAC9D,eAAe,+CAAe;AAAA,IAC9B,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,EACA,MAAM,CAAC;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO;AAAA,IACV,SAAS;AAAA,IACT,YAAY,eAAe,yCAAY,IAAI,EAAE,OAAO,QAAQ;AAAA,IAC5D,GAAI,UACA,EAAE,eAAe,+CAAe,MAAM,GAAG,SAAS,GAAG,QAAQ,IAC7D,EAAE,eAAe,EAAE,GAAG,SAAS,GAAG,SAAS,GAAG,+CAAe,KAAK,EAAE;AAAA,IACxE,GAAG;AAAA,EACL;AAAA,EACA,SAAS,CAAC;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY,eAAe,yCAAY,IAAI,EAAE,OAAO,QAAQ;AAAA,IAC5D,eAAe,+CAAe;AAAA,IAC9B,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;AAEO,IAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT;AACF;AAiCO,IAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,OAAO,WAAW,IAAI,kBAAkB,aAAa,KAAK;AACjE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAC9B,UAAM,UAAU,QAAQ,gBAAgB,UAAU;AAClD,UAAM,UAAU,SAAS,QAAQ;AACjC,UAAM,UAAU,SAAS,QAAQ;AACjC,UAAM,SAAS;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,UAAM,eAAe,gBAAgB,QAAQ,gBAAgB;AAE7D,WACE,oBAAC,mBAAgB,QACd,yBACC;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC;AAAA,QACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACxC;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,IACE,MACN;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;","names":[]}