@yamada-ui/modal
Version:
Yamada UI modal component
1 lines • 6.57 kB
Source Map (JSON)
{"version":3,"sources":["../src/drawer.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport type { SlideProps } from \"@yamada-ui/transitions\"\nimport type { ModalProps } from \"./modal\"\nimport { omitThemeProps, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { motionForwardRef } from \"@yamada-ui/motion\"\nimport { findChildren, getValidChildren } from \"@yamada-ui/utils\"\nimport { DrawerContent } from \"./drawer-content\"\nimport { DrawerOverlay } from \"./drawer-overlay\"\nimport { Modal } from \"./modal\"\nimport { DrawerProvider } from \"./modal-context\"\n\ninterface DrawerOptions {\n /**\n * If `true`, then the drawer will close on drag.\n *\n * @default false\n */\n closeOnDrag?: boolean\n /**\n * Applies constraints on the permitted draggable area.\n *\n * @default 0\n */\n dragConstraints?: number\n /**\n * The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.\n *\n * @default 0.1\n */\n dragElastic?: number\n /**\n * Offset from being dragged to closing.\n *\n * @default 80\n */\n dragOffset?: number\n /**\n * Velocity of the drag that triggers close.\n *\n * @default 100\n */\n dragVelocity?: number\n /**\n * If `true` and drawer's placement is `top` or `bottom`, the drawer will occupy the viewport height (100dvh).\n */\n fullHeight?: boolean\n /**\n * If `true` and drawer's placement is `top` or `bottom`, the drawer will occupy the viewport height (100dvh).\n *\n * @deprecated Use `fullHeight` instead.\n */\n isFullHeight?: boolean\n /**\n * The placement of the drawer.\n *\n * @default 'right'\n */\n placement?: SlideProps[\"placement\"]\n /**\n * If `true`, display the drag bar when `closeOnDrag` is `true`.\n *\n * @default true\n */\n withDragBar?: boolean\n /**\n * Props for the blank area when `closeOnDrag` is `true`.\n */\n blankForDragProps?: CSSUIObject\n}\n\nexport interface DrawerProps\n extends Omit<\n ModalProps,\n | \"animation\"\n | \"dragConstraints\"\n | \"dragElastic\"\n | \"outside\"\n | \"placement\"\n | \"scrollBehavior\"\n | keyof ThemeProps\n >,\n ThemeProps<\"Drawer\">,\n DrawerOptions {}\n\n/**\n * `Drawer` is a component for a panel that appears from the edge of the screen.\n *\n * @see Docs https://yamada-ui.com/components/overlay/drawer\n */\nexport const Drawer = motionForwardRef<DrawerProps, \"div\">(\n (\n {\n size,\n closeOnDrag = false,\n isFullHeight,\n fullHeight = isFullHeight,\n placement = \"right\",\n ...props\n },\n ref,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Drawer\", {\n size,\n closeOnDrag,\n fullHeight,\n placement,\n ...props,\n })\n const {\n allowPinchZoom,\n autoFocus,\n blockScrollOnMount,\n children,\n closeOnEsc,\n closeOnOverlay,\n dragConstraints = 0,\n dragElastic = 0.1,\n dragOffset = 80,\n dragVelocity = 100,\n duration = { enter: 0.4, exit: 0.3 },\n finalFocusRef,\n initialFocusRef,\n isOpen,\n lockFocusAcrossFrames,\n open = isOpen,\n restoreFocus,\n withCloseButton = !closeOnDrag,\n withDragBar = true,\n withOverlay = true,\n blankForDragProps,\n containerProps,\n portalProps,\n onClose,\n onCloseComplete,\n onEsc,\n onOverlayClick,\n ...rest\n } = omitThemeProps(mergedProps, [\"fullHeight\"])\n const validChildren = getValidChildren(children)\n const [customDrawerOverlay, ...cloneChildren] = findChildren(\n validChildren,\n DrawerOverlay,\n )\n\n return (\n <DrawerProvider value={styles}>\n <Modal\n ref={ref}\n {...{\n allowPinchZoom,\n autoFocus,\n blockScrollOnMount,\n closeOnEsc,\n closeOnOverlay,\n duration,\n finalFocusRef,\n initialFocusRef,\n isOpen,\n lockFocusAcrossFrames,\n open,\n restoreFocus,\n withCloseButton: false,\n withOverlay: false,\n containerProps,\n portalProps,\n onClose,\n onCloseComplete,\n onEsc,\n onOverlayClick,\n }}\n >\n {customDrawerOverlay ?? (withOverlay ? <DrawerOverlay /> : null)}\n\n <DrawerContent\n {...{\n dragConstraints,\n dragElastic,\n dragOffset,\n dragVelocity,\n withCloseButton,\n withDragBar,\n blankForDragProps,\n ...rest,\n closeOnDrag,\n placement,\n }}\n >\n {cloneChildren}\n </DrawerContent>\n </Modal>\n </DrawerProvider>\n )\n },\n)\n\nDrawer.displayName = \"Drawer\"\nDrawer.__ui__ = \"Drawer\"\n"],"mappings":";;;;;;;;;;;;;;;AAGA,SAAS,gBAAgB,8BAA8B;AACvD,SAAS,wBAAwB;AACjC,SAAS,cAAc,wBAAwB;AA6IvC,SAyByC,KAzBzC;AAzDD,IAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,UAAU;AAAA,MAC7D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB,cAAc;AAAA,MACd,aAAa;AAAA,MACb,eAAe;AAAA,MACf,WAAW,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,kBAAkB,CAAC;AAAA,MACnB,cAAc;AAAA,MACd,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,aAAa,CAAC,YAAY,CAAC;AAC9C,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,CAAC,qBAAqB,GAAG,aAAa,IAAI;AAAA,MAC9C;AAAA,MACA;AAAA,IACF;AAEA,WACE,oBAAC,kBAAe,OAAO,QACrB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA,8DAAwB,cAAc,oBAAC,iBAAc,IAAK;AAAA,UAE3D;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,GAAG;AAAA,gBACH;AAAA,gBACA;AAAA,cACF;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AACrB,OAAO,SAAS;","names":[]}