diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-18 18:35:07 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-18 18:35:07 +0800 |
commit | cdd650d0eb83153a992922c6ffff35b494f299d3 (patch) | |
tree | fc12135e69ae74403a26408d2d7625e8a3fe334e /packages/instant/src/components/animations/slide_up_and_down_animation.tsx | |
parent | c333d093b585fa0250a6973f2d396eb3cf227334 (diff) | |
parent | bd8ba14bf46cb901e14f0ee718ac01cdbc833e86 (diff) | |
download | dexon-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.tsx | 96 |
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>; - } -} |