From 32c7951d5e5db2dfde5305707e4d9bf021952db2 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Tue, 20 Mar 2018 15:23:02 +0100
Subject: Properly support keyboard navigation for the menu
---
src/client/react/components/container/Menu.js | 22 ++++++++++++++++++----
1 file changed, 18 insertions(+), 4 deletions(-)
(limited to 'src/client/react/components/container')
diff --git a/src/client/react/components/container/Menu.js b/src/client/react/components/container/Menu.js
index 36367ed..f99ed37 100644
--- a/src/client/react/components/container/Menu.js
+++ b/src/client/react/components/container/Menu.js
@@ -30,16 +30,30 @@ class Menu extends React.Component {
dispatch: PropTypes.func.isRequired,
}
+ onItemSelected(index) {
+ switch (index) {
+ case 'room_finder':
+ this.props.dispatch({ type: 'ROOM_FINDER/SHOW' });
+ break;
+ default:
+ // No default
+ }
+ }
+
render() {
return (
<SimpleMenu
handle={<Button><ButtonIcon use="more_vert" /></Button>}
+ onSelected={(event) => {
+ // Send the `data-type` of the selected <MenuItem />
+ this.onItemSelected(event.detail.item.dataset.type);
+ }}
>
- <MenuItem><Icon use="bookmark_border" />Voeg label toe</MenuItem>
- <MenuItem><Icon use="star_border" />Maak favoriet</MenuItem>
+ <MenuItem data-type="add_label"><Icon use="bookmark_border" />Voeg label toe</MenuItem>
+ <MenuItem data-type="make_favorite"><Icon use="star_border" />Maak favoriet</MenuItem>
<div className="mdc-list-divider" role="separator" />
- <MenuItem onClick={() => this.props.dispatch({ type: 'ROOM_FINDER/SHOW' })}><Icon use="location_searching" />Lokaal zoeken</MenuItem>
- <MenuItem><Icon use="launch" />Oud rooster gebruiken</MenuItem>
+ <MenuItem data-type="room_finder"><Icon use="location_searching" />Lokaal zoeken</MenuItem>
+ <MenuItem data-type="use_legacy_schedule"><Icon use="launch" />Oud rooster gebruiken</MenuItem>
</SimpleMenu>
);
}
--
cgit v1.1