91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
|
|
interface ConfirmDialogProps {
|
|
title: string;
|
|
message: string;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
/** @deprecated Use variant instead */
|
|
danger?: boolean;
|
|
variant?: 'danger' | 'warning' | 'info';
|
|
}
|
|
|
|
const VARIANT_STYLES = {
|
|
danger: 'bg-red-600 hover:bg-red-700 focus:ring-red-500',
|
|
warning: 'bg-amber-500 hover:bg-amber-600 focus:ring-amber-400',
|
|
info: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500',
|
|
} as const;
|
|
|
|
export default function ConfirmDialog({
|
|
title,
|
|
message,
|
|
confirmLabel = 'Confirm',
|
|
cancelLabel = 'Cancel',
|
|
onConfirm,
|
|
onCancel,
|
|
danger = false,
|
|
variant,
|
|
}: ConfirmDialogProps) {
|
|
const confirmRef = useRef<HTMLButtonElement>(null);
|
|
|
|
// Resolve variant: explicit variant prop takes priority, then legacy danger boolean
|
|
const resolvedVariant = variant ?? (danger ? 'danger' : 'info');
|
|
|
|
useEffect(() => {
|
|
// Auto-focus the confirm button
|
|
confirmRef.current?.focus();
|
|
|
|
const handleKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
e.stopPropagation();
|
|
onCancel();
|
|
}
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
onConfirm();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKey);
|
|
return () => window.removeEventListener('keydown', handleKey);
|
|
}, [onCancel, onConfirm]);
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[9500] bg-black/50 flex items-center justify-center"
|
|
onClick={onCancel}
|
|
>
|
|
<div
|
|
className="bg-white dark:bg-dark-surface rounded-lg shadow-xl p-5 max-w-sm mx-4 border border-gray-200 dark:border-dark-border"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h3 className="text-base font-semibold text-gray-800 dark:text-dark-text mb-2">
|
|
{title}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-dark-muted mb-5">
|
|
{message}
|
|
</p>
|
|
<div className="flex gap-3 justify-end">
|
|
<button
|
|
onClick={onCancel}
|
|
className="px-4 py-2 text-sm rounded-md bg-gray-100 dark:bg-dark-border text-gray-700 dark:text-dark-text
|
|
hover:bg-gray-200 dark:hover:bg-dark-muted transition-colors"
|
|
>
|
|
{cancelLabel}
|
|
</button>
|
|
<button
|
|
ref={confirmRef}
|
|
onClick={onConfirm}
|
|
className={`px-4 py-2 text-sm rounded-md text-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2
|
|
${VARIANT_STYLES[resolvedVariant]}`}
|
|
>
|
|
{confirmLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|