112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import { ArrowLeftStartOnRectangleIcon, CheckIcon, ExclamationTriangleIcon, InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
|
import React from "react";
|
|
import { toast, ToastContainer } from "react-toastify";
|
|
|
|
import BadgeIcon, { EBadgeColor } from "../BadgeIcon";
|
|
import IconButton from "../IconButton";
|
|
import Loader from "../Loader";
|
|
import classes from "./classes.module.scss";
|
|
import ToastContent from "./ToastContent";
|
|
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
|
|
export default function Toaster() {
|
|
return (
|
|
<ToastContainer
|
|
className={classes["root"]}
|
|
toastClassName={classes["wrapper"]}
|
|
bodyClassName={classes["body"]}
|
|
progressClassName={classes["progress"]}
|
|
closeButton={<IconButton icon={<XMarkIcon />} />}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export class ToasterService {
|
|
private static instance: ToasterService;
|
|
private constructor() {}
|
|
|
|
public static getInstance() {
|
|
return (this.instance ??= new this());
|
|
}
|
|
|
|
public text({ title, description }: { title: string; description?: string }) {
|
|
toast.info(<ToastContent title={title} description={description} />, {
|
|
icon: false,
|
|
progressStyle: { backgroundColor: "var(--primary-default-base)" },
|
|
});
|
|
}
|
|
|
|
public info({ title, description }: { title: string; description?: string }) {
|
|
toast.info(
|
|
<ToastContent
|
|
title={title}
|
|
description={description}
|
|
icon={<BadgeIcon icon={<InformationCircleIcon />} color={EBadgeColor.INFO} />}
|
|
/>,
|
|
{
|
|
icon: false,
|
|
progressStyle: { backgroundColor: "var(--info-default-base)" },
|
|
},
|
|
);
|
|
}
|
|
|
|
public success({ title, description }: { title: string; description?: string }) {
|
|
toast.info(
|
|
<ToastContent title={title} description={description} icon={<BadgeIcon icon={<CheckIcon />} color={EBadgeColor.SUCCESS} />} />,
|
|
{
|
|
icon: false,
|
|
progressStyle: { backgroundColor: "var(--success-default-base)" },
|
|
},
|
|
);
|
|
}
|
|
|
|
public error({ title, description }: { title: string; description?: string }) {
|
|
toast.info(
|
|
<ToastContent title={title} description={description} icon={<BadgeIcon icon={<XMarkIcon />} color={EBadgeColor.ERROR} />} />,
|
|
{
|
|
icon: false,
|
|
progressStyle: { backgroundColor: "var(--error-default-base)" },
|
|
},
|
|
);
|
|
}
|
|
|
|
public warning({ title, description }: { title: string; description?: string }) {
|
|
toast.info(
|
|
<ToastContent
|
|
title={title}
|
|
description={description}
|
|
icon={<BadgeIcon icon={<ExclamationTriangleIcon />} color={EBadgeColor.WARNING} />}
|
|
/>,
|
|
{
|
|
icon: false,
|
|
progressStyle: { backgroundColor: "var(--warning-default-base)" },
|
|
},
|
|
);
|
|
}
|
|
|
|
public loading({ title, description }: { title: string; description?: string }) {
|
|
toast.info(
|
|
<ToastContent title={title} description={description} icon={<BadgeIcon icon={<Loader />} color={EBadgeColor.INFO} />} />,
|
|
{
|
|
icon: false,
|
|
autoClose: false,
|
|
},
|
|
);
|
|
}
|
|
|
|
public loggedOut({ title, description }: { title: string; description?: string }) {
|
|
toast.info(
|
|
<ToastContent
|
|
title={title}
|
|
description={description}
|
|
icon={<BadgeIcon icon={<ArrowLeftStartOnRectangleIcon />} color={EBadgeColor.NEUTRAL} />}
|
|
/>,
|
|
{
|
|
icon: false,
|
|
autoClose: false,
|
|
},
|
|
);
|
|
}
|
|
}
|