Daniel Volz
6ff0ad2745
- Replace browser confirm() with ConfirmModal for delete confirmation - Add dedicated history entry for delete dialog so browser back dismisses it - Track unsaved-changes warning source to restore correct context on cancel - Add overlayClassName prop to ConfirmModal for nested z-index layering - Add .nested-confirm CSS class for proper modal stacking - Add i18n keys for delete confirmation dialog (EN + DE) Closes #202
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
// =============================================================================
|
||
// ConfirmModal Component - Simple confirmation dialog
|
||
// =============================================================================
|
||
|
||
import type { ReactNode } from "react";
|
||
|
||
export interface ConfirmModalProps {
|
||
title: string;
|
||
message: string | ReactNode;
|
||
confirmLabel: string;
|
||
cancelLabel: string;
|
||
onConfirm: () => void;
|
||
onCancel: () => void;
|
||
isLoading?: boolean;
|
||
confirmVariant?: "primary" | "danger" | "success";
|
||
overlayClassName?: string;
|
||
}
|
||
|
||
export function ConfirmModal({
|
||
title,
|
||
message,
|
||
confirmLabel,
|
||
cancelLabel,
|
||
onConfirm,
|
||
onCancel,
|
||
isLoading = false,
|
||
confirmVariant = "primary",
|
||
overlayClassName,
|
||
}: ConfirmModalProps) {
|
||
return (
|
||
<div className={`modal-overlay${overlayClassName ? ` ${overlayClassName}` : ""}`} onClick={onCancel}>
|
||
<div className="modal-content" onClick={(e) => e.stopPropagation()} style={{ maxWidth: "450px" }}>
|
||
<button className="modal-close" onClick={onCancel}>
|
||
×
|
||
</button>
|
||
<h2 style={{ marginBottom: "16px", paddingRight: "2rem" }}>{title}</h2>
|
||
<div style={{ marginBottom: "24px" }}>{typeof message === "string" ? <p>{message}</p> : message}</div>
|
||
<div className="modal-footer" style={{ padding: "1rem 0 0 0", borderTop: "none", justifyContent: "flex-end" }}>
|
||
<button type="button" className="ghost" onClick={onCancel} disabled={isLoading}>
|
||
{cancelLabel}
|
||
</button>
|
||
<button type="button" className={confirmVariant} onClick={onConfirm} disabled={isLoading}>
|
||
{confirmLabel}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|