Browse Source

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

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4917/head
Pranav C 2 years ago
parent
commit
53408f7d70
  1. 16
      packages/nc-gui/components/smartsheet/Grid.vue
  2. 7
      packages/nc-gui/composables/useMultiSelect/index.ts

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

@ -173,8 +173,16 @@ const getContainerScrollForElement = (
return scroll return scroll
} }
const { isCellSelected, activeCell, handleMouseDown, handleMouseOver, handleCellClick, clearSelectedRange, copyValue } = const {
useMultiSelect( isCellSelected,
activeCell,
handleMouseDown,
handleMouseOver,
handleCellClick,
clearSelectedRange,
copyValue,
isCellActive,
} = useMultiSelect(
meta, meta,
fields, fields,
data, data,
@ -202,7 +210,7 @@ const { isCellSelected, activeCell, handleMouseDown, handleMouseOver, handleCell
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
const altOrOptionKey = e.altKey const altOrOptionKey = e.altKey
if (e.key === ' ') { if (e.key === ' ') {
if (activeCell.row != null && !isNaN(activeCell.row) && !editEnabled && hasEditPermission) { if (isCellActive.value && !editEnabled && hasEditPermission) {
e.preventDefault() e.preventDefault()
clearSelectedRange() clearSelectedRange()
const row = data.value[activeCell.row] const row = data.value[activeCell.row]
@ -226,7 +234,7 @@ const { isCellSelected, activeCell, handleMouseDown, handleMouseOver, handleCell
} }
if (cmdOrCtrl) { if (cmdOrCtrl) {
if (activeCell.row === null || isNaN(activeCell.row) || activeCell.col === null || isNaN(activeCell.col)) return if (!isCellActive.value) return
switch (e.key) { switch (e.key) {
case 'ArrowUp': case 'ArrowUp':

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

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

Loading…
Cancel
Save