@legendapp/list 2.1.0-beta.10 → 2.1.0-beta.12

package/index.native.mjs

@@ -99,11 +99,12 @@ function set$(ctx, signalName, value) {
   }
 }
 function getContentSize(ctx) {
+  var _a3, _b;
   const { values } = ctx;
   const stylePaddingTop = values.get("stylePaddingTop") || 0;
   const headerSize = values.get("headerSize") || 0;
   const footerSize = values.get("footerSize") || 0;
-  const totalSize = values.get("totalSize");
+  const totalSize = (_b = (_a3 = ctx.internalState) == null ? void 0 : _a3.pendingTotalSize) != null ? _b : values.get("totalSize");
   return headerSize + footerSize + totalSize + stylePaddingTop;
 }
 function useArr$(signalNames) {
@@ -231,21 +232,24 @@ function findContainerId(ctx, key) {
 
 // src/hooks/useValue$.ts
 function useValue$(key, params) {
-  var _a3;
   const { getValue, delay } = params || {};
   const ctx = useStateContext();
-  const animValue = useAnimatedValue((_a3 = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a3 : 0);
+  const getNewValue = () => {
+    var _a3;
+    return (_a3 = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a3 : 0;
+  };
+  const animValue = useAnimatedValue(getNewValue());
   useMemo(() => {
-    let newValue;
     let prevValue;
     let didQueueTask = false;
     listen$(ctx, key, (v) => {
-      newValue = getValue ? getValue(v) : v;
+      const newValue = getNewValue();
       if (delay !== void 0) {
         const fn = () => {
           didQueueTask = false;
-          if (newValue !== void 0) {
-            animValue.setValue(newValue);
+          const latestValue = getNewValue();
+          if (latestValue !== void 0) {
+            animValue.setValue(latestValue);
           }
         };
         const delayValue = isFunction(delay) ? delay(newValue, prevValue) : delay;
@@ -461,10 +465,16 @@ function useOnLayoutSync({
   onLayoutProp,
   onLayoutChange
 }, deps = []) {
+  const lastLayoutRef = useRef(null);
   const onLayout = useCallback(
     (event) => {
-      onLayoutChange(event.nativeEvent.layout, false);
-      onLayoutProp == null ? void 0 : onLayoutProp(event);
+      var _a3, _b;
+      const { layout } = event.nativeEvent;
+      if (layout.height !== ((_a3 = lastLayoutRef.current) == null ? void 0 : _a3.height) || layout.width !== ((_b = lastLayoutRef.current) == null ? void 0 : _b.width)) {
+        onLayoutChange(layout, false);
+        onLayoutProp == null ? void 0 : onLayoutProp(event);
+        lastLayoutRef.current = layout;
+      }
     },
     [onLayoutChange]
   );
@@ -472,7 +482,9 @@ function useOnLayoutSync({
     useLayoutEffect(() => {
       if (ref.current) {
         ref.current.measure((x, y, width, height) => {
-          onLayoutChange({ height, width, x, y }, true);
+          const layout = { height, width, x, y };
+          lastLayoutRef.current = layout;
+          onLayoutChange(layout, true);
         });
       }
     }, deps);
@@ -928,44 +940,30 @@ function updateAlignItemsPaddingTop(ctx, state) {
   }
 }
 
-// src/core/updateTotalSize.ts
-function updateTotalSize(ctx, state) {
-  const {
-    positions,
-    props: { data }
-  } = state;
-  if (data.length === 0) {
-    addTotalSize(ctx, state, null, 0);
-  } else {
-    const lastId = getId(state, data.length - 1);
-    if (lastId !== void 0) {
-      const lastPosition = positions.get(lastId);
-      if (lastPosition !== void 0) {
-        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
-        if (lastSize !== void 0) {
-          const totalSize = lastPosition + lastSize;
-          addTotalSize(ctx, state, null, totalSize);
-        }
-      }
-    }
-  }
-}
+// src/core/addTotalSize.ts
 function addTotalSize(ctx, state, key, add) {
   const { alignItemsAtEnd } = state.props;
   const prevTotalSize = state.totalSize;
+  let totalSize = state.totalSize;
   if (key === null) {
-    state.totalSize = add;
+    totalSize = add;
     if (state.timeoutSetPaddingTop) {
       clearTimeout(state.timeoutSetPaddingTop);
       state.timeoutSetPaddingTop = void 0;
     }
   } else {
-    state.totalSize += add;
+    totalSize += add;
   }
-  if (prevTotalSize !== state.totalSize) {
-    set$(ctx, "totalSize", state.totalSize);
-    if (alignItemsAtEnd) {
-      updateAlignItemsPaddingTop(ctx, state);
+  if (prevTotalSize !== totalSize) {
+    if (!IsNewArchitecture && state.initialScroll && totalSize < prevTotalSize) {
+      state.pendingTotalSize = totalSize;
+    } else {
+      state.pendingTotalSize = void 0;
+      state.totalSize = totalSize;
+      set$(ctx, "totalSize", totalSize);
+      if (alignItemsAtEnd) {
+        updateAlignItemsPaddingTop(ctx, state);
+      }
     }
   }
 }
@@ -1170,6 +1168,7 @@ function onScroll(ctx, state, event) {
   onScrollProp == null ? void 0 : onScrollProp(event);
 }
 function updateScroll(ctx, state, newScroll, forceUpdate) {
+  var _a3;
   const scrollingTo = peek$(ctx, "scrollingTo");
   state.hasScrolled = true;
   state.lastBatchingAction = Date.now();
@@ -1203,7 +1202,7 @@ function updateScroll(ctx, state, newScroll, forceUpdate) {
   }
   if (forceUpdate || state.dataChangeNeedsScrollUpdate || Math.abs(state.scroll - state.scrollPrev) > 2) {
     state.ignoreScrollFromMVCPIgnored = false;
-    calculateItemsInView(ctx, state, { doMVCP: scrollingTo !== void 0 });
+    (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
     checkAtBottom(ctx, state);
     checkAtTop(state);
     state.dataChangeNeedsScrollUpdate = false;
@@ -1216,7 +1215,11 @@ function finishScrollTo(ctx, state) {
   if (state) {
     state.scrollHistory.length = 0;
     state.initialScroll = void 0;
+    state.initialAnchor = void 0;
     set$(ctx, "scrollingTo", void 0);
+    if (state.pendingTotalSize !== void 0) {
+      addTotalSize(ctx, state, null, state.pendingTotalSize);
+    }
     if ((_a3 = state.props) == null ? void 0 : _a3.data) {
       (_b = state.triggerCalculateItemsInView) == null ? void 0 : _b.call(state, { forceFullItemPositions: true });
     }
@@ -1252,7 +1255,16 @@ function scrollTo(ctx, state, params) {
   }
   if (!animated) {
     state.scroll = offset;
-    setTimeout(() => finishScrollTo(ctx, state), 100);
+    if (Platform2.OS === "web") {
+      const unlisten = listen$(ctx, "containersDidLayout", (value) => {
+        if (value) {
+          finishScrollTo(ctx, state);
+          unlisten();
+        }
+      });
+    } else {
+      setTimeout(() => finishScrollTo(ctx, state), 100);
+    }
     if (isInitialScroll) {
       setTimeout(() => {
         state.initialScroll = void 0;
@@ -1310,6 +1322,58 @@ function requestAdjust(ctx, state, positionDiff, dataChanged) {
   }
 }
 
+// src/core/ensureInitialAnchor.ts
+var INITIAL_ANCHOR_TOLERANCE = 0.5;
+var INITIAL_ANCHOR_MAX_ATTEMPTS = 4;
+var INITIAL_ANCHOR_SETTLED_TICKS = 2;
+function ensureInitialAnchor(ctx, state) {
+  var _a3, _b, _c, _d, _e;
+  const anchor = state.initialAnchor;
+  const item = state.props.data[anchor.index];
+  const containersDidLayout = peek$(ctx, "containersDidLayout");
+  if (!containersDidLayout) {
+    return;
+  }
+  const id = getId(state, anchor.index);
+  if (state.positions.get(id) === void 0) {
+    return;
+  }
+  const size = getItemSize(ctx, state, id, anchor.index, item, true, true);
+  if (size === void 0) {
+    return;
+  }
+  const availableSpace = Math.max(0, state.scrollLength - size);
+  const desiredOffset = calculateOffsetForIndex(ctx, state, anchor.index) - ((_a3 = anchor.viewOffset) != null ? _a3 : 0) - ((_b = anchor.viewPosition) != null ? _b : 0) * availableSpace;
+  const contentSize = getContentSize(ctx);
+  const maxOffset = Math.max(0, contentSize - state.scrollLength);
+  const clampedDesiredOffset = Math.max(0, Math.min(desiredOffset, maxOffset));
+  const delta = clampedDesiredOffset - state.scroll;
+  if (Math.abs(delta) <= INITIAL_ANCHOR_TOLERANCE) {
+    const settledTicks = ((_c = anchor.settledTicks) != null ? _c : 0) + 1;
+    if (settledTicks >= INITIAL_ANCHOR_SETTLED_TICKS) {
+      state.initialAnchor = void 0;
+    } else {
+      anchor.settledTicks = settledTicks;
+    }
+    return;
+  }
+  if (((_d = anchor.attempts) != null ? _d : 0) >= INITIAL_ANCHOR_MAX_ATTEMPTS) {
+    state.initialAnchor = void 0;
+    return;
+  }
+  const lastDelta = anchor.lastDelta;
+  if (lastDelta !== void 0 && Math.abs(delta) >= Math.abs(lastDelta)) {
+    state.initialAnchor = void 0;
+    return;
+  }
+  Object.assign(anchor, {
+    attempts: ((_e = anchor.attempts) != null ? _e : 0) + 1,
+    lastDelta: delta,
+    settledTicks: 0
+  });
+  requestAdjust(ctx, state, delta);
+}
+
 // src/core/mvcp.ts
 function prepareMVCP(ctx, state, dataChanged) {
   const {
@@ -1325,6 +1389,9 @@ function prepareMVCP(ctx, state, dataChanged) {
   if (maintainVisibleContentPosition) {
     const indexByKey = state.indexByKey;
     if (scrollTarget !== void 0) {
+      if (!IsNewArchitecture && (scrollingTo == null ? void 0 : scrollingTo.isInitialScroll)) {
+        return void 0;
+      }
       targetId = getId(state, scrollTarget);
     } else if (idsInView.length > 0 && peek$(ctx, "containersDidLayout")) {
       if (dataChanged) {
@@ -1358,7 +1425,7 @@ function prepareMVCP(ctx, state, dataChanged) {
     if (targetId !== void 0 && prevPosition !== void 0) {
       const newPosition = positions.get(targetId);
       if (newPosition !== void 0) {
-        const totalSize = peek$(ctx, "totalSize");
+        const totalSize = getContentSize(ctx);
         let diff = newPosition - prevPosition;
         if (diff !== 0 && state.scroll + state.scrollLength > totalSize) {
           if (diff > 0) {
@@ -1438,6 +1505,29 @@ function calculateRowMaxSize(ctx, state, startIndex, endIndex, useAverageSize) {
   return maxSize;
 }
 
+// src/core/updateTotalSize.ts
+function updateTotalSize(ctx, state) {
+  const {
+    positions,
+    props: { data }
+  } = state;
+  if (data.length === 0) {
+    addTotalSize(ctx, state, null, 0);
+  } else {
+    const lastId = getId(state, data.length - 1);
+    if (lastId !== void 0) {
+      const lastPosition = positions.get(lastId);
+      if (lastPosition !== void 0) {
+        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
+        if (lastSize !== void 0) {
+          const totalSize = lastPosition + lastSize;
+          addTotalSize(ctx, state, null, totalSize);
+        }
+      }
+    }
+  }
+}
+
 // src/utils/getScrollVelocity.ts
 var getScrollVelocity = (state) => {
   const { scrollHistory } = state;
@@ -2058,9 +2148,12 @@ function calculateItemsInView(ctx, state, params = {}) {
     const stickyIndicesSet = state.props.stickyIndicesSet || /* @__PURE__ */ new Set();
     const prevNumContainers = peek$(ctx, "numContainers");
     if (!data || scrollLength === 0 || !prevNumContainers) {
+      if (state.initialAnchor) {
+        ensureInitialAnchor(ctx, state);
+      }
       return;
     }
-    const totalSize = peek$(ctx, "totalSize");
+    const totalSize = getContentSize(ctx);
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
     const { dataChanged, doMVCP, forceFullItemPositions } = params;
@@ -2107,6 +2200,9 @@ function calculateItemsInView(ctx, state, params = {}) {
     if (!dataChanged && scrollForNextCalculateItemsInView) {
       const { top, bottom } = scrollForNextCalculateItemsInView;
       if (scrollTopBuffered > top && scrollBottomBuffered < bottom) {
+        if (state.initialAnchor) {
+          ensureInitialAnchor(ctx, state);
+        }
         return;
       }
     }
@@ -2359,6 +2455,9 @@ function calculateItemsInView(ctx, state, params = {}) {
       }
     }
   });
+  if (state.initialAnchor) {
+    ensureInitialAnchor(ctx, state);
+  }
 }
 
 // src/core/checkActualChange.ts
@@ -2994,7 +3093,7 @@ var LegendList = typedMemo(
   })
 );
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a3;
+  var _a3, _b;
   const {
     alignItemsAtEnd = false,
     columnWrapperStyle,
@@ -3085,6 +3184,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         idCache: [],
         idsInView: [],
         indexByKey: /* @__PURE__ */ new Map(),
+        initialAnchor: (initialScrollProp == null ? void 0 : initialScrollProp.index) !== void 0 && (initialScrollProp == null ? void 0 : initialScrollProp.viewPosition) !== void 0 ? {
+          attempts: 0,
+          index: initialScrollProp.index,
+          settledTicks: 0,
+          viewOffset: (_a3 = initialScrollProp.viewOffset) != null ? _a3 : 0,
+          viewPosition: initialScrollProp.viewPosition
+        } : void 0,
         initialScroll: initialScrollProp,
         isAtEnd: false,
         isAtStart: false,
@@ -3206,10 +3312,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     );
   }
   const initialContentOffset = useMemo(() => {
+    var _a4, _b2;
     const { initialScroll } = refState.current;
     if (!initialScroll) {
+      refState.current.initialAnchor = void 0;
       return 0;
     }
+    if (initialScroll.index !== void 0 && (!refState.current.initialAnchor || ((_a4 = refState.current.initialAnchor) == null ? void 0 : _a4.index) !== initialScroll.index)) {
+      refState.current.initialAnchor = {
+        attempts: 0,
+        index: initialScroll.index,
+        settledTicks: 0,
+        viewOffset: (_b2 = initialScroll.viewOffset) != null ? _b2 : 0,
+        viewPosition: initialScroll.viewPosition
+      };
+    }
     if (initialScroll.contentOffset !== void 0) {
       return initialScroll.contentOffset;
     }
@@ -3261,6 +3378,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollTo(ctx, state, {
         animated: false,
         index: (_a4 = state.initialScroll) == null ? void 0 : _a4.index,
+        isInitialScroll: true,
         offset: initialContentOffset,
         precomputedWithViewOffset: true
       });
@@ -3375,7 +3493,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       ),
       refScrollView: combinedRef,
-      scrollAdjustHandler: (_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler,
+      scrollAdjustHandler: (_b = refState.current) == null ? void 0 : _b.scrollAdjustHandler,
       scrollEventThrottle: Platform2.OS === "web" ? 16 : void 0,
       snapToIndices,
       stickyIndices,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "2.1.0-beta.10",
+  "version": "2.1.0-beta.12",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,