import React from 'react' ; import { CSSTransition , TransitionGroup } from 'react-transition-group' ; import { Transitions } from 'types' ; import transitions , { classNames } from './transitions' ; interface Props { appear : boolean ; children : React . ReactNode ; className ? : string ; enter : boolean ; exit : boolean ; style ? : React . CSSProperties ; timeout : number ; transition : Transitions ; } function Transition ( { children , className , style , transition , ... rest } ) { const Component = transitions [ transition ] ; if ( ! Component ) { console . error ( `Invalid transition: ${ transition }` ) ; return null ; } return ( < TransitionGroup className = { className } style = { style } > { React . Children . toArray ( children ) . filter ( child => ! ! child ) . map ( ( child , key ) => ( < CSSTransition key = { key } classNames = { classNames [ transition ] } { ... rest } > < Component > { child } < /Component> < /CSSTransition>))} < /TransitionGroup>); } Transition . defaultProps = { appear : true , enter : true , exit : true , timeout : 300 , transition : 'fade' , } ; export default Transition ;