@legendapp/list 2.1.0-beta.7 → 2.1.0-beta.9

package/index.native.mjs

@@ -282,7 +282,8 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   const transform = React2.useMemo(() => {
     if (animatedScrollY && stickyOffset !== void 0) {
       const stickyPosition = animatedScrollY.interpolate({
-        extrapolate: "clamp",
+        extrapolateLeft: "clamp",
+        extrapolateRight: "extend",
         inputRange: [position + headerSize, position + 5e3 + headerSize],
         outputRange: [position, position + 5e3]
       });
@@ -332,6 +333,16 @@ function getPadding(s, type) {
 function extractPadding(style, contentContainerStyle, type) {
   return getPadding(style, type) + getPadding(contentContainerStyle, type);
 }
+function findContainerId(ctx, key) {
+  const numContainers = peek$(ctx, "numContainers");
+  for (let i = 0; i < numContainers; i++) {
+    const itemKey = peek$(ctx, `containerItemKey${i}`);
+    if (itemKey === key) {
+      return i;
+    }
+  }
+  return -1;
+}
 
 // src/state/ContextContainer.ts
 var ContextContainer = createContext(null);
@@ -882,26 +893,6 @@ function calculateOffsetForIndex(ctx, state, index) {
   return position;
 }
 
-// src/core/checkActualChange.ts
-function checkActualChange(state, dataProp, previousData) {
-  if (!previousData || !dataProp || dataProp.length !== previousData.length) {
-    return true;
-  }
-  const {
-    idCache,
-    props: { keyExtractor }
-  } = state;
-  for (let i = 0; i < dataProp.length; i++) {
-    if (dataProp[i] !== previousData[i]) {
-      return true;
-    }
-    if (keyExtractor ? idCache[i] !== keyExtractor(previousData[i], i) : dataProp[i] !== previousData[i]) {
-      return true;
-    }
-  }
-  return false;
-}
-
 // src/utils/setPaddingTop.ts
 function setPaddingTop(ctx, state, { stylePaddingTop, alignItemsPaddingTop }) {
   if (stylePaddingTop !== void 0) {
@@ -991,7 +982,7 @@ function setSize(ctx, state, itemKey, size) {
 }
 
 // src/utils/getItemSize.ts
-function getItemSize(ctx, state, key, index, data, useAverageSize) {
+function getItemSize(ctx, state, key, index, data, useAverageSize, preferCachedSize) {
   var _a3, _b;
   const {
     sizesKnown,
@@ -1006,6 +997,12 @@ function getItemSize(ctx, state, key, index, data, useAverageSize) {
   let size;
   const itemType = getItemType ? (_a3 = getItemType(data, index)) != null ? _a3 : "" : "";
   const scrollingTo = peek$(ctx, "scrollingTo");
+  if (preferCachedSize) {
+    const cachedSize = sizes.get(key);
+    if (cachedSize !== void 0) {
+      return cachedSize;
+    }
+  }
   if (getFixedItemSize) {
     size = getFixedItemSize(index, data, itemType);
     if (size !== void 0) {
@@ -1215,14 +1212,13 @@ function updateScroll(ctx, state, newScroll, forceUpdate) {
 
 // src/core/finishScrollTo.ts
 function finishScrollTo(ctx, state) {
-  var _a3;
+  var _a3, _b;
   if (state) {
     state.scrollHistory.length = 0;
     state.initialScroll = void 0;
-    state.isOptimizingItemPositions = false;
     set$(ctx, "scrollingTo", void 0);
     if ((_a3 = state.props) == null ? void 0 : _a3.data) {
-      calculateItemsInView(ctx, state, { forceFullItemPositions: true });
+      (_b = state.triggerCalculateItemsInView) == null ? void 0 : _b.call(state, { forceFullItemPositions: true });
     }
   }
 }
@@ -1232,14 +1228,14 @@ var Platform2 = Platform;
 function scrollTo(ctx, state, params) {
   var _a3;
   const { noScrollingTo, ...scrollTarget } = params;
-  const { animated, isInitialScroll, offset: scrollTargetOffset } = scrollTarget;
+  const { animated, isInitialScroll, offset: scrollTargetOffset, precomputedWithViewOffset } = scrollTarget;
   const {
     refScroller,
     props: { horizontal }
   } = state;
-  let offset = calculateOffsetWithOffsetPosition(ctx, state, scrollTargetOffset, scrollTarget);
+  let offset = precomputedWithViewOffset ? scrollTargetOffset : calculateOffsetWithOffsetPosition(ctx, state, scrollTargetOffset, scrollTarget);
   if (Number.isFinite(state.scrollLength) && Number.isFinite(state.totalSize)) {
-    const maxOffset = Math.max(0, state.totalSize - state.scrollLength);
+    const maxOffset = Math.max(0, getContentSize(ctx) - state.scrollLength);
     offset = Math.min(offset, maxOffset);
   }
   state.scrollHistory.length = 0;
@@ -1501,14 +1497,14 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
   scrollBottomBuffered: -1,
   startIndex: 0
 }) {
-  var _a3, _b, _c, _d;
+  var _a3, _b, _c, _d, _e;
   const {
     columns,
     indexByKey,
     positions,
     idCache,
     sizesKnown,
-    props: { getEstimatedItemSize, snapToIndices, enableAverages }
+    props: { getEstimatedItemSize, snapToIndices, enableAverages, maintainVisibleContentPosition }
   } = state;
   const data = state.props.data;
   const dataLength = data.length;
@@ -1517,9 +1513,9 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
   const hasColumns = numColumns > 1;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
   const shouldOptimize = !forceFullUpdate && !dataChanged && Math.abs(getScrollVelocity(state)) > 0;
-  state.isOptimizingItemPositions = shouldOptimize;
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = enableAverages && !getEstimatedItemSize;
+  const preferCachedSize = maintainVisibleContentPosition && (dataChanged || state.scrollAdjustHandler.getAdjust() !== 0 || ((_a3 = peek$(ctx, "scrollAdjustPending")) != null ? _a3 : 0) !== 0);
   let currentRowTop = 0;
   let column = 1;
   let maxSizeInRow = 0;
@@ -1536,8 +1532,8 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
     } else if (startIndex < dataLength) {
       const prevIndex = startIndex - 1;
       const prevId = getId(state, prevIndex);
-      const prevPosition = (_a3 = positions.get(prevId)) != null ? _a3 : 0;
-      const prevSize = (_b = sizesKnown.get(prevId)) != null ? _b : getItemSize(ctx, state, prevId, prevIndex, data[prevIndex], useAverageSize);
+      const prevPosition = (_b = positions.get(prevId)) != null ? _b : 0;
+      const prevSize = (_c = sizesKnown.get(prevId)) != null ? _c : getItemSize(ctx, state, prevId, prevIndex, data[prevIndex], useAverageSize, preferCachedSize);
       currentRowTop = prevPosition + prevSize;
     }
   }
@@ -1553,8 +1549,8 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
       const itemsPerRow = hasColumns ? numColumns : 1;
       breakAt = i + itemsPerRow + 10;
     }
-    const id = (_c = idCache[i]) != null ? _c : getId(state, i);
-    const size = (_d = sizesKnown.get(id)) != null ? _d : getItemSize(ctx, state, id, i, data[i], useAverageSize);
+    const id = (_d = idCache[i]) != null ? _d : getId(state, i);
+    const size = (_e = sizesKnown.get(id)) != null ? _e : getItemSize(ctx, state, id, i, data[i], useAverageSize, preferCachedSize);
     if (IS_DEV && needsIndexByKey) {
       if (indexByKeyForChecking.has(id)) {
         console.error(
@@ -1772,16 +1768,6 @@ function isViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize,
   const value = ctx.mapViewabilityAmountValues.get(containerId) || computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index);
   return value.isViewable;
 }
-function findContainerId(ctx, key) {
-  const numContainers = peek$(ctx, "numContainers");
-  for (let i = 0; i < numContainers; i++) {
-    const itemKey = peek$(ctx, `containerItemKey${i}`);
-    if (itemKey === key) {
-      return i;
-    }
-  }
-  return -1;
-}
 function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
   const key = containerId + configId;
   ctx.mapViewabilityValues.set(key, viewToken);
@@ -2314,7 +2300,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     for (let i = 0; i < numContainers; i++) {
       const itemKey = peek$(ctx, `containerItemKey${i}`);
       if (pendingRemoval.includes(i)) {
-        if (itemKey) {
+        if (itemKey !== void 0) {
           containerItemKeys.delete(itemKey);
         }
         state.containerItemTypes.delete(i);
@@ -2375,6 +2361,26 @@ function calculateItemsInView(ctx, state, params = {}) {
   });
 }
 
+// src/core/checkActualChange.ts
+function checkActualChange(state, dataProp, previousData) {
+  if (!previousData || !dataProp || dataProp.length !== previousData.length) {
+    return true;
+  }
+  const {
+    idCache,
+    props: { keyExtractor }
+  } = state;
+  for (let i = 0; i < dataProp.length; i++) {
+    if (dataProp[i] !== previousData[i]) {
+      return true;
+    }
+    if (keyExtractor ? idCache[i] !== keyExtractor(previousData[i], i) : dataProp[i] !== previousData[i]) {
+      return true;
+    }
+  }
+  return false;
+}
+
 // src/core/doMaintainScrollAtEnd.ts
 function doMaintainScrollAtEnd(ctx, state, animated) {
   const {
@@ -2909,6 +2915,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     columnWrapperStyle,
     contentContainerStyle: contentContainerStyleProp,
     data: dataProp = [],
+    dataVersion,
     drawDistance = 250,
     enableAverages = true,
     estimatedItemSize: estimatedItemSizeProp,
@@ -2958,13 +2965,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     waitForInitialLayout = true,
     ...rest
   } = props;
-  const [renderNum, setRenderNum] = useState(0);
-  const initialScrollProp = initialScrollAtEnd ? { index: dataProp.length - 1, viewOffset: 0 } : initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
-  const [canRender, setCanRender] = React2.useState(!IsNewArchitecture);
   const contentContainerStyle = { ...StyleSheet.flatten(contentContainerStyleProp) };
   const style = { ...StyleSheet.flatten(styleProp) };
   const stylePaddingTopState = extractPadding(style, contentContainerStyle, "Top");
   const stylePaddingBottomState = extractPadding(style, contentContainerStyle, "Bottom");
+  const [renderNum, setRenderNum] = useState(0);
+  const initialScrollProp = initialScrollAtEnd ? { index: Math.max(0, dataProp.length - 1), viewOffset: -stylePaddingBottomState } : initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
+  const [canRender, setCanRender] = React2.useState(!IsNewArchitecture);
   const ctx = useStateContext();
   ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
   const refScroller = useRef(null);
@@ -2998,7 +3005,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         isAtStart: false,
         isEndReached: false,
         isFirst: true,
-        isOptimizingItemPositions: false,
         isStartReached: false,
         lastBatchingAction: Date.now(),
         lastLayout: void 0,
@@ -3031,6 +3037,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         totalSize: 0,
         viewabilityConfigCallbackPairs: void 0
       };
+      const internalState = ctx.internalState;
+      internalState.triggerCalculateItemsInView = (params) => calculateItemsInView(ctx, internalState, params);
       set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
       set$(ctx, "extraData", extraData);
     }
@@ -3039,7 +3047,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const state = refState.current;
   const isFirstLocal = state.isFirst;
   state.didColumnsChange = numColumnsProp !== state.props.numColumns;
-  const didDataChangeLocal = state.props.data !== dataProp && checkActualChange(state, dataProp, state.props.data);
+  const didDataChangeLocal = state.props.dataVersion !== dataVersion || state.props.data !== dataProp && checkActualChange(state, dataProp, state.props.data);
   if (didDataChangeLocal) {
     state.dataChangeNeedsScrollUpdate = true;
     state.didDataChange = true;
@@ -3049,6 +3057,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   state.props = {
     alignItemsAtEnd,
     data: dataProp,
+    dataVersion,
     enableAverages,
     estimatedItemSize,
     getEstimatedItemSize,
@@ -3087,7 +3096,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       { length: Math.min(numColumnsProp, dataProp.length) },
       (_, i) => getId(state, dataProp.length - 1 - i)
     );
-  }, [dataProp, numColumnsProp]);
+  }, [dataProp, dataVersion, numColumnsProp]);
   const initializeStateVars = () => {
     set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
@@ -3113,17 +3122,26 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }
   const initialContentOffset = useMemo(() => {
     const { initialScroll } = refState.current;
-    if (initialScroll) {
-      const { index, viewOffset } = initialScroll;
-      let initialContentOffset2 = viewOffset || 0;
-      if (index !== void 0) {
-        initialContentOffset2 += calculateOffsetForIndex(ctx, state, index);
-      }
-      refState.current.isStartReached = initialContentOffset2 < refState.current.scrollLength * onStartReachedThreshold;
-      return initialContentOffset2;
-    }
-    return 0;
-  }, [renderNum]);
+    if (!initialScroll) {
+      return 0;
+    }
+    if (initialScroll.contentOffset !== void 0) {
+      return initialScroll.contentOffset;
+    }
+    const baseOffset = initialScroll.index !== void 0 ? calculateOffsetForIndex(ctx, state, initialScroll.index) : 0;
+    const resolvedOffset = calculateOffsetWithOffsetPosition(ctx, state, baseOffset, initialScroll);
+    let clampedOffset = resolvedOffset;
+    if (Number.isFinite(state.scrollLength) && Number.isFinite(state.totalSize)) {
+      const maxOffset = Math.max(0, state.totalSize - state.scrollLength);
+      clampedOffset = Math.min(clampedOffset, maxOffset);
+    }
+    clampedOffset = Math.max(0, clampedOffset);
+    const updatedInitialScroll = { ...initialScroll, contentOffset: clampedOffset };
+    refState.current.initialScroll = updatedInitialScroll;
+    state.initialScroll = updatedInitialScroll;
+    refState.current.isStartReached = clampedOffset < refState.current.scrollLength * onStartReachedThreshold;
+    return clampedOffset;
+  }, [renderNum, state.initialScroll]);
   if (isFirstLocal || didDataChangeLocal || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirstLocal && didDataChangeLocal) {
@@ -3152,9 +3170,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   }, []);
   const doInitialScroll = useCallback(() => {
+    var _a4;
     const initialScroll = state.initialScroll;
     if (initialScroll) {
-      scrollTo(ctx, state, { animated: false, offset: initialContentOffset, ...state.initialScroll || {} });
+      scrollTo(ctx, state, {
+        animated: false,
+        index: (_a4 = state.initialScroll) == null ? void 0 : _a4.index,
+        offset: initialContentOffset,
+        precomputedWithViewOffset: true
+      });
     }
   }, [initialContentOffset, state.initialScroll]);
   const onLayoutChange = useCallback((layout) => {
@@ -3186,15 +3210,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.didColumnsChange = false;
     state.didDataChange = false;
     state.isFirst = false;
-  }, [dataProp, numColumnsProp]);
+  }, [dataProp, dataVersion, numColumnsProp]);
   useLayoutEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   useLayoutEffect(initializeStateVars, [
+    dataVersion,
     memoizedLastItemKeys.join(","),
     numColumnsProp,
-    stylePaddingTopState,
-    stylePaddingBottomState
+    stylePaddingBottomState,
+    stylePaddingTopState
   ]);
   useEffect(() => {
     const viewability = setupViewability({
@@ -3237,6 +3262,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           activeStickyIndex: state2.activeStickyIndex,
           contentLength: state2.totalSize,
           data: state2.props.data,
+          elementAtIndex: (index) => {
+            var _a4;
+            return (_a4 = ctx.viewRefs.get(findContainerId(ctx, getId(state2, index)))) == null ? void 0 : _a4.current;
+          },
           end: state2.endNoBuffer,
           endBuffered: state2.endBuffered,
           isAtEnd: state2.isAtEnd,

package/package.json

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