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

Cao Duc Anh

2023-08-03 0bd98b3c27e41dcd58d12ad19796052cffd1a288

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

 src/components/Table/src/hooks/useTableScroll.ts

@@ -53,22 +53,7 @@
  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 @@
    } 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 @@
    } 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 @@
        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 @@
      // 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 @@
  });

  return { getScrollRef, redoHeight };
}
}