79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { cn } from "~/lib/utils";
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../dialog";
|
|
import { ReactNode } from "react";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
title?: ReactNode;
|
|
description?: string;
|
|
children?: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
buttons?: React.ReactNode;
|
|
size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full";
|
|
className?: string;
|
|
overflowHidden?: boolean;
|
|
closesOnOutsideClick?: boolean;
|
|
}
|
|
export default function DialogSticky({
|
|
open,
|
|
onClose,
|
|
title,
|
|
description,
|
|
children,
|
|
footer,
|
|
size = "sm",
|
|
buttons,
|
|
className,
|
|
overflowHidden = false,
|
|
closesOnOutsideClick = true,
|
|
}: Props) {
|
|
const avoidDefaultDomBehavior = (e: Event) => {
|
|
if (closesOnOutsideClick) {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
};
|
|
return (
|
|
<Dialog open={open} onOpenChange={onClose}>
|
|
<DialogContent
|
|
withCloseButton={buttons ? false : true}
|
|
onPointerDownOutside={avoidDefaultDomBehavior}
|
|
onInteractOutside={avoidDefaultDomBehavior}
|
|
onEscapeKeyDown={avoidDefaultDomBehavior}
|
|
className={cn(
|
|
"[ &>button:last-child]:top-3.5 flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg",
|
|
size === "xs" && "sm:max-w-xs",
|
|
size === "sm" && "sm:max-w-sm",
|
|
size === "md" && "sm:max-w-md",
|
|
size === "lg" && "sm:max-w-lg",
|
|
size === "xl" && "sm:max-w-xl",
|
|
size === "2xl" && "sm:max-w-2xl",
|
|
size === "3xl" && "sm:max-w-3xl",
|
|
size === "4xl" && "sm:max-w-4xl",
|
|
size === "5xl" && "sm:max-w-5xl",
|
|
size === "6xl" && "sm:max-w-6xl",
|
|
size === "7xl" && "sm:max-w-7xl",
|
|
size === "full" && "sm:max-w-full",
|
|
className
|
|
)}
|
|
>
|
|
<DialogHeader className="bg-surface-neutral-modal space-y-0 rounded-t-md text-left">
|
|
<DialogTitle className="border-b border-border-default px-6 py-4 text-base">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="truncate">{title}</div>
|
|
{buttons && buttons}
|
|
</div>
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className={overflowHidden ? "overflow-hidden" : "overflow-y-auto"}>{children}</div>
|
|
{footer && (
|
|
<DialogFooter className="border-border-default bg-surface-neutral-modal justify-end rounded-b-md border-t p-6">
|
|
{footer}
|
|
</DialogFooter>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|