feat: refactor animation code

1 files changed, 9 insertions, 49 deletions

diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 84280372b..99533a2f0 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -3,56 +3,16 @@ import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
 
-const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
-    from {
-        position: relative;
-        top: ${fromY};
-    }
-
-    to {
-        position: relative;
-        top: ${toY};
-    }
-`;
+import { PositionAnimation, PositionAnimationProps } from './position_animation';
 
+export type SlideAnimationPhase = 'slideIn' | 'slideOut';
 export interface SlideAnimationProps {
-    keyframes: Keyframes;
-    animationType: string;
-    animationDirection?: string;
+    phase: SlideAnimationPhase;
+    slideIn: PositionAnimationProps;
+    slideOut: PositionAnimationProps;
 }
 
-export const SlideAnimation =
-    styled.div <
-    SlideAnimationProps >
-    `
-    animation-name: ${props =>
-        css`
-            ${props.keyframes};
-        `};
-    animation-duration: 0.3s;
-    animation-timing-function: ${props => props.animationType};
-    animation-delay: 0s;
-    animation-iteration-count: 1;
-    animation-fill-mode: ${props => props.animationDirection || 'none'};
-    position: relative;
-`;
-
-export interface SlideAnimationComponentProps {
-    downY: string;
-}
-
-export const SlideUpAnimation: React.StatelessComponent<SlideAnimationComponentProps> = props => (
-    <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
-        {props.children}
-    </SlideAnimation>
-);
-
-export const SlideDownAnimation: React.StatelessComponent<SlideAnimationComponentProps> = props => (
-    <SlideAnimation
-        animationDirection="forwards"
-        animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
-        keyframes={slideKeyframeGenerator('0px', props.downY)}
-    >
-        {props.children}
-    </SlideAnimation>
-);
+export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
+    const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
+    return <PositionAnimation {...propsToUse}>{props.children}</PositionAnimation>;
+};