canrd-outside / order-erp-front · Commits

Commit 0bd98b3c27e41dcd58d12ad19796052cffd1a288

Authored by Cao Duc Anh
Committed by GitHub
1 parent a065de4f

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

Inline Side-by-side
Showing 1 changed file with 58 additions and 30 deletions
src/components/Table/src/hooks/useTableScroll.ts
  View file @0bd98b3
... ... @@ -53,22 +53,7 @@ export function useTableScroll(
53 53 let footerEl: HTMLElement | null;
54 54 let bodyEl: HTMLElement | null;
55 55  
56   - async function calcTableHeight() {
57   - const { resizeHeightOffset, pagination, maxHeight, isCanResizeParent, useSearchForm } =
58   - unref(propsRef);
59   - const tableData = unref(getDataSourceRef);
60   -
61   - const table = unref(tableElRef);
62   - if (!table) return;
63   -
64   - const tableEl: Element = table.$el;
65   - if (!tableEl) return;
66   -
67   - if (!bodyEl) {
68   - bodyEl = tableEl.querySelector('.ant-table-body');
69   - if (!bodyEl) return;
70   - }
71   -
  56 + function handleScrollBar(bodyEl: HTMLElement, tableEl: Element) {
72 57 const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight;
73 58 const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth;
74 59  
... ... @@ -85,20 +70,10 @@ export function useTableScroll(
85 70 } else {
86 71 !tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.add('hide-scrollbar-x');
87 72 }
  73 + }
88 74  
89   - bodyEl!.style.height = 'unset';
90   -
91   - if (!unref(getCanResize) || !unref(tableData) || tableData.length === 0) return;
92   -
93   - await nextTick();
94   - // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
95   -
96   - const headEl = tableEl.querySelector('.ant-table-thead ');
97   -
98   - if (!headEl) return;
99   -
100   - // Table height from bottom height-custom offset
101   - let paddingHeight = 32;
  75 + function caclPaginationHeight(tableEl: Element): number {
  76 + const { pagination } = unref(propsRef);
102 77 // Pager height
103 78 let paginationHeight = 2;
104 79 if (!isBoolean(pagination)) {
... ... @@ -113,8 +88,12 @@ export function useTableScroll(
113 88 } else {
114 89 paginationHeight = -8;
115 90 }
  91 + return paginationHeight;
  92 + }
116 93  
117   - let footerHeight = 0;
  94 + function caclFooterHeight(tableEl: Element): number {
  95 + const { pagination } = unref(propsRef);
  96 + let footerHeight = 0;
118 97 if (!isBoolean(pagination)) {
119 98 if (!footerEl) {
120 99 footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
... ... @@ -123,12 +102,21 @@ export function useTableScroll(
123 102 footerHeight += offsetHeight || 0;
124 103 }
125 104 }
  105 + return footerHeight;
  106 + }
126 107  
  108 + function calcHeaderHeight(headEl: Element): number {
127 109 let headerHeight = 0;
128 110 if (headEl) {
129 111 headerHeight = (headEl as HTMLElement).offsetHeight;
130 112 }
  113 + return headerHeight;
  114 + }
131 115  
  116 + function calcBottomAndPaddingHeight(tableEl: Element, headEl: Element) {
  117 + const { pagination, isCanResizeParent, useSearchForm } = unref(propsRef);
  118 + // Table height from bottom height-custom offset
  119 + let paddingHeight = 30;
132 120 let bottomIncludeBody = 0;
133 121 if (unref(wrapRef) && isCanResizeParent) {
134 122 const tablePadding = 12;
... ... @@ -157,7 +145,46 @@ export function useTableScroll(
157 145 // Table height from bottom
158 146 bottomIncludeBody = getViewportOffset(headEl).bottomIncludeBody;
159 147 }
  148 +
  149 + return {
  150 + paddingHeight,
  151 + bottomIncludeBody,
  152 + };
  153 + }
  154 +
  155 + async function calcTableHeight() {
  156 + const { resizeHeightOffset, maxHeight } = unref(propsRef);
  157 + const tableData = unref(getDataSourceRef);
160 158  
  159 + const table = unref(tableElRef);
  160 + if (!table) return;
  161 +
  162 + const tableEl: Element = table.$el;
  163 + if (!tableEl) return;
  164 +
  165 + if (!bodyEl) {
  166 + bodyEl = tableEl.querySelector('.ant-table-body');
  167 + if (!bodyEl) return;
  168 + }
  169 +
  170 + handleScrollBar(bodyEl, tableEl);
  171 +
  172 + bodyEl!.style.height = 'unset';
  173 +
  174 + if (!unref(getCanResize) || !unref(tableData) || tableData.length === 0) return;
  175 +
  176 + await nextTick();
  177 + // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
  178 +
  179 + const headEl = tableEl.querySelector('.ant-table-thead ');
  180 +
  181 + if (!headEl) return;
  182 +
  183 + const paginationHeight = caclPaginationHeight(tableEl);
  184 + const footerHeight = caclFooterHeight(tableEl);
  185 + const headerHeight = calcHeaderHeight(headEl);
  186 + const { paddingHeight, bottomIncludeBody } = calcBottomAndPaddingHeight(tableEl, headEl);
  187 +
161 188 let height =
162 189 bottomIncludeBody -
163 190 (resizeHeightOffset || 0) -
... ... @@ -215,4 +242,4 @@ export function useTableScroll(
215 242 });
216 243  
217 244 return { getScrollRef, redoHeight };
218 245 -}
  246 +}
219 247 \ No newline at end of file
... ...