Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667import React, { useEffect, useRef } from "react";import { Trash } from "@phosphor-icons/react";import { Modal } from "./ui.jsx";
export function ConfirmationDialog({ request, busy, error, onClose, onAccept,}) { const cancelButton = useRef(null); const lastSummary = useRef(null); useEffect(() => { if (request) { const { title, description, detail, label } = request; lastSummary.current = { title, description, detail, label }; } }, [request]); // Radix keeps the closing dialog mounted for its exit animation. const summary = request || lastSummary.current; return ( <Modal open={!!request} onOpenChange={(open) => { if (!open) onClose(); }} title={summary?.title || "Confirm deletion"} description={summary?.description} onOpenAutoFocus={(event) => { event.preventDefault(); cancelButton.current?.focus(); }} > <div className="confirmation-summary"> <span className="confirmation-icon"> <Trash size={24} /> </span> <p>{summary?.detail || "This action cannot be undone."}</p> </div> {error && ( <p className="error" role="alert"> {error} </p> )} <div className="form-actions"> <button ref={cancelButton} type="button" onClick={onClose} disabled={busy} > Cancel </button> <button type="button" className="destructive" onClick={onAccept} disabled={busy} > <Trash size={16} /> {busy ? "Deleting…" : summary?.label || "Delete"} </button> </div> </Modal> );}