diff options
Diffstat (limited to 'src/components/ui/FullscreenLoader')
-rw-r--r-- | src/components/ui/FullscreenLoader/index.js | 52 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/index.tsx | 54 |
2 files changed, 54 insertions, 52 deletions
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js deleted file mode 100644 index f8c6b92ee..000000000 --- a/src/components/ui/FullscreenLoader/index.js +++ /dev/null | |||
@@ -1,52 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectStyle from 'react-jss'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | import Loader from '../Loader'; | ||
8 | |||
9 | import styles from './styles'; | ||
10 | import { H1 } from '../headline'; | ||
11 | |||
12 | class FullscreenLoader extends Component { | ||
13 | static propTypes = { | ||
14 | className: PropTypes.string, | ||
15 | title: PropTypes.string, | ||
16 | classes: PropTypes.object.isRequired, | ||
17 | theme: PropTypes.object.isRequired, | ||
18 | spinnerColor: PropTypes.string, | ||
19 | children: PropTypes.node, | ||
20 | }; | ||
21 | |||
22 | static defaultProps = { | ||
23 | className: null, | ||
24 | spinnerColor: null, | ||
25 | children: null, | ||
26 | title: null, | ||
27 | }; | ||
28 | |||
29 | render() { | ||
30 | const { classes, title, children, spinnerColor, className, theme } = | ||
31 | this.props; | ||
32 | |||
33 | return ( | ||
34 | <div className={classes.wrapper}> | ||
35 | <div | ||
36 | className={classnames({ | ||
37 | [`${classes.component}`]: true, | ||
38 | [`${className}`]: className, | ||
39 | })} | ||
40 | > | ||
41 | <H1 className={classes.title}>{title}</H1> | ||
42 | <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} /> | ||
43 | {children && <div className={classes.content}>{children}</div>} | ||
44 | </div> | ||
45 | </div> | ||
46 | ); | ||
47 | } | ||
48 | } | ||
49 | |||
50 | export default injectStyle(styles, { injectTheme: true })( | ||
51 | observer(FullscreenLoader), | ||
52 | ); | ||
diff --git a/src/components/ui/FullscreenLoader/index.tsx b/src/components/ui/FullscreenLoader/index.tsx new file mode 100644 index 000000000..002ee7932 --- /dev/null +++ b/src/components/ui/FullscreenLoader/index.tsx | |||
@@ -0,0 +1,54 @@ | |||
1 | import { Component, ReactElement, ReactNode } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import withStyles, { WithStylesProps } from 'react-jss'; | ||
4 | import classnames from 'classnames'; | ||
5 | import Loader from '../Loader'; | ||
6 | import styles from './styles'; | ||
7 | import { H1 } from '../headline'; | ||
8 | import { Theme } from '../../../themes'; | ||
9 | |||
10 | interface IProps extends WithStylesProps<typeof styles> { | ||
11 | className?: string; | ||
12 | title?: string; | ||
13 | theme?: Theme; | ||
14 | spinnerColor?: string; | ||
15 | loaded?: boolean; | ||
16 | children?: ReactNode; | ||
17 | } | ||
18 | |||
19 | @observer | ||
20 | class FullscreenLoader extends Component<IProps> { | ||
21 | render(): ReactElement { | ||
22 | const { | ||
23 | classes, | ||
24 | theme = '', | ||
25 | className = '', | ||
26 | spinnerColor = '', | ||
27 | children = null, | ||
28 | title = '', | ||
29 | loaded = false, | ||
30 | } = this.props; | ||
31 | |||
32 | return ( | ||
33 | <div className={classes.wrapper}> | ||
34 | <div | ||
35 | className={classnames({ | ||
36 | [`${classes.component}`]: true, | ||
37 | [`${className}`]: className, | ||
38 | })} | ||
39 | > | ||
40 | <H1 className={classes.title}>{title}</H1> | ||
41 | <Loader | ||
42 | color={ | ||
43 | spinnerColor || (theme && theme.colorFullscreenLoaderSpinner) | ||
44 | } | ||
45 | loaded={loaded} | ||
46 | /> | ||
47 | {children && <div className={classes.content}>{children}</div>} | ||
48 | </div> | ||
49 | </div> | ||
50 | ); | ||
51 | } | ||
52 | } | ||
53 | |||
54 | export default withStyles(styles, { injectTheme: true })(FullscreenLoader); | ||