aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
diff options
context:
space:
mode:
authorKadinsky <kandinsky454@protonmail.ch>2018-10-18 18:12:24 +0800
committerGitHub <noreply@github.com>2018-10-18 18:12:24 +0800
commitd0df0747217dca230aadbee72337d7111a1383e7 (patch)
tree4df7d1a0fd40f7e953af595ddac9f9b7c4aec0d3 /packages/instant/src/components/animations/slide_up_and_down_animation.tsx
parent376034ac7e2053ea81aa637983d1f6a7e61588d9 (diff)
parent6ea386a7af89c1b8a4df94b656ae1772c29c1401 (diff)
downloaddexon-sol-tools-d0df0747217dca230aadbee72337d7111a1383e7.tar
dexon-sol-tools-d0df0747217dca230aadbee72337d7111a1383e7.tar.gz
dexon-sol-tools-d0df0747217dca230aadbee72337d7111a1383e7.tar.bz2
dexon-sol-tools-d0df0747217dca230aadbee72337d7111a1383e7.tar.lz
dexon-sol-tools-d0df0747217dca230aadbee72337d7111a1383e7.tar.xz
dexon-sol-tools-d0df0747217dca230aadbee72337d7111a1383e7.tar.zst
dexon-sol-tools-d0df0747217dca230aadbee72337d7111a1383e7.zip
Merge pull request #1142 from 0xProject/feature/instant/asset-buyer-errors
[instant] Asset buyer errors
Diffstat (limited to 'packages/instant/src/components/animations/slide_up_and_down_animation.tsx')
-rw-r--r--packages/instant/src/components/animations/slide_up_and_down_animation.tsx96
1 files changed, 0 insertions, 96 deletions
diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
deleted file mode 100644
index 9c18e0933..000000000
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import * as React from 'react';
-
-import { keyframes, styled } from '../../style/theme';
-
-const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
- from {
- position: relative;
- top: ${fromY};
- }
-
- to {
- position: relative;
- top: ${toY};
- }
-`;
-
-export interface SlideAnimationProps {
- keyframes: string;
- animationType: string;
- animationDirection?: string;
-}
-
-export const SlideAnimation =
- styled.div <
- SlideAnimationProps >
- `
- animation-name: ${props => 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 SlideUpAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
- <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
- {props.children}
- </SlideAnimation>
-);
-
-export const SlideDownAnimationComponent: 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 interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps {
- delayMs: number;
-}
-
-enum SlideState {
- Up = 'up',
- Down = 'down',
-}
-interface SlideUpAndDownState {
- slideState: SlideState;
-}
-
-export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> {
- public state = {
- slideState: SlideState.Up,
- };
-
- private _timeoutId?: number;
- public render(): React.ReactNode {
- return this._renderSlide();
- }
- public componentDidMount(): void {
- this._timeoutId = window.setTimeout(() => {
- this.setState({
- slideState: SlideState.Down,
- });
- }, this.props.delayMs);
-
- return;
- }
- public componentWillUnmount(): void {
- if (this._timeoutId) {
- window.clearTimeout(this._timeoutId);
- }
- }
- private _renderSlide(): React.ReactNode {
- const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent;
-
- return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>;
- }
-}