close notification on click and don't open notifcation if close pressed
This commit is contained in:
parent
a8787cd2d6
commit
f7a6c3e0d0
|
@ -2,17 +2,17 @@ import CloseIcon from '@mui/icons-material/Close';
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
|
ButtonProps,
|
||||||
IconButton,
|
IconButton,
|
||||||
Paper,
|
Paper,
|
||||||
Snackbar,
|
Snackbar,
|
||||||
SnackbarProps,
|
|
||||||
Stack,
|
Stack,
|
||||||
Typography,
|
Typography,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { NotificationAttributes } from 'types/gallery';
|
import { NotificationAttributes } from 'types/gallery';
|
||||||
|
|
||||||
import DiscFullIcon from '@mui/icons-material/DiscFull';
|
import InfoIcon from '@mui/icons-material/Info';
|
||||||
|
|
||||||
interface Iprops {
|
interface Iprops {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
@ -25,18 +25,17 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleClose: SnackbarProps['onClose'] = (_, reason) => {
|
const handleClose: ButtonProps['onClick'] = (event) => {
|
||||||
if (!reason) {
|
onClose();
|
||||||
onClose;
|
event.stopPropagation();
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
attributes.action?.callback();
|
attributes.action?.callback();
|
||||||
|
onClose();
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<Snackbar
|
<Snackbar
|
||||||
onClose={handleClose}
|
|
||||||
open={open}
|
open={open}
|
||||||
anchorOrigin={{
|
anchorOrigin={{
|
||||||
horizontal: 'right',
|
horizontal: 'right',
|
||||||
|
@ -57,7 +56,7 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
|
||||||
direction="row"
|
direction="row"
|
||||||
alignItems={'center'}>
|
alignItems={'center'}>
|
||||||
<Box>
|
<Box>
|
||||||
<DiscFullIcon fontSize="large" />
|
{attributes?.icon ?? <InfoIcon fontSize="large" />}
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ flex: 1 }}>
|
<Box sx={{ flex: 1 }}>
|
||||||
<Typography
|
<Typography
|
||||||
|
@ -80,7 +79,7 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
|
||||||
</Box>
|
</Box>
|
||||||
<Box>
|
<Box>
|
||||||
<IconButton
|
<IconButton
|
||||||
onClick={onClose}
|
onClick={handleClose}
|
||||||
sx={{
|
sx={{
|
||||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||||
}}>
|
}}>
|
||||||
|
|
Loading…
Reference in a new issue