diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-12-12 11:08:41 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-12-12 11:08:41 +0100 |
commit | 4c2015db267ede5ecdf7fc838e326b7fa49d8195 (patch) | |
tree | 764ab8dd141c9973fdd7ef455cf94f7335cf440e /src/components/ui/FullscreenLoader | |
parent | Update changelog (diff) | |
download | ferdium-app-4c2015db267ede5ecdf7fc838e326b7fa49d8195.tar.gz ferdium-app-4c2015db267ede5ecdf7fc838e326b7fa49d8195.tar.zst ferdium-app-4c2015db267ede5ecdf7fc838e326b7fa49d8195.zip |
Improve loader themeing
Diffstat (limited to 'src/components/ui/FullscreenLoader')
-rw-r--r-- | src/components/ui/FullscreenLoader/index.js | 71 |
1 files changed, 49 insertions, 22 deletions
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js index e0a24a527..6ecf4d395 100644 --- a/src/components/ui/FullscreenLoader/index.js +++ b/src/components/ui/FullscreenLoader/index.js | |||
@@ -1,29 +1,56 @@ | |||
1 | import React from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import injectSheet from 'react-jss'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet, { withTheme } from 'react-jss'; | ||
3 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
4 | import { inject } from 'mobx-react'; | ||
5 | 6 | ||
6 | import Loader from '../Loader'; | 7 | import Loader from '../Loader'; |
7 | 8 | ||
8 | import styles from './styles'; | 9 | import styles from './styles'; |
9 | 10 | ||
10 | export default inject('stores')(injectSheet(styles)(({ | 11 | export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component { |
11 | stores, classes, className, title, children, | 12 | static propTypes = { |
12 | }) => ( | 13 | className: PropTypes.string, |
13 | <div className={classes.wrapper}> | 14 | title: PropTypes.string.isRequired, |
14 | <div | 15 | classes: PropTypes.object.isRequired, |
15 | className={classnames({ | 16 | theme: PropTypes.object.isRequired, |
16 | [`${classes.component}`]: true, | 17 | spinnerColor: PropTypes.string, |
17 | [`${className}`]: className, | 18 | children: PropTypes.node, |
18 | })} | 19 | } |
19 | > | 20 | |
20 | <h1 className={classes.title}>{title}</h1> | 21 | static defaultProps = { |
21 | <Loader color={stores.settings.app.darkMode ? '#FFF' : '#000'} /> | 22 | className: null, |
22 | {children && ( | 23 | spinnerColor: null, |
23 | <div className={classes.content}> | 24 | children: null, |
24 | {children} | 25 | } |
26 | |||
27 | render() { | ||
28 | const { | ||
29 | classes, | ||
30 | title, | ||
31 | children, | ||
32 | spinnerColor, | ||
33 | className, | ||
34 | theme, | ||
35 | } = this.props; | ||
36 | |||
37 | return ( | ||
38 | <div className={classes.wrapper}> | ||
39 | <div | ||
40 | className={classnames({ | ||
41 | [`${classes.component}`]: true, | ||
42 | [`${className}`]: className, | ||
43 | })} | ||
44 | > | ||
45 | <h1 className={classes.title}>{title}</h1> | ||
46 | <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} /> | ||
47 | {children && ( | ||
48 | <div className={classes.content}> | ||
49 | {children} | ||
50 | </div> | ||
51 | )} | ||
25 | </div> | 52 | </div> |
26 | )} | 53 | </div> |
27 | </div> | 54 | ); |
28 | </div> | 55 | } |
29 | ))); | 56 | } |