aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/animations/slide_up_and_down_animation.tsx36
-rw-r--r--packages/instant/src/components/sliding_error.tsx6
2 files changed, 19 insertions, 23 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
index ce1539c70..2e8061a19 100644
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -19,6 +19,7 @@ export interface SlideAnimationProps {
animationType: string;
animationDirection?: string;
}
+
export const SlideAnimation =
styled.div <
SlideAnimationProps >
@@ -33,13 +34,17 @@ export const SlideAnimation =
z-index: -1;
`;
-export const SlideUpAnimationComponent: React.StatelessComponent<{ downY: string }> = props => (
+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<{ downY: string }> = props => (
+export const SlideDownAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
<SlideAnimation
animationDirection="forwards"
animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
@@ -49,35 +54,28 @@ export const SlideDownAnimationComponent: React.StatelessComponent<{ downY: stri
</SlideAnimation>
);
-export interface SlideUpAndDownAnimationProps {
+export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps {
delayMs: number;
- downY: string;
}
interface SlideUpAndDownState {
slideState: 'up' | 'down';
}
-export class SlideUpAndDownAnimationComponent extends React.Component<
- SlideUpAndDownAnimationProps,
- SlideUpAndDownState
-> {
- private _timeoutNumber: number | undefined;
-
+export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> {
+ private _timeoutId: number | undefined;
constructor(props: SlideUpAndDownAnimationProps) {
super(props);
- this._timeoutNumber = undefined;
+ this._timeoutId = undefined;
this.state = {
slideState: 'up',
};
}
-
- public render(): JSX.Element {
+ public render(): React.ReactNode {
return this._renderSlide();
}
-
public componentDidMount(): void {
- this._timeoutNumber = window.setTimeout(() => {
+ this._timeoutId = window.setTimeout(() => {
this.setState({
slideState: 'down',
});
@@ -85,14 +83,12 @@ export class SlideUpAndDownAnimationComponent extends React.Component<
return;
}
-
public componentWillUnmount(): void {
- if (this._timeoutNumber) {
- window.clearTimeout(this._timeoutNumber);
+ if (this._timeoutId) {
+ window.clearTimeout(this._timeoutId);
}
}
-
- private readonly _renderSlide = (): JSX.Element => {
+ private readonly _renderSlide = (): React.ReactNode => {
const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent;
return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>;
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 2e6decbad..0237fb7e9 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { ColorOption } from '../style/theme';
-import { SlideUpAndDownAnimationComponent } from './animations/slide_up_and_down_animation';
+import { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation';
import { Container, Text } from './ui';
@@ -30,7 +30,7 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
);
export const SlidingError: React.StatelessComponent<ErrorProps> = props => (
- <SlideUpAndDownAnimationComponent downY="120px" delayMs={5000}>
+ <SlideUpAndDownAnimation downY="120px" delayMs={5000}>
<Error icon={props.icon} message={props.message} />
- </SlideUpAndDownAnimationComponent>
+ </SlideUpAndDownAnimation>
);