/** * @name nojsja * @description alert component based on snackbar */ import React, { useState } from 'react'; import { makeStyles, createStyles } from "@material-ui/core/styles"; import { Theme, Snackbar, Slide } from "@material-ui/core"; import { TransitionProps } from '@material-ui/core/transitions/transition'; interface SnackbarAlertProps { duration?: number, vertical?: 'bottom' | 'top', horizontal?: 'left' | 'right' | 'center', direction?: 'left' | 'right' | 'up' | 'down' }; interface SetMessage { (msg: string): void } const useStyles = makeStyles((theme: Theme) => createStyles({ snackbar: { marginBottom: theme.spacing(2), marginLeft: '50%', width: '70%', transform: 'translatex(-50%)', color: 'black', '& > div': { backgroundColor: 'rgba(255, 255, 255, 1)', color: 'rgb(49, 49, 49)' } } }) ); const transition = (props: TransitionProps) => <Slide {...props} direction="down" />; const useSnackbarAlert = (props?: SnackbarAlertProps): [React.FunctionComponent, SetMessage] => { const styles = useStyles(); const [message, setMessage] = useState(''); return [ ( React.memo((() => <Snackbar className={styles.snackbar} anchorOrigin={{ vertical: props?.vertical || "top", horizontal: props?.horizontal || "right" }} TransitionComponent={transition} open={!!message} autoHideDuration={props?.duration || 1e3} onClose={() => setMessage('')} message={message} />)) ), (msg: string) => setTimeout(() => setMessage(msg), .5e3) ]; }; export default useSnackbarAlert;