import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { observer } from 'mobx-react'; import injectSheet from 'react-jss'; import { Icon } from '@meetfranz/ui'; import { defineMessages, intlShape } from 'react-intl'; import { mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline, mdiEarth, } from '@mdi/js'; 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.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, }, }); @injectSheet(styles) @observer 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 contextTypes = { intl: intlShape, }; static getDerivedStateFromProps(props, state) { const { url } = props; const { editUrl } = state; if (!editUrl) { return { inputUrl: url, editUrl: state.editUrl, }; } } inputRef = React.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.context; return (