@legendapp/list 1.0.0-beta.26 → 1.0.0-beta.28

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 = {
@@ -1502,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) {
@@ -1511,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;
@@ -1562,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,
@@ -1572,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);
@@ -1589,6 +1588,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       } else {
         calculateItemsInView();
       }
+      return true;
     }
   };
   useInit(() => {
@@ -1667,20 +1667,26 @@ 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) {
-              set$(ctx, "containersDidLayout", true);
+              setDidLayout();
             }
           });
         } else {
           calculateItemsInView();
           if (needsUpdateContainersDidLayout) {
-            queueMicrotask(() => {
-              set$(ctx, "containersDidLayout", true);
-            });
+            queueMicrotask(setDidLayout);
           }
         }
       }
@@ -1692,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();
@@ -1776,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 {
@@ -1833,6 +1840,48 @@ 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(() => {
+    setTimeout(
+      () => {
+        var _a2;
+        return (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(false);
+      },
+      initialContentOffset ? 1e3 : 0
+    );
+    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.26",
+  "version": "1.0.0-beta.28",
   "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,