115 lines
3.9 KiB
JavaScript
115 lines
3.9 KiB
JavaScript
import React, { useEffect, useState, isValidElement } from "react";
|
|
import { ToastContainer, toast, cssTransition } from "react-toastify";
|
|
import clsx from "clsx";
|
|
|
|
import "./ReactToastifyOverrideClass.scss";
|
|
import styles from "./SnackbarController.module.scss";
|
|
|
|
import XMarkSvg from "@images/cancel.svg?react";
|
|
import WarningSvg from "@images/warning.svg?react";
|
|
import MegaphoneSvg from "@images/megaphone.svg?react";
|
|
import CheckMarkSvg from "@images/check_mark.svg?react";
|
|
import ErrorSvg from "@images/error.svg?react";
|
|
|
|
import { useNotificationStatus } from "@logics_common";
|
|
|
|
const CustomTransition = cssTransition({
|
|
enter: "fade_in",
|
|
exit: "fade_out",
|
|
collapse: false,
|
|
});
|
|
|
|
|
|
export const SnackbarController = () => {
|
|
const { currentNotificationStatus, closeNotification } = useNotificationStatus();
|
|
const [containerKey, setContainerKey] = useState(0);
|
|
|
|
const settings = currentNotificationStatus.data;
|
|
|
|
const snackbar_classname = clsx(
|
|
styles.snackbar_content,
|
|
{
|
|
[styles.is_success]: settings.status === "success",
|
|
[styles.is_warning]: settings.status === "warning",
|
|
[styles.is_error]: settings.status === "error",
|
|
}
|
|
);
|
|
|
|
let hide_duration = 5000;
|
|
if (settings.options?.hide_duration === null) {
|
|
hide_duration = false;
|
|
} else if (Number(settings.options?.hide_duration)) {
|
|
hide_duration = Number(settings.options?.hide_duration);
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
if (!settings.is_open) return;
|
|
|
|
const message_text = settings.message;
|
|
const category_id = settings.category_id ? settings.category_id : message_text;
|
|
|
|
const to_hide_progress_bar = (settings.options?.to_hide_progress_bar === true) ? true : false;
|
|
|
|
const asyncShowNotification = async () => {
|
|
setTimeout(() => {
|
|
toast(message_text, {
|
|
toastId: category_id,
|
|
type: settings.status,
|
|
autoClose: hide_duration,
|
|
transition: CustomTransition,
|
|
toastClassName: snackbar_classname,
|
|
hideProgressBar: to_hide_progress_bar,
|
|
progressClassName: styles.toast_progress,
|
|
closeButton: <CloseButtonContainer />,
|
|
onClose: () => {
|
|
closeNotification();
|
|
},
|
|
});
|
|
}, 100);
|
|
};
|
|
|
|
// setContainerKey(prevKey => prevKey + 1);
|
|
asyncShowNotification();
|
|
|
|
}, [settings]);
|
|
|
|
return (
|
|
<ToastContainer
|
|
// key={containerKey}
|
|
position="bottom-left"
|
|
transition={CustomTransition}
|
|
hideProgressBar={false}
|
|
newestOnTop={false}
|
|
closeOnClick={false}
|
|
pauseOnFocusLoss={false}
|
|
draggable={false}
|
|
pauseOnHover={true}
|
|
theme="dark"
|
|
icon={({ type }) => {
|
|
switch (type) {
|
|
case "info":
|
|
return <MegaphoneSvg className={styles.megaphone_svg} />;
|
|
case "error":
|
|
return <ErrorSvg className={styles.error_svg} />;
|
|
case "success":
|
|
return <CheckMarkSvg className={styles.check_mark_svg} />;
|
|
case "warning":
|
|
return <WarningSvg className={styles.warning_svg} />;
|
|
default:
|
|
return null;
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const CloseButtonContainer = ({ closeToast }) => {
|
|
return (
|
|
<button className={styles.close_button_wrapper} onClick={closeToast}>
|
|
<div className={styles.close_button}>
|
|
<XMarkSvg className={styles.x_mark_svg} />
|
|
</div>
|
|
</button>
|
|
);
|
|
}; |