@ringcentral/juno 2.40.1 → 2.41.0

package/components/Virtuoso/react-virtuoso/listStateSystem.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var u = tslib_1.__importStar(require("@virtuoso.dev/urx"));
+var u = tslib_1.__importStar(require("./urx"));
 var AATree_1 = require("./AATree");
-var comparators_1 = require("./comparators");
 var groupedListSystem_1 = require("./groupedListSystem");
 var initialTopMostItemIndexSystem_1 = require("./initialTopMostItemIndexSystem");
 var propsReadySystem_1 = require("./propsReadySystem");
@@ -11,6 +10,8 @@ var scrollToIndexSystem_1 = require("./scrollToIndexSystem");
 var sizeRangeSystem_1 = require("./sizeRangeSystem");
 var sizeSystem_1 = require("./sizeSystem");
 var stateFlagsSystem_1 = require("./stateFlagsSystem");
+var comparators_1 = require("./comparators");
+var recalcSystem_1 = require("./recalcSystem");
 function probeItemSet(index, sizes, data) {
     if (sizeSystem_1.hasGroups(sizes)) {
         var itemIndex = sizeSystem_1.originalIndexFromItemIndex(index, sizes);
@@ -31,6 +32,7 @@ var EMPTY_LIST_STATE = {
     bottom: 0,
     topListHeight: 0,
     totalCount: 0,
+    firstItemIndex: 0,
 };
 function transposeItems(items, sizes, firstItemIndex) {
     var e_1, _a;
@@ -44,7 +46,7 @@ function transposeItems(items, sizes, firstItemIndex) {
     var endIndex = items[items.length - 1].index;
     var transposedItems = [];
     var groupRanges = AATree_1.rangesWithin(sizes.groupOffsetTree, startIndex, endIndex);
-    var currentRange;
+    var currentRange = undefined;
     var currentGroupIndex = 0;
     try {
         for (var items_1 = tslib_1.__values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
@@ -78,7 +80,7 @@ function transposeItems(items, sizes, firstItemIndex) {
     }
     return transposedItems;
 }
-function buildListState(items, topItems, totalCount, sizes, firstItemIndex) {
+function buildListState(items, topItems, totalCount, gap, sizes, firstItemIndex) {
     var lastSize = sizes.lastSize, lastOffset = sizes.lastOffset, lastIndex = sizes.lastIndex;
     var offsetTop = 0;
     var bottom = 0;
@@ -87,7 +89,8 @@ function buildListState(items, topItems, totalCount, sizes, firstItemIndex) {
         var lastItem = items[items.length - 1];
         bottom = lastItem.offset + lastItem.size;
     }
-    var total = lastOffset + (totalCount - lastIndex) * lastSize;
+    var itemCount = totalCount - lastIndex;
+    var total = lastOffset + itemCount * lastSize + (itemCount - 1) * gap;
     var top = offsetTop;
     var offsetBottom = total - bottom;
     return {
@@ -99,27 +102,78 @@ function buildListState(items, topItems, totalCount, sizes, firstItemIndex) {
         top: top,
         bottom: bottom,
         totalCount: totalCount,
+        firstItemIndex: firstItemIndex,
     };
 }
 exports.buildListState = buildListState;
+function buildListStateFromItemCount(itemCount, initialTopMostItemIndex, sizes, firstItemIndex, gap, data) {
+    var e_2, _a;
+    var includedGroupsCount = 0;
+    if (sizes.groupIndices.length > 0) {
+        try {
+            for (var _b = tslib_1.__values(sizes.groupIndices), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var index = _c.value;
+                if (index - includedGroupsCount >= itemCount) {
+                    break;
+                }
+                includedGroupsCount++;
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    }
+    var adjustedCount = itemCount + includedGroupsCount;
+    var initialTopMostItemIndexNumber = initialTopMostItemIndexSystem_1.getInitialTopMostItemIndexNumber(initialTopMostItemIndex, adjustedCount);
+    var items = Array.from({ length: adjustedCount }).map(function (_, index) { return ({
+        index: index + initialTopMostItemIndexNumber,
+        size: 0,
+        offset: 0,
+        data: data[index + initialTopMostItemIndexNumber],
+    }); });
+    return buildListState(items, [], adjustedCount, gap, sizes, firstItemIndex);
+}
+exports.buildListStateFromItemCount = buildListStateFromItemCount;
 exports.listStateSystem = u.system(function (_a) {
-    var _b = tslib_1.__read(_a, 7), _c = _b[0], sizes = _c.sizes, totalCount = _c.totalCount, data = _c.data, firstItemIndex = _c.firstItemIndex, groupedListSystem = _b[1], _d = _b[2], visibleRange = _d.visibleRange, listBoundary = _d.listBoundary, rangeTopListHeight = _d.topListHeight, _e = _b[3], scrolledToInitialItem = _e.scrolledToInitialItem, initialTopMostItemIndex = _e.initialTopMostItemIndex, topListHeight = _b[4].topListHeight, stateFlags = _b[5], didMount = _b[6].didMount;
+    var _b = tslib_1.__read(_a, 8), _c = _b[0], sizes = _c.sizes, totalCount = _c.totalCount, data = _c.data, firstItemIndex = _c.firstItemIndex, gap = _c.gap, groupedListSystem = _b[1], _d = _b[2], visibleRange = _d.visibleRange, listBoundary = _d.listBoundary, rangeTopListHeight = _d.topListHeight, _e = _b[3], scrolledToInitialItem = _e.scrolledToInitialItem, initialTopMostItemIndex = _e.initialTopMostItemIndex, topListHeight = _b[4].topListHeight, stateFlags = _b[5], didMount = _b[6].didMount, recalcInProgress = _b[7].recalcInProgress;
     var topItemsIndexes = u.statefulStream([]);
+    var initialItemCount = u.statefulStream(0);
     var itemsRendered = u.stream();
     u.connect(groupedListSystem.topItemsIndexes, topItemsIndexes);
-    var listState = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(didMount, u.duc(visibleRange), u.duc(totalCount), u.duc(sizes), u.duc(initialTopMostItemIndex), scrolledToInitialItem, u.duc(topItemsIndexes), u.duc(firstItemIndex), data), u.filter(function (_a) {
-        var _b = tslib_1.__read(_a, 1), mount = _b[0];
-        return mount;
+    var listState = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(didMount, recalcInProgress, u.duc(visibleRange, comparators_1.tupleComparator), u.duc(totalCount), u.duc(sizes), u.duc(initialTopMostItemIndex), scrolledToInitialItem, u.duc(topItemsIndexes), u.duc(firstItemIndex), u.duc(gap), data), u.filter(function (_a) {
+        var _b = tslib_1.__read(_a, 11), mount = _b[0], recalcInProgress = _b[1], totalCount = _b[3], data = _b[10];
+        // When data length changes, it is synced to totalCount, both of which trigger a recalc separately.
+        // Recalc should be skipped then, as the calculation expects both data and totalCount to be in sync.
+        var dataChangeInProgress = data && data.length !== totalCount;
+        return mount && !recalcInProgress && !dataChangeInProgress;
     }), u.map(function (_a) {
-        var e_2, _b;
-        var _c = tslib_1.__read(_a, 9), _d = tslib_1.__read(_c[1], 2), startOffset = _d[0], endOffset = _d[1], totalCount = _c[2], sizes = _c[3], initialTopMostItemIndex = _c[4], scrolledToInitialItem = _c[5], topItemsIndexes = _c[6], firstItemIndex = _c[7], data = _c[8];
+        var e_3, _b;
+        var _c = tslib_1.__read(_a, 11), _d = tslib_1.__read(_c[2], 2), startOffset = _d[0], endOffset = _d[1], totalCount = _c[3], sizes = _c[4], initialTopMostItemIndex = _c[5], scrolledToInitialItem = _c[6], topItemsIndexes = _c[7], firstItemIndex = _c[8], gap = _c[9], data = _c[10];
         var sizesValue = sizes;
         var sizeTree = sizesValue.sizeTree, offsetTree = sizesValue.offsetTree;
-        if (totalCount === 0 || (startOffset === 0 && endOffset === 0)) {
-            return EMPTY_LIST_STATE;
+        var initialItemCountValue = u.getValue(initialItemCount);
+        if (totalCount === 0) {
+            return tslib_1.__assign(tslib_1.__assign({}, EMPTY_LIST_STATE), { totalCount: totalCount });
+        }
+        // no container measruements yet
+        if (startOffset === 0 && endOffset === 0) {
+            if (initialItemCountValue === 0) {
+                return tslib_1.__assign(tslib_1.__assign({}, EMPTY_LIST_STATE), { totalCount: totalCount });
+            }
+            else {
+                return buildListStateFromItemCount(initialItemCountValue, initialTopMostItemIndex, sizes, firstItemIndex, gap, data || []);
+            }
         }
         if (AATree_1.empty(sizeTree)) {
-            return buildListState(probeItemSet(initialTopMostItemIndexSystem_1.getInitialTopMostItemIndexNumber(initialTopMostItemIndex, totalCount), sizesValue, data), [], totalCount, sizesValue, firstItemIndex);
+            if (initialItemCountValue > 0) {
+                return null;
+            }
+            var state = buildListState(probeItemSet(initialTopMostItemIndexSystem_1.getInitialTopMostItemIndexNumber(initialTopMostItemIndex, totalCount), sizesValue, data), [], totalCount, gap, sizesValue, firstItemIndex);
+            return state;
         }
         var topItems = [];
         if (topItemsIndexes.length > 0) {
@@ -133,42 +187,35 @@ exports.listStateSystem = u.system(function (_a) {
                     var rangeStartIndex = Math.max(range.start, startIndex);
                     var rangeEndIndex = Math.min(range.end, endIndex);
                     for (var i = rangeStartIndex; i <= rangeEndIndex; i++) {
-                        topItems.push({
-                            index: i,
-                            size: size,
-                            offset: offset,
-                            data: data && data[i],
-                        });
+                        topItems.push({ index: i, size: size, offset: offset, data: data && data[i] });
                         offset += size;
                     }
                 }
             }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
                     if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
                 }
-                finally { if (e_2) throw e_2.error; }
+                finally { if (e_3) throw e_3.error; }
             }
         }
         // If the list hasn't scrolled to the initial item because the initial item was set,
         // render empty list.
         //
-        // This is a condition to be evaluated past the probe check, do not merge
+        // This is a condition to be evaluated after the probe check cycle, do not merge
         // with the totalCount check above
         if (!scrolledToInitialItem) {
-            return buildListState([], topItems, totalCount, sizesValue, firstItemIndex);
+            return buildListState([], topItems, totalCount, gap, sizesValue, firstItemIndex);
         }
-        var minStartIndex = topItemsIndexes.length > 0
-            ? topItemsIndexes[topItemsIndexes.length - 1] + 1
-            : 0;
+        var minStartIndex = topItemsIndexes.length > 0 ? topItemsIndexes[topItemsIndexes.length - 1] + 1 : 0;
         var offsetPointRanges = sizeSystem_1.rangesWithinOffsets(offsetTree, startOffset, endOffset, minStartIndex);
         if (offsetPointRanges.length === 0) {
             return null;
         }
         var maxIndex = totalCount - 1;
         var items = u.tap([], function (result) {
-            var e_3, _a;
+            var e_4, _a;
             try {
                 for (var offsetPointRanges_1 = tslib_1.__values(offsetPointRanges), offsetPointRanges_1_1 = offsetPointRanges_1.next(); !offsetPointRanges_1_1.done; offsetPointRanges_1_1 = offsetPointRanges_1.next()) {
                     var range = offsetPointRanges_1_1.value;
@@ -177,8 +224,9 @@ exports.listStateSystem = u.system(function (_a) {
                     var rangeStartIndex = range.start;
                     var size = point.size;
                     if (point.offset < startOffset) {
-                        rangeStartIndex += Math.floor((startOffset - point.offset) / size);
-                        offset += (rangeStartIndex - range.start) * size;
+                        rangeStartIndex += Math.floor((startOffset - point.offset + gap) / (size + gap));
+                        var itemCount = rangeStartIndex - range.start;
+                        offset += itemCount * size + itemCount * gap;
                     }
                     if (rangeStartIndex < minStartIndex) {
                         offset += (minStartIndex - rangeStartIndex) * size;
@@ -189,28 +237,25 @@ exports.listStateSystem = u.system(function (_a) {
                         if (offset >= endOffset) {
                             break;
                         }
-                        result.push({
-                            index: i,
-                            size: size,
-                            offset: offset,
-                            data: data && data[i],
-                        });
-                        offset += size;
+                        result.push({ index: i, size: size, offset: offset, data: data && data[i] });
+                        offset += size + gap;
                     }
                 }
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
                     if (offsetPointRanges_1_1 && !offsetPointRanges_1_1.done && (_a = offsetPointRanges_1.return)) _a.call(offsetPointRanges_1);
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_4) throw e_4.error; }
             }
         });
-        return buildListState(items, topItems, totalCount, sizesValue, firstItemIndex);
-    }), u.filter(function (value) { return value !== null; }), u.distinctUntilChanged()), EMPTY_LIST_STATE);
-    u.connect(u.pipe(data, u.filter(function (data) { return data !== undefined; }), u.map(function (data) { return data.length; })), totalCount);
-    u.connect(u.pipe(listState, u.map(u.prop('topListHeight'))), topListHeight);
+        return buildListState(items, topItems, totalCount, gap, sizesValue, firstItemIndex);
+    }), 
+    //@ts-expect-error filter needs to be fixed
+    u.filter(function (value) { return value !== null; }), u.distinctUntilChanged()), EMPTY_LIST_STATE);
+    u.connect(u.pipe(data, u.filter(u.isDefined), u.map(function (data) { return data === null || data === void 0 ? void 0 : data.length; })), totalCount);
+    u.connect(u.pipe(listState, u.map(function (value) { return value.topListHeight; })), topListHeight);
     u.connect(topListHeight, rangeTopListHeight);
     u.connect(u.pipe(listState, u.map(function (state) { return [state.top, state.bottom]; })), listBoundary);
     u.connect(u.pipe(listState, u.map(function (state) { return state.items; })), itemsRendered);
@@ -239,15 +284,18 @@ exports.listStateSystem = u.system(function (_a) {
         return items.length > 0;
     }), u.map(function (_a) {
         var items = _a.items;
+        var startIndex = 0;
+        var endIndex = items.length - 1;
+        while (items[startIndex].type === 'group' && startIndex < endIndex) {
+            startIndex++;
+        }
+        while (items[endIndex].type === 'group' && endIndex > startIndex) {
+            endIndex--;
+        }
         return {
-            startIndex: items[0].index,
-            endIndex: items[items.length - 1].index,
+            startIndex: items[startIndex].index,
+            endIndex: items[endIndex].index,
         };
     }), u.distinctUntilChanged(comparators_1.rangeComparator)));
-    return tslib_1.__assign({ listState: listState,
-        topItemsIndexes: topItemsIndexes,
-        endReached: endReached,
-        startReached: startReached,
-        rangeChanged: rangeChanged,
-        itemsRendered: itemsRendered }, stateFlags);
-}, u.tup(sizeSystem_1.sizeSystem, groupedListSystem_1.groupedListSystem, sizeRangeSystem_1.sizeRangeSystem, initialTopMostItemIndexSystem_1.initialTopMostItemIndexSystem, scrollToIndexSystem_1.scrollToIndexSystem, stateFlagsSystem_1.stateFlagsSystem, propsReadySystem_1.propsReadySystem), { singleton: true });
+    return tslib_1.__assign({ listState: listState, topItemsIndexes: topItemsIndexes, endReached: endReached, startReached: startReached, rangeChanged: rangeChanged, itemsRendered: itemsRendered, initialItemCount: initialItemCount }, stateFlags);
+}, u.tup(sizeSystem_1.sizeSystem, groupedListSystem_1.groupedListSystem, sizeRangeSystem_1.sizeRangeSystem, initialTopMostItemIndexSystem_1.initialTopMostItemIndexSystem, scrollToIndexSystem_1.scrollToIndexSystem, stateFlagsSystem_1.stateFlagsSystem, propsReadySystem_1.propsReadySystem, recalcSystem_1.recalcSystem), { singleton: true });