90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@repo/shadcn-ui/components/dialog";
|
|
import { type ReactNode, createContext, useContext } from "react";
|
|
|
|
const FormCancelContext = createContext<string | undefined>(undefined);
|
|
|
|
export function FormDialog({
|
|
open,
|
|
onOpenChange,
|
|
title,
|
|
cancelLabel,
|
|
children,
|
|
wide = false,
|
|
size,
|
|
formActions = false,
|
|
}: {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
title: string;
|
|
cancelLabel: string;
|
|
children: ReactNode;
|
|
wide?: boolean;
|
|
size?: "small" | "medium" | "large";
|
|
formActions?: boolean;
|
|
}) {
|
|
const width = size ?? (wide ? "large" : "small");
|
|
const widths = {
|
|
small: "sm:max-w-xl",
|
|
medium: "sm:max-w-3xl",
|
|
large: "sm:w-[90vw] sm:max-w-[1200px]",
|
|
};
|
|
|
|
return (
|
|
<Dialog onOpenChange={onOpenChange} open={open}>
|
|
<DialogContent
|
|
className={`flex max-h-[calc(100dvh-2rem)] flex-col gap-0 overflow-hidden p-0 ${widths[width]}`}
|
|
showCloseButton={true}
|
|
>
|
|
<DialogHeader className="shrink-0 border-b px-6 py-5 pr-14">
|
|
<DialogTitle className="text-lg font-bold">{title}</DialogTitle>
|
|
</DialogHeader>
|
|
<div
|
|
className="@container flex min-h-0 flex-1 flex-col overflow-y-auto px-6 pt-5 pb-5 [&:has([data-slot=form-body])]:overflow-hidden [&:has([data-slot=form-body])]:pb-0"
|
|
data-slot="form-dialog-content"
|
|
>
|
|
<FormCancelContext.Provider value={formActions ? cancelLabel : undefined}>
|
|
{children}
|
|
</FormCancelContext.Provider>
|
|
</div>
|
|
{!formActions && (
|
|
<DialogFooter className="shrink-0 border-t px-6 py-4">
|
|
<DialogClose render={<Button type="button" variant="outline" />}>
|
|
{cancelLabel}
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export function FormActions({ children }: { children: ReactNode }) {
|
|
const cancelLabel = useContext(FormCancelContext);
|
|
|
|
return (
|
|
<DialogFooter className="shrink-0 border-t bg-popover py-4">
|
|
{cancelLabel && (
|
|
<DialogClose render={<Button type="button" variant="outline" />}>{cancelLabel}</DialogClose>
|
|
)}
|
|
{children}
|
|
</DialogFooter>
|
|
);
|
|
}
|
|
|
|
/** El cuerpo reserva espacio simétrico para que el scroll no recorte el anillo de foco. */
|
|
export function FormBody({ children }: { children: ReactNode }) {
|
|
return (
|
|
<div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-1 pt-1 pb-5" data-slot="form-body">
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|