import React from 'react' import PropTypes from 'prop-types' import { translate } from 'react-translate' import clsx from 'clsx' import { useTheme } from '@material-ui/core/styles' import Drawer from '@material-ui/core/Drawer' import SwipeableDrawer from '@material-ui/core/SwipeableDrawer' import useMediaQuery from '@material-ui/core/useMediaQuery' import ListItem from '@material-ui/core/ListItem' import ListItemIcon from '@material-ui/core/ListItemIcon' import ListItemText from '@material-ui/core/ListItemText' import Tooltip from '@material-ui/core/Tooltip' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faArrowAltCircleUp as faUpgrade } from '@fortawesome/free-solid-svg-icons' import MenuContent from './MenuContent' import useStyles from './useStyles' // Renders the menu, responsive function MenuUntranslated (props) { const { handleDrawerOpen, handleDrawerClose, open, newServiceWorkerDetected, onLoadNewServiceWorkerAccept, t } = props const classes = useStyles() const theme = useTheme() const isBig = useMediaQuery(theme.breakpoints.up('md')) const DrawerComponent = isBig ? Drawer : SwipeableDrawer const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent) const toggleDrawer = (openState) => (/* event */) => { if (openState) { handleDrawerOpen() } else { handleDrawerClose() } } const handleClickUpdate = (e) => { e.preventDefault() handleDrawerClose() onLoadNewServiceWorkerAccept() } return ( <DrawerComponent {...(isBig ? { variant: 'permanent' } : { anchor: 'left', onClose: toggleDrawer(false), onOpen: toggleDrawer(true), disableBackdropTransition: !iOS, disableDiscovery: iOS })} classes={{ paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose) }} open={open} > <MenuContent handleDrawerClose={handleDrawerClose} /> {newServiceWorkerDetected ? ( <ListItem button onClick={handleClickUpdate} className={classes.updateItem} > <Tooltip title={t('Update!')}> <ListItemIcon> <FontAwesomeIcon icon={faUpgrade} style={{ fontSize: '1.5rem', color: 'green' }} /> </ListItemIcon> </Tooltip> <ListItemText primary={t('Update!')} /> </ListItem> ) : null} </DrawerComponent> ) } MenuUntranslated.propTypes = { handleDrawerOpen: PropTypes.func.isRequired, handleDrawerClose: PropTypes.func.isRequired, open: PropTypes.bool.isRequired, onLoadNewServiceWorkerAccept: PropTypes.func.isRequired, newServiceWorkerDetected: PropTypes.bool.isRequired, t: PropTypes.func.isRequired } const Menu = translate('Menu')(MenuUntranslated) export default Menu