From afa65e37c20d7987a114039ce13e2ce642fa78e4 Mon Sep 17 00:00:00 2001 From: Rufat Aliyev <46456022+rufataliy@users.noreply.github.com> Date: Sun, 28 Feb 2021 17:07:24 -0500 Subject: [PATCH 1/2] Added closeMenu redux method to close menu on 'on Escape clikc' --- client/redux/reducers/ui.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/client/redux/reducers/ui.js b/client/redux/reducers/ui.js index 30408666b..1577433b3 100644 --- a/client/redux/reducers/ui.js +++ b/client/redux/reducers/ui.js @@ -2,6 +2,7 @@ import { MAP_MODES } from '@components/common/CONSTANTS'; export const types = { TOGGLE_MENU: 'TOGGLE_MENU', + CLOSE_MENU: 'CLOSE_MENU', SET_MENU_TAB: 'SET_MENU_TAB', SET_ERROR_MODAL: 'SET_ERROR_MODAL', SHOW_DATA_CHARTS: 'SHOW_DATA_CHARTS', @@ -16,6 +17,10 @@ export const toggleMenu = () => ({ type: types.TOGGLE_MENU, }); +export const closeMenu = () => ({ + type: types.CLOSE_MENU, +}); + export const setMenuTab = tab => ({ type: types.SET_MENU_TAB, payload: tab, @@ -74,6 +79,14 @@ const initialState = { export default (state = initialState, action) => { switch (action.type) { + case types.CLOSE_MENU: + return { + ...state, + menu: { + ...state.menu, + isOpen: false, + }, + }; case types.TOGGLE_MENU: return { ...state, From 8710971e6b4cedb0f81ddb2d4b76afe5d5980227 Mon Sep 17 00:00:00 2001 From: Rufat Aliyev <46456022+rufataliy@users.noreply.github.com> Date: Sun, 28 Feb 2021 17:10:55 -0500 Subject: [PATCH 2/2] Removed preventDefault which caused SearchBar onChange event not to fire. Changed keypress to keyup to capture escape click --- .../main/shared/PersistentDrawerLeft.jsx | 65 +++++++++++++------ 1 file changed, 45 insertions(+), 20 deletions(-) diff --git a/client/components/main/shared/PersistentDrawerLeft.jsx b/client/components/main/shared/PersistentDrawerLeft.jsx index 62f8e62d9..f627a5b31 100644 --- a/client/components/main/shared/PersistentDrawerLeft.jsx +++ b/client/components/main/shared/PersistentDrawerLeft.jsx @@ -13,7 +13,10 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import LinkIcon from '@material-ui/icons/Link'; import { connect } from 'react-redux'; -import { toggleMenu as reduxToggleMenu } from '@reducers/ui'; +import { + toggleMenu as reduxToggleMenu, + closeMenu as reduxCloseMenu, +} from '@reducers/ui'; import Radio from '@material-ui/core/Radio'; const drawerWidth = 275; @@ -60,11 +63,13 @@ const useStyles = makeStyles(theme => ({ }, })); -const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => { +const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu, closeMenu }) => { // TODO ADD FUNCTIONALITY const [selectedMapStyleValue, setMapStyleValue] = React.useState('Point Map'); const [selectedMapModeValue, setMapModeValue] = React.useState('Dark'); - const [selectedDataColorScheme, setDataColorScheme] = React.useState('Original'); + const [selectedDataColorScheme, setDataColorScheme] = React.useState( + 'Original', + ); const [selectedBoundariesValue, setBoundariesValue] = React.useState('None'); const handleChangeMapStyle = event => { @@ -92,16 +97,15 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => { useEffect(() => { const escFunction = e => { - e.preventDefault(); if (e.key === 'Escape') { - toggleMenu(); + closeMenu(); } }; - document.addEventListener('keypress', escFunction, false); + document.addEventListener('keyup', escFunction, false); - return () => document.removeEventListener('keypress', escFunction, false); - }, [toggleMenu]); + return () => document.removeEventListener('keyup', escFunction, false); + }, [closeMenu]); return (
@@ -117,7 +121,11 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => { >
- {theme.direction === 'ltr' ? : } + {theme.direction === 'ltr' ? ( + + ) : ( + + )}
@@ -126,7 +134,12 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => { {['Point Map', 'Heat Map'].map(text => ( - + { ))} - { - /** - * TODO ADD DYNAMIC LIST OF ITEMS - * ADD COLOR TO RADIO BUTTONS - */ - } + {/** + * TODO ADD DYNAMIC LIST OF ITEMS + * ADD COLOR TO RADIO BUTTONS + */} {['Dark', 'Light', 'Street'].map(text => ( - + { checked={selectedDataColorScheme === text} onChange={handleChangeDataColorScheme} value={text} - style={{ color: selectedDataColorScheme === text && '#87C8BC' }} + style={{ + color: selectedDataColorScheme === text && '#87C8BC', + }} name="radio-button" inputProps={{ 'aria-label': text }} /> @@ -212,7 +230,9 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => { checked={selectedBoundariesValue === text} onChange={handleChangeBoundaries} value={text} - style={{ color: selectedBoundariesValue === text && '#87C8BC' }} + style={{ + color: selectedBoundariesValue === text && '#87C8BC', + }} name="radio-button" inputProps={{ 'aria-label': text }} /> @@ -238,6 +258,7 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => { PersistentDrawerLeft.propTypes = { menuIsOpen: PropTypes.bool.isRequired, toggleMenu: PropTypes.func.isRequired, + closeMenu: PropTypes.func.isRequired, }; const mapStateToProps = state => ({ @@ -246,6 +267,10 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => ({ toggleMenu: () => dispatch(reduxToggleMenu()), + closeMenu: () => dispatch(reduxCloseMenu()), }); -export default connect(mapStateToProps, mapDispatchToProps)(PersistentDrawerLeft); +export default connect( + mapStateToProps, + mapDispatchToProps, +)(PersistentDrawerLeft);