fix: RowHeighInj for sharing row height between components

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { GridType } from 'nocodb-sdk'
 import type { VNodeRef } from '@vue/runtime-core'
-import { ActiveViewInj, EditModeInj, inject, useVModel } from '#imports'
+import { EditModeInj, RowHeightInj, inject, useVModel } from '#imports'
 
 const props = defineProps<{
   modelValue?: string | number
@@ -11,30 +10,13 @@ const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
 
-const { showNull } = useGlobal()
+const rowHeight = inject(RowHeightInj)
 
-const view = inject(ActiveViewInj, ref())
+const { showNull } = useGlobal()
 
 const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' })
 
 const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
-
-const rowHeight = computed(() => {
-  if ((view.value?.view as GridType)?.row_height !== undefined) {
-    switch ((view.value?.view as GridType)?.row_height) {
-      case 0:
-        return 1
-      case 1:
-        return 2
-      case 2:
-        return 4
-      case 3:
-        return 6
-      default:
-        return 1
-    }
-  }
-})
 </script>
 
 <template>

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

@@ -17,6 +17,7 @@ import {
   ReadonlyInj,
   ReloadRowDataHookInj,
   ReloadViewDataHookInj,
+  RowHeightInj,
   SmartsheetStoreEvents,
   computed,
   createEventHook,
@@ -362,6 +363,23 @@ function scrollToCell(row?: number | null, col?: number | null) {
   }
 }
 
+const rowHeight = computed(() => {
+  if ((view.value?.view as GridType)?.row_height !== undefined) {
+    switch ((view.value?.view as GridType)?.row_height) {
+      case 0:
+        return 1
+      case 1:
+        return 2
+      case 2:
+        return 4
+      case 3:
+        return 6
+      default:
+        return 1
+    }
+  }
+})
+
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
@@ -374,6 +392,8 @@ provide(PaginationDataInj, paginationData)
 
 provide(ChangePageInj, changePage)
 
+provide(RowHeightInj, rowHeight)
+
 const disableUrlOverlay = ref(false)
 provide(CellUrlDisableOverlayInj, disableUrlOverlay)
 
@@ -672,23 +692,6 @@ const closeAddColumnDropdown = () => {
   columnOrder.value = null
   addColumnDropdown.value = false
 }
-
-const rowHeight = computed(() => {
-  if ((view.value?.view as GridType)?.row_height !== undefined) {
-    switch ((view.value?.view as GridType)?.row_height) {
-      case 0:
-        return 1
-      case 1:
-        return 2
-      case 2:
-        return 4
-      case 3:
-        return 6
-      default:
-        return 1
-    }
-  }
-})
 </script>
 
 <template>

packages/nc-gui/components/virtual-cell/QrCode.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { useQRCode } from '@vueuse/integrations/useQRCode'
-import type { GridType } from 'nocodb-sdk'
+import { RowHeightInj } from '#imports'
-import { ActiveViewInj } from '#imports'
 
 const maxNumberOfAllowedCharsForQrValue = 2000
 
-const view = inject(ActiveViewInj, ref())
-
 const cellValue = inject(CellValueInj)
 
 const qrValue = computed(() => String(cellValue?.value))
@@ -15,22 +12,7 @@ const tooManyCharsForQrCode = computed(() => qrValue?.value.length > maxNumberOf
 
 const showQrCode = computed(() => qrValue?.value?.length > 0 && !tooManyCharsForQrCode.value)
 
-const rowHeight = computed(() => {
+const rowHeight = inject(RowHeightInj)
-  if ((view.value?.view as GridType)?.row_height !== undefined) {
-    switch ((view.value?.view as GridType)?.row_height) {
-      case 0:
-        return 1
-      case 1:
-        return 2
-      case 2:
-        return 4
-      case 3:
-        return 6
-      default:
-        return 1
-    }
-  }
-})
 
 const qrCode = useQRCode(qrValue, {
   width: 150,
@@ -69,13 +51,14 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
     {{ $t('labels.qrCodeValueTooLong') }}
   </div>
   <img
-    v-if="showQrCode"
+    v-if="showQrCode && rowHeight"
     class="mx-auto"
     :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
     :src="qrCode"
     alt="QR Code"
     @click="showQrModal"
   />
+  <img v-else-if="showQrCode" class="mx-auto" :src="qrCode" alt="QR Code" @click="showQrModal" />
   <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}
   </div>

packages/nc-gui/components/virtual-cell/barcode/Barcode.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import type { ComputedRef } from 'vue'
-import type { GridType } from 'nocodb-sdk'
 import JsBarcodeWrapper from './JsBarcodeWrapper.vue'
-import { ActiveViewInj } from '#imports'
+import { RowHeightInj } from '#imports'
 
 const maxNumberOfAllowedCharsForBarcodeValue = 100
 
-const view = inject(ActiveViewInj, ref())
-
 const cellValue = inject(CellValueInj)
 
 const column = inject(ColumnInj)
@@ -35,22 +32,7 @@ const showBarcode = computed(() => barcodeValue?.value.length > 0 && !tooManyCha
 
 const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = useShowNotEditableWarning()
 
-const rowHeight = computed(() => {
+const rowHeight = inject(RowHeightInj)
-  if ((view.value?.view as GridType)?.row_height !== undefined) {
-    switch ((view.value?.view as GridType)?.row_height) {
-      case 0:
-        return 1
-      case 1:
-        return 2
-      case 2:
-        return 4
-      case 3:
-        return 6
-      default:
-        return 1
-    }
-  }
-})
 </script>
 
 <template>
@@ -65,7 +47,7 @@ const rowHeight = computed(() => {
     <JsBarcodeWrapper v-if="showBarcode" :barcode-value="barcodeValue" :barcode-format="barcodeMeta.barcodeFormat" />
   </a-modal>
   <JsBarcodeWrapper
-    v-if="showBarcode"
+    v-if="showBarcode && rowHeight"
     :barcode-value="barcodeValue"
     :barcode-format="barcodeMeta.barcodeFormat"
     :custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
@@ -77,6 +59,18 @@ const rowHeight = computed(() => {
       </div>
     </template>
   </JsBarcodeWrapper>
+  <JsBarcodeWrapper
+    v-else-if="showBarcode"
+    :barcode-value="barcodeValue"
+    :barcode-format="barcodeMeta.barcodeFormat"
+    @on-click-barcode="showBarcodeModal"
+  >
+    <template #barcodeRenderError>
+      <div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message">
+        {{ $t('msg.warning.barcode.renderError') }}
+      </div>
+    </template>
+  </JsBarcodeWrapper>
 
   <div v-if="tooManyCharsForBarcode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('labels.barcodeValueTooLong') }}

packages/nc-gui/context/index.ts

@@ -21,6 +21,7 @@ export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injecti
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<Ref<boolean>> = Symbol('readonly-injection')
+export const RowHeightInj: InjectionKey<ComputedRef<1 | 2 | 4 | 6 | undefined>> = Symbol('row-height-injection')
 /** when bool is passed, it indicates if a loading spinner should be visible while reloading */
 export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
 export const ReloadViewMetaHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-meta-injection')