#

luxiaotao1123

2024-11-13 6828e790d254dd44162ff245025f7903def395be

 zy-acs-flow/src/map/Notification.jsx

@@ -1,4 +1,4 @@
import React, { createContext, useContext, useState, useCallback } from 'react';
import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
import { Snackbar, Alert, Portal, Slide } from '@mui/material';

const NotificationContext = createContext();
@@ -18,26 +18,39 @@
        setNotification({ open: true, message, severity });
    }, []);

    const handleClose = () => {
        setNotification({ ...notification, open: false });
    };
    const handleClose = useCallback(() => {
        setNotification((prev) => ({ ...prev, open: false }));
    }, []);

    const notify = useMemo(() => ({
        info: (msg) => showNotification(msg, 'info'),
        success: (msg) => showNotification(msg, 'success'),
        warning: (msg) => showNotification(msg, 'warning'),
        error: (msg) => showNotification(msg, 'error'),
        // Optional: If you prefer 'warn' instead of 'warning', uncomment the line below
        // warn: (msg) => showNotification(msg, 'warning'),
    }), [showNotification]);

    return (
        <NotificationContext.Provider value={showNotification}>
        <NotificationContext.Provider value={notify}>
            {children}
            <Portal>
                <Snackbar
                    open={notification.open}
                    autoHideDuration={4000}
                    autoHideDuration={3000}
                    onClose={handleClose}
                    TransitionComponent={SlideTransition}
                    anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
                    sx={{
                        // mt: 12,
                        zIndex: 2000,
                    }}
                >
                    <Alert onClose={handleClose} severity={notification.severity} sx={{ width: '300px', zIndex: 2000 }}>
                    <Alert
                        onClose={handleClose}
                        severity={notification.severity}
                        sx={{ width: '300px', zIndex: 2000 }}
                        variant="filled" // standard' | 'filled' | 'outlined
                    >
                        {notification.message}
                    </Alert>
                </Snackbar>
@@ -47,5 +60,9 @@
};

export const useNotification = () => {
    return useContext(NotificationContext);
    const context = useContext(NotificationContext);
    if (!context) {
        throw new Error('useNotification must be used within a NotificationProvider');
    }
    return context;
};