diff options
author | 2022-10-31 15:30:24 +0530 | |
---|---|---|
committer | 2022-10-31 10:00:24 +0000 | |
commit | 25d54a5c5de02a2bbbbbf3b222be9f0630570a6b (patch) | |
tree | cd34ab7cc3444735ce7527b9c15ddf0aef0ff63a /src/features/webControls/components/WebControls.js | |
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/components/WebControls.js')
-rw-r--r-- | src/features/webControls/components/WebControls.js | 241 |
1 files changed, 0 insertions, 241 deletions
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js deleted file mode 100644 index 570f2f2dc..000000000 --- a/src/features/webControls/components/WebControls.js +++ /dev/null | |||
@@ -1,241 +0,0 @@ | |||
1 | import { createRef, 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 { | ||
8 | mdiReload, | ||
9 | mdiArrowRight, | ||
10 | mdiArrowLeft, | ||
11 | mdiHomeOutline, | ||
12 | mdiEarth, | ||
13 | } from '@mdi/js'; | ||
14 | |||
15 | import Icon from '../../../components/ui/icon'; | ||
16 | |||
17 | const messages = defineMessages({ | ||
18 | goHome: { | ||
19 | id: 'webControls.goHome', | ||
20 | defaultMessage: 'Home', | ||
21 | }, | ||
22 | openInBrowser: { | ||
23 | id: 'webControls.openInBrowser', | ||
24 | defaultMessage: 'Open in Browser', | ||
25 | }, | ||
26 | back: { | ||
27 | id: 'webControls.back', | ||
28 | defaultMessage: 'Back', | ||
29 | }, | ||
30 | forward: { | ||
31 | id: 'webControls.forward', | ||
32 | defaultMessage: 'Forward', | ||
33 | }, | ||
34 | reload: { | ||
35 | id: 'webControls.reload', | ||
36 | defaultMessage: 'Reload', | ||
37 | }, | ||
38 | }); | ||
39 | |||
40 | let buttonTransition = 'none'; | ||
41 | |||
42 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
43 | buttonTransition = 'opacity 0.25s'; | ||
44 | } | ||
45 | |||
46 | const styles = theme => ({ | ||
47 | root: { | ||
48 | background: theme.colorBackground, | ||
49 | position: 'relative', | ||
50 | borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor], | ||
51 | zIndex: 300, | ||
52 | height: 50, | ||
53 | display: 'flex', | ||
54 | flexDirection: 'row', | ||
55 | alignItems: 'center', | ||
56 | padding: [0, 10], | ||
57 | |||
58 | '& + div': { | ||
59 | height: 'calc(100% - 50px)', | ||
60 | }, | ||
61 | }, | ||
62 | button: { | ||
63 | width: 30, | ||
64 | height: 50, | ||
65 | transition: buttonTransition, | ||
66 | |||
67 | '&:hover': { | ||
68 | opacity: 0.8, | ||
69 | }, | ||
70 | |||
71 | '&:disabled': { | ||
72 | opacity: 0.5, | ||
73 | }, | ||
74 | }, | ||
75 | icon: { | ||
76 | width: '20px !important', | ||
77 | height: 20, | ||
78 | marginTop: 5, | ||
79 | color: theme.colorText, | ||
80 | }, | ||
81 | input: { | ||
82 | marginBottom: 0, | ||
83 | height: 'auto', | ||
84 | margin: [0, 10], | ||
85 | flex: 1, | ||
86 | border: 0, | ||
87 | padding: [4, 10], | ||
88 | borderRadius: theme.borderRadius, | ||
89 | background: theme.inputBackground, | ||
90 | color: theme.inputColor, | ||
91 | }, | ||
92 | inputButton: { | ||
93 | color: theme.colorText, | ||
94 | }, | ||
95 | }); | ||
96 | |||
97 | class WebControls extends Component { | ||
98 | static propTypes = { | ||
99 | classes: PropTypes.object.isRequired, | ||
100 | goHome: PropTypes.func.isRequired, | ||
101 | canGoBack: PropTypes.bool.isRequired, | ||
102 | goBack: PropTypes.func.isRequired, | ||
103 | canGoForward: PropTypes.bool.isRequired, | ||
104 | goForward: PropTypes.func.isRequired, | ||
105 | reload: PropTypes.func.isRequired, | ||
106 | openInBrowser: PropTypes.func.isRequired, | ||
107 | url: PropTypes.string.isRequired, | ||
108 | navigate: PropTypes.func.isRequired, | ||
109 | }; | ||
110 | |||
111 | static getDerivedStateFromProps(props, state) { | ||
112 | const { url } = props; | ||
113 | const { editUrl } = state; | ||
114 | |||
115 | if (!editUrl) { | ||
116 | return { | ||
117 | inputUrl: url, | ||
118 | editUrl: state.editUrl, | ||
119 | }; | ||
120 | } | ||
121 | } | ||
122 | |||
123 | inputRef = createRef(); | ||
124 | |||
125 | state = { | ||
126 | inputUrl: '', | ||
127 | editUrl: false, | ||
128 | }; | ||
129 | |||
130 | render() { | ||
131 | const { | ||
132 | classes, | ||
133 | goHome, | ||
134 | canGoBack, | ||
135 | goBack, | ||
136 | canGoForward, | ||
137 | goForward, | ||
138 | reload, | ||
139 | openInBrowser, | ||
140 | url, | ||
141 | navigate, | ||
142 | } = this.props; | ||
143 | |||
144 | const { inputUrl, editUrl } = this.state; | ||
145 | |||
146 | const { intl } = this.props; | ||
147 | |||
148 | return ( | ||
149 | <div className={classes.root}> | ||
150 | <button | ||
151 | onClick={goHome} | ||
152 | type="button" | ||
153 | className={classes.button} | ||
154 | data-tip={intl.formatMessage(messages.goHome)} | ||
155 | data-place="bottom" | ||
156 | > | ||
157 | <Icon icon={mdiHomeOutline} className={classes.icon} /> | ||
158 | </button> | ||
159 | <button | ||
160 | onClick={goBack} | ||
161 | type="button" | ||
162 | className={classes.button} | ||
163 | disabled={!canGoBack} | ||
164 | data-tip={intl.formatMessage(messages.back)} | ||
165 | data-place="bottom" | ||
166 | > | ||
167 | <Icon icon={mdiArrowLeft} className={classes.icon} /> | ||
168 | </button> | ||
169 | <button | ||
170 | onClick={goForward} | ||
171 | type="button" | ||
172 | className={classes.button} | ||
173 | disabled={!canGoForward} | ||
174 | data-tip={intl.formatMessage(messages.forward)} | ||
175 | data-place="bottom" | ||
176 | > | ||
177 | <Icon icon={mdiArrowRight} className={classes.icon} /> | ||
178 | </button> | ||
179 | <button | ||
180 | onClick={reload} | ||
181 | type="button" | ||
182 | className={classes.button} | ||
183 | data-tip={intl.formatMessage(messages.reload)} | ||
184 | data-place="bottom" | ||
185 | > | ||
186 | <Icon icon={mdiReload} className={classes.icon} /> | ||
187 | </button> | ||
188 | <input | ||
189 | value={editUrl ? inputUrl : url} | ||
190 | className={classes.input} | ||
191 | onChange={event => | ||
192 | this.setState({ | ||
193 | inputUrl: event.target.value, | ||
194 | }) | ||
195 | } | ||
196 | onFocus={event => { | ||
197 | event.target.select(); | ||
198 | this.setState({ | ||
199 | editUrl: true, | ||
200 | }); | ||
201 | }} | ||
202 | onBlur={event => { | ||
203 | event.target.blur(); | ||
204 | this.setState({ | ||
205 | editUrl: false, | ||
206 | }); | ||
207 | }} | ||
208 | onKeyDown={event => { | ||
209 | if (event.key === 'Enter') { | ||
210 | this.setState({ | ||
211 | editUrl: false, | ||
212 | }); | ||
213 | navigate(inputUrl); | ||
214 | this.inputRef.current.blur(); | ||
215 | } else if (event.key === 'Escape') { | ||
216 | this.setState({ | ||
217 | editUrl: false, | ||
218 | inputUrl: url, | ||
219 | }); | ||
220 | this.inputRef.current.blur(); | ||
221 | } | ||
222 | }} | ||
223 | ref={this.inputRef} | ||
224 | /> | ||
225 | <button | ||
226 | onClick={openInBrowser} | ||
227 | type="button" | ||
228 | className={classes.button} | ||
229 | data-tip={intl.formatMessage(messages.openInBrowser)} | ||
230 | data-place="bottom" | ||
231 | > | ||
232 | <Icon icon={mdiEarth} className={classes.icon} /> | ||
233 | </button> | ||
234 | </div> | ||
235 | ); | ||
236 | } | ||
237 | } | ||
238 | |||
239 | export default injectIntl( | ||
240 | injectSheet(styles, { injectTheme: true })(observer(WebControls)), | ||
241 | ); | ||