@economic/taco 2.64.1-table-flickering.0 → 2.64.1-test-1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/taco.cjs +40 -14
- package/dist/taco.cjs.map +1 -1
- package/dist/taco.css +4 -0
- package/dist/taco.js +40 -14
- package/dist/taco.js.map +1 -1
- package/package.json +2 -2
package/dist/taco.cjs
CHANGED
@@ -37836,6 +37836,15 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
|
|
37836
37836
|
virtualiser.measure();
|
37837
37837
|
}
|
37838
37838
|
}, [expandedState]);
|
37839
|
+
React.useEffect(() => {
|
37840
|
+
const totalSize2 = virtualiser.getTotalSize();
|
37841
|
+
console.log("before measuring totalSize", totalSize2);
|
37842
|
+
virtualiser.measure();
|
37843
|
+
setTimeout(() => {
|
37844
|
+
const totalSize3 = virtualiser.getTotalSize();
|
37845
|
+
console.log("after measuring totalSize", totalSize3);
|
37846
|
+
}, 1e3);
|
37847
|
+
}, [tableMeta.fontSize.size, tableMeta.rowHeight.height, JSON.stringify(table.getState().sorting), rows.length]);
|
37839
37848
|
const totalSize = virtualiser.getTotalSize();
|
37840
37849
|
const virtualItems = virtualiser.getVirtualItems();
|
37841
37850
|
const scrollToIndex = React.useCallback(
|
@@ -38446,6 +38455,21 @@ function Cell$2(props) {
|
|
38446
38455
|
}
|
38447
38456
|
return /* @__PURE__ */ React.createElement(CellRenderer, { ...cellProps });
|
38448
38457
|
}
|
38458
|
+
const useResizeObserver$1 = (ref, enabled = true) => {
|
38459
|
+
const [size2, setSize] = React.useState();
|
38460
|
+
React.useEffect(() => {
|
38461
|
+
if (!ref.current || !enabled) {
|
38462
|
+
return () => void 0;
|
38463
|
+
}
|
38464
|
+
const observer = new ResizeObserver((entries) => {
|
38465
|
+
const entry = entries[0];
|
38466
|
+
setSize({ height: entry.contentRect.height, width: entry.contentRect.width });
|
38467
|
+
});
|
38468
|
+
observer.observe(ref.current);
|
38469
|
+
return () => observer.disconnect();
|
38470
|
+
}, [enabled]);
|
38471
|
+
return size2;
|
38472
|
+
};
|
38449
38473
|
const DisplayRow = React.memo(function DisplayRow2(props) {
|
38450
38474
|
var _a, _b, _c;
|
38451
38475
|
const { children, cellRenderer: CellRenderer, index: index2, measureRow, row, table, ...otherAttributes } = props;
|
@@ -38540,12 +38564,14 @@ const DisplayRow = React.memo(function DisplayRow2(props) {
|
|
38540
38564
|
}
|
38541
38565
|
const ref = React.useRef(null);
|
38542
38566
|
const expansionRef = React.useRef(null);
|
38567
|
+
const rowSize = useResizeObserver$1(ref, true);
|
38568
|
+
const expandedRowSize = useResizeObserver$1(expansionRef, !!expandedRow);
|
38543
38569
|
React.useEffect(() => {
|
38544
38570
|
var _a2, _b2;
|
38545
38571
|
const rowHeight = ((_a2 = ref.current) == null ? void 0 : _a2.getBoundingClientRect().height) ?? 0;
|
38546
38572
|
const expansionHeight = ((_b2 = expansionRef.current) == null ? void 0 : _b2.getBoundingClientRect().height) ?? 0;
|
38547
38573
|
measureRow(rowHeight + expansionHeight);
|
38548
|
-
}, [
|
38574
|
+
}, [rowSize, expandedRowSize, measureRow]);
|
38549
38575
|
const className = clsx("group/row", otherAttributes.className, {
|
38550
38576
|
"hover:cursor-grab": tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== "function",
|
38551
38577
|
"hover:cursor-pointer": typeof attributes.onClick === "function"
|
@@ -88413,16 +88439,19 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
|
|
88413
88439
|
const _lastUsedSearch = React.useRef();
|
88414
88440
|
async function loadPage(pageIndex, sorting, filters, hiddenColumns, search) {
|
88415
88441
|
const hasDataChanged = JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current) || JSON.stringify(hiddenColumns) !== JSON.stringify(_lastUsedHiddenColumns.current) || search !== _lastUsedSearch.current;
|
88416
|
-
const isAlreadyLoadedOrLoading = _pendingPageRequests.current[pageIndex] || data.cache[pageIndex] && data.cache[pageIndex][0];
|
88417
|
-
if (!hasDataChanged && isAlreadyLoadedOrLoading) {
|
88418
|
-
return;
|
88419
|
-
}
|
88420
88442
|
if (hasDataChanged) {
|
88421
88443
|
_lastUsedSorting.current = sorting;
|
88422
88444
|
_lastUsedFilters.current = filters;
|
88423
88445
|
_lastUsedSearch.current = search;
|
88424
88446
|
_lastUsedHiddenColumns.current = hiddenColumns;
|
88425
88447
|
_pendingPageRequests.current = {};
|
88448
|
+
} else {
|
88449
|
+
if (_pendingPageRequests.current[pageIndex]) {
|
88450
|
+
return;
|
88451
|
+
}
|
88452
|
+
if (data.cache[pageIndex] && data.cache[pageIndex][0]) {
|
88453
|
+
return;
|
88454
|
+
}
|
88426
88455
|
}
|
88427
88456
|
const dataKey = getDataKey(sorting, filters, hiddenColumns, search);
|
88428
88457
|
_pendingPageRequests.current[pageIndex] = dataKey;
|
@@ -88468,7 +88497,6 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
|
|
88468
88497
|
delete _pendingPageRequests.current[pageIndex];
|
88469
88498
|
});
|
88470
88499
|
} catch {
|
88471
|
-
delete _pendingPageRequests.current[pageIndex];
|
88472
88500
|
}
|
88473
88501
|
}
|
88474
88502
|
const loadAll = async (sorting, filters, hiddenColumns, search) => {
|
@@ -88578,14 +88606,12 @@ function getCurrentPage(currentPages) {
|
|
88578
88606
|
return currentPages[middle];
|
88579
88607
|
}
|
88580
88608
|
function getDirection(pageIndex, currentPages) {
|
88581
|
-
if (
|
88582
|
-
|
88583
|
-
|
88584
|
-
|
88585
|
-
|
88586
|
-
|
88587
|
-
if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
|
88588
|
-
return "backward";
|
88609
|
+
if (currentPages.length) {
|
88610
|
+
if (pageIndex === currentPages[currentPages.length - 1] + 1) {
|
88611
|
+
return "forward";
|
88612
|
+
} else if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
|
88613
|
+
return "backward";
|
88614
|
+
}
|
88589
88615
|
}
|
88590
88616
|
return void 0;
|
88591
88617
|
}
|