diff options
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/AppLoader/styles.ts (renamed from src/components/ui/AppLoader/styles.js) | 0 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/styles.ts (renamed from src/components/ui/WebviewLoader/styles.js) | 0 | ||||
-rw-r--r-- | src/components/ui/effects/Appear.js | 47 | ||||
-rw-r--r-- | src/components/ui/effects/Appear.tsx | 39 |
4 files changed, 39 insertions, 47 deletions
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.ts index 9891e0387..9891e0387 100644 --- a/src/components/ui/AppLoader/styles.js +++ b/src/components/ui/AppLoader/styles.ts | |||
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.ts index 5d58011fe..5d58011fe 100644 --- a/src/components/ui/WebviewLoader/styles.js +++ b/src/components/ui/WebviewLoader/styles.ts | |||
diff --git a/src/components/ui/effects/Appear.js b/src/components/ui/effects/Appear.js deleted file mode 100644 index fc319fe28..000000000 --- a/src/components/ui/effects/Appear.js +++ /dev/null | |||
@@ -1,47 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; | ||
4 | |||
5 | export default class Appear extends Component { | ||
6 | static propTypes = { | ||
7 | // eslint-disable-next-line react/forbid-prop-types | ||
8 | children: PropTypes.any.isRequired, | ||
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 { children, transitionName, className } = this.props; | ||
28 | |||
29 | if (!this.state.mounted) { | ||
30 | return null; | ||
31 | } | ||
32 | |||
33 | return ( | ||
34 | <ReactCSSTransitionGroup | ||
35 | transitionName={transitionName} | ||
36 | transitionAppear | ||
37 | transitionLeave | ||
38 | transitionAppearTimeout={1500} | ||
39 | transitionEnterTimeout={1500} | ||
40 | transitionLeaveTimeout={1500} | ||
41 | className={className} | ||
42 | > | ||
43 | {children} | ||
44 | </ReactCSSTransitionGroup> | ||
45 | ); | ||
46 | } | ||
47 | } | ||
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx new file mode 100644 index 000000000..117c02f97 --- /dev/null +++ b/src/components/ui/effects/Appear.tsx | |||
@@ -0,0 +1,39 @@ | |||
1 | import { ReactChildren, useEffect, useState } from 'react'; | ||
2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; | ||
3 | |||
4 | type Props = { | ||
5 | children: ReactChildren; | ||
6 | transitionName: string; | ||
7 | className: string; | ||
8 | }; | ||
9 | const Appear = ({ | ||
10 | children, | ||
11 | transitionName = 'fadeIn', | ||
12 | className = '', | ||
13 | }: Props) => { | ||
14 | const [mounted, setMounted] = useState(false); | ||
15 | |||
16 | useEffect(() => { | ||
17 | setMounted(true); | ||
18 | }, []); | ||
19 | |||
20 | if (!mounted) { | ||
21 | return null; | ||
22 | } | ||
23 | |||
24 | return ( | ||
25 | <ReactCSSTransitionGroup | ||
26 | transitionName={transitionName} | ||
27 | transitionAppear | ||
28 | transitionLeave | ||
29 | transitionAppearTimeout={1500} | ||
30 | transitionEnterTimeout={1500} | ||
31 | transitionLeaveTimeout={1500} | ||
32 | className={className} | ||
33 | > | ||
34 | {children} | ||
35 | </ReactCSSTransitionGroup> | ||
36 | ); | ||
37 | }; | ||
38 | |||
39 | export default Appear; | ||