From 30424e98920e1481ef5f0feb927a26cce5fe5d97 Mon Sep 17 00:00:00 2001
From: Dmitry Balashov <a.marcius26@gmail.com>
Date: Mon, 13 Mar 2023 14:11:25 +0700
Subject: [PATCH] [fix]: refactor heights watcher, close #517

---
 .changeset/wise-trees-applaud.md              |  5 +++
 .../src/components/Table/use-table-heights.ts | 35 +++++++++----------
 2 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/wise-trees-applaud.md

diff --git a/.changeset/wise-trees-applaud.md b/.changeset/wise-trees-applaud.md
new file mode 100644
index 00000000..97d680d7
--- /dev/null
+++ 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
index 8b53a2a4..13ada984 100644
--- 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 },
   )