diff options
Diffstat (limited to 'src/features/workspaces/components/WorkspaceSwitchingIndicator.js')
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.js | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js new file mode 100644 index 000000000..c4a800a7b --- /dev/null +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js | |||
@@ -0,0 +1,91 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import classnames from 'classnames'; | ||
6 | import { Loader } from '@meetfranz/ui'; | ||
7 | import { defineMessages, intlShape } from 'react-intl'; | ||
8 | |||
9 | import { workspaceStore } from '../index'; | ||
10 | |||
11 | const messages = defineMessages({ | ||
12 | switchingTo: { | ||
13 | id: 'workspaces.switchingIndicator.switchingTo', | ||
14 | defaultMessage: '!!!Switching to', | ||
15 | }, | ||
16 | }); | ||
17 | |||
18 | const styles = theme => ({ | ||
19 | wrapper: { | ||
20 | display: 'flex', | ||
21 | alignItems: 'flex-start', | ||
22 | position: 'absolute', | ||
23 | transition: 'width 0.5s ease', | ||
24 | width: '100%', | ||
25 | marginTop: '20px', | ||
26 | }, | ||
27 | wrapperWhenDrawerIsOpen: { | ||
28 | width: `calc(100% - ${theme.workspaces.drawer.width}px)`, | ||
29 | }, | ||
30 | component: { | ||
31 | background: 'rgba(20, 20, 20, 0.4)', | ||
32 | padding: '10px 20px', | ||
33 | display: 'flex', | ||
34 | width: 'auto', | ||
35 | height: 'auto', | ||
36 | margin: [0, 'auto'], | ||
37 | borderRadius: 6, | ||
38 | alignItems: 'center', | ||
39 | zIndex: 200, | ||
40 | }, | ||
41 | spinner: { | ||
42 | width: 40, | ||
43 | height: 40, | ||
44 | marginRight: 10, | ||
45 | }, | ||
46 | message: { | ||
47 | fontSize: 16, | ||
48 | whiteSpace: 'nowrap', | ||
49 | color: theme.colorAppLoaderSpinner, | ||
50 | }, | ||
51 | }); | ||
52 | |||
53 | @injectSheet(styles) @observer | ||
54 | class WorkspaceSwitchingIndicator extends Component { | ||
55 | static propTypes = { | ||
56 | classes: PropTypes.object.isRequired, | ||
57 | theme: PropTypes.object.isRequired, | ||
58 | }; | ||
59 | |||
60 | static contextTypes = { | ||
61 | intl: intlShape, | ||
62 | }; | ||
63 | |||
64 | render() { | ||
65 | const { classes, theme } = this.props; | ||
66 | const { intl } = this.context; | ||
67 | const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspaceStore; | ||
68 | if (!isSwitchingWorkspace) return null; | ||
69 | const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services'; | ||
70 | return ( | ||
71 | <div | ||
72 | className={classnames([ | ||
73 | classes.wrapper, | ||
74 | isWorkspaceDrawerOpen ? classes.wrapperWhenDrawerIsOpen : null, | ||
75 | ])} | ||
76 | > | ||
77 | <div className={classes.component}> | ||
78 | <Loader | ||
79 | className={classes.spinner} | ||
80 | color={theme.workspaces.switchingIndicator.spinnerColor} | ||
81 | /> | ||
82 | <p className={classes.message}> | ||
83 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} | ||
84 | </p> | ||
85 | </div> | ||
86 | </div> | ||
87 | ); | ||
88 | } | ||
89 | } | ||
90 | |||
91 | export default WorkspaceSwitchingIndicator; | ||