UNPKG

@yamada-ui/modal

Version:

Yamada UI modal component

1 lines 4.81 kB
{"version":3,"sources":["../src/modal-content.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { MotionProps, MotionTransitionProps } from \"@yamada-ui/motion\"\nimport type { PropsWithChildren } from \"react\"\nimport type { ModalProps } from \"./modal\"\nimport { motion, motionForwardRef } from \"@yamada-ui/motion\"\nimport { scaleFadeProps, slideFadeProps } from \"@yamada-ui/transitions\"\nimport { cx, findChildren, getValidChildren } from \"@yamada-ui/utils\"\nimport { DialogCloseButton } from \"./dialog-close-button\"\nimport { ModalCloseButton } from \"./modal-close-button\"\nimport { useModal } from \"./modal-context\"\n\nconst getModalContentProps = (\n animation: ModalProps[\"animation\"] = \"scale\",\n duration?: MotionTransitionProps[\"duration\"],\n) => {\n switch (animation) {\n case \"scale\":\n return {\n ...scaleFadeProps,\n custom: { duration, reverse: true, scale: 0.95 },\n }\n case \"top\":\n return {\n ...slideFadeProps,\n custom: { duration, offsetY: -16, reverse: true },\n }\n case \"right\":\n return {\n ...slideFadeProps,\n custom: { duration, offsetX: 16, reverse: true },\n }\n case \"left\":\n return {\n ...slideFadeProps,\n custom: { duration, offsetX: -16, reverse: true },\n }\n case \"bottom\":\n return {\n ...slideFadeProps,\n custom: { duration, offsetY: 16, reverse: true },\n }\n }\n}\n\nexport interface ModalContentProps\n extends Omit<\n MotionProps<\"section\">,\n \"animation\" | \"children\" | \"scrollBehavior\" | \"transition\"\n >,\n PropsWithChildren {}\n\nexport const ModalContent = motionForwardRef<ModalContentProps, \"section\">(\n ({ className, children, __css, ...rest }, ref) => {\n const {\n animation,\n bodyRef,\n duration,\n headerRef,\n scrollBehavior,\n styles,\n withCloseButton,\n onClose,\n } = useModal()\n\n const validChildren = getValidChildren(children)\n\n const [customModalCloseButton, ...cloneChildren] = findChildren(\n validChildren,\n ModalCloseButton,\n DialogCloseButton,\n )\n\n const props =\n animation !== \"none\" ? getModalContentProps(animation, duration) : {}\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n maxH: \"100%\",\n outline: 0,\n overflow: scrollBehavior === \"inside\" ? \"hidden\" : \"auto\",\n position: \"relative\",\n ...(__css ? __css : styles.container),\n }\n\n return (\n <motion.section\n ref={ref}\n className={cx(\"ui-modal\", className)}\n aria-describedby={bodyRef.current?.id}\n aria-labelledby={headerRef.current?.id}\n aria-modal=\"true\"\n role=\"dialog\"\n tabIndex={-1}\n __css={css}\n {...props}\n {...rest}\n >\n {customModalCloseButton ??\n (withCloseButton && onClose ? <ModalCloseButton /> : null)}\n\n {cloneChildren}\n </motion.section>\n )\n },\n)\n\nModalContent.displayName = \"ModalContent\"\nModalContent.__ui__ = \"ModalContent\"\n"],"mappings":";;;;;;;;;;;;AAIA,SAAS,QAAQ,wBAAwB;AACzC,SAAS,gBAAgB,sBAAsB;AAC/C,SAAS,IAAI,cAAc,wBAAwB;AAgF7C,SAakC,KAblC;AA3EN,IAAM,uBAAuB,CAC3B,YAAqC,SACrC,aACG;AACH,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MACjD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,UAAU,SAAS,KAAK,SAAS,KAAK;AAAA,MAClD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,UAAU,SAAS,IAAI,SAAS,KAAK;AAAA,MACjD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,UAAU,SAAS,KAAK,SAAS,KAAK;AAAA,MAClD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,UAAU,SAAS,IAAI,SAAS,KAAK;AAAA,MACjD;AAAA,EACJ;AACF;AASO,IAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,UAAU,OAAO,GAAG,KAAK,GAAG,QAAQ;AApDpD;AAqDI,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,SAAS;AAEb,UAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,CAAC,wBAAwB,GAAG,aAAa,IAAI;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,QACJ,cAAc,SAAS,qBAAqB,WAAW,QAAQ,IAAI,CAAC;AAEtE,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,eAAe;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,mBAAmB,WAAW,WAAW;AAAA,MACnD,UAAU;AAAA,MACV,GAAI,QAAQ,QAAQ,OAAO;AAAA,IAC7B;AAEA,WACE;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC;AAAA,QACA,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC,qBAAkB,aAAQ,YAAR,mBAAiB;AAAA,QACnC,oBAAiB,eAAU,YAAV,mBAAmB;AAAA,QACpC,cAAW;AAAA,QACX,MAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,oEACE,mBAAmB,UAAU,oBAAC,oBAAiB,IAAK;AAAA,UAEtD;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":[]}