diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components/animations/index.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/animations/index.tsx | 93 |
1 files changed, 0 insertions, 93 deletions
diff --git a/packages/dev-tools-pages/ts/components/animations/index.tsx b/packages/dev-tools-pages/ts/components/animations/index.tsx deleted file mode 100644 index 106acf707..000000000 --- a/packages/dev-tools-pages/ts/components/animations/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -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.bind(this)); - } - public componentWillUnmount(): void { - window.removeEventListener('resize', this._handleResize.bind(this)); - } - 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 _handleResize(): void { - clearTimeout(this._timeout); - this._timeout = window.setTimeout(this._updateAnimationSize.bind(this), 50); - } - private _updateAnimationSize(): void { - 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 }; |