45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import Button from "./Button";
|
|
|
|
export type ConfirmDialogTone = "default" | "danger";
|
|
|
|
export type ConfirmDialogProps = {
|
|
open: boolean;
|
|
title: string;
|
|
message: string;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
tone?: ConfirmDialogTone;
|
|
busy?: boolean;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
};
|
|
|
|
export default function ConfirmDialog({
|
|
open,
|
|
title,
|
|
message,
|
|
confirmLabel = "Confirm",
|
|
cancelLabel = "Cancel",
|
|
tone = "default",
|
|
busy = false,
|
|
onConfirm,
|
|
onCancel
|
|
}: ConfirmDialogProps) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className="confirm-backdrop" role="presentation" onMouseDown={(event) => {
|
|
if (event.target === event.currentTarget && !busy) onCancel();
|
|
}}>
|
|
<section className="confirm-dialog" role="alertdialog" aria-modal="true" aria-labelledby="confirm-dialog-title" aria-describedby="confirm-dialog-message">
|
|
<h2 id="confirm-dialog-title">{title}</h2>
|
|
<p id="confirm-dialog-message">{message}</p>
|
|
<div className="button-row compact-actions confirm-dialog-actions">
|
|
<Button onClick={onCancel} disabled={busy}>{cancelLabel}</Button>
|
|
<Button variant={tone === "danger" ? "danger" : "primary"} onClick={onConfirm} disabled={busy}>{busy ? "Working…" : confirmLabel}</Button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|