const { CSSTransition , TransitionGroup } = require ( 'react-transition-group' ) ; import { ClassNames , jsx as JSX } from '@emotion/core' ; import React from 'react' ; import { DURATION , EASE } from './motions' ; type TransitionProps = Partial < any > & { children : React . ReactNode ; component ? : keyof JSX . IntrinsicElements | React . ComponentType < any > ; } ; type OpacityProps = TransitionProps & { endValue ? : number ; startValue ? : number ; } ; type MovementProps = TransitionProps & { endValue ? : string ; startValue ? : string ; } ; type TransitionContainerProps = React . HTMLProps < any > & { appear ? : boolean ; component ? : keyof JSX . IntrinsicElements ; enter ? : boolean ; exit ? : boolean ; } ; export const TransitionContainer = ( props ) => < TransitionGroup { ... props } / > ; export const Transition = ( { animationStyle , timeout , component = 'div' , children , ... props } ) => ( < ClassNames > { ( { css } ) => ( < CSSTransition timeout = { timeout } classNames = { css ( animationStyle ) } { ... props } > { component ? React . createElement ( component , { } , children ) : children } < /CSSTransition>)} < /ClassNames>); export const Opacity = ( { startValue = 0 , endValue = 1 , timeout = DURATION . DEFAULT , ... props } ) => ( < Transition animationStyle = { { '&-enter' : { opacity : startValue } , '&-enter-active' : { opacity : endValue , transition : `all ${ timeout }ms ${ EASE . QUART }` , } , '&-exit' : { opacity : endValue } , '&-exit-active' : { opacity : startValue , pointerEvents : 'none' , transition : `all ${ timeout }ms ${ EASE . QUART }` , } , '&-exit-done' : { opacity : startValue } , } } timeout = { timeout } { ... props } />); export const YAxisMovement = ( { startValue = '-100%' , endValue = '0%' , timeout = DURATION . DEFAULT , ... props } ) => ( < Transition animationStyle = { { '&-enter' : { transform : `translateY(${ startValue })` } , '&-enter-active' : { transform : `translateY(${ endValue })` , transition : `all ${ timeout }ms ${ EASE . EXPONENTIAL }` , } , '&-exit' : { transform : `translateY(${ endValue })` } , '&-exit-active' : { pointerEvents : 'none' , transform : `translateY(${ startValue })` , transition : `all ${ timeout }ms ${ EASE . EXPONENTIAL }` , } , '&-exit-done' : { transform : `translateY(${ startValue })` } , } } timeout = { timeout } { ... props } />); export const XAxisMovement = ( { startValue = '-100%' , endValue = '0%' , timeout = DURATION . DEFAULT , ... props } ) => ( < Transition animationStyle = { { '&-enter' : { transform : `translateX(${ startValue })` } , '&-enter-active' : { transform : `translateX(${ endValue })` , transition : `all ${ timeout }ms ${ EASE . EXPONENTIAL }` , } , '&-exit' : { transform : `translateX(${ endValue })` } , '&-exit-active' : { pointerEvents : 'none' , transform : `translateX(${ startValue })` , transition : `all ${ timeout }ms ${ EASE . EXPONENTIAL }` , } , '&-exit-done' : { transform : `translateX(${ startValue })` } , } } timeout = { timeout } { ... props } />); export const Slide = ( { startValue = '-100%' , endValue = '0%' , timeout = DURATION . DEFAULT , ... props } ) => ( < Transition animationStyle = { { '&-enter' : { marginTop : startValue } , '&-enter-active' : { marginTop : endValue , transition : `all ${ timeout }ms ${ EASE . QUART }` , } , '&-exit' : { marginTop : endValue } , '&-exit-active' : { marginTop : startValue , pointerEvents : 'none' , transition : `all ${ timeout }ms ${ EASE . QUART }` , } , '&-exit-done' : { marginTop : startValue } , } } timeout = { timeout } { ... props } />); export const LeftRightMovement = props => < XAxisMovement startValue = "-100vh" endValue = "0vh" { ... props } />; export const RightLeftMovement = props => < XAxisMovement startValue = "100vh" endValue = "0vh" { ... props } />; export const TopDownMovement = props => < YAxisMovement startValue = "-100%" endValue = "0%" { ... props } />; export const BottomUpMovement = props => < YAxisMovement startValue = "100%" endValue = "0%" { ... props } />;