From f1f0a502b2018a2c2eaadccf09e7d6ad0c6f96d2 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Wed, 18 Mar 2020 17:09:08 -0700
Subject: [PATCH] keydown abstracted to useKeydown

---
 src/components/ModalView.vue  | 15 +++------------
 src/composition/useKeydown.js | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+), 12 deletions(-)
 create mode 100644 src/composition/useKeydown.js

diff --git a/src/components/ModalView.vue b/src/components/ModalView.vue
index 4f1bf66..43ad0f6 100644
--- a/src/components/ModalView.vue
+++ b/src/components/ModalView.vue
@@ -8,20 +8,11 @@
 </template>
 
 <script>
-  import { onMounted, onBeforeUnmount } from 'vue';
+  import { useKeydown } from '../composition/useKeydown';
+
   export default {
     setup({closeModal}, context){
-      let onkey = function(event){
-        if(event.key == 'Escape') {
-          closeModal()
-        }
-      }
-      onMounted(()=> {
-        window.addEventListener('keydown', onkey);
-      })
-      onBeforeUnmount(()=> {
-        window.removeEventListener('keydown', onkey);
-      })
+      useKeydown([{key: 'Escape', fn: closeModal}])
     },
     props: {
       closeModal: {
diff --git a/src/composition/useKeydown.js b/src/composition/useKeydown.js
new file mode 100644
index 0000000..6989f1e
--- /dev/null
+++ b/src/composition/useKeydown.js
@@ -0,0 +1,20 @@
+import { onMounted, onBeforeUnmount } from 'vue';
+
+export const useKeydown = function(keyCombos) {
+  keyCombos.forEach(({key, fn}) => {
+    let onkey = function(event) {
+      if(event.key == key) {
+        fn()
+      }
+    }
+
+    onMounted(()=> {
+      window.addEventListener('keydown', onkey);
+    })
+    onBeforeUnmount(()=> {
+      window.removeEventListener('keydown', onkey);
+    })
+  })
+}
+
+export default useKeydown;
\ No newline at end of file