aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/animations
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-13 06:35:20 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-13 07:26:26 +0800
commit0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4 (patch)
treedeb42bc8917bc88d036d0f00efe9807c22423caf /packages/instant/src/components/animations
parent7102a23b0a3a502f250071576821ce385a761f4d (diff)
downloaddexon-sol-tools-0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4.tar
dexon-sol-tools-0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4.tar.gz
dexon-sol-tools-0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4.tar.bz2
dexon-sol-tools-0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4.tar.lz
dexon-sol-tools-0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4.tar.xz
dexon-sol-tools-0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4.tar.zst
dexon-sol-tools-0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4.zip
feat(instant): add sliding error
Diffstat (limited to 'packages/instant/src/components/animations')
-rw-r--r--packages/instant/src/components/animations/slide_up_and_down_animation.tsx100
1 files changed, 100 insertions, 0 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
new file mode 100644
index 000000000..958684021
--- /dev/null
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -0,0 +1,100 @@
+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;
+ z-index: -1;
+`;
+
+export const SlideUpAnimationComponent: React.StatelessComponent<{ downY: string }> = props => (
+ <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
+ {props.children}
+ </SlideAnimation>
+);
+
+export const SlideDownAnimationComponent: React.StatelessComponent<{ downY: string }> = 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 {
+ delayMs: number;
+ downY: string;
+}
+
+interface SlideUpAndDownState {
+ slideState: 'up' | 'down';
+}
+
+export class SlideUpAndDownAnimationComponent extends React.Component<
+ SlideUpAndDownAnimationProps,
+ SlideUpAndDownState
+> {
+ private _timeoutNumber: number | undefined;
+
+ constructor(props: SlideUpAndDownAnimationProps) {
+ super(props);
+ this._timeoutNumber = undefined;
+ this.state = {
+ slideState: 'up',
+ };
+ }
+
+ public render(): JSX.Element {
+ return this._renderSlide();
+ }
+
+ public componentDidMount(): void {
+ this._timeoutNumber = window.setTimeout(() => {
+ this.setState({
+ slideState: 'down',
+ });
+ }, this.props.delayMs);
+
+ return;
+ }
+
+ public componentWillUnmount(): void {
+ if (this._timeoutNumber) {
+ window.clearTimeout(this._timeoutNumber);
+ }
+ }
+
+ private readonly _renderSlide = (): JSX.Element => {
+ const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent;
+
+ return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>;
+ };
+}