feat: refactor animation code

10 files changed, 130 insertions, 74 deletions

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
new file mode 100644
index 000000000..de38ee30a
--- /dev/null
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Keyframes } from 'styled-components';
+
+import { css, keyframes, styled } from '../../style/theme';
+
+const generateTransitionInfoCss = (
+    key: keyof TransitionInfo,
+    top?: TransitionInfo,
+    bottom?: TransitionInfo,
+    left?: TransitionInfo,
+    right?: TransitionInfo,
+): string => {
+    const topStringIfExists = top ? `top: ${top[key]};` : '';
+    const bottomStringIfExists = bottom ? `bottom: ${bottom[key]};` : '';
+    const leftStringIfExists = left ? `left: ${left[key]};` : '';
+    const rightStringIfExists = right ? `right: ${right[key]};` : '';
+    return `
+    ${topStringIfExists}
+    ${bottomStringIfExists}
+    ${leftStringIfExists}
+    ${rightStringIfExists}
+    `;
+};
+
+const slideKeyframeGenerator = (
+    top?: TransitionInfo,
+    bottom?: TransitionInfo,
+    left?: TransitionInfo,
+    right?: TransitionInfo,
+) => keyframes`
+    from {
+        position: relative;
+        ${generateTransitionInfoCss('from', top, bottom, left, right)}
+    }
+
+    to {
+        position: relative;
+        ${generateTransitionInfoCss('to', top, bottom, left, right)}
+    }
+`;
+
+export interface TransitionInfo {
+    from: string;
+    to: string;
+}
+
+export interface PositionAnimationProps {
+    top?: TransitionInfo;
+    bottom?: TransitionInfo;
+    left?: TransitionInfo;
+    right?: TransitionInfo;
+    timingFunction: string;
+    direction?: string;
+}
+
+export const PositionAnimation =
+    styled.div <
+    PositionAnimationProps >
+    `
+    animation-name: ${props =>
+        css`
+            ${slideKeyframeGenerator(props.top, props.bottom, props.left, props.right)};
+        `};
+    animation-duration: 0.3s;
+    animation-timing-function: ${props => props.timingFunction};
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    animation-fill-mode: ${props => props.direction || 'none'};
+    position: relative;
+`;
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>;
+};
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index 4108fd0e8..bed1b3b4e 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -15,7 +15,7 @@ export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
     value?: BigNumberInput;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
-    onSymbolClick: (asset?: ERC20Asset) => void;
+    onSymbolClick?: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
     isDisabled: boolean;
@@ -28,7 +28,6 @@ export interface ERC20AssetAmountInputState {
 export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
-        onSymbolClick: util.boundNoop,
         isDisabled: false,
     };
     constructor(props: ERC20AssetAmountInputProps) {
@@ -112,7 +111,9 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         });
     };
     private readonly _handleSymbolClick = () => {
-        this.props.onSymbolClick(this.props.asset);
+        if (this.props.onSymbolClick) {
+            this.props.onSymbolClick(this.props.asset);
+        }
     };
     // For assets with symbols of different length,
     // start scaling the input at different character lengths
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 0b41d44d7..e1c2f8bc3 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -60,8 +60,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private _renderAmountsSection(): React.ReactNode {
         return (
             <Container>
-                <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container>
-                <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container>
+                <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container>
+                <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container>
             </Container>
         );
     }
@@ -92,7 +92,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         return 'I want to buy';
     }
 
-    private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
+    private _renderPlaceholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
         if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
             return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
         }
@@ -102,7 +102,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         return amountFunction();
     }
 
