@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
62 lines • 2.74 kB
JavaScript
import React from 'react';
import { IconButton, Stack } from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import InfoIcon from '@mui/icons-material/Info';
import WarningIcon from '@mui/icons-material/Warning';
import ErrorIcon from '@mui/icons-material/Error';
import Typography from '../../dataDisplay/Typography';
import CloseIcon from '@mui/icons-material/Close';
import { cond, equals, always, T, includes } from 'ramda';
import { styled, AppBar as MuiAppBar } from '@mui/material';
const AppBar = styled(MuiAppBar)(() => ({
transition: 'all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)',
bottom: 0,
top: 'auto',
marginTop: '8px'
}));
const Icon = ({ myVariant }) => {
const iconStyle = {
position: 'sticky',
top: '50%',
alignItems: 'center',
display: 'flex',
margin: '0px 6px 0px 0px'
};
const renderIcon = cond([
[equals('error'), always(React.createElement(ErrorIcon, { sx: iconStyle }))],
[equals('info'), always(React.createElement(InfoIcon, { sx: iconStyle }))],
[equals('success'), always(React.createElement(CheckCircleIcon, { sx: iconStyle }))],
[equals('warning'), always(React.createElement(WarningIcon, { sx: iconStyle }))],
[T, always(null)]
]);
return renderIcon(myVariant);
};
const toastStyle = {
maxHeight: '500px',
overflowY: 'auto',
'&::-webkit-scrollbar': {
width: '6px'
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 5px #ffffff3d',
borderRadius: '10px'
},
'&::-webkit-scrollbar-thumb': {
background: ' #ffffffba',
borderRadius: '10px'
},
'&::-webkit-scrollbar-thumb:hover': {
background: '#fff'
}
};
const Toast = (props) => {
const { message, closeToast, variant, actions } = props;
return (React.createElement(React.Fragment, null,
React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: toastStyle },
React.createElement(Icon, { myVariant: variant }),
React.createElement(Typography, { sx: { maxHeight: '450px' } }, message),
React.createElement(IconButton, { sx: { position: 'sticky', top: '50%', padding: 0, margin: '0px 6px' }, onClick: closeToast, "aria-label": "close" }, includes(variant, ['success', 'info', 'error', 'warning']) ? (React.createElement(CloseIcon, { fontSize: "small", htmlColor: "white" })) : (React.createElement(CloseIcon, { fontSize: "small", color: "primary" })))),
actions ? (React.createElement(AppBar, { position: "sticky", color: "transparent" }, actions)) : null));
};
export default Toast;
//# sourceMappingURL=utils.js.map