diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-20 17:35:21 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-20 17:35:21 +0530 |
commit | 86f9ab693dcad951271f727046214b03d91ebd69 (patch) | |
tree | 3d32ff4814b5484495b811c5fe0ebea4805f4e55 /src/components | |
parent | 6.2.1-nightly.47 [skip ci] (diff) | |
download | ferdium-app-86f9ab693dcad951271f727046214b03d91ebd69.tar.gz ferdium-app-86f9ab693dcad951271f727046214b03d91ebd69.tar.zst ferdium-app-86f9ab693dcad951271f727046214b03d91ebd69.zip |
Transform Todo feature, ServiceBarTargetUrl, ServiceIcon, TeamDashboard, Slider, Loader & WorkspaceSwitchningIndicator into ts (#782)
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.tsx | 2 | ||||
-rw-r--r-- | src/components/settings/team/TeamDashboard.tsx (renamed from src/components/settings/team/TeamDashboard.js) | 139 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/index.js | 52 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/index.tsx | 54 | ||||
-rw-r--r-- | src/components/ui/Loader.tsx | 27 | ||||
-rw-r--r-- | src/components/ui/ServiceIcon.tsx (renamed from src/components/ui/ServiceIcon.js) | 32 | ||||
-rw-r--r-- | src/components/ui/Slider.tsx (renamed from src/components/ui/Slider.js) | 50 | ||||
-rw-r--r-- | src/components/ui/StatusBarTargetUrl.tsx (renamed from src/components/ui/StatusBarTargetUrl.js) | 24 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/index.js | 37 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/index.tsx | 44 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/styles.ts | 9 |
11 files changed, 226 insertions, 244 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx index 8ccad9e49..0a05cb0e1 100644 --- a/src/components/settings/settings/EditSettingsForm.tsx +++ b/src/components/settings/settings/EditSettingsForm.tsx | |||
@@ -650,7 +650,7 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
650 | <> | 650 | <> |
651 | <Slider | 651 | <Slider |
652 | type="number" | 652 | type="number" |
653 | onChange={e => this.submit(e)} | 653 | onSliderChange={e => this.submit(e)} |
654 | field={form.$('grayscaleServicesDim')} | 654 | field={form.$('grayscaleServicesDim')} |
655 | /> | 655 | /> |
656 | <Hr /> | 656 | <Hr /> |
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.tsx index 538a9a10c..3ef55fac6 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.tsx | |||
@@ -1,11 +1,9 @@ | |||
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 { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | import ReactTooltip from 'react-tooltip'; | 4 | import ReactTooltip from 'react-tooltip'; |
6 | import injectSheet from 'react-jss'; | 5 | import withStyles, { WithStylesProps } from 'react-jss'; |
7 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
8 | |||
9 | import Loader from '../../ui/Loader'; | 7 | import Loader from '../../ui/Loader'; |
10 | import Button from '../../ui/button'; | 8 | import Button from '../../ui/button'; |
11 | import Infobox from '../../ui/Infobox'; | 9 | import Infobox from '../../ui/Infobox'; |
@@ -99,17 +97,17 @@ const styles = { | |||
99 | }, | 97 | }, |
100 | }; | 98 | }; |
101 | 99 | ||
102 | class TeamDashboard extends Component { | 100 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { |
103 | static propTypes = { | 101 | isLoading: boolean; |
104 | isLoading: PropTypes.bool.isRequired, | 102 | userInfoRequestFailed: boolean; |
105 | userInfoRequestFailed: PropTypes.bool.isRequired, | 103 | retryUserInfoRequest: () => void; |
106 | retryUserInfoRequest: PropTypes.func.isRequired, | 104 | openTeamManagement: () => void; |
107 | openTeamManagement: PropTypes.func.isRequired, | 105 | server: string; |
108 | classes: PropTypes.object.isRequired, | 106 | } |
109 | server: PropTypes.string.isRequired, | ||
110 | }; | ||
111 | 107 | ||
112 | render() { | 108 | @observer |
109 | class TeamDashboard extends Component<IProps> { | ||
110 | render(): ReactElement { | ||
113 | const { | 111 | const { |
114 | isLoading, | 112 | isLoading, |
115 | userInfoRequestFailed, | 113 | userInfoRequestFailed, |
@@ -117,68 +115,65 @@ class TeamDashboard extends Component { | |||
117 | openTeamManagement, | 115 | openTeamManagement, |
118 | classes, | 116 | classes, |
119 | server, | 117 | server, |
118 | intl, | ||
120 | } = this.props; | 119 | } = this.props; |
121 | const { intl } = this.props; | ||
122 | 120 | ||
123 | if (server === LIVE_FRANZ_API) { | 121 | return server === LIVE_FRANZ_API ? ( |
124 | return ( | 122 | <div className="settings__main"> |
125 | <div className="settings__main"> | 123 | <div className="settings__header"> |
126 | <div className="settings__header"> | 124 | <span className="settings__header-item"> |
127 | <span className="settings__header-item"> | 125 | {intl.formatMessage(messages.headline)} |
128 | {intl.formatMessage(messages.headline)} | 126 | </span> |
129 | </span> | 127 | </div> |
130 | </div> | 128 | <div className="settings__body"> |
131 | <div className="settings__body"> | 129 | {isLoading && <Loader />} |
132 | {isLoading && <Loader />} | ||
133 | 130 | ||
134 | {!isLoading && userInfoRequestFailed && ( | 131 | {!isLoading && userInfoRequestFailed && ( |
135 | <Infobox | 132 | <Infobox |
136 | icon="alert" | 133 | icon="alert" |
137 | type="danger" | 134 | type="danger" |
138 | ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)} | 135 | ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)} |
139 | ctaLoading={isLoading} | 136 | ctaLoading={isLoading} |
140 | ctaOnClick={retryUserInfoRequest} | 137 | ctaOnClick={retryUserInfoRequest} |
141 | > | 138 | > |
142 | {intl.formatMessage(messages.userInfoRequestFailed)} | 139 | {intl.formatMessage(messages.userInfoRequestFailed)} |
143 | </Infobox> | 140 | </Infobox> |
144 | )} | 141 | )} |
145 | 142 | ||
146 | {!userInfoRequestFailed && !isLoading && ( | 143 | {!userInfoRequestFailed && !isLoading && ( |
147 | <> | 144 | <> |
148 | <H1 | 145 | <H1 |
149 | className={classnames({ | 146 | className={classnames({ |
150 | [classes.headline]: true, | 147 | [classes.headline]: true, |
151 | [classes.headlineWithSpacing]: true, | 148 | [classes.headlineWithSpacing]: true, |
152 | })} | 149 | })} |
153 | > | 150 | > |
154 | {intl.formatMessage(messages.contentHeadline)} | 151 | {intl.formatMessage(messages.contentHeadline)} |
155 | </H1> | 152 | </H1> |
156 | <div className={classes.container}> | 153 | <div className={classes.container}> |
157 | <div className={classes.content}> | 154 | <div className={classes.content}> |
158 | <p>{intl.formatMessage(messages.intro)}</p> | 155 | <p>{intl.formatMessage(messages.intro)}</p> |
159 | <p>{intl.formatMessage(messages.copy)}</p> | 156 | <p>{intl.formatMessage(messages.copy)}</p> |
160 | </div> | ||
161 | <img | ||
162 | className={classes.image} | ||
163 | src="https://cdn.franzinfra.com/announcements/assets/teams.png" | ||
164 | alt="Ferdium for Teams" | ||
165 | /> | ||
166 | </div> | ||
167 | <div className={classes.buttonContainer}> | ||
168 | <Button | ||
169 | label={intl.formatMessage(messages.manageButton)} | ||
170 | onClick={openTeamManagement} | ||
171 | className={classes.cta} | ||
172 | /> | ||
173 | </div> | 157 | </div> |
174 | </> | 158 | <img |
175 | )} | 159 | className={classes.image} |
176 | </div> | 160 | src="https://cdn.franzinfra.com/announcements/assets/teams.png" |
177 | <ReactTooltip place="right" type="dark" effect="solid" /> | 161 | alt="Ferdium for Teams" |
162 | /> | ||
163 | </div> | ||
164 | <div className={classes.buttonContainer}> | ||
165 | <Button | ||
166 | label={intl.formatMessage(messages.manageButton)} | ||
167 | onClick={openTeamManagement} | ||
168 | className={classes.cta} | ||
169 | /> | ||
170 | </div> | ||
171 | </> | ||
172 | )} | ||
178 | </div> | 173 | </div> |
179 | ); | 174 | <ReactTooltip place="right" type="dark" effect="solid" /> |
180 | } | 175 | </div> |
181 | return ( | 176 | ) : ( |
182 | <div className="settings__main"> | 177 | <div className="settings__main"> |
183 | <div className="settings__header"> | 178 | <div className="settings__header"> |
184 | <span className="settings__header-item"> | 179 | <span className="settings__header-item"> |
@@ -205,5 +200,5 @@ class TeamDashboard extends Component { | |||
205 | } | 200 | } |
206 | 201 | ||
207 | export default injectIntl( | 202 | export default injectIntl( |
208 | injectSheet(styles, { injectTheme: true })(observer(TeamDashboard)), | 203 | withStyles(styles, { injectTheme: true })(TeamDashboard), |
209 | ); | 204 | ); |
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); | ||
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx index 5e78ed47a..ebb437d9d 100644 --- a/src/components/ui/Loader.tsx +++ b/src/components/ui/Loader.tsx | |||
@@ -1,4 +1,4 @@ | |||
1 | import { Component, PropsWithChildren } from 'react'; | 1 | import { Component, ReactElement, ReactNode } from 'react'; |
2 | import { observer, inject } from 'mobx-react'; | 2 | import { observer, inject } from 'mobx-react'; |
3 | import Loader from 'react-loader'; | 3 | import Loader from 'react-loader'; |
4 | 4 | ||
@@ -9,31 +9,30 @@ interface IProps { | |||
9 | color?: string; | 9 | color?: string; |
10 | loaded?: boolean; | 10 | loaded?: boolean; |
11 | stores?: FerdiumStores; | 11 | stores?: FerdiumStores; |
12 | children?: ReactNode; | ||
12 | } | 13 | } |
13 | 14 | ||
14 | // Can this file be merged into the './loader/index.tsx' file? | 15 | // Can this file be merged into the './loader/index.tsx' file? |
15 | @inject('stores') | 16 | @inject('stores') |
16 | @observer | 17 | @observer |
17 | class LoaderComponent extends Component<PropsWithChildren<IProps>> { | 18 | class LoaderComponent extends Component<IProps> { |
18 | static defaultProps = { | 19 | render(): ReactElement { |
19 | loaded: false, | 20 | const { |
20 | color: 'ACCENT', | 21 | loaded = false, |
21 | }; | 22 | color = 'ACCENT', |
23 | className, | ||
24 | children, | ||
25 | } = this.props; | ||
22 | 26 | ||
23 | render() { | 27 | const loaderColor = |
24 | const { children, loaded, className } = this.props; | 28 | color !== 'ACCENT' ? color : this.props.stores!.settings.app.accentColor; |
25 | |||
26 | const color = | ||
27 | this.props.color !== 'ACCENT' | ||
28 | ? this.props.color | ||
29 | : this.props.stores!.settings.app.accentColor; | ||
30 | 29 | ||
31 | return ( | 30 | return ( |
32 | <Loader | 31 | <Loader |
33 | loaded={loaded} | 32 | loaded={loaded} |
34 | width={4} | 33 | width={4} |
35 | scale={0.6} | 34 | scale={0.6} |
36 | color={color} | 35 | color={loaderColor} |
37 | component="span" | 36 | component="span" |
38 | className={className} | 37 | className={className} |
39 | > | 38 | > |
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.tsx index b05d791be..39a32e44d 100644 --- a/src/components/ui/ServiceIcon.js +++ b/src/components/ui/ServiceIcon.tsx | |||
@@ -1,9 +1,7 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactNode } 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 | |||
7 | import ServiceModel from '../../models/Service'; | 5 | import ServiceModel from '../../models/Service'; |
8 | 6 | ||
9 | const styles = theme => ({ | 7 | const styles = theme => ({ |
@@ -24,20 +22,16 @@ const styles = theme => ({ | |||
24 | }, | 22 | }, |
25 | }); | 23 | }); |
26 | 24 | ||
27 | // Should this file be converted into the coding style similar to './toggle/index.tsx'? | 25 | interface IProps extends WithStylesProps<typeof styles> { |
28 | class ServiceIcon extends Component { | 26 | service: ServiceModel; |
29 | static propTypes = { | 27 | className?: string; |
30 | classes: PropTypes.object.isRequired, | 28 | } |
31 | service: PropTypes.instanceOf(ServiceModel).isRequired, | ||
32 | className: PropTypes.string, | ||
33 | }; | ||
34 | |||
35 | static defaultProps = { | ||
36 | className: '', | ||
37 | }; | ||
38 | 29 | ||
39 | render() { | 30 | // TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'? |
40 | const { classes, className, service } = this.props; | 31 | @observer |
32 | class ServiceIcon extends Component<IProps> { | ||
33 | render(): ReactNode { | ||
34 | const { classes, className = '', service } = this.props; | ||
41 | 35 | ||
42 | return ( | 36 | return ( |
43 | <div className={classnames([classes.root, className])}> | 37 | <div className={classnames([classes.root, className])}> |
@@ -55,6 +49,4 @@ class ServiceIcon extends Component { | |||
55 | } | 49 | } |
56 | } | 50 | } |
57 | 51 | ||
58 | export default injectSheet(styles, { injectTheme: true })( | 52 | export default withStyles(styles, { injectTheme: true })(ServiceIcon); |
59 | observer(ServiceIcon), | ||
60 | ); | ||
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.tsx index 90f4df1c4..ed9fe9073 100644 --- a/src/components/ui/Slider.js +++ b/src/components/ui/Slider.tsx | |||
@@ -1,32 +1,34 @@ | |||
1 | import { Component } from 'react'; | 1 | import { ChangeEvent, Component, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
5 | import { Field } from 'mobx-react-form'; | 4 | import { noop } from 'lodash'; |
6 | 5 | ||
7 | // Should this file be converted into the coding style similar to './toggle/index.tsx'? | 6 | interface IProps { |
8 | class Slider extends Component { | 7 | field: any; |
9 | static propTypes = { | 8 | className?: string; |
10 | field: PropTypes.instanceOf(Field).isRequired, | 9 | showLabel?: boolean; |
11 | className: PropTypes.string, | 10 | disabled?: boolean; |
12 | showLabel: PropTypes.bool, | 11 | type?: 'range' | 'number'; |
13 | disabled: PropTypes.bool, | 12 | onSliderChange?: (e: ChangeEvent) => void; |
14 | }; | 13 | } |
15 | |||
16 | static defaultProps = { | ||
17 | className: '', | ||
18 | showLabel: true, | ||
19 | disabled: false, | ||
20 | }; | ||
21 | |||
22 | onChange(e) { | ||
23 | const { field } = this.props; | ||
24 | 14 | ||
15 | // TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'? | ||
16 | @observer | ||
17 | class Slider extends Component<IProps> { | ||
18 | onChange(e: ChangeEvent<HTMLInputElement>): void { | ||
19 | const { field, onSliderChange = noop } = this.props; | ||
25 | field.onChange(e); | 20 | field.onChange(e); |
21 | onSliderChange(e); | ||
26 | } | 22 | } |
27 | 23 | ||
28 | render() { | 24 | render(): ReactElement { |
29 | const { field, className, showLabel, disabled } = this.props; | 25 | const { |
26 | field, | ||
27 | className = '', | ||
28 | showLabel = true, | ||
29 | disabled = false, | ||
30 | type = 'range', | ||
31 | } = this.props; | ||
30 | 32 | ||
31 | if (field.value === '' && field.default !== '') { | 33 | if (field.value === '' && field.default !== '') { |
32 | field.value = field.default; | 34 | field.value = field.default; |
@@ -43,7 +45,7 @@ class Slider extends Component { | |||
43 | <div className="slider-container"> | 45 | <div className="slider-container"> |
44 | <input | 46 | <input |
45 | className="slider" | 47 | className="slider" |
46 | type="range" | 48 | type={type} |
47 | id={field.id} | 49 | id={field.id} |
48 | name={field.name} | 50 | name={field.name} |
49 | value={field.value} | 51 | value={field.value} |
@@ -64,4 +66,4 @@ class Slider extends Component { | |||
64 | } | 66 | } |
65 | } | 67 | } |
66 | 68 | ||
67 | export default observer(Slider); | 69 | export default Slider; |
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.tsx index 3e0c98c5d..7b053f410 100644 --- a/src/components/ui/StatusBarTargetUrl.js +++ b/src/components/ui/StatusBarTargetUrl.tsx | |||
@@ -1,24 +1,18 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
5 | |||
6 | import Appear from './effects/Appear'; | 4 | import Appear from './effects/Appear'; |
7 | 5 | ||
8 | // Should this file be converted into the coding style similar to './toggle/index.tsx'? | 6 | interface IProps { |
9 | class StatusBarTargetUrl extends Component { | 7 | className?: string; |
10 | static propTypes = { | 8 | text?: string; |
11 | className: PropTypes.string, | 9 | } |
12 | text: PropTypes.string, | ||
13 | }; | ||
14 | |||
15 | static defaultProps = { | ||
16 | className: '', | ||
17 | text: '', | ||
18 | }; | ||
19 | 10 | ||
11 | // TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'? | ||
12 | @observer | ||
13 | class StatusBarTargetUrl extends Component<IProps> { | ||
20 | render() { | 14 | render() { |
21 | const { className, text } = this.props; | 15 | const { className = '', text = '' } = this.props; |
22 | 16 | ||
23 | return ( | 17 | return ( |
24 | <Appear | 18 | <Appear |
@@ -33,4 +27,4 @@ class StatusBarTargetUrl extends Component { | |||
33 | } | 27 | } |
34 | } | 28 | } |
35 | 29 | ||
36 | export default observer(StatusBarTargetUrl); | 30 | export default StatusBarTargetUrl; |
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js deleted file mode 100644 index 20945d191..000000000 --- a/src/components/ui/WebviewLoader/index.js +++ /dev/null | |||
@@ -1,37 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import { defineMessages, injectIntl } from 'react-intl'; | ||
6 | |||
7 | import FullscreenLoader from '../FullscreenLoader'; | ||
8 | import styles from './styles'; | ||
9 | |||
10 | const messages = defineMessages({ | ||
11 | loading: { | ||
12 | id: 'service.webviewLoader.loading', | ||
13 | defaultMessage: 'Loading {service}', | ||
14 | }, | ||
15 | }); | ||
16 | |||
17 | class WebviewLoader extends Component { | ||
18 | static propTypes = { | ||
19 | name: PropTypes.string.isRequired, | ||
20 | classes: PropTypes.object.isRequired, | ||
21 | }; | ||
22 | |||
23 | render() { | ||
24 | const { classes, name } = this.props; | ||
25 | const { intl } = this.props; | ||
26 | return ( | ||
27 | <FullscreenLoader | ||
28 | className={classes.component} | ||
29 | title={`${intl.formatMessage(messages.loading, { service: name })}`} | ||
30 | /> | ||
31 | ); | ||
32 | } | ||
33 | } | ||
34 | |||
35 | export default injectIntl( | ||
36 | injectSheet(styles, { injectTheme: true })(observer(WebviewLoader)), | ||
37 | ); | ||
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 | ); | ||
diff --git a/src/components/ui/WebviewLoader/styles.ts b/src/components/ui/WebviewLoader/styles.ts deleted file mode 100644 index dbd75db8a..000000000 --- a/src/components/ui/WebviewLoader/styles.ts +++ /dev/null | |||
@@ -1,9 +0,0 @@ | |||
1 | export default theme => ({ | ||
2 | component: { | ||
3 | background: theme.colorWebviewLoaderBackground, | ||
4 | padding: 20, | ||
5 | width: 'auto', | ||
6 | margin: [0, 'auto'], | ||
7 | borderRadius: 6, | ||
8 | }, | ||
9 | }); | ||