From 25d54a5c5de02a2bbbbbf3b222be9f0630570a6b Mon Sep 17 00:00:00 2001 From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> Date: Mon, 31 Oct 2022 15:30:24 +0530 Subject: Convert web controls & screen to typescript (#722) --- .../webControls/containers/WebControlsScreen.jsx | 151 ------------------- .../webControls/containers/WebControlsScreen.tsx | 163 +++++++++++++++++++++ 2 files changed, 163 insertions(+), 151 deletions(-) delete mode 100644 src/features/webControls/containers/WebControlsScreen.jsx create mode 100644 src/features/webControls/containers/WebControlsScreen.tsx (limited to 'src/features/webControls/containers') diff --git a/src/features/webControls/containers/WebControlsScreen.jsx b/src/features/webControls/containers/WebControlsScreen.jsx deleted file mode 100644 index 25e14060d..000000000 --- a/src/features/webControls/containers/WebControlsScreen.jsx +++ /dev/null @@ -1,151 +0,0 @@ -import { Component } from 'react'; -import { observer, inject } from 'mobx-react'; -import PropTypes from 'prop-types'; - -import { autorun, action, makeObservable, observable } from 'mobx'; -import WebControls from '../components/WebControls'; -import ServicesStore from '../../../stores/ServicesStore'; -import Service from '../../../models/Service'; -import { SEARCH_ENGINE_URLS } from '../../../config'; -import AppStore from '../../../stores/AppStore'; - -const URL_EVENTS = [ - 'load-commit', - 'will-navigate', - 'did-navigate', - 'did-navigate-in-page', -]; - -class WebControlsScreen extends Component { - @observable url = ''; - - @observable canGoBack = false; - - @observable canGoForward = false; - - webview = null; - - autorunDisposer = null; - - @action _setUrl(value) { - this.url = value; - } - - @action _setUrlAndHistory(value) { - this._setUrl(value); - this.canGoBack = this.webview.canGoBack(); - this.canGoForward = this.webview.canGoForward(); - } - - constructor(props) { - super(props); - - makeObservable(this); - } - - componentDidMount() { - const { service } = this.props; - - this.autorunDisposer = autorun(() => { - if (service.isAttached) { - this.webview = service.webview; - this._setUrl(this.webview.getURL()); - - for (const event of URL_EVENTS) { - this.webview.addEventListener(event, e => { - if (!e.isMainFrame) return; - - this._setUrlAndHistory(e.url); - }); - } - } - }); - } - - componentWillUnmount() { - this.autorunDisposer(); - } - - goHome() { - if (!this.webview) return; - this.webview.goToIndex(0); - } - - reload() { - if (!this.webview) return; - - this.webview.reload(); - } - - goBack() { - if (!this.webview) return; - - this.webview.goBack(); - } - - goForward() { - if (!this.webview) return; - - this.webview.goForward(); - } - - navigate(newUrl) { - if (!this.webview) return; - - let url = newUrl; - - try { - url = new URL(url).toString(); - } catch { - url = - // eslint-disable-next-line no-useless-escape - /^((?!-))(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( - url, - ) - ? `http://${url}` - : SEARCH_ENGINE_URLS[this.settings.app.searchEngine]({ - searchTerm: url, - }); - } - - this.webview.loadURL(url); - this._setUrl(url); - } - - openInBrowser() { - const { openExternalUrl } = this.props.actions.app; - - if (!this.webview) return; - - openExternalUrl({ url: this.url }); - } - - render() { - return ( - this.goHome()} - reload={() => this.reload()} - openInBrowser={() => this.openInBrowser()} - canGoBack={this.canGoBack} - goBack={() => this.goBack()} - canGoForward={this.canGoForward} - goForward={() => this.goForward()} - navigate={url => this.navigate(url)} - url={this.url} - /> - ); - } -} - -export default inject('stores', 'actions')(observer(WebControlsScreen)); - -WebControlsScreen.propTypes = { - service: PropTypes.instanceOf(Service).isRequired, - stores: PropTypes.shape({ - services: PropTypes.instanceOf(ServicesStore).isRequired, - }).isRequired, - actions: PropTypes.shape({ - app: PropTypes.instanceOf(AppStore).isRequired, - service: PropTypes.instanceOf(ServicesStore).isRequired, - }).isRequired, -}; diff --git a/src/features/webControls/containers/WebControlsScreen.tsx b/src/features/webControls/containers/WebControlsScreen.tsx new file mode 100644 index 000000000..f6f1cddb8 --- /dev/null +++ b/src/features/webControls/containers/WebControlsScreen.tsx @@ -0,0 +1,163 @@ +import { Component, ReactElement } from 'react'; +import { observer, inject } from 'mobx-react'; +import { + autorun, + action, + makeObservable, + observable, + IReactionDisposer, +} from 'mobx'; +import ElectronWebView from 'react-electron-web-view'; +import WebControls from '../components/WebControls'; +import Service from '../../../models/Service'; +import { SEARCH_ENGINE_URLS } from '../../../config'; +import { StoresProps } from '../../../@types/ferdium-components.types'; + +const URL_EVENTS = [ + 'load-commit', + 'will-navigate', + 'did-navigate', + 'did-navigate-in-page', +]; + +interface IProps extends Partial { + service: Service; +} + +@inject('stores', 'actions') +@observer +class WebControlsScreen extends Component { + @observable url = ''; + + @observable canGoBack = false; + + @observable canGoForward = false; + + webview: ElectronWebView | null = null; + + autorunDisposer: IReactionDisposer | null = null; + + constructor(props) { + super(props); + + makeObservable(this); + } + + componentDidMount(): void { + const { service } = this.props; + + this.autorunDisposer = autorun(() => { + if (service.isAttached) { + this.webview = service.webview; + this._setUrl(this.webview.getURL()); + + for (const event of URL_EVENTS) { + this.webview.addEventListener(event, e => { + if (!e.isMainFrame) { + return; + } + this._setUrlAndHistory(e.url); + }); + } + } + }); + } + + componentWillUnmount(): void { + if (this.autorunDisposer) { + this.autorunDisposer(); + } + } + + @action + _setUrl(value): void { + this.url = value; + } + + @action + _setUrlAndHistory(value): void { + this._setUrl(value); + this.canGoBack = this.webview.canGoBack(); + this.canGoForward = this.webview.canGoForward(); + } + + goHome(): void { + if (!this.webview) { + return; + } + this.webview.goToIndex(0); + } + + reload(): void { + if (!this.webview) { + return; + } + + this.webview.reload(); + } + + goBack(): void { + if (!this.webview) { + return; + } + + this.webview.goBack(); + } + + goForward(): void { + if (!this.webview) { + return; + } + + this.webview.goForward(); + } + + navigate(url: string): void { + if (!this.webview) { + return; + } + + try { + url = new URL(url).toString(); + } catch { + url = + /^((?!-))(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( + url, + ) + ? `http://${url}` + : SEARCH_ENGINE_URLS[this.props.stores!.settings.app.searchEngine]({ + searchTerm: url, + }); + } + + this.webview.loadURL(url); + this._setUrl(url); + } + + openInBrowser(): void { + const { openExternalUrl } = this.props.actions!.app; + if (!this.webview) { + return; + } + + openExternalUrl({ url: this.url }); + } + + render(): ReactElement { + return ( + this.goHome()} + reload={() => this.reload()} + openInBrowser={() => this.openInBrowser()} + canGoBack={this.canGoBack} + goBack={() => this.goBack()} + canGoForward={this.canGoForward} + goForward={() => this.goForward()} + navigate={url => this.navigate(url)} + url={this.url} + /> + ); + } +} + +export default WebControlsScreen; -- cgit v1.2.3-54-g00ecf