diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-16 23:59:02 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-16 23:59:02 +0800 |
commit | c84c92663d1ce0227b755dc861f825c35a3c7999 (patch) | |
tree | 3800297ba0072233fe88839b675e33e6b44f9649 /packages/instant/src/components/animations/slide_up_and_down_animation.tsx | |
parent | 55a3bc8cb6772802672f60f22c5ed5c7e1b2dfdd (diff) | |
parent | c333d093b585fa0250a6973f2d396eb3cf227334 (diff) | |
download | dexon-sol-tools-c84c92663d1ce0227b755dc861f825c35a3c7999.tar dexon-sol-tools-c84c92663d1ce0227b755dc861f825c35a3c7999.tar.gz dexon-sol-tools-c84c92663d1ce0227b755dc861f825c35a3c7999.tar.bz2 dexon-sol-tools-c84c92663d1ce0227b755dc861f825c35a3c7999.tar.lz dexon-sol-tools-c84c92663d1ce0227b755dc861f825c35a3c7999.tar.xz dexon-sol-tools-c84c92663d1ce0227b755dc861f825c35a3c7999.tar.zst dexon-sol-tools-c84c92663d1ce0227b755dc861f825c35a3c7999.zip |
Merge branch 'dev-section-redesign' into reSkinReferenceDocs
* dev-section-redesign: (87 commits)
Added note about restriction on `testDirectory`
fix(dev-utils): Make chai a dev dependency since exported interface depends on it
Add changelog entries
fix(subproviders): make web3-provider-engine types a 'dependency' so it's available to users of the library
fix(sra-spec): make @loopback/openapi-v3-types a 'dependency' so it's available to users of the library
fix(sol-cov): make @types/solidity-parser-antlr a 'dependency' so it's available to users of the library
fix(dev-utils): make web3-provider-engine types a 'dependency' so it's available to users of the library
fix(0x.js): make web3-provider-engine types a 'dependency' so it's available to users of the library
fix(monorepo-scripts): Move the creation of the `.installation-test` directory OUTSIDE of the monorepo root, so that the installed packages can't reference the hoisted node_modules folder
Remove ContractNotFound errors in contract-wrappers
Update prettierignore
Update website to use the new unsubscribeAll method in contract-wrappers
In abi-gen-wrappers, ./wrappers -> ./src/generated-wrappers
In contract-wrappers, remove setProvider and add unsubscribeAll method.
take out explicit children definition in props
Update json-schemas for contract-wrappers
Add OrThrow suffix to getContractAddressesForNetwork
remove unused import
Update CHANGELOG.json for all changed packages
Remove ContractAddresses from packages/types (mistake after rebase)
...
Diffstat (limited to 'packages/instant/src/components/animations/slide_up_and_down_animation.tsx')
-rw-r--r-- | packages/instant/src/components/animations/slide_up_and_down_animation.tsx | 96 |
1 files changed, 96 insertions, 0 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 new file mode 100644 index 000000000..9c18e0933 --- /dev/null +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -0,0 +1,96 @@ +import * as React from 'react'; + +import { keyframes, styled } from '../../style/theme'; + +const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` + from { + position: relative; + top: ${fromY}; + } + + to { + position: relative; + top: ${toY}; + } +`; + +export interface SlideAnimationProps { + keyframes: string; + animationType: string; + animationDirection?: string; +} + +export const SlideAnimation = + styled.div < + SlideAnimationProps > + ` + animation-name: ${props => props.keyframes}; + animation-duration: 0.3s; + animation-timing-function: ${props => props.animationType}; + animation-delay: 0s; + animation-iteration-count: 1; + animation-fill-mode: ${props => props.animationDirection || 'none'}; + position: relative; +`; + +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<SlideAnimationComponentProps> = props => ( + <SlideAnimation + animationDirection="forwards" + animationType="cubic-bezier(0.25, 0.1, 0.25, 1)" + keyframes={slideKeyframeGenerator('0px', props.downY)} + > + {props.children} + </SlideAnimation> +); + +export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps { + delayMs: number; +} + +enum SlideState { + Up = 'up', + Down = 'down', +} +interface SlideUpAndDownState { + slideState: SlideState; +} + +export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> { + public state = { + slideState: SlideState.Up, + }; + + private _timeoutId?: number; + public render(): React.ReactNode { + return this._renderSlide(); + } + public componentDidMount(): void { + this._timeoutId = window.setTimeout(() => { + this.setState({ + slideState: SlideState.Down, + }); + }, this.props.delayMs); + + return; + } + public componentWillUnmount(): void { + if (this._timeoutId) { + window.clearTimeout(this._timeoutId); + } + } + private _renderSlide(): React.ReactNode { + const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent; + + return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>; + } +} |