components.common.Notification.tsx Maven / Gradle / Ivy

Go to download
import React from 'react';

import CloudIcon from '@mui/icons-material/CloudOff';
/*images*/
import ErrorIcon from '@mui/icons-material/Error';
import InfoIcon from '@mui/icons-material/Info';
import WarningIcon from '@mui/icons-material/Warning';
import { Box, Card, createTheme, SxProps, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';

// Note that this mapping include all mappings in ReportLevel
export const enum NotificationType {ERROR = 1, WARNING = 2, INFO = 3, CLOUD = 4}

/** This component visualises notifications for the user. Different error types are supported, e.b., 'error', 'warning', 'info', etc. */

export type NotificationProps = {
  type :     NotificationType
  message?:  string
  contents?: React.ReactNode
  details?:  string
  sx?:       SxProps
} 

const Notification = (props: NotificationProps) => {
  const color = useNotificationColor(props.type)

  // ---------- preconditions ----------
  if (!props.contents && !props.message)
    throw new Error("A notification requires a message.")
  // -----------------------------------
  
  return (
    
      
        
          
        
        
          
        
      
    
  )
}

const NotificationMessage = (props: NotificationProps): JSX.Element =>
  props.contents !== undefined ? {props.contents} : 

const FromMessage = (props: NotificationProps): JSX.Element => {
  return (
    
      
        {props.message}
      
      
        {props.details}
      
    
  )
}

const Icon = ({ type }: { type: NotificationType }) => {
  switch (type) {
    case NotificationType.ERROR: return 
    case NotificationType.INFO:    return 
    case NotificationType.WARNING: return 
    case NotificationType.CLOUD:   return 
    default: {        
      console.error("There is no notification icon for type: " + JSON.stringify(type))
      return 
    }
  }
}

const IconContainer = ({children}: {children: React.ReactNode}) => (
  
    {children}
  
)
const defaultTheme = createTheme();

const useNotificationColor = (type: NotificationType) => {
  const currentTheme = useTheme()
  const theme        = currentTheme ? currentTheme : defaultTheme

  switch (type) {
    case NotificationType.ERROR:   return theme.palette.error
    case NotificationType.INFO:    return theme.palette.info
    case NotificationType.WARNING: return theme.palette.warning
    case NotificationType.CLOUD:   return theme.palette.warning
    default: {        
        console.error("There is no notification icon for type: " + type)
        return theme.palette.error
      }
  }
}

export default Notification