@legendapp/list 1.0.0-beta.25 → 1.0.0-beta.27

package/index.mjs

@@ -550,6 +550,7 @@ var ScrollAdjustHandler = class {
     this.appliedAdjust = 0;
     this.busy = false;
     this.isPaused = false;
+    this.isDisabled = false;
     this.context = ctx;
   }
   doAjdust() {
@@ -557,6 +558,9 @@ var ScrollAdjustHandler = class {
     this.busy = false;
   }
   requestAdjust(adjust, onAdjusted) {
+    if (this.isDisabled) {
+      return;
+    }
     const oldAdjustTop = peek$(this.context, "scrollAdjust");
     if (oldAdjustTop === adjust) {
       return;
@@ -574,6 +578,9 @@ var ScrollAdjustHandler = class {
   pauseAdjust() {
     this.isPaused = true;
   }
+  setDisableAdjust(disable) {
+    this.isDisabled = disable;
+  }
   // return true if it was paused
   unPauseAdjust() {
     if (this.isPaused) {
@@ -848,18 +855,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return 0;
   };
   const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateOffsetForIndex, []);
-  if (Platform.OS === "web") {
-    useEffect(() => {
-      var _a2;
-      if (initialContentOffset) {
-        (_a2 = refScroller.current) == null ? void 0 : _a2.scrollTo({
-          x: horizontal ? initialContentOffset : 0,
-          y: horizontal ? 0 : initialContentOffset,
-          animated: false
-        });
-      }
-    }, []);
-  }
   if (!refState.current) {
     const initialScrollLength = Dimensions.get("window")[horizontal ? "width" : "height"];
     refState.current = {
@@ -903,7 +898,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       minIndexSizeChanged: 0,
       numPendingInitialLayout: 0,
       queuedCalculateItemsInView: 0,
-      lastBatchingAction: Date.now()
+      lastBatchingAction: Date.now(),
+      onScroll: onScrollProp
     };
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
@@ -926,6 +922,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }
   const didDataChange = refState.current.data !== dataProp;
   refState.current.data = dataProp;
+  refState.current.onScroll = onScrollProp;
   const getAnchorElementIndex = () => {
     const state = refState.current;
     if (state.anchorElement) {
@@ -975,7 +972,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, []);
   const getRowHeight = (n) => {
     const { rowHeights, data } = refState.current;
-    if (numColumnsProp === 1) {
+    const numColumns = peek$(ctx, "numColumns");
+    if (numColumns === 1) {
       const id = getId(n);
       return getItemSize(id, n, data[n]);
     }
@@ -983,8 +981,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return rowHeights.get(n) || 0;
     }
     let rowHeight = 0;
-    const startEl = n * numColumnsProp;
-    for (let i = startEl; i < startEl + numColumnsProp && i < data.length; i++) {
+    const startEl = n * numColumns;
+    for (let i = startEl; i < startEl + numColumns && i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       rowHeight = Math.max(rowHeight, size);
@@ -1003,10 +1001,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return /* @__PURE__ */ new Map();
     }
     const map = state.belowAnchorElementPositions || /* @__PURE__ */ new Map();
+    const numColumns = peek$(ctx, "numColumns");
     for (let i = anchorIndex - 1; i >= 0; i--) {
       const id = getId(i);
-      const rowNumber = Math.floor(i / numColumnsProp);
-      if (i % numColumnsProp === 0) {
+      const rowNumber = Math.floor(i / numColumns);
+      if (i % numColumns === 0) {
         top -= getRowHeight(rowNumber);
       }
       map.set(id, top);
@@ -1043,6 +1042,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return;
     }
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+    const numColumns = peek$(ctx, "numColumns");
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     const scroll = scrollState - previousScrollAdjust - topPad;
@@ -1098,7 +1098,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       }
     }
-    const numColumns = peek$(ctx, "numColumns");
     const loopStartMod = loopStart % numColumns;
     if (loopStartMod > 0) {
       loopStart -= loopStartMod;
@@ -1255,7 +1254,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             };
             const column2 = columns.get(id) || 1;
             if (maintainVisibleContentPosition && itemIndex < anchorElementIndex) {
-              const currentRow = Math.floor(itemIndex / numColumnsProp);
+              const currentRow = Math.floor(itemIndex / numColumns);
               const rowHeight = getRowHeight(currentRow);
               const elementHeight = getItemSize(id, itemIndex, data[i]);
               const diff = rowHeight - elementHeight;
@@ -1413,13 +1412,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   };
   const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
-    var _a2, _b2, _c2;
+    var _a2, _b2, _c2, _d2;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
     const newPositions = /* @__PURE__ */ new Map();
     let column = 1;
     let maxSizeInRow = 0;
+    const numColumns = (_a2 = peek$(ctx, "numColumns")) != null ? _a2 : numColumnsProp;
     if (!refState.current) {
       return;
     }
@@ -1448,8 +1448,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
               id: getId(0)
             };
             refState.current.anchorElement = newAnchorElement;
-            (_a2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
-            (_b2 = refScroller.current) == null ? void 0 : _b2.scrollTo({ x: 0, y: 0, animated: false });
+            (_b2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _b2.clear();
+            (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
             setTimeout(() => {
               calculateItemsInView();
             }, 0);
@@ -1464,7 +1464,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           } else {
             refState.current.startBufferedId = void 0;
           }
-          (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
+          (_d2 = refScroller.current) == null ? void 0 : _d2.scrollTo({ x: 0, y: 0, animated: false });
           setTimeout(() => {
             calculateItemsInView();
           }, 0);
@@ -1477,7 +1477,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       const size = getItemSize(key, i, dataProp[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
       column++;
-      if (column > numColumnsProp) {
+      if (column > numColumns) {
         if (maintainVisibleContentPosition && anchorElementIndex !== void 0 && i < anchorElementIndex) {
           totalSizeBelowIndex += maxSizeInRow;
         }
@@ -1497,6 +1497,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   };
   const isFirst = !refState.current.renderItem;
+  const memoizedLastItemKeys = useMemo(() => {
+    if (!dataProp.length) return /* @__PURE__ */ new Set();
+    return new Set(
+      Array.from({ length: Math.min(numColumnsProp, dataProp.length) }, (_, i) => getId(dataProp.length - 1 - i))
+    );
+  }, [dataProp.length, numColumnsProp, dataProp.slice(-numColumnsProp).toString()]);
+  const initalizeStateVars = () => {
+    set$(ctx, "lastItemKeys", memoizedLastItemKeys);
+    set$(ctx, "numColumns", numColumnsProp);
+    set$(ctx, "stylePaddingTop", stylePaddingTop);
+  };
+  if (isFirst) {
+    initalizeStateVars();
+  }
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
@@ -1506,30 +1520,19 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
   useEffect(() => {
-    checkResetContainers(
-      /*isFirst*/
-      isFirst
-    );
+    const didAllocateContainers = doInitialAllocateContainers();
+    if (!didAllocateContainers) {
+      checkResetContainers(
+        /*isFirst*/
+        isFirst
+      );
+    }
   }, [isFirst, dataProp, numColumnsProp]);
   useEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   refState.current.renderItem = renderItem;
-  const memoizedLastItemKeys = useMemo(() => {
-    if (!dataProp.length) return [];
-    return new Set(
-      Array.from({ length: Math.min(numColumnsProp, dataProp.length) }, (_, i) => getId(dataProp.length - 1 - i))
-    );
-  }, [dataProp.length, numColumnsProp, dataProp.slice(-numColumnsProp).toString()]);
   const stylePaddingTop = (_d = (_c = (_a = StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
-  const initalizeStateVars = () => {
-    set$(ctx, "lastItemKeys", memoizedLastItemKeys);
-    set$(ctx, "numColumns", numColumnsProp);
-    set$(ctx, "stylePaddingTop", stylePaddingTop);
-  };
-  if (isFirst) {
-    initalizeStateVars();
-  }
   useEffect(initalizeStateVars, [memoizedLastItemKeys, numColumnsProp, stylePaddingTop]);
   const getRenderedItem = useCallback((key) => {
     var _a2, _b2;
@@ -1557,6 +1560,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const renderedItem = (_b2 = (_a2 = refState.current).renderItem) == null ? void 0 : _b2.call(_a2, {
       item: data[index],
       index,
+      extraData: peek$(ctx, "extraData"),
       useViewability: useViewability2,
       useViewabilityAmount: useViewabilityAmount2,
       useRecyclingEffect: useRecyclingEffect2,
@@ -1567,9 +1571,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const doInitialAllocateContainers = () => {
     var _a2;
     const state = refState.current;
-    const scrollLength = state.scrollLength;
-    if (scrollLength > 0 && !peek$(ctx, "numContainers")) {
-      const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, dataProp[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
+    const { scrollLength, data } = state;
+    if (scrollLength > 0 && data.length > 0 && !peek$(ctx, "numContainers")) {
+      const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
       const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
       for (let i = 0; i < numContainers; i++) {
         set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
@@ -1584,6 +1588,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       } else {
         calculateItemsInView();
       }
+      return true;
     }
   };
   useInit(() => {
@@ -1604,14 +1609,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const prevSize = getItemSize(itemKey, index, data);
     let needsCalculate = false;
+    let needsUpdateContainersDidLayout = false;
     if (state.numPendingInitialLayout > 0) {
       state.numPendingInitialLayout--;
       if (state.numPendingInitialLayout === 0) {
         needsCalculate = true;
         state.numPendingInitialLayout = -1;
-        queueMicrotask(() => {
-          set$(ctx, "containersDidLayout", true);
-        });
+        needsUpdateContainersDidLayout = true;
       }
     }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
@@ -1663,13 +1667,27 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (needsCalculate) {
       const scrollVelocity = state.scrollVelocity;
       if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
+        const setDidLayout = () => {
+          set$(ctx, "containersDidLayout", true);
+          if (Platform.OS === "web") {
+            setTimeout(() => {
+              state.scrollAdjustHandler.setDisableAdjust(false);
+            }, 32);
+          }
+        };
         if (Date.now() - state.lastBatchingAction < 500) {
           state.queuedCalculateItemsInView = requestAnimationFrame(() => {
             state.queuedCalculateItemsInView = void 0;
             calculateItemsInView();
+            if (needsUpdateContainersDidLayout) {
+              setDidLayout();
+            }
           });
         } else {
           calculateItemsInView();
+          if (needsUpdateContainersDidLayout) {
+            queueMicrotask(setDidLayout);
+          }
         }
       }
     }
@@ -1680,6 +1698,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const didChange = scrollLength !== state.scrollLength;
     state.scrollLength = scrollLength;
     state.lastBatchingAction = Date.now();
+    state.scrollForNextCalculateItemsInView = void 0;
     doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
     doUpdatePaddingTop();
@@ -1703,18 +1722,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, []);
   const handleScroll = useCallback(
     (event, fromSelf) => {
-      var _a2, _b2, _c2;
+      var _a2, _b2, _c2, _d2;
       if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c2 = event.nativeEvent.contentSize) == null ? void 0 : _c2.width) === 0) {
         return;
       }
       const state = refState.current;
-      if (state.ignoreScrollFromCalcTotal) {
+      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+      if (state.ignoreScrollFromCalcTotal && newScroll !== 0) {
         return;
       }
       state.hasScrolled = true;
       state.lastBatchingAction = Date.now();
       const currentTime = performance.now();
-      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
         state.scrollHistory.push({ scroll: newScroll, time: currentTime });
       }
@@ -1744,7 +1763,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       checkAtBottom();
       checkAtTop();
       if (!fromSelf) {
-        onScrollProp == null ? void 0 : onScrollProp(event);
+        (_d2 = state.onScroll) == null ? void 0 : _d2.call(state, event);
       }
     },
     []
@@ -1764,39 +1783,39 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         let firstIndexScrollPostion = firstIndexOffset - viewOffset;
         const diff = Math.abs(state.scroll - firstIndexScrollPostion);
         const needsReanchoring = maintainVisibleContentPosition && diff > 100;
+        state.scrollForNextCalculateItemsInView = void 0;
         if (needsReanchoring) {
           const id = getId(index);
           state.anchorElement = { id, coordinate: firstIndexOffset };
           (_a2 = state.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
           state.positions.clear();
           calcTotalSizesAndPositions({ forgetPositions: true });
-          state.scrollForNextCalculateItemsInView = void 0;
           state.startBufferedId = id;
           state.minIndexSizeChanged = index;
           firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
         }
-        state.scrollAdjustHandler.pauseAdjust();
+        state.scrollAdjustHandler.setDisableAdjust(true);
         setTimeout(
           () => {
-            const wasAdjusted = state.scrollAdjustHandler.unPauseAdjust();
-            if (wasAdjusted) {
-              refState.current.scrollVelocity = 0;
-              refState.current.scrollHistory = [];
-              calculateItemsInView();
-            }
+            state.scrollAdjustHandler.setDisableAdjust(false);
+            calculateItemsInView();
           },
-          animated ? 1e3 : 50
+          animated ? 150 : 50
         );
         if (viewPosition) {
           firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
         }
         const offset = horizontal ? { x: firstIndexScrollPostion, y: 0 } : { x: 0, y: firstIndexScrollPostion };
-        if (maintainVisibleContentPosition) {
-          setTimeout(() => {
+        refScroller.current.scrollTo({ ...offset, animated });
+        const totalSizeWithScrollAdjust = peek$(ctx, "totalSizeWithScrollAdjust");
+        if (maintainVisibleContentPosition && totalSizeWithScrollAdjust - firstIndexScrollPostion < state.scrollLength) {
+          const doScrollTo = () => {
             refScroller.current.scrollTo({ ...offset, animated });
-          }, 50);
-        } else {
-          refScroller.current.scrollTo({ ...offset, animated });
+          };
+          setTimeout(doScrollTo, animated ? 150 : 50);
+          if (animated) {
+            setTimeout(doScrollTo, 350);
+          }
         }
       };
       return {
@@ -1821,6 +1840,42 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     },
     []
   );
+  if (Platform.OS === "web") {
+    useEffect(() => {
+      var _a2, _b2;
+      if (initialContentOffset) {
+        (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(true);
+        (_b2 = refScroller.current) == null ? void 0 : _b2.scrollTo({
+          x: horizontal ? initialContentOffset : 0,
+          y: horizontal ? 0 : initialContentOffset,
+          animated: false
+        });
+        setTimeout(() => {
+          var _a3;
+          (_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler.setDisableAdjust(false);
+        }, 0);
+      }
+    }, []);
+  }
+  if (isFirst) {
+    refState.current.scrollAdjustHandler.setDisableAdjust(true);
+  }
+  useEffect(() => {
+    refState.current.scrollAdjustHandler.setDisableAdjust(false);
+    if (initialContentOffset) {
+      const doScrollTo = () => {
+        var _a2;
+        (_a2 = refScroller.current) == null ? void 0 : _a2.scrollTo({
+          x: horizontal ? initialContentOffset : 0,
+          y: horizontal ? 0 : initialContentOffset,
+          animated: false
+        });
+        calculateItemsInView();
+      };
+      setTimeout(doScrollTo, 32);
+      setTimeout(doScrollTo, 300);
+    }
+  }, []);
   return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
     ListComponent,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.27",
   "description": "Legend List aims to be a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,