Lesson 8 - use-keydown composable

src/components/ModalView.vue

@@ -8,23 +8,14 @@
 </template>
 
 <script>
-  import { onBeforeUnmount } from 'vue'
+  import useKeydown from '../composables/use-keydown';
-  
+
   export default {
     setup(props, {emit}) {
-      let onKeydown = (event) => {
+      useKeydown([
-        console.log(event.key)
+        {key: 'Escape', fn: () => { emit('closeModal') }},
-        
+      ])
-        if(event.key == 'Escape') {
+    
-          emit('closeModal')
-        }
-      }
-
-      window.addEventListener('keydown', onKeydown)
-      onBeforeUnmount(()=>{
-        window.removeEventListener('keydown', onKeydown)
-      })
-
       return {
         emit
       }

src/composables/use-keydown.js

@@ -0,0 +1,17 @@
+import { onBeforeUnmount } from 'vue'
+  
+let useKeydown = (keyCombos) => {
+  let onKeydown = (event) => {
+    let kc = keyCombos.find(kc => kc.key == event.key)
+    if(kc) {
+      kc.fn()
+    }
+  }
+
+  window.addEventListener('keydown', onKeydown)
+  onBeforeUnmount(()=>{
+    window.removeEventListener('keydown', onKeydown)
+  })
+}
+
+export default useKeydown;