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/components | |
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')
-rw-r--r-- | src/features/webControls/components/WebControls.tsx (renamed from src/features/webControls/components/WebControls.js) | 87 |
1 files changed, 44 insertions, 43 deletions
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.tsx index 570f2f2dc..ebcd93c9e 100644 --- a/src/features/webControls/components/WebControls.js +++ b/src/features/webControls/components/WebControls.tsx | |||
@@ -1,9 +1,7 @@ | |||
1 | import { createRef, Component } from 'react'; | 1 | import { createRef, Component, ReactElement, RefObject } 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 { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | |||
7 | import { | 5 | import { |
8 | mdiReload, | 6 | mdiReload, |
9 | mdiArrowRight, | 7 | mdiArrowRight, |
@@ -11,7 +9,6 @@ import { | |||
11 | mdiHomeOutline, | 9 | mdiHomeOutline, |
12 | mdiEarth, | 10 | mdiEarth, |
13 | } from '@mdi/js'; | 11 | } from '@mdi/js'; |
14 | |||
15 | import Icon from '../../../components/ui/icon'; | 12 | import Icon from '../../../components/ui/icon'; |
16 | 13 | ||
17 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
@@ -37,11 +34,10 @@ const messages = defineMessages({ | |||
37 | }, | 34 | }, |
38 | }); | 35 | }); |
39 | 36 | ||
40 | let buttonTransition = 'none'; | 37 | const buttonTransition = |
41 | 38 | window && window.matchMedia('(prefers-reduced-motion: no-preference)') | |
42 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | 39 | ? 'opacity 0.25s' |
43 | buttonTransition = 'opacity 0.25s'; | 40 | : 'none'; |
44 | } | ||
45 | 41 | ||
46 | const styles = theme => ({ | 42 | const styles = theme => ({ |
47 | root: { | 43 | root: { |
@@ -94,40 +90,44 @@ const styles = theme => ({ | |||
94 | }, | 90 | }, |
95 | }); | 91 | }); |
96 | 92 | ||
97 | class WebControls extends Component { | 93 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { |
98 | static propTypes = { | 94 | goHome: () => void; |
99 | classes: PropTypes.object.isRequired, | 95 | canGoBack: boolean; |
100 | goHome: PropTypes.func.isRequired, | 96 | goBack: () => void; |
101 | canGoBack: PropTypes.bool.isRequired, | 97 | canGoForward: boolean; |
102 | goBack: PropTypes.func.isRequired, | 98 | goForward: () => void; |
103 | canGoForward: PropTypes.bool.isRequired, | 99 | reload: () => void; |
104 | goForward: PropTypes.func.isRequired, | 100 | openInBrowser: () => void; |
105 | reload: PropTypes.func.isRequired, | 101 | url: string; |
106 | openInBrowser: PropTypes.func.isRequired, | 102 | navigate: (url: string) => void; |
107 | url: PropTypes.string.isRequired, | 103 | } |
108 | navigate: PropTypes.func.isRequired, | 104 | |
109 | }; | 105 | interface IState { |
110 | 106 | inputUrl: string; | |
111 | static getDerivedStateFromProps(props, state) { | 107 | editUrl: boolean; |
112 | const { url } = props; | 108 | } |
109 | |||
110 | @observer | ||
111 | class WebControls extends Component<IProps, IState> { | ||
112 | inputRef: RefObject<HTMLInputElement> = createRef(); | ||
113 | |||
114 | static getDerivedStateFromProps(props, state): IState | null { | ||
115 | const { url: inputUrl } = props; | ||
113 | const { editUrl } = state; | 116 | const { editUrl } = state; |
114 | 117 | ||
115 | if (!editUrl) { | 118 | return !editUrl ? { inputUrl, editUrl } : null; |
116 | return { | ||
117 | inputUrl: url, | ||
118 | editUrl: state.editUrl, | ||
119 | }; | ||
120 | } | ||
121 | } | 119 | } |
122 | 120 | ||
123 | inputRef = createRef(); | 121 | constructor(props: IProps) { |
122 | super(props); | ||
124 | 123 | ||
125 | state = { | 124 | this.state = { |
126 | inputUrl: '', | 125 | inputUrl: '', |
127 | editUrl: false, | 126 | editUrl: false, |
128 | }; | 127 | }; |
128 | } | ||
129 | 129 | ||
130 | render() { | 130 | render(): ReactElement { |
131 | const { | 131 | const { |
132 | classes, | 132 | classes, |
133 | goHome, | 133 | goHome, |
@@ -139,12 +139,11 @@ class WebControls extends Component { | |||
139 | openInBrowser, | 139 | openInBrowser, |
140 | url, | 140 | url, |
141 | navigate, | 141 | navigate, |
142 | intl, | ||
142 | } = this.props; | 143 | } = this.props; |
143 | 144 | ||
144 | const { inputUrl, editUrl } = this.state; | 145 | const { inputUrl, editUrl } = this.state; |
145 | 146 | ||
146 | const { intl } = this.props; | ||
147 | |||
148 | return ( | 147 | return ( |
149 | <div className={classes.root}> | 148 | <div className={classes.root}> |
150 | <button | 149 | <button |
@@ -211,12 +210,14 @@ class WebControls extends Component { | |||
211 | editUrl: false, | 210 | editUrl: false, |
212 | }); | 211 | }); |
213 | navigate(inputUrl); | 212 | navigate(inputUrl); |
214 | this.inputRef.current.blur(); | ||
215 | } else if (event.key === 'Escape') { | 213 | } else if (event.key === 'Escape') { |
216 | this.setState({ | 214 | this.setState({ |
217 | editUrl: false, | 215 | editUrl: false, |
218 | inputUrl: url, | 216 | inputUrl: url, |
219 | }); | 217 | }); |
218 | } | ||
219 | |||
220 | if (this.inputRef && this.inputRef.current) { | ||
220 | this.inputRef.current.blur(); | 221 | this.inputRef.current.blur(); |
221 | } | 222 | } |
222 | }} | 223 | }} |
@@ -237,5 +238,5 @@ class WebControls extends Component { | |||
237 | } | 238 | } |
238 | 239 | ||
239 | export default injectIntl( | 240 | export default injectIntl( |
240 | injectSheet(styles, { injectTheme: true })(observer(WebControls)), | 241 | withStyles(styles, { injectTheme: true })(WebControls), |
241 | ); | 242 | ); |