58 lines
1.9 KiB
JavaScript
58 lines
1.9 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
|
|
// third-party
|
|
import { SnackbarProvider } from 'notistack';
|
|
|
|
// project import
|
|
import { useSelector } from 'store';
|
|
|
|
// assets
|
|
import { CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
|
|
|
|
// Semantic notification colors — static (this app runs light-mode only), matching the
|
|
// brand palette used across the Astryx-converted pages (BRAND red for the default/
|
|
// primary notistack variant, standard semantic tones for error/success/info/warning).
|
|
const notistackColors = `
|
|
.notistack-MuiContent-default { background-color: #C01227 !important; }
|
|
.notistack-MuiContent-error { background-color: #ef4444 !important; }
|
|
.notistack-MuiContent-success { background-color: #10b981 !important; }
|
|
.notistack-MuiContent-info { background-color: #3b82f6 !important; }
|
|
.notistack-MuiContent-warning { background-color: #f59e0b !important; }
|
|
`;
|
|
|
|
// ===========================|| SNACKBAR - NOTISTACK ||=========================== //
|
|
|
|
const Notistack = ({ children }) => {
|
|
const snackbar = useSelector((state) => state.snackbar);
|
|
const iconSX = { marginRight: 8, fontSize: '1.15rem' };
|
|
|
|
return (
|
|
<>
|
|
<style>{notistackColors}</style>
|
|
<SnackbarProvider
|
|
maxSnack={snackbar.maxStack}
|
|
dense={snackbar.dense}
|
|
iconVariant={
|
|
snackbar.iconVariant === 'useemojis'
|
|
? {
|
|
success: <CheckCircleOutlined style={iconSX} />,
|
|
error: <CloseCircleOutlined style={iconSX} />,
|
|
warning: <WarningOutlined style={iconSX} />,
|
|
info: <InfoCircleOutlined style={iconSX} />
|
|
}
|
|
: undefined
|
|
}
|
|
hideIconVariant={snackbar.iconVariant === 'hide' ? true : false}
|
|
>
|
|
{children}
|
|
</SnackbarProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
Notistack.propTypes = {
|
|
children: PropTypes.node
|
|
};
|
|
|
|
export default Notistack;
|