aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-18 18:35:07 +0800
committerFabio Berger <me@fabioberger.com>2018-10-18 18:35:07 +0800
commitcdd650d0eb83153a992922c6ffff35b494f299d3 (patch)
treefc12135e69ae74403a26408d2d7625e8a3fe334e /packages/instant/src/components/animations/slide_up_and_down_animation.tsx
parentc333d093b585fa0250a6973f2d396eb3cf227334 (diff)
parentbd8ba14bf46cb901e14f0ee718ac01cdbc833e86 (diff)
downloaddexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar
dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.gz
dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.bz2
dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.lz
dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.xz
dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.zst
dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.zip
merge development
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>;
- }
-}