chore: split function for easy maintain, understand and using (#2945)

Cao Duc Anh · GitHub
1 parent a065de4f
Showing 1 changed file with 58 additions and 30 deletions
src/components/Table/src/hooks/useTableScroll.ts
@@ -53,22 +53,7 @@ export function useTableScroll(
   let footerEl: HTMLElement | null;
   let bodyEl: HTMLElement | null;
-  async function calcTableHeight() {
-    const { resizeHeightOffset, pagination, maxHeight, isCanResizeParent, useSearchForm } =
-      unref(propsRef);
-    const tableData = unref(getDataSourceRef);
-
-    const table = unref(tableElRef);
-    if (!table) return;
-
-    const tableEl: Element = table.$el;
-    if (!tableEl) return;
-
-    if (!bodyEl) {
-      bodyEl = tableEl.querySelector('.ant-table-body');
-      if (!bodyEl) return;
-    }
-
+  function handleScrollBar(bodyEl: HTMLElement, tableEl: Element) {
     const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight;
     const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth;
@@ -85,20 +70,10 @@ export function useTableScroll(
     } else {
       !tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.add('hide-scrollbar-x');
     }
+  }
-    bodyEl!.style.height = 'unset';
-
-    if (!unref(getCanResize) || !unref(tableData) || tableData.length === 0) return;
-
-    await nextTick();
-    // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
-
-    const headEl = tableEl.querySelector('.ant-table-thead ');
-
-    if (!headEl) return;
-
-    // Table height from bottom height-custom offset
-    let paddingHeight = 32;
+  function caclPaginationHeight(tableEl: Element): number {
+    const { pagination } = unref(propsRef);
     // Pager height
     let paginationHeight = 2;
     if (!isBoolean(pagination)) {
@@ -113,8 +88,12 @@ export function useTableScroll(
     } else {
       paginationHeight = -8;
     }
+    return paginationHeight;
+  }
-    let footerHeight = 0;
+  function caclFooterHeight(tableEl: Element): number {
+  const { pagination } = unref(propsRef);
+   let footerHeight = 0;
     if (!isBoolean(pagination)) {
       if (!footerEl) {
         footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
@@ -123,12 +102,21 @@ export function useTableScroll(
         footerHeight += offsetHeight || 0;
       }
     }
+    return footerHeight;
+  }
+  function calcHeaderHeight(headEl: Element): number {
     let headerHeight = 0;
     if (headEl) {
       headerHeight = (headEl as HTMLElement).offsetHeight;
     }
+    return headerHeight;
+  }
+   function calcBottomAndPaddingHeight(tableEl: Element, headEl: Element) {
+    const { pagination, isCanResizeParent, useSearchForm } = unref(propsRef);
+    // Table height from bottom height-custom offset
+    let paddingHeight = 30;
     let bottomIncludeBody = 0;
     if (unref(wrapRef) && isCanResizeParent) {
       const tablePadding = 12;
@@ -157,7 +145,46 @@ export function useTableScroll(
       // Table height from bottom
       bottomIncludeBody = getViewportOffset(headEl).bottomIncludeBody;
     }
+     
+    return {
+      paddingHeight,
+      bottomIncludeBody,
+    };
+  }
+
+  async function calcTableHeight() {
+    const { resizeHeightOffset, maxHeight } = unref(propsRef);
+    const tableData = unref(getDataSourceRef);
+    const table = unref(tableElRef);
+    if (!table) return;
+
+    const tableEl: Element = table.$el;
+    if (!tableEl) return;
+
+    if (!bodyEl) {
+      bodyEl = tableEl.querySelector('.ant-table-body');
+      if (!bodyEl) return;
+    }
+
+    handleScrollBar(bodyEl, tableEl);
+    
+    bodyEl!.style.height = 'unset';
+
+    if (!unref(getCanResize) || !unref(tableData) || tableData.length === 0) return;
+
+    await nextTick();
+    // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
+
+    const headEl = tableEl.querySelector('.ant-table-thead ');
+
+    if (!headEl) return;
+    
+    const paginationHeight = caclPaginationHeight(tableEl);
+    const footerHeight = caclFooterHeight(tableEl);
+    const headerHeight = calcHeaderHeight(headEl);
+    const { paddingHeight, bottomIncludeBody } = calcBottomAndPaddingHeight(tableEl, headEl);
+    
     let height =
       bottomIncludeBody -
       (resizeHeightOffset || 0) -
@@ -215,4 +242,4 @@ export function useTableScroll(
   });
   return { getScrollRef, redoHeight };
 -}
+}
 \ No newline at end of file