@tap-payments/os-micro-frontend-shared 0.0.283-test.2 → 0.0.283-test.3

package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, memo, useState, useCallback } from 'react';
+import { useMemo, memo, useState, useCallback, useRef, useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
 import memoize from 'memoize-one';
 import InfiniteLoader from 'react-window-infinite-loader';
@@ -51,6 +51,25 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
     const [selectedCell, setSelectedCell] = useState(null);
     const [selectedColumn, setSelectedColumn] = useState(null);
+    const containerHeightRef = useRef(0);
+    const lastKnownRowsLengthRef = useRef(0);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const hasRowsChanged = lastKnownRowsLengthRef.current !== rows.length;
+        const shouldResetCache = hasRowsChanged || areAllRowsLoaded;
+        if (shouldResetCache) {
+            if (pinnedStartVirtualListRef.current) {
+                (_b = (_a = pinnedStartVirtualListRef.current).resetAfterIndex) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
+            }
+            if (scrollableVirtualListRef.current) {
+                (_d = (_c = scrollableVirtualListRef.current).resetAfterIndex) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
+            }
+            if (pinnedEndVirtualListRef.current) {
+                (_f = (_e = pinnedEndVirtualListRef.current).resetAfterIndex) === null || _f === void 0 ? void 0 : _f.call(_e, 0);
+            }
+            lastKnownRowsLengthRef.current = rows.length;
+        }
+    }, [rows.length, areAllRowsLoaded, pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef]);
     const handleCellClick = useCallback((rowIndex, columnId, event) => {
         event.stopPropagation();
         const cellKey = `${rowIndex}-${columnId}`;
@@ -93,13 +112,17 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         };
         return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => {
                     var _a;
+                    containerHeightRef.current = height;
                     const getItemSize = (index) => {
-                        console.log({ All: areAllRowsLoaded, rows, index });
+                        console.log({ All: areAllRowsLoaded, rows, index, height, containerHeight: containerHeightRef.current });
+                        const currentHeight = height || containerHeightRef.current || 400;
                         const isLastRow = areAllRowsLoaded && index === rows.length;
-                        if (isLastRow) {
+                        if (isLastRow && currentHeight > 0) {
                             const usedHeight = rows.length * rowHeight;
-                            const remainingHeight = height - usedHeight;
-                            return Math.max(remainingHeight, rowHeight);
+                            const remainingHeight = currentHeight - usedHeight;
+                            const calculatedHeight = Math.max(remainingHeight, rowHeight);
+                            console.log({ usedHeight, remainingHeight, calculatedHeight, currentHeight });
+                            return calculatedHeight;
                         }
                         return rowHeight;
                     };
@@ -124,7 +147,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
                             overflowX: isPinned ? 'hidden' : 'auto',
                             paddingBottom: isPinned ? '25px' : '13px',
                             backgroundColor: isPinned ? 'transparent' : theme.palette.background.default,
-                        } }, { children: ListItemWrapper })));
+                        } }, { children: ListItemWrapper }), `${containerKey}-${rows.length}-${areAllRowsLoaded}-${height}`));
                 } })) })));
     }, [
         itemsCount,
@@ -152,6 +175,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         pinnedStartVirtualListRef,
         scrollableVirtualListRef,
         theme.palette.background.default,
+        containerHeightRef,
     ]);
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
     const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.283-test.2",
-  "testVersion": 2,
+  "version": "0.0.283-test.3",
+  "testVersion": 3,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",