110 lines
2.7 KiB
TypeScript
110 lines
2.7 KiB
TypeScript
import { FC, useState } from "react";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "./alert-dialog";
|
|
|
|
export const Alert: FC<{
|
|
title?: string;
|
|
type: string;
|
|
onClick?: (event?: any) => Promise<any> | any;
|
|
children?: any;
|
|
className?: string;
|
|
content?: any;
|
|
msg?: any;
|
|
mode?: "auto" | "manual";
|
|
open?: boolean;
|
|
onOpenChange?: (event: boolean) => void;
|
|
hiddenFooter?: boolean;
|
|
}> = ({
|
|
title = " Are you certain you want to continue?",
|
|
type,
|
|
onClick,
|
|
children,
|
|
className,
|
|
content,
|
|
msg,
|
|
mode,
|
|
open,
|
|
onOpenChange,
|
|
hiddenFooter = false,
|
|
}) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const message: any = {
|
|
save: "Your data will be saved securely. You can update it at any time if needed.",
|
|
delete:
|
|
"This action cannot be undone. This will permanently remove your data from our servers.",
|
|
};
|
|
const param =
|
|
mode === "manual"
|
|
? {
|
|
open: open,
|
|
onOpenChange: onOpenChange,
|
|
}
|
|
: {
|
|
open: isOpen,
|
|
onOpenChange: (e: boolean) => {
|
|
setIsOpen(e);
|
|
},
|
|
};
|
|
return (
|
|
<>
|
|
<AlertDialog {...param}>
|
|
{mode === "manual" ? (
|
|
<></>
|
|
) : (
|
|
<AlertDialogTrigger>{children}</AlertDialogTrigger>
|
|
)}
|
|
|
|
<AlertDialogContent className={className}>
|
|
{content ? (
|
|
content
|
|
) : (
|
|
<>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{title}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{msg || message?.[type]}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
{!hiddenFooter ? (
|
|
<>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel
|
|
onClick={() => {
|
|
setIsOpen(false);
|
|
}}
|
|
>
|
|
No
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className={"bg-primary text-white"}
|
|
onClick={async (e) => {
|
|
if (typeof onClick === "function") {
|
|
await onClick(e);
|
|
}
|
|
setIsOpen(false);
|
|
}}
|
|
>
|
|
Yes
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</>
|
|
)}
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
);
|
|
};
|