import { Transition } from 'react-transition-group' ; import React , { RefObject } from 'react' ; import { POSITIONS } from '../constants' ; import { Notification } from '../reducers/notifications/types' ; import { TransitionProps } from 'react-transition-group/Transition' ; type Props = { notification : Notification ; duration ? : number ; } & Omit < TransitionProps < HTMLElement > , 'addEndListener' > ; const SlideTransition = ( props ) => { const duration = props . duration || 300 ; const collapseAnimationDuration = 250 ; const { children , notification , nodeRef , ... otherProps } = props ; const getNode = ( ) => ( nodeRef as RefObject < HTMLElement > ) . current as HTMLElement ; const transformDirection = ( [ POSITIONS . topCenter , POSITIONS . bottomCenter ] as string [ ] ) . includes ( notification . position ) ? 'translateY' : 'translateX' ; const transformValue = ( [ POSITIONS . topCenter , POSITIONS . topLeft , POSITIONS . bottomLeft ] as string [ ] ) . includes ( notification . position ) ? '-100%' : '100%' ; const animationProps = { fill : 'forwards' , duration , } ; const onEnter = ( ) => { getNode ( ) . animate ( [ { transform : `${ transformDirection }(${ transformValue })` , opacity : 0 } , { transform : `${ transformDirection }(0)` , opacity : 1 } , ] , animationProps ) ; } ; const onExit = ( ) => { const hideAnimationDuration = duration ; getNode ( ) . animate ( [ { transform : `${ transformDirection }(${ transformValue })` , opacity : 0 } ] , animationProps ) ; getNode ( ) . animate ( [ { maxHeight : '150px' } , { margin : 0 , maxHeight : 0 } ] , { ... animationProps , duration : collapseAnimationDuration , delay : hideAnimationDuration , } ) ; } ; return ( < Transition nodeRef = { nodeRef } onEnter = { onEnter } onExit = { onExit } timeout = { duration + collapseAnimationDuration } { ... otherProps } > { children } < /Transition>); } ; export default SlideTransition ;