89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import { useState, type ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { ConfirmFooter } from "@/components/ConfirmFooter";
|
|
import { MessageLine } from "@/components/MessageLine";
|
|
import { humanizeError } from "@/lib/api";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
title: string;
|
|
description?: ReactNode;
|
|
confirmLabel: string;
|
|
/** Defaults to "Cancel"; name what dismissing keeps when the action is itself a cancel. */
|
|
cancelLabel?: string;
|
|
confirmVariant?: "destructive" | "default";
|
|
/** Runs the action. The dialog closes when it resolves; a rejection is shown in
|
|
* the dialog, which stays open so the action can be retried or dismissed. */
|
|
onConfirm: () => Promise<void>;
|
|
/** Shown under the description, for what a sentence cannot hold (a list). */
|
|
children?: ReactNode;
|
|
}
|
|
|
|
// ConfirmDialog asks before an action that cannot be taken back, in the panel's
|
|
// own dialog rather than window.confirm (which some embedded browsers block, so
|
|
// the action could never be confirmed there). The failure stays next to the
|
|
// buttons that caused it.
|
|
export function ConfirmDialog({
|
|
open,
|
|
onOpenChange,
|
|
title,
|
|
description,
|
|
confirmLabel,
|
|
cancelLabel,
|
|
confirmVariant = "destructive",
|
|
onConfirm,
|
|
children,
|
|
}: Props) {
|
|
const { t } = useTranslation("common");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
function setOpen(next: boolean) {
|
|
if (busy) return;
|
|
if (!next) setError(null);
|
|
onOpenChange(next);
|
|
}
|
|
|
|
async function confirm() {
|
|
setBusy(true);
|
|
setError(null);
|
|
try {
|
|
await onConfirm();
|
|
setBusy(false);
|
|
onOpenChange(false);
|
|
} catch (err) {
|
|
setError(humanizeError(err));
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
{description && <DialogDescription>{description}</DialogDescription>}
|
|
</DialogHeader>
|
|
{children}
|
|
{error && <MessageLine kind="error" message={error} compact />}
|
|
<ConfirmFooter
|
|
onCancel={() => setOpen(false)}
|
|
onConfirm={() => void confirm()}
|
|
loading={busy}
|
|
cancelLabel={cancelLabel ?? t("cancel")}
|
|
confirmLabel={confirmLabel}
|
|
confirmVariant={confirmVariant}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|