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

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

{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\n\nimport { Button } from '../Button';\nimport {\n  ModalBackdrop,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\n\ninterface OkBtnProps {\n  confirmLoading?: boolean;\n  okButtonProps?: ModalComponentProps['okButtonProps'];\n  okText?: React.ReactNode;\n  onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n  const { onClick: userOnClick, ...restOk } = okButtonProps ?? {};\n  return (\n    <Button\n      loading={confirmLoading}\n      type=\"primary\"\n      {...restOk}\n      onClick={(e) => {\n        onOk(e as MouseEvent<HTMLButtonElement>);\n        userOnClick?.(e as never);\n      }}\n    >\n      {okText}\n    </Button>\n  );\n};\ninterface CancelBtnProps {\n  cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n  cancelText?: React.ReactNode;\n  onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n  const { onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n  return (\n    <Button\n      {...restCancel}\n      onClick={(e) => {\n        onCancel(e as MouseEvent<HTMLButtonElement>);\n        userOnClick?.(e as never);\n      }}\n    >\n      {cancelText}\n    </Button>\n  );\n};\n\nconst Modal = memo<ModalComponentProps>(\n  ({\n    open,\n    title,\n    children,\n    onOk,\n    onCancel,\n    okText = 'OK',\n    cancelText = 'Cancel',\n    okButtonProps,\n    cancelButtonProps,\n    confirmLoading,\n    footer,\n    width,\n    height,\n    maskClosable = true,\n    closable = true,\n    closeIcon,\n    className,\n    style,\n    classNames,\n    styles: semanticStyles,\n    zIndex,\n    afterClose,\n    afterOpenChange,\n    loading,\n    getContainer,\n    mask = true,\n    keyboard,\n    draggable = true,\n    allowFullscreen = false,\n  }) => {\n    const dragControls = useDragControls();\n    const constraintsRef = useRef<HTMLDivElement>(null);\n    const [isFullscreen, setIsFullscreen] = useState(false);\n    const [isDragging, setIsDragging] = useState(false);\n    const [isDenying, setIsDenying] = useState(false);\n    const denyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n    useEffect(() => () => clearTimeout(denyTimerRef.current), []);\n\n    const triggerDeny = useCallback(() => {\n      clearTimeout(denyTimerRef.current);\n      setIsDenying(true);\n      denyTimerRef.current = setTimeout(() => setIsDenying(false), 300);\n    }, []);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails: { reason: string }) => {\n        if (!open) return;\n        if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n        if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') {\n          triggerDeny();\n          return;\n        }\n        if (!nextOpen) {\n          onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n        }\n      },\n      [onCancel, keyboard, maskClosable, open, triggerDeny],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      setIsFullscreen(false);\n      afterClose?.();\n      afterOpenChange?.(false);\n    }, [afterClose, afterOpenChange]);\n\n    const handleAnimationComplete = useCallback(() => {\n      if (open) afterOpenChange?.(true);\n    }, [open, afterOpenChange]);\n\n    const handleDragStart = useCallback(\n      (e: PointerEvent) => {\n        if (draggable && !isFullscreen) {\n          dragControls.start(e);\n          setIsDragging(true);\n        }\n      },\n      [draggable, dragControls, isFullscreen],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      setIsDragging(false);\n    }, []);\n\n    const handleOk = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onOk?.(e);\n      },\n      [onOk],\n    );\n\n    const handleCancel = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onCancel?.(e);\n      },\n      [onCancel],\n    );\n\n    const footerNode = useMemo(() => {\n      if (footer === false || footer === null) return null;\n      const cancelBtnNode = (\n        <CancelBtn\n          cancelButtonProps={cancelButtonProps}\n          cancelText={cancelText}\n          onCancel={handleCancel}\n        />\n      );\n      const okBtnNode = (\n        <OkBtn\n          confirmLoading={confirmLoading}\n          okButtonProps={okButtonProps}\n          okText={okText}\n          onOk={handleOk}\n        />\n      );\n      const defaultFooter = (\n        <>\n          {cancelBtnNode}\n          {okBtnNode}\n        </>\n      );\n\n      if (typeof footer === 'function') {\n        const BoundCancelBtn: React.FC = () => cancelBtnNode;\n        const BoundOkBtn: React.FC = () => okBtnNode;\n        return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n      }\n\n      return footer ?? defaultFooter;\n    }, [\n      footer,\n      cancelButtonProps,\n      cancelText,\n      handleCancel,\n      confirmLoading,\n      okButtonProps,\n      okText,\n      handleOk,\n    ]);\n\n    const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n    const shouldDrag = draggable && !isFullscreen;\n    const dragProps = shouldDrag\n      ? {\n          drag: true as const,\n          dragConstraints: constraintsRef,\n          dragControls,\n          dragElastic: 0,\n          dragListener: false,\n          dragMomentum: false,\n          whileDrag: { cursor: 'grabbing' as const },\n        }\n      : {};\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n    const showHeader = showTitle || closable || allowFullscreen;\n\n    const hasHeight = height !== undefined;\n    const panelStyle: React.CSSProperties = {\n      ...(hasHeight && !isFullscreen ? { height } : {}),\n      ...style,\n    };\n\n    return (\n      <ModalRoot\n        open={open ?? false}\n        zIndex={zIndex}\n        onExitComplete={handleExitComplete}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && <ModalBackdrop className={classNames?.mask} style={semanticStyles?.mask} />}\n          <ModalPopup\n            className={classNames?.wrapper}\n            popupStyle={semanticStyles?.wrapper}\n            ref={constraintsRef}\n            style={panelStyle}\n            width={isFullscreen ? undefined : width}\n            motionProps={{\n              ...dragProps,\n              onAnimationComplete: handleAnimationComplete,\n            }}\n            panelClassName={cx(\n              className,\n              isFullscreen && styles.fullscreenPopupInner,\n              isDenying && styles.denyAnimation,\n            )}\n          >\n            {showHeader && (\n              <ModalHeader\n                className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n                style={{\n                  ...(isDragging ? { cursor: 'grabbing' } : {}),\n                  ...semanticStyles?.header,\n                }}\n                onPointerCancel={handleDragEnd}\n                onPointerDown={handleDragStart}\n                onPointerUp={handleDragEnd}\n              >\n                {showTitle ? (\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                ) : (\n                  <span />\n                )}\n                <div className={styles.headerActions} onPointerDown={stopPropagation}>\n                  {allowFullscreen && (\n                    <button\n                      aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n                      className={styles.fullscreenToggle}\n                      type=\"button\"\n                      onClick={() => setIsFullscreen((prev) => !prev)}\n                    >\n                      {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n                    </button>\n                  )}\n                  {closable && (\n                    <button\n                      aria-label=\"Close\"\n                      className={styles.closeInline}\n                      type=\"button\"\n                      onClick={handleCancel}\n                    >\n                      {closeIcon ?? <X size={16} />}\n                    </button>\n                  )}\n                </div>\n              </ModalHeader>\n            )}\n            <ModalContent\n              className={classNames?.body}\n              style={{\n                ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n                ...semanticStyles?.body,\n              }}\n            >\n              {loading ? (\n                <div\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    padding: '32px 0',\n                  }}\n                >\n                  <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n                </div>\n              ) : (\n                children\n              )}\n            </ModalContent>\n            {footerNode !== null && (\n              <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n                {footerNode}\n              </ModalFooter>\n            )}\n          </ModalPopup>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}