[fix]: refactor heights watcher, close #517

soramitsu · Mar 13, 2023 · 30424e9 · 30424e9
1 parent 832227b
commit 30424e9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/.changeset/wise-trees-applaud.md b/.changeset/wise-trees-applaud.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`STable`): refactor internal table-heights watcher
diff --git a/packages/ui/src/components/Table/use-table-heights.ts b/packages/ui/src/components/Table/use-table-heights.ts
@@ -35,32 +35,29 @@ export function useTableHeights({
     }
   })
 
-  const bodyHeightStyles = ref({})
+  const bodyHeightStyles = shallowReactive<Pick<CSSStyleDeclaration, 'height' | 'maxHeight'>>({
+    height: '',
+    maxHeight: '',
+  })
 
   watch(
-    [headerHeight, tableHeight],
-    (): void => {
-      if (propHeight.value) {
-        const bodyHeight = tableHeight.value - headerHeight.value
-
-        bodyHeightStyles.value = {
-          height: bodyHeight ? bodyHeight + 'px' : '',
-        }
-
-        return
+    [headerHeight, tableHeight, propHeight, propMaxHeight],
+    ([header, table, prop, propMax]) => {
+      let heightFinal = ''
+      if (prop) {
+        const bodyHeight = table - header
+        heightFinal = bodyHeight ? bodyHeight + 'px' : ''
       }
+      bodyHeightStyles.height = heightFinal
 
-      if (propMaxHeight.value) {
-        const maxHeight = parseHeight(propMaxHeight.value)
-
+      let maxHeightFinal = ''
+      if (propMax) {
+        const maxHeight = parseHeight(propMax)
         if (typeof maxHeight === 'number') {
-          // FIXME https://github.com/soramitsu/soramitsu-js-ui-library/issues/517
-          // @ts-ignore
-          return {
-            'max-height': maxHeight - headerHeight.value + 'px',
-          }
+          maxHeightFinal = maxHeight - header + 'px'
         }
       }
+      bodyHeightStyles.maxHeight = maxHeightFinal
     },
     { immediate: true },
   )