diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-12 00:53:15 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-12 00:53:15 +0800 |
commit | faee7513952a4b87d5f9e9dde9deb20126f58834 (patch) | |
tree | 8168000e484e621e1526cf48fb0f979a6d98d972 /packages/dev-tools-pages/ts/components/animations/index.tsx | |
parent | 742e5e039dd4e821209b5511fb6a194d11c6291c (diff) | |
parent | 2cf57a48dd2857dd5cf2f31f4c60dd47ae4d34a5 (diff) | |
download | dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.gz dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.bz2 dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.lz dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.xz dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.zst dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.zip |
Merge branch 'development' into feature/instant/asset-buyer-check-liquidity
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, 93 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/animations/index.tsx b/packages/dev-tools-pages/ts/components/animations/index.tsx new file mode 100644 index 000000000..106acf707 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/animations/index.tsx @@ -0,0 +1,93 @@ +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 }; |