From 1f4465b1de641dff856f4936345c198cefd83992 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 1 Apr 2023 00:54:48 +0530
Subject: [PATCH] feat(gui): replace ClampText with css to improve performance
 of grid view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/ClampedText.vue    | 37 +++++--------------
 1 file changed, 10 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/cell/ClampedText.vue b/packages/nc-gui/components/cell/ClampedText.vue
index 515a95bed3..4a541268e2 100644
--- a/packages/nc-gui/components/cell/ClampedText.vue
+++ b/packages/nc-gui/components/cell/ClampedText.vue
@@ -3,35 +3,18 @@ const props = defineProps<{
   value?: string | number | null
   lines?: number
 }>()
-
-const wrapper = ref()
-
-const key = ref(0)
-
-const debouncedRefresh = useDebounceFn(() => {
-  key.value++
-}, 500)
-
-onMounted(() => {
-  const observer = new ResizeObserver(() => {
-    debouncedRefresh()
-  })
-
-  observer.observe(wrapper.value)
-})
 </script>
 
 <template>
-  <div ref="wrapper">
-    <!--
-      using '' for :text in text-clamp would keep the previous cell value after changing a filter
-      use ' ' instead of '' to trigger update
-    -->
-    <text-clamp
-      :key="`clamp-${key}-${props.value?.toString().length || 0}`"
-      class="w-full h-full break-word"
-      :text="`${props.value || ' '}`"
-      :max-lines="props.lines || 1"
-    />
+  <div
+    :style="{
+      'display': '-webkit-box',
+      'max-width': '100%',
+      '-webkit-line-clamp': props.lines || 1,
+      '-webkit-box-orient': 'vertical',
+      'overflow': 'hidden',
+    }"
+  >
+    {{ props.value || '' }}
   </div>
 </template>