diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-10-31 15:30:24 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-10-31 10:00:24 +0000 |
commit | 25d54a5c5de02a2bbbbbf3b222be9f0630570a6b (patch) | |
tree | cd34ab7cc3444735ce7527b9c15ddf0aef0ff63a /src/features/webControls/containers | |
parent | 6.2.1-nightly.34 [skip ci] (diff) | |
download | ferdium-app-25d54a5c5de02a2bbbbbf3b222be9f0630570a6b.tar.gz ferdium-app-25d54a5c5de02a2bbbbbf3b222be9f0630570a6b.tar.zst ferdium-app-25d54a5c5de02a2bbbbbf3b222be9f0630570a6b.zip |
Convert web controls & screen to typescript (#722)
Diffstat (limited to 'src/features/webControls/containers')
-rw-r--r-- | src/features/webControls/containers/WebControlsScreen.tsx (renamed from src/features/webControls/containers/WebControlsScreen.jsx) | 124 |
1 files changed, 68 insertions, 56 deletions
diff --git a/src/features/webControls/containers/WebControlsScreen.jsx b/src/features/webControls/containers/WebControlsScreen.tsx index 25e14060d..f6f1cddb8 100644 --- a/src/features/webControls/containers/WebControlsScreen.jsx +++ b/src/features/webControls/containers/WebControlsScreen.tsx | |||
@@ -1,13 +1,17 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import { observer, inject } from 'mobx-react'; | 2 | import { observer, inject } from 'mobx-react'; |
3 | import PropTypes from 'prop-types'; | 3 | import { |
4 | 4 | autorun, | |
5 | import { autorun, action, makeObservable, observable } from 'mobx'; | 5 | action, |
6 | makeObservable, | ||
7 | observable, | ||
8 | IReactionDisposer, | ||
9 | } from 'mobx'; | ||
10 | import ElectronWebView from 'react-electron-web-view'; | ||
6 | import WebControls from '../components/WebControls'; | 11 | import WebControls from '../components/WebControls'; |
7 | import ServicesStore from '../../../stores/ServicesStore'; | ||
8 | import Service from '../../../models/Service'; | 12 | import Service from '../../../models/Service'; |
9 | import { SEARCH_ENGINE_URLS } from '../../../config'; | 13 | import { SEARCH_ENGINE_URLS } from '../../../config'; |
10 | import AppStore from '../../../stores/AppStore'; | 14 | import { StoresProps } from '../../../@types/ferdium-components.types'; |
11 | 15 | ||
12 | const URL_EVENTS = [ | 16 | const URL_EVENTS = [ |
13 | 'load-commit', | 17 | 'load-commit', |
@@ -16,26 +20,22 @@ const URL_EVENTS = [ | |||
16 | 'did-navigate-in-page', | 20 | 'did-navigate-in-page', |
17 | ]; | 21 | ]; |
18 | 22 | ||
19 | class WebControlsScreen extends Component { | 23 | interface IProps extends Partial<StoresProps> { |
24 | service: Service; | ||
25 | } | ||
26 | |||
27 | @inject('stores', 'actions') | ||
28 | @observer | ||
29 | class WebControlsScreen extends Component<IProps> { | ||
20 | @observable url = ''; | 30 | @observable url = ''; |
21 | 31 | ||
22 | @observable canGoBack = false; | 32 | @observable canGoBack = false; |
23 | 33 | ||
24 | @observable canGoForward = false; | 34 | @observable canGoForward = false; |
25 | 35 | ||
26 | webview = null; | 36 | webview: ElectronWebView | null = null; |
27 | |||
28 | autorunDisposer = null; | ||
29 | 37 | ||
30 | @action _setUrl(value) { | 38 | autorunDisposer: IReactionDisposer | null = null; |
31 | this.url = value; | ||
32 | } | ||
33 | |||
34 | @action _setUrlAndHistory(value) { | ||
35 | this._setUrl(value); | ||
36 | this.canGoBack = this.webview.canGoBack(); | ||
37 | this.canGoForward = this.webview.canGoForward(); | ||
38 | } | ||
39 | 39 | ||
40 | constructor(props) { | 40 | constructor(props) { |
41 | super(props); | 41 | super(props); |
@@ -43,7 +43,7 @@ class WebControlsScreen extends Component { | |||
43 | makeObservable(this); | 43 | makeObservable(this); |
44 | } | 44 | } |
45 | 45 | ||
46 | componentDidMount() { | 46 | componentDidMount(): void { |
47 | const { service } = this.props; | 47 | const { service } = this.props; |
48 | 48 | ||
49 | this.autorunDisposer = autorun(() => { | 49 | this.autorunDisposer = autorun(() => { |
@@ -53,8 +53,9 @@ class WebControlsScreen extends Component { | |||
53 | 53 | ||
54 | for (const event of URL_EVENTS) { | 54 | for (const event of URL_EVENTS) { |
55 | this.webview.addEventListener(event, e => { | 55 | this.webview.addEventListener(event, e => { |
56 | if (!e.isMainFrame) return; | 56 | if (!e.isMainFrame) { |
57 | 57 | return; | |
58 | } | ||
58 | this._setUrlAndHistory(e.url); | 59 | this._setUrlAndHistory(e.url); |
59 | }); | 60 | }); |
60 | } | 61 | } |
@@ -62,48 +63,69 @@ class WebControlsScreen extends Component { | |||
62 | }); | 63 | }); |
63 | } | 64 | } |
64 | 65 | ||
65 | componentWillUnmount() { | 66 | componentWillUnmount(): void { |
66 | this.autorunDisposer(); | 67 | if (this.autorunDisposer) { |
68 | this.autorunDisposer(); | ||
69 | } | ||
67 | } | 70 | } |
68 | 71 | ||
69 | goHome() { | 72 | @action |
70 | if (!this.webview) return; | 73 | _setUrl(value): void { |
74 | this.url = value; | ||
75 | } | ||
76 | |||
77 | @action | ||
78 | _setUrlAndHistory(value): void { | ||
79 | this._setUrl(value); | ||
80 | this.canGoBack = this.webview.canGoBack(); | ||
81 | this.canGoForward = this.webview.canGoForward(); | ||
82 | } | ||
83 | |||
84 | goHome(): void { | ||
85 | if (!this.webview) { | ||
86 | return; | ||
87 | } | ||
71 | this.webview.goToIndex(0); | 88 | this.webview.goToIndex(0); |
72 | } | 89 | } |
73 | 90 | ||
74 | reload() { | 91 | reload(): void { |
75 | if (!this.webview) return; | 92 | if (!this.webview) { |
93 | return; | ||
94 | } | ||
76 | 95 | ||
77 | this.webview.reload(); | 96 | this.webview.reload(); |
78 | } | 97 | } |
79 | 98 | ||
80 | goBack() { | 99 | goBack(): void { |
81 | if (!this.webview) return; | 100 | if (!this.webview) { |
101 | return; | ||
102 | } | ||
82 | 103 | ||
83 | this.webview.goBack(); | 104 | this.webview.goBack(); |
84 | } | 105 | } |
85 | 106 | ||
86 | goForward() { | 107 | goForward(): void { |
87 | if (!this.webview) return; | 108 | if (!this.webview) { |
109 | return; | ||
110 | } | ||
88 | 111 | ||
89 | this.webview.goForward(); | 112 | this.webview.goForward(); |
90 | } | 113 | } |
91 | 114 | ||
92 | navigate(newUrl) { | 115 | navigate(url: string): void { |
93 | if (!this.webview) return; | 116 | if (!this.webview) { |
94 | 117 | return; | |
95 | let url = newUrl; | 118 | } |
96 | 119 | ||
97 | try { | 120 | try { |
98 | url = new URL(url).toString(); | 121 | url = new URL(url).toString(); |
99 | } catch { | 122 | } catch { |
100 | url = | 123 | url = |
101 | // eslint-disable-next-line no-useless-escape | 124 | /^((?!-))(xn--)?[\da-z][\d_a-z-]{0,61}[\da-z]{0,1}\.(xn--)?([\da-z-]{1,61}|[\da-z-]{1,30}\.[a-z]{2,})$/.test( |
102 | /^((?!-))(xn--)?[\da-z][\d_a-z-]{0,61}[\da-z]{0,1}\.(xn--)?([\da-z\-]{1,61}|[\da-z-]{1,30}\.[a-z]{2,})$/.test( | ||
103 | url, | 125 | url, |
104 | ) | 126 | ) |
105 | ? `http://${url}` | 127 | ? `http://${url}` |
106 | : SEARCH_ENGINE_URLS[this.settings.app.searchEngine]({ | 128 | : SEARCH_ENGINE_URLS[this.props.stores!.settings.app.searchEngine]({ |
107 | searchTerm: url, | 129 | searchTerm: url, |
108 | }); | 130 | }); |
109 | } | 131 | } |
@@ -112,15 +134,16 @@ class WebControlsScreen extends Component { | |||
112 | this._setUrl(url); | 134 | this._setUrl(url); |
113 | } | 135 | } |
114 | 136 | ||
115 | openInBrowser() { | 137 | openInBrowser(): void { |
116 | const { openExternalUrl } = this.props.actions.app; | 138 | const { openExternalUrl } = this.props.actions!.app; |
117 | 139 | if (!this.webview) { | |
118 | if (!this.webview) return; | 140 | return; |
141 | } | ||
119 | 142 | ||
120 | openExternalUrl({ url: this.url }); | 143 | openExternalUrl({ url: this.url }); |
121 | } | 144 | } |
122 | 145 | ||
123 | render() { | 146 | render(): ReactElement { |
124 | return ( | 147 | return ( |
125 | <WebControls | 148 | <WebControls |
126 | goHome={() => this.goHome()} | 149 | goHome={() => this.goHome()} |
@@ -137,15 +160,4 @@ class WebControlsScreen extends Component { | |||
137 | } | 160 | } |
138 | } | 161 | } |
139 | 162 | ||
140 | export default inject('stores', 'actions')(observer(WebControlsScreen)); | 163 | export default WebControlsScreen; |
141 | |||
142 | WebControlsScreen.propTypes = { | ||
143 | service: PropTypes.instanceOf(Service).isRequired, | ||
144 | stores: PropTypes.shape({ | ||
145 | services: PropTypes.instanceOf(ServicesStore).isRequired, | ||
146 | }).isRequired, | ||
147 | actions: PropTypes.shape({ | ||
148 | app: PropTypes.instanceOf(AppStore).isRequired, | ||
149 | service: PropTypes.instanceOf(ServicesStore).isRequired, | ||
150 | }).isRequired, | ||
151 | }; | ||