From 747202024b73429b41e00c7ee4cbf15d7458c3f3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 01:40:42 +0530
Subject: [PATCH] feat: toggle checkbox on enter key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Checkbox.vue  | 13 ++++++++++++
 .../useSelectedCellKeyupListener/index.ts     | 20 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index 04c5d73521..7af47815ef 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject } from '#imports'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
+import { ActiveCellInj } from '~/context'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type
@@ -42,6 +44,16 @@ function onClick() {
     vModel = !vModel
   }
 }
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+  console.log(e.key)
+  switch (e.key) {
+    case 'Enter':
+      onClick()
+      e.stopPropagation()
+      break
+  }
+})
 </script>
 
 <template>
@@ -72,6 +84,7 @@ function onClick() {
 .nc-cell-hover-show {
   opacity: 0;
   transition: 0.3s opacity;
+
   &:hover {
     opacity: 0.7;
   }
diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
new file mode 100644
index 0000000000..ef86be0e40
--- /dev/null
+++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
@@ -0,0 +1,20 @@
+import type { Ref } from 'vue'
+import { onUnmounted, useEventListener } from '#imports'
+
+export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e: KeyboardEvent) => void) {
+  const cleanup: Ref<ReturnType<typeof useEventListener> | null> = ref(null)
+
+  watch(selected, (value) => {
+    if (value) {
+      cleanup.value = useEventListener('keydown', handler)
+    } else {
+      cleanup.value?.()
+    }
+  })
+
+  onUnmounted(() => cleanup.value?.())
+
+  return {
+    cleanup,
+  }
+}