import 'animate.css/animate.min.css' ; import React , { FunctionComponent , useEffect , useState } from 'react' ; import classNames from 'classnames' ; import { NotificationItem } from './NotificationItem' ; import { NotificationMessage , NotificationPanelProps , } from './NotificationPanel.interface' ; import styles from './styles.scss' ; export const NotificationPanel = ( { messages , className , exitAnimation , entranceAnimation , backdropEntranceAnimation , backdropExitAnimation , duration , ... rest } ) => { const [ currentMessages , setCurrentMessages ] = useState ( messages ) ; const [ timer , setTimer ] = useState ( null ) ; useEffect ( ( ) => { const updatedMessages = [ ] ; if ( currentMessages . length > messages . length ) { currentMessages . forEach ( ( currentMessage ) => { const updatedMessage = { ... currentMessage , } ; if ( ! messages . some ( ( m ) => m . id === currentMessage . id ) ) { updatedMessage . animation = exitAnimation ; updatedMessage . backdropAnimation = backdropExitAnimation ; } else { updatedMessage . animation = '' ; updatedMessage . backdropAnimation = '' ; } updatedMessages . push ( updatedMessage ) ; } ) ; setCurrentMessages ( updatedMessages ) ; if ( duration > 0 ) { const timerId = setTimeout ( ( ) => { setCurrentMessages ( messages ) ; } , duration ) ; setTimer ( timerId ) ; } } else { if ( timer ) { clearTimeout ( timer ) ; } setCurrentMessages ( messages ) ; } } , [ messages ] ) ; return ( < div className = { classNames ( styles . root , className ) } > { currentMessages . map ( ( data , i ) => { return ( < NotificationItem { ... rest } data = { data } duration = { duration } backdropAnimation = { data . backdropAnimation ?? backdropEntranceAnimation } animation = { data . animation ?? entranceAnimation } key = { i } / > ) ; } ) } < /div>); } ; NotificationPanel . defaultProps = { entranceAnimation : 'fadeInDown' , exitAnimation : 'fadeOutUp' , backdropEntranceAnimation : 'fadeIn' , backdropExitAnimation : 'fadeOut' , duration : 500 , } ;