Browse Source

feat(gui): ignore unselecting if clicking inside any picker(date,time and year) element

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4222/head
Pranav C 2 years ago
parent
commit
8775c454de
  1. 6
      packages/nc-gui/components/cell/DatePicker.vue
  2. 8
      packages/nc-gui/components/cell/TimePicker.vue
  3. 10
      packages/nc-gui/components/cell/YearPicker.vue

6
packages/nc-gui/components/cell/DatePicker.vue

@ -15,6 +15,8 @@ const columnMeta = inject(ColumnInj, null)!
const readOnly = inject(ReadonlyInj, ref(false))
const active = inject(ActiveCellInj, ref(false))
let isDateInvalid = $ref(false)
const dateFormat = $computed(() => columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD')
@ -58,7 +60,7 @@ watch(
const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
e.stopPropagation()
@ -82,7 +84,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
:open="readOnly || (localState && isPk) ? false : open"
:open="(readOnly || (localState && isPk)) && !active ? false : open"
@click="open = !open"
>
<template #suffixIcon></template>

8
packages/nc-gui/components/cell/TimePicker.vue

@ -15,6 +15,8 @@ const { isMysql } = useProject()
const readOnly = inject(ReadonlyInj, ref(false))
const active = inject(ActiveCellInj, ref(false))
let isTimeInvalid = $ref(false)
const dateFormat = isMysql.value ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
@ -66,7 +68,7 @@ watch(
{ flush: 'post' },
)
useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
e.stopPropagation()
@ -92,9 +94,9 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
:placeholder="isTimeInvalid ? 'Invalid time' : ''"
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:open="readOnly || (localState && isPk) ? false : open"
:open="(readOnly || (localState && isPk)) && !active ? false : open"
:popup-class-name="`${randomClass} nc-picker-time ${open ? 'active' : ''}`"
@click="open = !open"
@click="open = active && !open"
@ok="open = !open"
>
<template #suffixIcon></template>

10
packages/nc-gui/components/cell/YearPicker.vue

@ -13,6 +13,8 @@ const emit = defineEmits(['update:modelValue'])
const readOnly = inject(ReadonlyInj, ref(false))
const active = inject(ActiveCellInj, ref(false))
let isYearInvalid = $ref(false)
const localState = $computed({
@ -56,7 +58,7 @@ watch(
const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
e.stopPropagation()
@ -79,10 +81,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
:placeholder="placeholder"
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:open="readOnly || (localState && isPk) ? false : open"
:open="(readOnly || (localState && isPk)) && !active ? false : open"
:dropdown-class-name="`${randomClass} nc-picker-year ${open ? 'active' : ''}`"
@click="open = !open"
@change="open = !open"
@click="open = active && !open"
@change="open = active && !open"
>
<template #suffixIcon></template>
</a-date-picker>

Loading…
Cancel
Save