@mui/material#AlertProps TypeScript Examples

The following examples show how to use @mui/material#AlertProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From Cromwell with MIT License 5 votes vote down vote up 
function CustomAlert(props: AlertProps) {
    return <Alert elevation={6} variant="filled" {...props} />;
}
Example #2
Source File: NotificationCenter.tsx    From Cromwell with MIT License 4 votes vote down vote up 
function NotificationCenter(props: TPropsType) {
    const [open, setOpen] = useState(false);
    const popperAnchorEl = useRef<HTMLDivElement | null>(null);
    const client = getRestApiClient();

    let NotificationIcon = NotificationsNoneIcon;
    let tipText = '';
    if (props?.status?.updateAvailable) {
        NotificationIcon = NotificationImportantIcon;
        tipText = 'Update available';
    }

    const updateInfo = props.status?.updateInfo;
    const notifications = props.status?.notifications;

    const handleOpen = () => {
        if (!notifications?.length && !updateInfo) return;
        setOpen(true)
    }

    const handleStartUpdate = async () => {
        store.setStateProp({
            prop: 'status',
            payload: {
                ...store.getState().status,
                isUpdating: true,
            }
        });

        let success = false;
        try {
            success = await client.launchCmsUpdate();
        } catch (error) {
            console.error(error);
        }
        await updateStatus();

        if (success) {
            toast.success('CMS updated');
            const confirm = await askConfirmation({
                title: `CMS has been updated. Please reload this page to apply changes`,
            });
            if (confirm) {
                window.location.reload();
            }
        }
        else toast.error('Failed to update CMS');

    }


    return (
        <div ref={popperAnchorEl}>
            <Tooltip title={tipText}>
                <IconButton
                    onClick={handleOpen}
                    style={{
                        cursor: notifications?.length ? 'pointer' : 'initial',
                        opacity: notifications?.length ? '1' : '0.6',
                    }}
                >
                    <NotificationIcon htmlColor={props.color} />
                </IconButton>
            </Tooltip>
            <Popover open={open} anchorEl={popperAnchorEl.current}
                style={{ zIndex: 9999 }}
                onClose={() => setOpen(false)}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'right',
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                }}
            >
                <Grid container className={styles.list}>
                    {props.status?.isUpdating && (
                        <Grid item container xs={12} className={clsx(styles.update, styles.updating)}>
                            <h3 className={styles.updateTitle}>
                                <UpdateIcon style={{ marginRight: '7px' }} />
                                Update in progress...</h3>
                            <LinearProgress className={styles.updateProgress} />
                        </Grid>
                    )}
                    {props.status?.updateAvailable && updateInfo && !props.status?.isUpdating && (
                        <UpdateInfoCard
                            updateInfo={updateInfo}
                            currentVersion={props.status?.currentVersion}
                            onStartUpdate={handleStartUpdate}
                        />
                    )}
                    {notifications && (
                        notifications.map((note, index) => {
                            let severity: AlertProps['severity'] = 'info';
                            if (note.type === 'warning') severity = 'warning';
                            if (note.type === 'error') severity = 'error';
                            return (
                                <Grid key={index} item container xs={12} className={styles.item}>
                                    <Alert severity={severity} className={styles.alert}
                                        classes={{ message: styles.message }}>
                                        <p>{note.message}</p>
                                        {note.documentationLink && (
                                            <Tooltip title="Documentation">
                                                <IconButton
                                                    onClick={() => window.open(note.documentationLink, '_blank')}>
                                                    <HelpOutlineIcon />
                                                </IconButton>
                                            </Tooltip>
                                        )}
                                    </Alert>
                                </Grid>
                            )
                        })
                    )}
                </Grid>
            </Popover>
        </div>
    )
}