aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-16 04:12:52 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-16 04:12:52 +0800
commitaf495143974941fb6cc4210b1965c17f007465e6 (patch)
treec7eb7429116cc3b0ef7fd737694f68e4b8ba66e8 /packages/instant/src
parent2aa4761d6dfaa007ed632816de9416a6477cd370 (diff)
downloaddexon-sol-tools-af495143974941fb6cc4210b1965c17f007465e6.tar
dexon-sol-tools-af495143974941fb6cc4210b1965c17f007465e6.tar.gz
dexon-sol-tools-af495143974941fb6cc4210b1965c17f007465e6.tar.bz2
dexon-sol-tools-af495143974941fb6cc4210b1965c17f007465e6.tar.lz
dexon-sol-tools-af495143974941fb6cc4210b1965c17f007465e6.tar.xz
dexon-sol-tools-af495143974941fb6cc4210b1965c17f007465e6.tar.zst
dexon-sol-tools-af495143974941fb6cc4210b1965c17f007465e6.zip
suggestions from code review: renaming timeoutNumber to timeoutId, sharing interface, renaming component
Diffstat (limited to 'packages/instant/src')
-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>
);