diff options
Diffstat (limited to 'src/components/ui/WebviewLoader/index.tsx')
-rw-r--r-- | src/components/ui/WebviewLoader/index.tsx | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/src/components/ui/WebviewLoader/index.tsx b/src/components/ui/WebviewLoader/index.tsx new file mode 100644 index 000000000..81923b6ca --- /dev/null +++ b/src/components/ui/WebviewLoader/index.tsx | |||
@@ -0,0 +1,44 @@ | |||
1 | import { Component, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import injectSheet, { WithStylesProps } from 'react-jss'; | ||
4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
5 | import FullscreenLoader from '../FullscreenLoader'; | ||
6 | |||
7 | const messages = defineMessages({ | ||
8 | loading: { | ||
9 | id: 'service.webviewLoader.loading', | ||
10 | defaultMessage: 'Loading {service}', | ||
11 | }, | ||
12 | }); | ||
13 | |||
14 | const styles = theme => ({ | ||
15 | component: { | ||
16 | background: theme.colorWebviewLoaderBackground, | ||
17 | padding: 20, | ||
18 | width: 'auto', | ||
19 | margin: [0, 'auto'], | ||
20 | borderRadius: 6, | ||
21 | }, | ||
22 | }); | ||
23 | |||
24 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { | ||
25 | name: string; | ||
26 | loaded?: boolean; | ||
27 | } | ||
28 | |||
29 | class WebviewLoader extends Component<IProps> { | ||
30 | render(): ReactElement { | ||
31 | const { classes, name, loaded = false, intl } = this.props; | ||
32 | return ( | ||
33 | <FullscreenLoader | ||
34 | className={classes.component} | ||
35 | title={`${intl.formatMessage(messages.loading, { service: name })}`} | ||
36 | loaded={loaded} | ||
37 | /> | ||
38 | ); | ||
39 | } | ||
40 | } | ||
41 | |||
42 | export default injectIntl( | ||
43 | injectSheet(styles, { injectTheme: true })(observer(WebviewLoader)), | ||
44 | ); | ||