Toast container in separate component

master
Tudor Stanciu 2021-07-30 01:06:28 +03:00
parent 7e19f387e5
commit 7cc55c59f4
4 changed files with 38 additions and 23 deletions

View File

@ -0,0 +1,22 @@
import React from "react";
import { ToastContainer as ReactToastContainer } from "react-toastify";
import { Close as CloseIcon } from "@material-ui/icons";
import useStyles from "./styles";
const ToastContainer = () => {
var classes = useStyles();
return (
<ReactToastContainer
className={classes.toastsContainer}
closeButton={<CloseButton className={classes.notificationCloseButton} />}
closeOnClick={false}
progressClassName={classes.notificationProgress}
/>
);
};
function CloseButton({ closeToast, className }) {
return <CloseIcon className={className} onClick={closeToast} />;
}
export default ToastContainer;

View File

@ -0,0 +1,13 @@
import { makeStyles } from "@material-ui/styles";
export default makeStyles((theme) => ({
toastsContainer: {
width: 400,
marginTop: theme.spacing(6),
right: 0
},
notificationCloseButton: {
position: "absolute",
right: theme.spacing(2)
}
}));

View File

@ -1,7 +1,7 @@
import React, { useState } from "react";
import { Grid } from "@material-ui/core";
import { Close as CloseIcon } from "@material-ui/icons";
import { ToastContainer, toast } from "react-toastify";
import { toast } from "react-toastify";
import ToastContainer from "../../components/toast/ToastContainer";
import SyntaxHighlighter from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
import classnames from "classnames";
@ -36,14 +36,7 @@ export default function NotificationsPage(props) {
<>
<PageTitle title="Notifications" />
<Grid container spacing={4}>
<ToastContainer
className={classes.toastsContainer}
closeButton={
<CloseButton className={classes.notificationCloseButton} />
}
closeOnClick={false}
progressClassName={classes.notificationProgress}
/>
<ToastContainer />
<Grid item xs={12}>
<Widget disableWidgetMenu>
<Grid container item xs={12}>
@ -416,7 +409,3 @@ export default function NotificationsPage(props) {
setNotificationPosition(positionId);
}
}
function CloseButton({ closeToast, className }) {
return <CloseIcon className={className} onClick={closeToast} />;
}

View File

@ -55,15 +55,6 @@ export default makeStyles((theme) => ({
notificationItem: {
marginTop: theme.spacing(2)
},
notificationCloseButton: {
position: "absolute",
right: theme.spacing(2)
},
toastsContainer: {
width: 400,
marginTop: theme.spacing(6),
right: 0
},
progress: {
visibility: "hidden"
},