From f2f02709368355c301aa392fd94779efde49da2a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 30 Oct 2018 20:12:48 +0000
Subject: [PATCH] Use KeyboardEvent.key rather than keyCode in attempt to
 support more keyboard layouts.

---
 src/components/App.jsx | 29 +++++++++--------------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index b9c12d8..6f49c27 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -74,50 +74,39 @@ export default class App extends React.Component {
     })
 
     
-    const keyCodes = {
-      "esc": 27,
-      "?": 191,
-      "o": 79,
-      "e": 69,
-      "s": 83,
-      "d": 68,
-      "i": 73,
-      "m": 77,
-    }
-
     const shortcuts = [
       {
-        keyCode: keyCodes["?"],
+        key: "?",
         handler: () => {
           this.toggleModal("shortcuts");
         }
       },
       {
-        keyCode: keyCodes["o"],
+        key: "o",
         handler: () => {
           this.toggleModal("open");
         }
       },
       {
-        keyCode: keyCodes["e"],
+        key: "e",
         handler: () => {
           this.toggleModal("export");
         }
       },
       {
-        keyCode: keyCodes["d"],
+        key: "d",
         handler: () => {
           this.toggleModal("sources");
         }
       },
       {
-        keyCode: keyCodes["s"],
+        key: "s",
         handler: () => {
           this.toggleModal("settings");
         }
       },
       {
-        keyCode: keyCodes["i"],
+        key: "i",
         handler: () => {
           this.setMapState(
             this.state.mapState === "map" ? "inspect" : "map"
@@ -125,7 +114,7 @@ export default class App extends React.Component {
         }
       },
       {
-        keyCode: keyCodes["m"],
+        key: "m",
         handler: () => {
           document.querySelector(".mapboxgl-canvas").focus();
         }
@@ -133,13 +122,13 @@ export default class App extends React.Component {
     ]
 
     document.body.addEventListener("keyup", (e) => {
-      if(e.keyCode === keyCodes["esc"]) {
+      if(e.key === "Escape") {
         e.target.blur();
         document.body.focus();
       }
       else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
         const shortcut = shortcuts.find((shortcut) => {
-          return (shortcut.keyCode === e.keyCode)
+          return (shortcut.key === e.key)
         })
 
         if(shortcut) {