Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | import { cn } from "@/utils";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "../Dialog";
import { Button } from "../Inputs";
export type ConfirmationModalProps = {
open: boolean;
description?: React.ReactNode;
body?: React.ReactNode;
areButtonsReversed?: boolean;
title: React.ReactNode;
onCancel: () => void;
onAccept: () => void;
cancelButtonText?: string;
acceptButtonText?: string;
cancelButtonVisible?: boolean;
acceptButtonVisible?: boolean;
};
/** A modal with optional Cancel and Accept buttons */
export function ConfirmationDialog({
open,
description,
title,
areButtonsReversed = false,
body,
onAccept,
onCancel,
acceptButtonText = "Confirm",
cancelButtonText = "Cancel",
acceptButtonVisible = true,
cancelButtonVisible = true,
}: ConfirmationModalProps) {
return (
<Dialog open={open} onOpenChange={onCancel}>
<DialogContent className="sm:max-w-[425px]" data-testid="dialog-content">
<DialogHeader>
<DialogTitle data-testid="dialog-title">{title}</DialogTitle>
{description && <DialogDescription>{description}</DialogDescription>}
</DialogHeader>
{body && (
<div className="grid gap-4 py-4" data-testid="dialog-body">
{body}
</div>
)}
<DialogFooter
className={cn({
"flex-col sm:flex-row-reverse sm:justify-start": areButtonsReversed,
})}
data-testid="dialog-footer"
>
{acceptButtonVisible && (
<Button type="submit" onClick={onAccept} data-testid="dialog-accept">
{acceptButtonText}
</Button>
)}
{cancelButtonVisible && (
<Button
type="button"
variant={"outline"}
onClick={onCancel}
data-testid="dialog-cancel"
>
{cancelButtonText}
</Button>
)}
</DialogFooter>
</DialogContent>
</Dialog>
);
}
|