105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
|
|
interface ConfirmModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
title: string;
|
|
message: string;
|
|
confirmLabel?: string;
|
|
danger?: boolean;
|
|
}
|
|
|
|
export default function ConfirmModal({
|
|
open,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmLabel = 'Bestätigen',
|
|
danger = false,
|
|
}: ConfirmModalProps) {
|
|
const cancelRef = useRef<HTMLButtonElement>(null);
|
|
const confirmRef = useRef<HTMLButtonElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
onClose();
|
|
}
|
|
|
|
if (e.key === 'Tab') {
|
|
if (e.shiftKey) {
|
|
if (document.activeElement === cancelRef.current) {
|
|
e.preventDefault();
|
|
confirmRef.current?.focus();
|
|
}
|
|
} else {
|
|
if (document.activeElement === confirmRef.current) {
|
|
e.preventDefault();
|
|
cancelRef.current?.focus();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
cancelRef.current?.focus();
|
|
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [open, onClose]);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="modal-title"
|
|
className="bg-white dark:bg-slate-900 w-full max-w-md rounded-lg shadow-xl overflow-hidden"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="p-6">
|
|
<h3
|
|
id="modal-title"
|
|
className="text-lg font-semibold text-slate-900 dark:text-white"
|
|
>
|
|
{title}
|
|
</h3>
|
|
<p className="mt-2 text-sm text-slate-600 dark:text-slate-400">
|
|
{message}
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-end gap-3 p-4 bg-slate-50 dark:bg-slate-800/50">
|
|
<button
|
|
ref={cancelRef}
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 dark:focus:ring-slate-500"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
ref={confirmRef}
|
|
onClick={() => {
|
|
onConfirm();
|
|
onClose();
|
|
}}
|
|
className={`px-4 py-2 text-sm font-medium text-white rounded-md transition-colors focus:outline-none focus:ring-2 ${
|
|
danger
|
|
? 'bg-red-600 hover:bg-red-700 focus:ring-red-400'
|
|
: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-400'
|
|
}`}
|
|
>
|
|
{confirmLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |