refactor(gui): use a computed property to compute cell active/not

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/smartsheet/Grid.vue

@@ -173,130 +173,138 @@ const getContainerScrollForElement = (
   return scroll
 }
 
-const { isCellSelected, activeCell, handleMouseDown, handleMouseOver, handleCellClick, clearSelectedRange, copyValue } =
+const {
-  useMultiSelect(
+  isCellSelected,
-    meta,
+  activeCell,
-    fields,
+  handleMouseDown,
-    data,
+  handleMouseOver,
-    $$(editEnabled),
+  handleCellClick,
-    isPkAvail,
+  clearSelectedRange,
-    clearCell,
+  copyValue,
-    makeEditable,
+  isCellActive,
-    scrollToCell,
+} = useMultiSelect(
-    (e: KeyboardEvent) => {
+  meta,
-      // ignore navigating if picker(Date, Time, DateTime, Year)
+  fields,
-      // or single/multi select options is open
+  data,
-      const activePickerOrDropdownEl = document.querySelector(
+  $$(editEnabled),
-        '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
+  isPkAvail,
-      )
+  clearCell,
-      if (activePickerOrDropdownEl) {
+  makeEditable,
+  scrollToCell,
+  (e: KeyboardEvent) => {
+    // ignore navigating if picker(Date, Time, DateTime, Year)
+    // or single/multi select options is open
+    const activePickerOrDropdownEl = document.querySelector(
+      '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
+    )
+    if (activePickerOrDropdownEl) {
+      e.preventDefault()
+      return true
+    }
+
+    // skip keyboard event handling if there is a drawer / modal
+    if (isDrawerOrModalExist()) {
+      return true
+    }
+
+    const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+    const altOrOptionKey = e.altKey
+    if (e.key === ' ') {
+      if (isCellActive.value && !editEnabled && hasEditPermission) {
         e.preventDefault()
+        clearSelectedRange()
+        const row = data.value[activeCell.row]
+        expandForm(row)
         return true
       }
-
+    } else if (e.key === 'Escape') {
-      // skip keyboard event handling if there is a drawer / modal
+      if (editEnabled) {
-      if (isDrawerOrModalExist()) {
+        editEnabled = false
+        return true
+      }
+    } else if (e.key === 'Enter') {
+      if (e.shiftKey) {
+        // add a line break for types like LongText / JSON
+        return true
+      }
+      if (editEnabled) {
+        editEnabled = false
         return true
       }
+    }
+
+    if (cmdOrCtrl) {
+      if (!isCellActive.value) return
 
-      const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+      switch (e.key) {
-      const altOrOptionKey = e.altKey
+        case 'ArrowUp':
-      if (e.key === ' ') {
-        if (activeCell.row != null && !isNaN(activeCell.row) && !editEnabled && hasEditPermission) {
           e.preventDefault()
           clearSelectedRange()
-          const row = data.value[activeCell.row]
+          activeCell.row = 0
-          expandForm(row)
+          activeCell.col = activeCell.col ?? 0
+          scrollToCell?.()
+          editEnabled = false
           return true
-        }
+        case 'ArrowDown':
-      } else if (e.key === 'Escape') {
+          e.preventDefault()
-        if (editEnabled) {
+          clearSelectedRange()
+          activeCell.row = data.value.length - 1
+          activeCell.col = activeCell.col ?? 0
+          scrollToCell?.()
           editEnabled = false
           return true
-        }
+        case 'ArrowRight':
-      } else if (e.key === 'Enter') {
+          e.preventDefault()
-        if (e.shiftKey) {
+          clearSelectedRange()
-          // add a line break for types like LongText / JSON
+          activeCell.row = activeCell.row ?? 0
+          activeCell.col = fields.value?.length - 1
+          scrollToCell?.()
+          editEnabled = false
           return true
-        }
+        case 'ArrowLeft':
-        if (editEnabled) {
+          e.preventDefault()
+          clearSelectedRange()
+          activeCell.row = activeCell.row ?? 0
+          activeCell.col = 0
+          scrollToCell?.()
           editEnabled = false
           return true
-        }
-      }
-
-      if (cmdOrCtrl) {
-        if (activeCell.row === null || isNaN(activeCell.row) || activeCell.col === null || isNaN(activeCell.col)) return
-
-        switch (e.key) {
-          case 'ArrowUp':
-            e.preventDefault()
-            clearSelectedRange()
-            activeCell.row = 0
-            activeCell.col = activeCell.col ?? 0
-            scrollToCell?.()
-            editEnabled = false
-            return true
-          case 'ArrowDown':
-            e.preventDefault()
-            clearSelectedRange()
-            activeCell.row = data.value.length - 1
-            activeCell.col = activeCell.col ?? 0
-            scrollToCell?.()
-            editEnabled = false
-            return true
-          case 'ArrowRight':
-            e.preventDefault()
-            clearSelectedRange()
-            activeCell.row = activeCell.row ?? 0
-            activeCell.col = fields.value?.length - 1
-            scrollToCell?.()
-            editEnabled = false
-            return true
-          case 'ArrowLeft':
-            e.preventDefault()
-            clearSelectedRange()
-            activeCell.row = activeCell.row ?? 0
-            activeCell.col = 0
-            scrollToCell?.()
-            editEnabled = false
-            return true
-        }
       }
+    }
 
-      if (altOrOptionKey) {
+    if (altOrOptionKey) {
-        switch (e.keyCode) {
+      switch (e.keyCode) {
-          case 82: {
+        case 82: {
-            // ALT + R
+          // ALT + R
-            if (isAddingEmptyRowAllowed) {
+          if (isAddingEmptyRowAllowed) {
-              $e('c:shortcut', { key: 'ALT + R' })
+            $e('c:shortcut', { key: 'ALT + R' })
-              addEmptyRow()
+            addEmptyRow()
-            }
-            break
           }
-          case 67: {
+          break
-            // ALT + C
+        }
-            if (isAddingColumnAllowed) {
+        case 67: {
-              $e('c:shortcut', { key: 'ALT + C' })
+          // ALT + C
-              addColumnDropdown.value = true
+          if (isAddingColumnAllowed) {
-            }
+            $e('c:shortcut', { key: 'ALT + C' })
-            break
+            addColumnDropdown.value = true
           }
+          break
         }
       }
-    },
+    }
-    async (ctx: { row: number; col?: number; updatedColumnTitle?: string }) => {
+  },
-      const rowObj = data.value[ctx.row]
+  async (ctx: { row: number; col?: number; updatedColumnTitle?: string }) => {
-      const columnObj = ctx.col !== undefined ? fields.value[ctx.col] : null
+    const rowObj = data.value[ctx.row]
+    const columnObj = ctx.col !== undefined ? fields.value[ctx.col] : null
 
-      if (!ctx.updatedColumnTitle && isVirtualCol(columnObj)) {
+    if (!ctx.updatedColumnTitle && isVirtualCol(columnObj)) {
-        return
+      return
-      }
+    }
 
-      // update/save cell value
+    // update/save cell value
-      await updateOrSaveRow(rowObj, ctx.updatedColumnTitle || columnObj.title)
+    await updateOrSaveRow(rowObj, ctx.updatedColumnTitle || columnObj.title)
-    },
+  },
-  )
+)
 
 function scrollToCell(row?: number | null, col?: number | null) {
   row = row ?? activeCell.row

packages/nc-gui/composables/useMultiSelect/index.ts

@@ -61,6 +61,10 @@ export function useMultiSelect(
 
   const columnLength = $computed(() => unref(fields)?.length)
 
+  const isCellActive = computed(
+    () => !(activeCell.row === null || activeCell.col === null || isNaN(activeCell.row) || isNaN(activeCell.col)),
+  )
+
   function makeActive(row: number, col: number) {
     if (activeCell.row === row && activeCell.col === col) {
       return
@@ -171,7 +175,7 @@ export function useMultiSelect(
       return true
     }
 
-    if (activeCell.row === null || activeCell.col === null || isNaN(activeCell.row) || isNaN(activeCell.col)) {
+    if (!isCellActive.value) {
       return
     }
 
@@ -367,6 +371,7 @@ export function useMultiSelect(
   useEventListener(document, 'mouseup', handleMouseUp)
 
   return {
+    isCellActive,
     handleMouseDown,
     handleMouseOver,
     clearSelectedRange,