import * as DialogPrimitive from "@radix-ui/react-dialog"; import { useRouter } from "next/router"; import React, { ReactNode, useState } from "react"; import classNames from "@calcom/lib/classNames"; export type DialogProps = React.ComponentProps & { name?: string; clearQueryParamsOnClose?: string[]; }; export function Dialog(props: DialogProps) { const router = useRouter(); const { children, name, ...dialogProps } = props; // only used if name is set const [open, setOpen] = useState(!!dialogProps.open); if (name) { const clearQueryParamsOnClose = ["dialog", ...(props.clearQueryParamsOnClose || [])]; dialogProps.onOpenChange = (open) => { if (props.onOpenChange) { props.onOpenChange(open); } // toggles "dialog" query param if (open) { router.query["dialog"] = name; } else { clearQueryParamsOnClose.forEach((queryParam) => { delete router.query[queryParam]; }); } router.push( { pathname: router.pathname, query: { ...router.query, }, }, undefined, { shallow: true } ); setOpen(open); }; // handles initial state if (!open && router.query["dialog"] === name) { setOpen(true); } // allow overriding if (!("open" in dialogProps)) { dialogProps.open = open; } } return ( {children} ); } type DialogContentProps = React.ComponentProps & { size?: "xl" | "lg"; }; export const DialogContent = React.forwardRef( ({ children, ...props }, forwardedRef) => ( {/*zIndex one less than Toast */} {children} ) ); type DialogHeaderProps = { title: React.ReactNode; subtitle?: React.ReactNode; }; export function DialogHeader(props: DialogHeaderProps) { return (
{props.subtitle &&
{props.subtitle}
}
); } export function DialogFooter(props: { children: ReactNode }) { return (
{props.children}
); } DialogContent.displayName = "DialogContent"; export const DialogTrigger = DialogPrimitive.Trigger; export const DialogClose = DialogPrimitive.Close;