1 line
4.5 KiB
Plaintext
1 line
4.5 KiB
Plaintext
{"version":3,"sources":["../src/slide-fade.tsx"],"sourcesContent":["import { cx } from \"@chakra-ui/shared-utils\"\nimport {\n AnimatePresence,\n HTMLMotionProps,\n motion,\n Variants as _Variants,\n} from \"framer-motion\"\nimport { forwardRef } from \"react\"\nimport {\n TRANSITION_DEFAULTS,\n Variants,\n withDelay,\n WithTransitionConfig,\n} from \"./transition-utils\"\n\ninterface SlideFadeOptions {\n /**\n * The offset on the horizontal or `x` axis\n * @default 0\n */\n offsetX?: string | number\n /**\n * The offset on the vertical or `y` axis\n * @default 8\n */\n offsetY?: string | number\n /**\n * If `true`, the element will be transitioned back to the offset when it leaves.\n * Otherwise, it'll only fade out\n * @default true\n */\n reverse?: boolean\n}\n\nconst variants: Variants<SlideFadeOptions> = {\n initial: ({ offsetX, offsetY, transition, transitionEnd, delay }) => ({\n opacity: 0,\n x: offsetX,\n y: offsetY,\n transition:\n transition?.exit ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),\n transitionEnd: transitionEnd?.exit,\n }),\n enter: ({ transition, transitionEnd, delay }) => ({\n opacity: 1,\n x: 0,\n y: 0,\n transition:\n transition?.enter ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),\n transitionEnd: transitionEnd?.enter,\n }),\n exit: ({ offsetY, offsetX, transition, transitionEnd, reverse, delay }) => {\n const offset = { x: offsetX, y: offsetY }\n return {\n opacity: 0,\n transition:\n transition?.exit ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),\n ...(reverse\n ? { ...offset, transitionEnd: transitionEnd?.exit }\n : { transitionEnd: { ...offset, ...transitionEnd?.exit } }),\n }\n },\n}\n\nexport const slideFadeConfig: HTMLMotionProps<\"div\"> = {\n initial: \"initial\",\n animate: \"enter\",\n exit: \"exit\",\n variants: variants as _Variants,\n}\n\nexport interface SlideFadeProps\n extends SlideFadeOptions,\n WithTransitionConfig<HTMLMotionProps<\"div\">> {}\n\nexport const SlideFade = forwardRef<HTMLDivElement, SlideFadeProps>(\n function SlideFade(props, ref) {\n const {\n unmountOnExit,\n in: isOpen,\n reverse = true,\n className,\n offsetX = 0,\n offsetY = 8,\n transition,\n transitionEnd,\n delay,\n ...rest\n } = props\n\n const show = unmountOnExit ? isOpen && unmountOnExit : true\n const animate = isOpen || unmountOnExit ? \"enter\" : \"exit\"\n\n const custom = {\n offsetX,\n offsetY,\n reverse,\n transition,\n transitionEnd,\n delay,\n }\n\n return (\n <AnimatePresence custom={custom}>\n {show && (\n <motion.div\n ref={ref}\n className={cx(\"chakra-offset-slide\", className)}\n custom={custom}\n {...slideFadeConfig}\n animate={animate}\n {...rest}\n />\n )}\n </AnimatePresence>\n )\n },\n)\n\nSlideFade.displayName = \"SlideFade\"\n"],"mappings":";;;;;;;AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EAEA;AAAA,OAEK;AACP,SAAS,kBAAkB;AAkGjB;AAvEV,IAAM,WAAuC;AAAA,EAC3C,SAAS,CAAC,EAAE,SAAS,SAAS,YAAY,eAAe,MAAM,MAAG;AAnCpE;AAmCwE;AAAA,MACpE,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,aACE,8CAAY,SAAZ,YAAoB,UAAU,KAAK,oBAAoB,MAAM,KAAK;AAAA,MACpE,eAAe,+CAAe;AAAA,IAChC;AAAA;AAAA,EACA,OAAO,CAAC,EAAE,YAAY,eAAe,MAAM,MAAG;AA3ChD;AA2CoD;AAAA,MAChD,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,aACE,8CAAY,UAAZ,YAAqB,UAAU,MAAM,oBAAoB,OAAO,KAAK;AAAA,MACvE,eAAe,+CAAe;AAAA,IAChC;AAAA;AAAA,EACA,MAAM,CAAC,EAAE,SAAS,SAAS,YAAY,eAAe,SAAS,MAAM,MAAM;AAnD7E;AAoDI,UAAM,SAAS,EAAE,GAAG,SAAS,GAAG,QAAQ;AACxC,WAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE,8CAAY,SAAZ,YAAoB,UAAU,KAAK,oBAAoB,MAAM,KAAK;AAAA,MACpE,GAAI,UACA,EAAE,GAAG,QAAQ,eAAe,+CAAe,KAAK,IAChD,EAAE,eAAe,EAAE,GAAG,QAAQ,GAAG,+CAAe,KAAK,EAAE;AAAA,IAC7D;AAAA,EACF;AACF;AAEO,IAAM,kBAA0C;AAAA,EACrD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN;AACF;AAMO,IAAM,YAAY;AAAA,EACvB,SAASA,WAAU,OAAO,KAAK;AAC7B,UAAM;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,OAAO,gBAAgB,UAAU,gBAAgB;AACvD,UAAM,UAAU,UAAU,gBAAgB,UAAU;AAEpD,UAAM,SAAS;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,WACE,oBAAC,mBAAgB,QACd,kBACC;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC;AAAA,QACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACC,GAAG;AAAA;AAAA,IACN,GAEJ;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":["SlideFade"]} |