#

luxiaotao1123

2024-10-11 433112b25f5874d0957fbfbda39c7325d3117aa6

 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,12 +18,21 @@
        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
@@ -33,11 +42,15 @@
                    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" // Optional: Use filled variant for better visibility
                    >
                        {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;
};