kibin/fiberops-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(254): modal scrollable with sticky footer

Browse Source
This commit is contained in:
kibin
2026-04-01 07:44:53 +00:00
parent e582eb1693
commit 7de6d899f1
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ui/Modal.tsx
View File

@@ -9,10 +9,11 @@ interface ModalProps {
onClose: () => void; onClose: () => void;
title: string; title: string;
children: React.ReactNode; children: React.ReactNode;
footer?: React.ReactNode;
className?: string; className?: string;
} }
export function Modal({ isOpen, onClose, title, children, className }: ModalProps) { export function Modal({ isOpen, onClose, title, children, footer, className }: ModalProps) {
const overlayRef = useRef<HTMLDivElement>(null); const overlayRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@@ -31,8 +32,8 @@ export function Modal({ isOpen, onClose, title, children, className }: ModalProp
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
onClick={(e) => e.target === overlayRef.current && onClose()} onClick={(e) => e.target === overlayRef.current && onClose()}
> >
<div className={cn("w-full max-w-lg rounded-xl bg-white shadow-xl", className)}> <div className={cn("w-full max-w-lg rounded-xl bg-white shadow-xl flex flex-col max-h-[90vh]", className)}>
<div className="flex items-center justify-between border-b border-gray-100 px-6 py-4"> <div className="flex items-center justify-between border-b border-gray-100 px-6 py-4 flex-shrink-0">
<h3 className="text-base font-semibold text-gray-900">{title}</h3> <h3 className="text-base font-semibold text-gray-900">{title}</h3>
<button <button
onClick={onClose} onClick={onClose}
@@ -41,7 +42,12 @@ export function Modal({ isOpen, onClose, title, children, className }: ModalProp
<X className="h-5 w-5" /> <X className="h-5 w-5" />
</button> </button>
</div> </div>
<div className="px-6 py-4">{children}</div> <div className="px-6 py-4 overflow-y-auto flex-1">{children}</div>
{footer && (
<div className="flex items-center justify-end gap-2 border-t border-gray-100 px-6 py-3 flex-shrink-0">
{footer}
</div>
)}
</div> </div>
</div> </div>
); );