freedakgmail
a2e9ba55c2
P0: 福利批量参保/离职证明下载防乱码/考勤模板合并Sheet/补卡修改/附件在线查看删除 P1: 分页pageSize修复/离职导出筛选/撤回删除草稿/加班费自动计算/考勤加班汇总/证据链异常详情/制度催办/模板导入Word/社保封顶保底/校验字段提示/职务字段/社保费用明细/弹窗防误关/身份证查重/证明员工下拉/培训批量 P2: 离职流程去重/社保基数覆盖输入/薪税入口改名/添加员工引导/绩效模板清理
64 lines
2.0 KiB
TypeScript
64 lines
2.0 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'
|
|
closeOnOverlayClick?: boolean
|
|
}
|
|
|
|
export default function Modal({ open, onClose, title, children, className, size = 'md', closeOnOverlayClick = true }: 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={closeOnOverlayClick ? onClose : undefined}
|
|
/>
|
|
<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>
|
|
)
|
|
}
|