diff options
Diffstat (limited to 'src/features/workspaces')
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx (renamed from src/features/workspaces/components/WorkspaceSwitchingIndicator.js) | 46 |
1 files changed, 23 insertions, 23 deletions
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx index ff73758c1..c9af22c96 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx | |||
@@ -1,12 +1,11 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 3 | import withStyles, { WithStylesProps } from 'react-jss'; |
5 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
6 | import { defineMessages, injectIntl } from 'react-intl'; | 5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
7 | |||
8 | import Loader from '../../../components/ui/loader/index'; | 6 | import Loader from '../../../components/ui/loader/index'; |
9 | import { workspaceStore } from '../index'; | 7 | import { workspaceStore } from '../index'; |
8 | import { Theme } from '../../../themes'; | ||
10 | 9 | ||
11 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
12 | switchingTo: { | 11 | switchingTo: { |
@@ -15,11 +14,10 @@ const messages = defineMessages({ | |||
15 | }, | 14 | }, |
16 | }); | 15 | }); |
17 | 16 | ||
18 | let wrapperTransition = 'none'; | 17 | const wrapperTransition = |
19 | 18 | window && window.matchMedia('(prefers-reduced-motion: no-preference)') | |
20 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | 19 | ? 'width 0.5s ease' |
21 | wrapperTransition = 'width 0.5s ease'; | 20 | : 'none'; |
22 | } | ||
23 | 21 | ||
24 | const styles = theme => ({ | 22 | const styles = theme => ({ |
25 | wrapper: { | 23 | wrapper: { |
@@ -53,26 +51,30 @@ const styles = theme => ({ | |||
53 | }, | 51 | }, |
54 | }); | 52 | }); |
55 | 53 | ||
56 | class WorkspaceSwitchingIndicator extends Component { | 54 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { |
57 | static propTypes = { | 55 | theme?: Theme; |
58 | classes: PropTypes.object.isRequired, | 56 | } |
59 | theme: PropTypes.object.isRequired, | ||
60 | }; | ||
61 | 57 | ||
62 | render() { | 58 | @observer |
63 | const { classes, theme } = this.props; | 59 | class WorkspaceSwitchingIndicator extends Component<IProps> { |
64 | const { intl } = this.props; | 60 | render(): ReactElement | null { |
61 | const { classes, intl, theme } = this.props; | ||
65 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; | 62 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; |
66 | if (!isSwitchingWorkspace) return null; | 63 | |
64 | if (!isSwitchingWorkspace) { | ||
65 | return null; | ||
66 | } | ||
67 | |||
67 | const nextWorkspaceName = nextWorkspace | 68 | const nextWorkspaceName = nextWorkspace |
68 | ? nextWorkspace.name | 69 | ? nextWorkspace.name |
69 | : 'All services'; | 70 | : 'All services'; |
71 | |||
70 | return ( | 72 | return ( |
71 | <div className={classnames([classes.wrapper])}> | 73 | <div className={classnames([classes.wrapper])}> |
72 | <div className={classes.component}> | 74 | <div className={classes.component}> |
73 | <Loader | 75 | <Loader |
74 | className={classes.spinner} | 76 | className={classes.spinner} |
75 | color={theme.workspaces.switchingIndicator.spinnerColor} | 77 | color={theme?.workspaces.switchingIndicator.spinnerColor} |
76 | /> | 78 | /> |
77 | <p className={classes.message}> | 79 | <p className={classes.message}> |
78 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} | 80 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} |
@@ -84,7 +86,5 @@ class WorkspaceSwitchingIndicator extends Component { | |||
84 | } | 86 | } |
85 | 87 | ||
86 | export default injectIntl( | 88 | export default injectIntl( |
87 | injectSheet(styles, { injectTheme: true })( | 89 | withStyles(styles, { injectTheme: true })(WorkspaceSwitchingIndicator), |
88 | observer(WorkspaceSwitchingIndicator), | ||
89 | ), | ||
90 | ); | 90 | ); |