import React , { FunctionComponent , memo , useMemo } from 'react' ; import classNames from 'classnames' ; import { combineProps , RcSnackbarAction , RcSnackbarContent , RcSnackbarContentType , } from '@ringcentral/juno' ; import { Close as closeSvg } from '@ringcentral/juno/icon' ; import { NotificationItemProps , NotificationMessage , } from './NotificationPanel.interface' ; import styles from './styles.scss' ; export function getLevelType ( level ) { let type ; switch ( level ) { case 'warning' : type = 'warn' ; break ; case 'danger' : type = 'error' ; break ; default : type = level ; } return type ; } export const NotificationItem = memo ( ( { data , currentLocale , brand , dismiss , getRenderer , duration , animation : defaultAnimation , backdropAnimation : defaultBackdropAnimation , classes : { snackbar : snackbarClass , backdrop : backdropClass } , size , messageAlign , fullWidth , } ) => { const Message = getRenderer ( data ) ; const second = duration / 1000 ; const { id , level , classes = { } , loading , action , animation = defaultAnimation , backdropAnimation = defaultBackdropAnimation , backdrop , onBackdropClick , } = data ; const type = getLevelType ( level ) ; const animationStyle = useMemo ( ( ) => ( { animationDuration : `${ second }s` , } ) , [ second ] ) ; return ( < div className = { styles . container } > { backdrop && ( < div className = { classNames ( styles . backdrop , backdropClass , classes . backdrop , 'animated' , backdropAnimation ) } style = { animationStyle } onClick = { onBackdropClick } / > ) } < RcSnackbarContent data - sign = "notification" data - sign - type = { type } type = { type } size = { size } fullWidth = { fullWidth } loading = { loading } classes = { combineProps ( { root : classNames ( 'animated' , styles . snackbar , animation ) , } , snackbarClass ) } style = { animationStyle } messageAlign = { messageAlign } message = { < Message message = { data } currentLocale = { currentLocale } brand = { brand } / > } action = { action ?? ( < RcSnackbarAction variant = "icon" symbol = { closeSvg } size = "small" onClick = { ( ) => { dismiss ( id ) ; } } />)}/ > < /div>); } ) ; NotificationItem . defaultProps = { duration : 500 , classes : { } , size : 'small' , messageAlign : 'left' , fullWidth : true , } ;