-    private readonly _ethAmount = (): React.ReactNode => {
+    private readonly _renderEthAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
                 {format.ethBaseAmount(
@@ -114,7 +114,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         );
     };
 
-    private readonly _dollarAmount = (): React.ReactNode => {
+    private readonly _renderDollarAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white}>
                 {format.ethBaseAmountInUsd(
diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx
index bb16ed9b1..ecefadced 100644
--- a/packages/instant/src/components/panel.tsx
+++ b/packages/instant/src/components/panel.tsx
@@ -12,10 +12,11 @@ export interface PanelProps {
 export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
     <Container
         backgroundColor={ColorOption.white}
-        position="absolute"
-        top="0px"
-        left="0px"
-        width="100%"
+        // position="absolute"
+        // left="0px"
+        // bottom="0px"
+        // width="100%"
+        // height="100%"
         height="100%"
         zIndex={zIndex.panel}
     >
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index cc9abb7dd..8f209765e 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations';
+import { PositionAnimationProps } from './animations/position_animation';
+import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations';
 
 import { Container, Flex, Text } from './ui';
 
@@ -31,16 +32,29 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
     </Container>
 );
 
-export type SlidingDirection = 'up' | 'down';
 export interface SlidingErrorProps extends ErrorProps {
-    direction: SlidingDirection;
+    phase: SlideAnimationPhase;
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
-    const AnimationComponent = props.direction === 'up' ? SlideUpAnimation : SlideDownAnimation;
-
+    const slideAmount = '120px';
+    const slideUp: PositionAnimationProps = {
+        timingFunction: 'ease-in',
+        top: {
+            from: slideAmount,
+            to: '0px',
+        },
+    };
+    const slideDown: PositionAnimationProps = {
+        timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+        top: {
+            from: '0px',
+            to: slideAmount,
+        },
+        direction: 'forwards',
+    };
     return (
-        <AnimationComponent downY="120px">
+        <SlideAnimation slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
             <Error icon={props.icon} message={props.message} />
-        </AnimationComponent>
+        </SlideAnimation>
     );
 };
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index b6842b294..7b8642761 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -29,6 +29,7 @@ export interface ContainerProps {
     whiteSpace?: string;
     opacity?: number;
     cursor?: string;
+    overflow?: string;
 }
 
 export const Container =
@@ -59,6 +60,7 @@ export const Container =
     ${props => cssRuleIfExists(props, 'white-space')}
     ${props => cssRuleIfExists(props, 'opacity')}
     ${props => cssRuleIfExists(props, 'cursor')}
+    ${props => cssRuleIfExists(props, 'overflow')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index ded0d075e..c8d5235c8 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -4,16 +4,16 @@ import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order
 import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
-
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 
+import { Panel } from './panel';
 import { Container, Flex } from './ui';
 
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Container width="350px">
+    <Container width="350px" position="relative">
         <Container zIndex={zIndex.errorPopup} position="relative">
             <LatestError />
         </Container>
@@ -23,6 +23,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
             backgroundColor={ColorOption.white}
             borderRadius="3px"
             hasBoxShadow={true}
+            overflow="hidden"
         >
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
@@ -31,6 +32,11 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
                     <SelectedAssetBuyOrderStateButtons />
                 </Container>
             </Flex>
+            {/* <Container position="absolute" left="0px" bottom="0px" width="100%" height="100%">
+                <SlideAnimationHelper direction="up" downY="200px">
+                    <Panel> Hey </Panel>
+                </SlideAnimationHelper>
+            </Container> */}
         </Container>
     </Container>
 );
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 45ca09673..2a8d232da 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { connect } from 'react-redux';
 
+import { SlideAnimationPhase } from '../components/animations/slide_animations';
 import { SlidingError } from '../components/sliding_error';
 import { State } from '../redux/reducer';
 import { Asset, DisplayStatus } from '../types';
@@ -9,26 +10,26 @@ import { Asset, DisplayStatus } from '../types';
 export interface LatestErrorComponentProps {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingDirection: 'down' | 'up';
+    slidingPhase: SlideAnimationPhase;
 }
 
 export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
     if (!props.latestErrorMessage) {
         return <div />;
     }
-    return <SlidingError direction={props.slidingDirection} icon="😢" message={props.latestErrorMessage} />;
+    return <SlidingError phase={props.slidingPhase} icon="😢" message={props.latestErrorMessage} />;
 };
 
 interface ConnectedState {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingDirection: 'down' | 'up';
+    slidingPhase: SlideAnimationPhase;
 }
 export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     asset: state.selectedAsset,
     latestErrorMessage: state.latestErrorMessage,
-    slidingDirection: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'up' : 'down',
+    slidingPhase: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slideIn' : 'slideOut',
 });
 
 export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 4767b15d4..4df7faab9 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -19,6 +19,7 @@ import { errorFlasher } from '../util/error_flasher';
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
     startingFontSizePx: number;
+    onSymbolClick?: (asset?: ERC20Asset) => void;
 }
 
 interface ConnectedState {