b5b41da183
* storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Add exports for differnt types of inputs * Fix form and text area input * Fix mass import errors Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Alex van Andel <me@alexvanandel.com>
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
import React, { PropsWithChildren, ReactNode } from "react";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { Icon } from "@calcom/ui/Icon";
|
|
import { Button } from "@calcom/ui/components";
|
|
import { DialogClose, DialogContent } from "@calcom/ui/v2";
|
|
|
|
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";
|
|
};
|
|
|
|
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 type="creation" useOwnActionButtons={true}>
|
|
<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 color="primary" loading={isLoading}>
|
|
{isLoading ? loadingText : confirmBtnText}
|
|
</Button>
|
|
)}
|
|
</DialogClose>
|
|
<DialogClose disabled={isLoading} asChild>
|
|
<Button color="secondary">{cancelBtnText}</Button>
|
|
</DialogClose>
|
|
</div>
|
|
</DialogContent>
|
|
);
|
|
}
|