packages/instant/src/components/animations/slide_animations.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import * as React from 'react';
import { Keyframes } from 'styled-components';

import { css, keyframes, styled } from '../../style/theme';

import { PositionAnimation, PositionAnimationProps } from './position_animation';

export type SlideAnimationPhase = 'slideIn' | 'slideOut';
export interface SlideAnimationProps {
    phase: SlideAnimationPhase;
    slideIn: PositionAnimationProps;
    slideOut: PositionAnimationProps;
}

export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
    const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
    return <PositionAnimation {...propsToUse}>{props.children}</PositionAnimation>;
};