import * as DialogPrimitive from "@radix-ui/react-dialog"; import { useRouter } from "next/router"; import type { ReactNode } from "react"; import React, { useState } from "react"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { SVGComponent } from "@calcom/types/SVGComponent"; import type { ButtonProps } from "../../components/button"; import { Button } from "../../components/button"; export type DialogProps = React.ComponentProps<(typeof DialogPrimitive)["Root"]> & { 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 { const query = router.query; clearQueryParamsOnClose.forEach((queryParam) => { delete query[queryParam]; }); router.push( { pathname: router.pathname, 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<(typeof DialogPrimitive)["Content"]> & { size?: "xl" | "lg" | "md"; type?: "creation" | "confirmation"; title?: string; description?: string | JSX.Element | null; closeText?: string; actionDisabled?: boolean; Icon?: SVGComponent; enableOverflow?: boolean; }; // enableOverflow:- use this prop whenever content inside DialogContent could overflow and require scrollbar export const DialogContent = React.forwardRef( ({ children, title, Icon, enableOverflow, type = "creation", ...props }, forwardedRef) => { return ( {type === "creation" && (
{children}
)} {type === "confirmation" && (
{Icon && (
)}
{children}
)} {!type && children}
); } ); type DialogHeaderProps = { title: React.ReactNode; subtitle?: React.ReactNode; }; export function DialogHeader(props: DialogHeaderProps) { if (!props.title) return null; return (
{props.subtitle &&
{props.subtitle}
}
); } export function DialogFooter(props: { children: ReactNode; className?: string; showDivider?: boolean }) { return (
{props.showDivider &&
}
{props.children}
); } DialogContent.displayName = "DialogContent"; export const DialogTrigger = DialogPrimitive.Trigger; // export const DialogClose = DialogPrimitive.Close; export function DialogClose( props: { dialogCloseProps?: React.ComponentProps<(typeof DialogPrimitive)["Close"]>; children?: ReactNode; onClick?: (e: React.MouseEvent) => void; disabled?: boolean; color?: ButtonProps["color"]; } & React.ComponentProps ) { const { t } = useLocale(); return ( {/* This will require the i18n string passed in */} ); }