feat(nc-gui): useSelectedCellKeyupListener logic on datetime picker

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -65,14 +65,82 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
-      open.value = true
+      // if expanded form is active skip resetting the active cell
+      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+        return
+      }
+      if (!open.value) {
+        // open date picker
+        open.value = true
+      } else {
+        // click Ok button to save the currently selected date
+        ;(document.querySelector('.nc-picker-datetime.active .ant-picker-ok button') as HTMLButtonElement)?.click()
+      }
       break
     case 'Escape':
+      // if expanded form is active skip resetting the active cell
+      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+        return
+      }
       if (open.value) {
         e.stopPropagation()
         open.value = false
       }
       break
+    case 'ArrowLeft':
+      if (!localState) {
+        ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
+      } else {
+        const prevEl = document.querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
+          ?.previousElementSibling as HTMLButtonElement
+        if (prevEl) {
+          prevEl.click()
+        } else {
+          // get the last td from previous tr
+          const prevRowLastEl = document
+            .querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
+            ?.closest('tr')
+            ?.previousElementSibling?.querySelector('td:last-child') as HTMLButtonElement
+          if (prevRowLastEl) {
+            prevRowLastEl.click()
+          } else {
+            // go to the previous month
+            ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
+          }
+        }
+      }
+      break
+    case 'ArrowRight':
+      if (!localState) {
+        ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
+      } else {
+        const nextEl = document.querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
+          ?.nextElementSibling as HTMLButtonElement
+        if (nextEl) {
+          nextEl.click()
+        } else {
+          // get the last td from previous tr
+          const nextRowFirstEl = document
+            .querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
+            ?.closest('tr')
+            ?.nextElementSibling?.querySelector('td:first-child') as HTMLButtonElement
+          if (nextRowFirstEl) {
+            nextRowFirstEl.click()
+          } else {
+            // go to the next month
+            ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
+          }
+        }
+      }
+      break
+    case 'ArrowUp':
+      if (!localState)
+        (document.querySelector('.nc-picker-datetime.active .ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
+      break
+    case 'ArrowDown':
+      if (!localState)
+        (document.querySelector('.nc-picker-datetime.active .ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
+      break
     case ';':
       localState = dayjs(new Date())
       break
@@ -104,4 +172,4 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 :deep(.ant-picker-input > input[disabled]) {
   @apply !text-current;
 }
-</style>
+</style>