Merge pull request #519 from soramitsu/517-table-heights-watch

[fix] #517: refactor heights watcher
soramitsu · Mar 21, 2023 · 91752b4 · 91752b4
2 parents cb972c3 + 94fd6fb
commit 91752b4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 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 => {
+    ([header, table]) => {
+      let heightFinal = ''
       if (propHeight.value) {
-        const bodyHeight = tableHeight.value - headerHeight.value
-
-        bodyHeightStyles.value = {
-          height: bodyHeight ? bodyHeight + 'px' : '',
-        }
-
-        return
+        const bodyHeight = table - header
+        heightFinal = bodyHeight ? bodyHeight + 'px' : ''
       }
+      bodyHeightStyles.height = heightFinal
 
+      let maxHeightFinal = ''
       if (propMaxHeight.value) {
         const maxHeight = parseHeight(propMaxHeight.value)
-
         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 },
   )