@lobehub/ui/es/base-ui/Drawer/Drawer.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"Drawer.mjs","names":[],"sources":["../../../src/base-ui/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport type { CSSProperties } from 'react';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport {\n  DrawerBackdrop,\n  DrawerContent,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPopup,\n  DrawerPortal,\n  DrawerRoot,\n  type DrawerRootProps,\n  DrawerTitle,\n} from './atoms';\nimport {\n  DEFAULT_CONTAINER_MAX_WIDTH,\n  DEFAULT_DRAWER_HEIGHT,\n  DEFAULT_DRAWER_WIDTH,\n  DEFAULT_PUSH_DISTANCE,\n  DEFAULT_SIDEBAR_WIDTH,\n} from './constants';\nimport { DrawerPushProvider, useDrawerPush } from './DrawerPushContext';\nimport { styles } from './style';\nimport type { DrawerProps, DrawerPush } from './type';\n\nconst resolvePushDistance = (push: DrawerPush) => {\n  if (push === false) return 0;\n  if (push === true) return DEFAULT_PUSH_DISTANCE;\n  return push.distance ?? DEFAULT_PUSH_DISTANCE;\n};\n\nconst FULL_SIZES = new Set(['100%', '100dvh', '100dvw', '100vh', '100vw']);\n\nconst Drawer = memo<DrawerProps>(\n  ({\n    open,\n    placement = 'right',\n    width,\n    height,\n    mask = true,\n    maskClosable = true,\n    keyboard = true,\n    closable = true,\n    closeIcon,\n    extra,\n    title,\n    footer,\n    noHeader,\n    sidebar,\n    sidebarWidth = DEFAULT_SIDEBAR_WIDTH,\n    containerMaxWidth = DEFAULT_CONTAINER_MAX_WIDTH,\n    push = true,\n    zIndex,\n    getContainer,\n    className,\n    classNames,\n    style,\n    styles: semanticStyles,\n    afterOpenChange,\n    onClose,\n    children,\n  }) => {\n    const isOpen = open ?? false;\n    const { childValue, pushed } = useDrawerPush(isOpen);\n    const pushOffset = pushed ? resolvePushDistance(push) : 0;\n\n    const handleOpenChange = useCallback<NonNullable<DrawerRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (nextOpen || !isOpen) return;\n        if (!keyboard && eventDetails.reason === 'escape-key') return;\n        if (!maskClosable && eventDetails.reason === 'outside-press') return;\n        onClose?.();\n      },\n      [isOpen, keyboard, maskClosable, onClose],\n    );\n\n    const handleExitComplete = useCallback(() => afterOpenChange?.(false), [afterOpenChange]);\n    const handleAnimationComplete = useCallback(() => {\n      if (isOpen) afterOpenChange?.(true);\n    }, [isOpen, afterOpenChange]);\n\n    const isHorizontal = placement === 'left' || placement === 'right';\n    const resolvedWidth = isHorizontal ? (width ?? DEFAULT_DRAWER_WIDTH) : width;\n    const resolvedHeight = isHorizontal ? height : (height ?? DEFAULT_DRAWER_HEIGHT);\n\n    const isFlush = FULL_SIZES.has(String(isHorizontal ? resolvedWidth : resolvedHeight));\n    const surfaceWeightClass = (() => {\n      if (isFlush) return undefined;\n      if (pushed) return styles.panelRecessed;\n      return mask ? undefined : styles.panelBoosted;\n    })();\n\n    const showTitle = title !== undefined && title !== null;\n    const showHeader = !noHeader && (showTitle || closable || !!extra);\n    const hasSidebar = !!sidebar;\n\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({ maxWidth: containerMaxWidth }),\n      [containerMaxWidth],\n    );\n\n    const closeNode = closable && (\n      <button\n        aria-label=\"Close\"\n        className={cx(styles.close, classNames?.close)}\n        style={semanticStyles?.close}\n        type=\"button\"\n        onClick={onClose}\n      >\n        {closeIcon ?? <X size={16} />}\n      </button>\n    );\n\n    const extraNode = (extra || closeNode) && (\n      <div\n        className={cx(styles.extra, !showHeader && styles.extraFloating, classNames?.extra)}\n        style={semanticStyles?.extra}\n      >\n        {extra}\n        {closeNode}\n      </div>\n    );\n\n    const bodyNode = hasSidebar ? (\n      <>\n        <div\n          className={cx(styles.sidebar, classNames?.sidebar)}\n          style={{ width: sidebarWidth, ...semanticStyles?.sidebar }}\n        >\n          {sidebar}\n        </div>\n        <div\n          className={cx(styles.sidebarContent, classNames?.sidebarContent)}\n          style={semanticStyles?.sidebarContent}\n        >\n          {children}\n        </div>\n      </>\n    ) : (\n      children\n    );\n\n    const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n    return (\n      <DrawerRoot\n        modal={mask}\n        open={isOpen}\n        zIndex={zIndex}\n        onExitComplete={handleExitComplete}\n        onOpenChange={handleOpenChange}\n      >\n        <DrawerPortal container={container}>\n          {mask && (\n            <DrawerBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <DrawerPopup\n            className={classNames?.popup}\n            flush={isFlush}\n            height={resolvedHeight}\n            motionProps={{ onAnimationComplete: handleAnimationComplete }}\n            panelClassName={cx(surfaceWeightClass, className, classNames?.panel)}\n            panelStyle={{ ...style, ...semanticStyles?.panel }}\n            placement={placement}\n            popupStyle={semanticStyles?.popup}\n            pushOffset={pushOffset}\n            width={resolvedWidth}\n          >\n            <DrawerPushProvider value={childValue}>\n              {showHeader ? (\n                <DrawerHeader className={classNames?.header} style={semanticStyles?.header}>\n                  <div className={styles.containerInner} style={containerStyle}>\n                    {showTitle ? (\n                      <DrawerTitle className={classNames?.title} style={semanticStyles?.title}>\n                        {title}\n                      </DrawerTitle>\n                    ) : (\n                      <span />\n                    )}\n                    {extraNode}\n                  </div>\n                </DrawerHeader>\n              ) : (\n                extraNode\n              )}\n              <DrawerContent\n                className={cx(hasSidebar && styles.contentSidebar, classNames?.content)}\n                style={semanticStyles?.content}\n              >\n                <div\n                  style={{ ...containerStyle, ...semanticStyles?.bodyContent }}\n                  className={cx(\n                    styles.bodyContent,\n                    hasSidebar && styles.bodyContentSidebar,\n                    classNames?.bodyContent,\n                  )}\n                >\n                  {bodyNode}\n                </div>\n              </DrawerContent>\n              {footer && (\n                <DrawerFooter className={classNames?.footer} style={semanticStyles?.footer}>\n                  <div\n                    className={cx(styles.containerInner, styles.containerInnerFooter)}\n                    style={containerStyle}\n                  >\n                    {footer}\n                  </div>\n                </DrawerFooter>\n              )}\n            </DrawerPushProvider>\n          </DrawerPopup>\n        </DrawerPortal>\n      </DrawerRoot>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}