57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import { Toast } from '@astryxdesign/core/Toast';
|
|
import { Button } from '@astryxdesign/core/Button';
|
|
|
|
// project-import
|
|
import { dispatch, useSelector } from 'store';
|
|
import { closeSnackbar } from 'store/reducers/snackbar';
|
|
|
|
// ==============================|| SNACKBAR ||============================== //
|
|
// Redux-driven single-toast surface (separate from the notistack-based `enqueueSnackbar`
|
|
// calls used elsewhere in the app). Rebuilt on Astryx's `Toast` primitive — `variant`
|
|
// picks default vs. alert-style presentation, `alert.color` maps onto Toast's narrower
|
|
// info/error `type`, and `anchorOrigin` positions the fixed wrapper the same way the MUI
|
|
// Snackbar's anchorOrigin used to.
|
|
|
|
const Snackbar = () => {
|
|
const snackbar = useSelector((state) => state.snackbar);
|
|
const { actionButton, anchorOrigin, alert, message, open, variant } = snackbar;
|
|
|
|
const handleClose = () => dispatch(closeSnackbar());
|
|
|
|
if (!open) return null;
|
|
|
|
const isError = variant === 'alert' && alert?.color === 'error';
|
|
const showUndo = variant === 'default' ? true : actionButton !== false;
|
|
|
|
const vertical = anchorOrigin?.vertical === 'top' ? 'top' : 'bottom';
|
|
const horizontal = anchorOrigin?.horizontal === 'left' ? 'left' : anchorOrigin?.horizontal === 'center' ? 'center' : 'right';
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
[vertical]: 24,
|
|
...(horizontal === 'center' ? { left: '50%', transform: 'translateX(-50%)' } : { [horizontal]: 24 }),
|
|
zIndex: 1500
|
|
}}
|
|
>
|
|
<Toast
|
|
type={isError ? 'error' : 'info'}
|
|
body={message}
|
|
isAutoHide
|
|
autoHideDuration={6000}
|
|
endContent={
|
|
showUndo ? (
|
|
<Button label="Undo" size="sm" variant="ghost" onClick={handleClose}>
|
|
UNDO
|
|
</Button>
|
|
) : undefined
|
|
}
|
|
onDismiss={handleClose}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Snackbar;
|