NapCatQQ/napcat.webui/src/components/modal.tsx

import { Button } from '@heroui/button';
import {
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  Modal as NextUIModal,
  useDisclosure,
} from '@heroui/modal';
import React from 'react';

export interface ModalProps {
  content: React.ReactNode
  title?: React.ReactNode
  size?: React.ComponentProps<typeof NextUIModal>['size']
  scrollBehavior?: React.ComponentProps<typeof NextUIModal>['scrollBehavior']
  onClose?: () => void
  onConfirm?: () => void
  onCancel?: () => void
  backdrop?: 'opaque' | 'blur' | 'transparent'
  showCancel?: boolean
  dismissible?: boolean
  confirmText?: string
  cancelText?: string
}

const Modal: React.FC<ModalProps> = React.memo((props) => {
  const {
    backdrop = 'blur',
    title,
    content,
    showCancel = true,
    dismissible,
    confirmText = '确定',
    cancelText = '取消',
    onClose,
    onConfirm,
    onCancel,
    ...rest
  } = props;
  const { onClose: onNativeClose } = useDisclosure();

  return (
    <NextUIModal
      defaultOpen
      backdrop={backdrop}
      isDismissable={dismissible}
      onClose={() => {
        onClose?.();
        onNativeClose();
      }}
      classNames={{
        backdrop: 'z-[99]',
        wrapper: 'z-[99]',
      }}
      {...rest}
    >
      <ModalContent>
        {(nativeClose) => (
          <>
            {title && (
              <ModalHeader className='flex flex-col gap-1'>{title}</ModalHeader>
            )}
            <ModalBody className='break-all'>{content}</ModalBody>
            <ModalFooter>
              {showCancel && (
                <Button
                  color='primary'
                  variant='light'
                  onPress={() => {
                    onCancel?.();
                    nativeClose();
                  }}
                >
                  {cancelText}
                </Button>
              )}
              <Button
                color='primary'
                onPress={() => {
                  onConfirm?.();
                  nativeClose();
                }}
              >
                {confirmText}
              </Button>
            </ModalFooter>
          </>
        )}
      </ModalContent>
    </NextUIModal>
  );
});

Modal.displayName = 'Modal';

export default Modal;