diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/ui/effects/Appear.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/ui/effects/Appear.js')
-rw-r--r-- | src/components/ui/effects/Appear.js | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/src/components/ui/effects/Appear.js b/src/components/ui/effects/Appear.js new file mode 100644 index 000000000..1255fce2e --- /dev/null +++ b/src/components/ui/effects/Appear.js | |||
@@ -0,0 +1,51 @@ | |||
1 | /* eslint-disable react/no-did-mount-set-state */ | ||
2 | import React, { Component } from 'react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; | ||
5 | |||
6 | export default class Appear extends Component { | ||
7 | static propTypes = { | ||
8 | children: PropTypes.any.isRequired, // eslint-disable-line | ||
9 | transitionName: PropTypes.string, | ||
10 | className: PropTypes.string, | ||
11 | }; | ||
12 | |||
13 | static defaultProps = { | ||
14 | transitionName: 'fadeIn', | ||
15 | className: '', | ||
16 | }; | ||
17 | |||
18 | state = { | ||
19 | mounted: false, | ||
20 | }; | ||
21 | |||
22 | componentDidMount() { | ||
23 | this.setState({ mounted: true }); | ||
24 | } | ||
25 | |||
26 | render() { | ||
27 | const { | ||
28 | children, | ||
29 | transitionName, | ||
30 | className, | ||
31 | } = this.props; | ||
32 | |||
33 | if (!this.state.mounted) { | ||
34 | return null; | ||
35 | } | ||
36 | |||
37 | return ( | ||
38 | <ReactCSSTransitionGroup | ||
39 | transitionName={transitionName} | ||
40 | transitionAppear | ||
41 | transitionLeave | ||
42 | transitionAppearTimeout={1500} | ||
43 | transitionEnterTimeout={1500} | ||
44 | transitionLeaveTimeout={1500} | ||
45 | className={className} | ||
46 | > | ||
47 | {children} | ||
48 | </ReactCSSTransitionGroup> | ||
49 | ); | ||
50 | } | ||
51 | } | ||