selfrelease
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { ReactNode, useEffect, useState } from 'react'
|
|
import { X } from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
|
|
interface ModalProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
title?: string
|
|
children: ReactNode
|
|
className?: string
|
|
size?: 'sm' | 'md' | 'lg' | 'xl'
|
|
}
|
|
|
|
export default function Modal({ open, onClose, title, children, className, size = 'md' }: ModalProps) {
|
|
const [show, setShow] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
document.body.style.overflow = 'hidden'
|
|
requestAnimationFrame(() => setShow(true))
|
|
} else {
|
|
document.body.style.overflow = ''
|
|
setShow(false)
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = ''
|
|
}
|
|
}, [open])
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div
|
|
className={clsx('fixed inset-0 bg-black/40 transition-opacity duration-200', show ? 'opacity-100' : 'opacity-0')}
|
|
onClick={onClose}
|
|
/>
|
|
<div
|
|
className={clsx(
|
|
'relative bg-white rounded-lg shadow-xl w-full max-h-[90vh] overflow-y-auto transition-all duration-200',
|
|
show ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
|
|
{
|
|
'max-w-xl': size === 'sm',
|
|
'max-w-2xl': size === 'md',
|
|
'max-w-3xl': size === 'lg',
|
|
'max-w-6xl': size === 'xl',
|
|
},
|
|
className,
|
|
)}>
|
|
{title && (
|
|
<div className="flex items-center justify-between px-5 py-3 border-b border-gray-200">
|
|
<h3 className="font-medium text-gray-900 text-base">{title}</h3>
|
|
<button onClick={onClose} className="text-gray-500 hover:text-gray-700 p-1 rounded-md hover:bg-gray-100 transition-colors" aria-label="关闭">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
<div className="p-5">{children}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|