Files
calendar/packages/ui/ConfirmationDialogContent.tsx
T
ccc2bdd25e 🧹 One calcom/ui import to rule them all (#5561)
* Removed emptyscreen component v1 version, migrated pages that still used it to v2, and removed v1 of workflow pages and components.

* updated workflow pages imports to remove v2 from path.

* Deleted v1 switch component, deleted v1 api-keys components, deleted old web integrations components that were unused.

* Removed v1 list component.

* Fixed event workflows tab path.

* Fixed import path for button in sandbox page.

* Cleanup and type fixes

* Making explicit indexes

* UI import migrations

* More import fixes

* More import fixes

* Submodule sync

* Type fixes

* Build fixes

Co-authored-by: zomars <zomars@me.com>
2022-11-22 19:55:25 -07:00

87 lines
2.8 KiB
TypeScript

/**
* @deprecated file
* All new changes should be made to the V2 file in
* `/packages/ui/v2/core/ConfirmationDialogContent.tsx`
*/
import * as DialogPrimitive from "@radix-ui/react-dialog";
import React, { PropsWithChildren, ReactNode } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, DialogClose, DialogContent, Icon } from ".";
export type ConfirmationDialogContentProps = {
confirmBtn?: ReactNode;
confirmBtnText?: string;
cancelBtnText?: string;
isLoading?: boolean;
loadingText?: string;
onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
title: string;
variety?: "danger" | "warning" | "success";
};
/**
* @deprecated file
* All new changes should be made to the V2 file in
* `/packages/ui/v2/core/ConfirmationDialogContent.tsx`
*/
export default function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
const { t } = useLocale();
const {
title,
variety,
confirmBtn = null,
confirmBtnText = t("confirm"),
cancelBtnText = t("cancel"),
loadingText = t("loading"),
isLoading = false,
onConfirm,
children,
} = props;
return (
<DialogContent>
<div className="flex">
{variety && (
<div className="mt-0.5 ltr:mr-3">
{variety === "danger" && (
<div className="mx-auto rounded-full bg-red-100 p-2 text-center">
<Icon.FiAlertCircle className="h-5 w-5 text-red-600" />
</div>
)}
{variety === "warning" && (
<div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
<Icon.FiAlertCircle className="h-5 w-5 text-orange-600" />
</div>
)}
{variety === "success" && (
<div className="mx-auto rounded-full bg-green-100 p-2 text-center">
<Icon.FiCheck className="h-5 w-5 text-green-600" />
</div>
)}
</div>
)}
<div>
<DialogPrimitive.Title className="font-cal text-xl text-gray-900">{title}</DialogPrimitive.Title>
<DialogPrimitive.Description className="text-sm text-neutral-500">
{children}
</DialogPrimitive.Description>
</div>
</div>
<div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
<DialogClose disabled={isLoading} onClick={onConfirm} asChild>
{confirmBtn || (
<Button data-testid="confirm-button" color="primary" loading={isLoading}>
{isLoading ? loadingText : confirmBtnText}
</Button>
)}
</DialogClose>
<DialogClose disabled={isLoading} asChild>
<Button color="secondary">{cancelBtnText}</Button>
</DialogClose>
</div>
</DialogContent>
);
}