aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/Animations/index.tsx
blob: 7f7b36c214661eabb5d1e6c84b54286bfdb8b0db (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import * as React from 'react';
import Lottie from 'react-lottie';
import styled from 'styled-components';

import { media } from 'ts/variables';

interface AnimationProps {
    animationData: object;
    width: number;
    height: number;
}

interface AnimationState {
    width?: number | undefined;
    height?: number | undefined;
}

class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState> {
    public state: AnimationState = {
        height: undefined,
        width: undefined,
    };
    private _timeout = undefined as number;
    public componentDidMount(): void {
        this._updateAnimationSize();
        window.addEventListener('resize', this._handleResize);
    }
    public componentWillUnmount(): void {
        window.removeEventListener('resize', this._handleResize);
    }
    public render(): React.ReactNode {
        const { animationData } = this.props;
        const height = this.state.height || this.props.height;
        const width = this.state.width || this.props.width;

        return (
            <Container height={height}>
                <InnerContainer>
                    <Lottie
                        width={width}
                        height={height}
                        options={{
                            loop: true,
                            autoplay: true,
                            animationData,
                        }}
                    />
                </InnerContainer>
            </Container>
        );
    }
    private readonly _handleResize = () => {
        clearTimeout(this._timeout);
        this._timeout = window.setTimeout(this._updateAnimationSize, 50);
    };
    private readonly _updateAnimationSize = () => {
        const windowWidth = window.innerWidth;
        let width;
        let height;
        if (windowWidth <= 1000) {
            const maxWidth = windowWidth + 250;
            const ratio = maxWidth / this.props.width;

            height = Math.round(this.props.height * ratio);
            width = Math.round(this.props.width * ratio);
        }

        this.setState({ width, height });
    };
}

const Container =
    styled.div <
    AnimationProps >
    `
    width: 100%;
    height: ${props => props.height}px;
    position: absolute;
    top: 40%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    ${media.large`
        top: 100%;
        transform: translateY(-50%);
    `};
`;

const InnerContainer = styled.div`
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
`;

export { BaseAnimation };