diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-17 02:25:52 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-18 05:44:39 +0800 |
commit | db77cd10c550803c4f3fac585adc0a7f6ffa8999 (patch) | |
tree | d575b28199e32fd0ebdbac831e3839cc4fa2aa10 /packages/instant/src/components/animations/slide_animations.tsx | |
parent | f36352be47a3caf92e16e3965c86b593bfc46fea (diff) | |
download | dexon-sol-tools-db77cd10c550803c4f3fac585adc0a7f6ffa8999.tar dexon-sol-tools-db77cd10c550803c4f3fac585adc0a7f6ffa8999.tar.gz dexon-sol-tools-db77cd10c550803c4f3fac585adc0a7f6ffa8999.tar.bz2 dexon-sol-tools-db77cd10c550803c4f3fac585adc0a7f6ffa8999.tar.lz dexon-sol-tools-db77cd10c550803c4f3fac585adc0a7f6ffa8999.tar.xz dexon-sol-tools-db77cd10c550803c4f3fac585adc0a7f6ffa8999.tar.zst dexon-sol-tools-db77cd10c550803c4f3fac585adc0a7f6ffa8999.zip |
feat(instant): Handle AssetBuyer errors
Diffstat (limited to 'packages/instant/src/components/animations/slide_animations.tsx')
-rw-r--r-- | packages/instant/src/components/animations/slide_animations.tsx | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx new file mode 100644 index 000000000..1f10a2ed6 --- /dev/null +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -0,0 +1,54 @@ +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 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> +); |