From 84c16230b41f4ea77bc433c9035f92b0d71e9363 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Sun, 29 Mar 2020 16:09:26 -0700
Subject: [PATCH] Abstract to useKeydown composition API

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

diff --git a/src/components/ModalView.vue b/src/components/ModalView.vue
index 4d0b906..5527cb5 100644
--- a/src/components/ModalView.vue
+++ b/src/components/ModalView.vue
@@ -8,21 +8,11 @@
 </template>
 
 <script>
-  import { onBeforeUnmount } from 'vue';
+  import { useKeydown } from '../composition/useKeydown';
 
   export default {
     setup({closeModal}){
-      let onKeydown = (event) => {
-        if(event.key == 'Escape') {
-          closeModal()
-        }
-      }
-
-      window.addEventListener('keydown', onKeydown)
-
-      onBeforeUnmount(() => {
-        window.removeEventListener('keydown', onKeydown)
-      })
+      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..c3f517e
--- /dev/null
+++ b/src/composition/useKeydown.js
@@ -0,0 +1,17 @@
+import { onBeforeUnmount } from 'vue';
+
+export const useKeydown = function(keyCombo) {
+  let onkey = function(event) {
+    if(keyCombo.key == event.key) {
+      keyCombo.fn()
+    }
+  }
+
+  window.addEventListener('keydown', onkey);
+
+  onBeforeUnmount(()=> {
+    window.removeEventListener('keydown', onkey);
+  })
+}
+
+export default useKeydown;
\ No newline at end of file