128 lines
3.8 KiB
JavaScript
128 lines
3.8 KiB
JavaScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
const WIDTHS = {
|
|
sm: 'sm:max-w-sm',
|
|
default: 'sm:max-w-lg',
|
|
lg: 'sm:max-w-2xl',
|
|
xl: 'sm:max-w-4xl',
|
|
};
|
|
|
|
/**
|
|
* Modal — the standard dialog shape: header, scrollable body, footer.
|
|
*
|
|
* Owning the scroll boundary here is the point. A dialog that lets its whole
|
|
* body scroll pushes the title and the confirm button off-screen on a laptop;
|
|
* this keeps both pinned and scrolls only the middle.
|
|
*/
|
|
/** @param {any} props */
|
|
/** @param {any} props */
|
|
export function Modal({
|
|
open,
|
|
onOpenChange,
|
|
title,
|
|
description,
|
|
icon: Icon,
|
|
size = 'default',
|
|
/** Footer content. Omit for a dialog whose body carries its own actions. */
|
|
footer,
|
|
children,
|
|
className,
|
|
/** Blocks closing — use while a submit is in flight. */
|
|
busy = false,
|
|
}) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={busy ? undefined : onOpenChange}>
|
|
<DialogContent
|
|
/* `dvh`, not `vh`: on a phone `100vh` is the *large* viewport, which
|
|
includes the browser chrome that is currently covering the bottom of
|
|
the screen — so a `90vh` dialog put its footer, and its confirm
|
|
button, under the address bar. */
|
|
className={cn('p-0 gap-0 overflow-hidden max-h-[calc(100dvh-2rem)] flex flex-col', WIDTHS[size], className)}
|
|
onInteractOutside={busy ? (e) => e.preventDefault() : undefined}
|
|
onEscapeKeyDown={busy ? (e) => e.preventDefault() : undefined}
|
|
>
|
|
<DialogHeader className="px-6 pt-6 pb-4 border-b border-border shrink-0 space-y-0">
|
|
<div className="flex items-start gap-3">
|
|
{Icon && (
|
|
<span className="grid place-items-center w-9 h-9 rounded-xl bg-krow-blue-tint text-krow-blue shrink-0">
|
|
<Icon className="w-4.5 h-4.5" aria-hidden="true" />
|
|
</span>
|
|
)}
|
|
<div className="min-w-0 text-left">
|
|
<DialogTitle className="text-title font-heading text-ink-1">{title}</DialogTitle>
|
|
{description && (
|
|
<DialogDescription className="text-body-sm text-ink-3 mt-1">
|
|
{description}
|
|
</DialogDescription>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>
|
|
|
|
{footer && (
|
|
<DialogFooter className="px-6 py-4 border-t border-border bg-surface-subtle shrink-0">
|
|
{footer}
|
|
</DialogFooter>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* ConfirmModal — a destructive or irreversible confirmation.
|
|
*
|
|
* Defaults to the destructive tone because that is what confirmation is almost
|
|
* always for, and it labels the action with the verb ("Delete") rather than
|
|
* "OK", so the button says what will happen.
|
|
*/
|
|
/** @param {any} props */
|
|
export function ConfirmModal({
|
|
open,
|
|
onOpenChange,
|
|
title = 'Are you sure?',
|
|
description,
|
|
confirmLabel = 'Confirm',
|
|
cancelLabel = 'Cancel',
|
|
onConfirm,
|
|
tone = 'destructive',
|
|
icon = null,
|
|
busy = false,
|
|
}) {
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
title={title}
|
|
description={description}
|
|
icon={icon}
|
|
size="sm"
|
|
busy={busy}
|
|
footer={
|
|
<>
|
|
<Button variant="outline" onClick={() => onOpenChange?.(false)} disabled={busy}>
|
|
{cancelLabel}
|
|
</Button>
|
|
<Button variant={tone === 'destructive' ? 'destructive' : 'default'} onClick={onConfirm} loading={busy}>
|
|
{confirmLabel}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
{null}
|
|
</Modal>
|
|
);
|
|
}
|