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)
---
src/features/webControls/components/WebControls.js | 241 --------------------
.../webControls/components/WebControls.tsx | 242 +++++++++++++++++++++
2 files changed, 242 insertions(+), 241 deletions(-)
delete mode 100644 src/features/webControls/components/WebControls.js
create mode 100644 src/features/webControls/components/WebControls.tsx
(limited to 'src/features/webControls/components')
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 @@
-import { createRef, Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import {
- mdiReload,
- mdiArrowRight,
- mdiArrowLeft,
- mdiHomeOutline,
- mdiEarth,
-} from '@mdi/js';
-
-import Icon from '../../../components/ui/icon';
-
-const messages = defineMessages({
- goHome: {
- id: 'webControls.goHome',
- defaultMessage: 'Home',
- },
- openInBrowser: {
- id: 'webControls.openInBrowser',
- defaultMessage: 'Open in Browser',
- },
- back: {
- id: 'webControls.back',
- defaultMessage: 'Back',
- },
- forward: {
- id: 'webControls.forward',
- defaultMessage: 'Forward',
- },
- reload: {
- id: 'webControls.reload',
- defaultMessage: 'Reload',
- },
-});
-
-let buttonTransition = 'none';
-
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
- buttonTransition = 'opacity 0.25s';
-}
-
-const styles = theme => ({
- root: {
- background: theme.colorBackground,
- position: 'relative',
- borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
- zIndex: 300,
- height: 50,
- display: 'flex',
- flexDirection: 'row',
- alignItems: 'center',
- padding: [0, 10],
-
- '& + div': {
- height: 'calc(100% - 50px)',
- },
- },
- button: {
- width: 30,
- height: 50,
- transition: buttonTransition,
-
- '&:hover': {
- opacity: 0.8,
- },
-
- '&:disabled': {
- opacity: 0.5,
- },
- },
- icon: {
- width: '20px !important',
- height: 20,
- marginTop: 5,
- color: theme.colorText,
- },
- input: {
- marginBottom: 0,
- height: 'auto',
- margin: [0, 10],
- flex: 1,
- border: 0,
- padding: [4, 10],
- borderRadius: theme.borderRadius,
- background: theme.inputBackground,
- color: theme.inputColor,
- },
- inputButton: {
- color: theme.colorText,
- },
-});
-
-class WebControls extends Component {
- static propTypes = {
- classes: PropTypes.object.isRequired,
- goHome: PropTypes.func.isRequired,
- canGoBack: PropTypes.bool.isRequired,
- goBack: PropTypes.func.isRequired,
- canGoForward: PropTypes.bool.isRequired,
- goForward: PropTypes.func.isRequired,
- reload: PropTypes.func.isRequired,
- openInBrowser: PropTypes.func.isRequired,
- url: PropTypes.string.isRequired,
- navigate: PropTypes.func.isRequired,
- };
-
- static getDerivedStateFromProps(props, state) {
- const { url } = props;
- const { editUrl } = state;
-
- if (!editUrl) {
- return {
- inputUrl: url,
- editUrl: state.editUrl,
- };
- }
- }
-
- inputRef = createRef();
-
- state = {
- inputUrl: '',
- editUrl: false,
- };
-
- render() {
- const {
- classes,
- goHome,
- canGoBack,
- goBack,
- canGoForward,
- goForward,
- reload,
- openInBrowser,
- url,
- navigate,
- } = this.props;
-
- const { inputUrl, editUrl } = this.state;
-
- const { intl } = this.props;
-
- return (
-
-
-
-
-
-
- this.setState({
- inputUrl: event.target.value,
- })
- }
- onFocus={event => {
- event.target.select();
- this.setState({
- editUrl: true,
- });
- }}
- onBlur={event => {
- event.target.blur();
- this.setState({
- editUrl: false,
- });
- }}
- onKeyDown={event => {
- if (event.key === 'Enter') {
- this.setState({
- editUrl: false,
- });
- navigate(inputUrl);
- this.inputRef.current.blur();
- } else if (event.key === 'Escape') {
- this.setState({
- editUrl: false,
- inputUrl: url,
- });
- this.inputRef.current.blur();
- }
- }}
- ref={this.inputRef}
- />
-
-
- );
- }
-}
-
-export default injectIntl(
- injectSheet(styles, { injectTheme: true })(observer(WebControls)),
-);
diff --git a/src/features/webControls/components/WebControls.tsx b/src/features/webControls/components/WebControls.tsx
new file mode 100644
index 000000000..ebcd93c9e
--- /dev/null
+++ b/src/features/webControls/components/WebControls.tsx
@@ -0,0 +1,242 @@
+import { createRef, Component, ReactElement, RefObject } from 'react';
+import { observer } from 'mobx-react';
+import withStyles, { WithStylesProps } from 'react-jss';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import {
+ mdiReload,
+ mdiArrowRight,
+ mdiArrowLeft,
+ mdiHomeOutline,
+ mdiEarth,
+} from '@mdi/js';
+import Icon from '../../../components/ui/icon';
+
+const messages = defineMessages({
+ goHome: {
+ id: 'webControls.goHome',
+ defaultMessage: 'Home',
+ },
+ openInBrowser: {
+ id: 'webControls.openInBrowser',
+ defaultMessage: 'Open in Browser',
+ },
+ back: {
+ id: 'webControls.back',
+ defaultMessage: 'Back',
+ },
+ forward: {
+ id: 'webControls.forward',
+ defaultMessage: 'Forward',
+ },
+ reload: {
+ id: 'webControls.reload',
+ defaultMessage: 'Reload',
+ },
+});
+
+const buttonTransition =
+ window && window.matchMedia('(prefers-reduced-motion: no-preference)')
+ ? 'opacity 0.25s'
+ : 'none';
+
+const styles = theme => ({
+ root: {
+ background: theme.colorBackground,
+ position: 'relative',
+ borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
+ zIndex: 300,
+ height: 50,
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ padding: [0, 10],
+
+ '& + div': {
+ height: 'calc(100% - 50px)',
+ },
+ },
+ button: {
+ width: 30,
+ height: 50,
+ transition: buttonTransition,
+
+ '&:hover': {
+ opacity: 0.8,
+ },
+
+ '&:disabled': {
+ opacity: 0.5,
+ },
+ },
+ icon: {
+ width: '20px !important',
+ height: 20,
+ marginTop: 5,
+ color: theme.colorText,
+ },
+ input: {
+ marginBottom: 0,
+ height: 'auto',
+ margin: [0, 10],
+ flex: 1,
+ border: 0,
+ padding: [4, 10],
+ borderRadius: theme.borderRadius,
+ background: theme.inputBackground,
+ color: theme.inputColor,
+ },
+ inputButton: {
+ color: theme.colorText,
+ },
+});
+
+interface IProps extends WithStylesProps, WrappedComponentProps {
+ goHome: () => void;
+ canGoBack: boolean;
+ goBack: () => void;
+ canGoForward: boolean;
+ goForward: () => void;
+ reload: () => void;
+ openInBrowser: () => void;
+ url: string;
+ navigate: (url: string) => void;
+}
+
+interface IState {
+ inputUrl: string;
+ editUrl: boolean;
+}
+
+@observer
+class WebControls extends Component {
+ inputRef: RefObject = createRef();
+
+ static getDerivedStateFromProps(props, state): IState | null {
+ const { url: inputUrl } = props;
+ const { editUrl } = state;
+
+ return !editUrl ? { inputUrl, editUrl } : null;
+ }
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ inputUrl: '',
+ editUrl: false,
+ };
+ }
+
+ render(): ReactElement {
+ const {
+ classes,
+ goHome,
+ canGoBack,
+ goBack,
+ canGoForward,
+ goForward,
+ reload,
+ openInBrowser,
+ url,
+ navigate,
+ intl,
+ } = this.props;
+
+ const { inputUrl, editUrl } = this.state;
+
+ return (
+
+
+
+
+
+
+ this.setState({
+ inputUrl: event.target.value,
+ })
+ }
+ onFocus={event => {
+ event.target.select();
+ this.setState({
+ editUrl: true,
+ });
+ }}
+ onBlur={event => {
+ event.target.blur();
+ this.setState({
+ editUrl: false,
+ });
+ }}
+ onKeyDown={event => {
+ if (event.key === 'Enter') {
+ this.setState({
+ editUrl: false,
+ });
+ navigate(inputUrl);
+ } else if (event.key === 'Escape') {
+ this.setState({
+ editUrl: false,
+ inputUrl: url,
+ });
+ }
+
+ if (this.inputRef && this.inputRef.current) {
+ this.inputRef.current.blur();
+ }
+ }}
+ ref={this.inputRef}
+ />
+
+
+ );
+ }
+}
+
+export default injectIntl(
+ withStyles(styles, { injectTheme: true })(WebControls),
+);
--
cgit v1.2.3-70-g09d2