@legendapp/list 2.0.12 → 2.0.14

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 2.0.14
+- Feat: Add dataVersion prop to trigger re-render when mutating the data array in place
+
+## 2.0.13
+- Feat: Allow returning undefined in getFixedItemSize to fall back to estimated size
+- Fix: scrollToIndex viewOffset was being subtracted twice, causing incorrect scroll positioning
+- Fix: Initial container allocation was not applying maintainVisibleContentPosition calculations
+- Fix: updateItemSize was providing full data array to getEstimatedItemSize and getFixedItemSize instead of individual item
+
 ## 2.0.12
 - Fix: Scroll velocity calculation was sometimes incorrect when item sizes were very different from estimate
 - Fix: onScroll while scrolling was updating positions without maintainVisibleContentPosition calculations, which was breaking scroll position maintenance

package/index.d.mts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { ComponentProps, ReactNode, Dispatch, SetStateAction } from 'react';
+import { ComponentProps, Key, ReactNode, Dispatch, SetStateAction } from 'react';
 import { View, Animated, ScrollView, LayoutRectangle, ScrollViewComponent, ScrollResponderMixin, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps } from 'react-native';
 import Animated$1 from 'react-native-reanimated';
 
@@ -99,6 +99,11 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Extra data to trigger re-rendering when changed.
      */
     extraData?: any;
+    /**
+     * Version token that forces the list to treat data as updated even when the array reference is stable.
+     * Increment or change this when mutating the data array in place.
+     */
+    dataVersion?: Key;
     /**
      * In case you have distinct item sizes, you can provide a function to get the size of an item.
      * Use instead of FlatList's getItemLayout or FlashList overrideItemLayout if you want to have accurate initialScrollOffset, you should provide this function
@@ -275,7 +280,7 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      */
     stickyIndices?: number[];
     getItemType?: (item: ItemT, index: number) => TItemType;
-    getFixedItemSize?: (index: number, item: ItemT, type: TItemType) => number;
+    getFixedItemSize?: (index: number, item: ItemT, type: TItemType) => number | undefined;
     itemsAreEqual?: (itemPrevious: ItemT, item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView> | ComponentProps<typeof Animated$1.ScrollView>, TItemType extends string | undefined = string | undefined> = BaseScrollViewProps<TScrollView> & LegendListSpecificProps<ItemT, TItemType> & (DataModeProps<ItemT, TItemType> | ChildrenModeProps);
@@ -372,6 +377,7 @@ interface InternalState {
     props: {
         alignItemsAtEnd: boolean;
         data: readonly any[];
+        dataVersion: Key | undefined;
         estimatedItemSize: number | undefined;
         getEstimatedItemSize: LegendListProps["getEstimatedItemSize"];
         getFixedItemSize: LegendListProps["getFixedItemSize"];

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { ComponentProps, ReactNode, Dispatch, SetStateAction } from 'react';
+import { ComponentProps, Key, ReactNode, Dispatch, SetStateAction } from 'react';
 import { View, Animated, ScrollView, LayoutRectangle, ScrollViewComponent, ScrollResponderMixin, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps } from 'react-native';
 import Animated$1 from 'react-native-reanimated';
 
@@ -99,6 +99,11 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Extra data to trigger re-rendering when changed.
      */
     extraData?: any;
+    /**
+     * Version token that forces the list to treat data as updated even when the array reference is stable.
+     * Increment or change this when mutating the data array in place.
+     */
+    dataVersion?: Key;
     /**
      * In case you have distinct item sizes, you can provide a function to get the size of an item.
      * Use instead of FlatList's getItemLayout or FlashList overrideItemLayout if you want to have accurate initialScrollOffset, you should provide this function
@@ -275,7 +280,7 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      */
     stickyIndices?: number[];
     getItemType?: (item: ItemT, index: number) => TItemType;
-    getFixedItemSize?: (index: number, item: ItemT, type: TItemType) => number;
+    getFixedItemSize?: (index: number, item: ItemT, type: TItemType) => number | undefined;
     itemsAreEqual?: (itemPrevious: ItemT, item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView> | ComponentProps<typeof Animated$1.ScrollView>, TItemType extends string | undefined = string | undefined> = BaseScrollViewProps<TScrollView> & LegendListSpecificProps<ItemT, TItemType> & (DataModeProps<ItemT, TItemType> | ChildrenModeProps);
@@ -372,6 +377,7 @@ interface InternalState {
     props: {
         alignItemsAtEnd: boolean;
         data: readonly any[];
+        dataVersion: Key | undefined;
         estimatedItemSize: number | undefined;
         getEstimatedItemSize: LegendListProps["getEstimatedItemSize"];
         getFixedItemSize: LegendListProps["getFixedItemSize"];

package/index.js

@@ -1050,7 +1050,7 @@ function prepareMVCP(ctx, state, dataChanged) {
       if (newPosition !== void 0) {
         const totalSize = peek$(ctx, "totalSize");
         let diff = newPosition - prevPosition;
-        if (state.scroll + state.scrollLength > totalSize) {
+        if (diff !== 0 && state.scroll + state.scrollLength > totalSize) {
           if (diff > 0) {
             diff = Math.max(0, totalSize - state.scroll - state.scrollLength);
           } else {
@@ -1696,12 +1696,11 @@ function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, vie
   if (isLast && viewPosition === void 0) {
     viewPosition = 1;
   }
-  const firstIndexScrollPostion = firstIndexOffset - viewOffset;
   state.scrollForNextCalculateItemsInView = void 0;
   scrollTo(state, {
     animated,
     index,
-    offset: firstIndexScrollPostion,
+    offset: firstIndexOffset,
     viewOffset,
     viewPosition: viewPosition != null ? viewPosition : 0
   });
@@ -2307,7 +2306,7 @@ function checkResetContainers(ctx, state, isFirst, dataProp) {
 
 // src/core/doInitialAllocateContainers.ts
 function doInitialAllocateContainers(ctx, state) {
-  var _a;
+  var _a, _b, _c;
   const {
     scrollLength,
     props: {
@@ -2323,14 +2322,13 @@ function doInitialAllocateContainers(ctx, state) {
   const hasContainers = peek$(ctx, "numContainers");
   if (scrollLength > 0 && data.length > 0 && !hasContainers) {
     let averageItemSize;
-    const fn = getFixedItemSize || getEstimatedItemSize;
-    if (fn) {
+    if (getFixedItemSize || getEstimatedItemSize) {
       let totalSize = 0;
       const num = Math.min(20, data.length);
       for (let i = 0; i < num; i++) {
         const item = data[i];
         const itemType = getItemType ? (_a = getItemType(item, i)) != null ? _a : "" : "";
-        totalSize += fn(i, item, itemType);
+        totalSize += (_c = (_b = getFixedItemSize == null ? void 0 : getFixedItemSize(i, item, itemType)) != null ? _b : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(i, item, itemType)) != null ? _c : estimatedItemSize;
       }
       averageItemSize = totalSize / num;
     } else {
@@ -2346,10 +2344,10 @@ function doInitialAllocateContainers(ctx, state) {
     if (!IsNewArchitecture || state.lastLayout) {
       if (state.props.initialScroll) {
         requestAnimationFrame(() => {
-          calculateItemsInView(ctx, state, { dataChanged: true });
+          calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
         });
       } else {
-        calculateItemsInView(ctx, state, { dataChanged: true });
+        calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
       }
     }
     return true;
@@ -2592,7 +2590,7 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   } = state;
   if (!data) return 0;
   const index = indexByKey.get(itemKey);
-  const prevSize = getItemSize(state, itemKey, index, data);
+  const prevSize = getItemSize(state, itemKey, index, data[index]);
   const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
   sizesKnown.set(itemKey, size);
   if (!getEstimatedItemSize && !getFixedItemSize && size > 0) {
@@ -2740,6 +2738,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     columnWrapperStyle,
     contentContainerStyle: contentContainerStyleProp,
     data: dataProp = [],
+    dataVersion,
     drawDistance = 250,
     enableAverages = true,
     estimatedItemSize: estimatedItemSizeProp,
@@ -2864,7 +2863,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }
   const state = refState.current;
   const isFirst = !state.props.renderItem;
-  const didDataChange = state.props.data !== dataProp;
+  const didDataChange = state.props.dataVersion !== dataVersion || state.props.data !== dataProp;
   if (didDataChange) {
     state.dataChangeNeedsScrollUpdate = true;
   }
@@ -2872,6 +2871,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   state.props = {
     alignItemsAtEnd,
     data: dataProp,
+    dataVersion,
     enableAverages,
     estimatedItemSize,
     getEstimatedItemSize,
@@ -2911,7 +2911,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);
@@ -2998,15 +2998,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         dataProp
       );
     }
-  }, [dataProp, numColumnsProp]);
+  }, [dataProp, dataVersion, numColumnsProp]);
   React2.useLayoutEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   React2.useLayoutEffect(initializeStateVars, [
+    dataVersion,
     memoizedLastItemKeys.join(","),
     numColumnsProp,
-    stylePaddingTopState,
-    stylePaddingBottomState
+    stylePaddingBottomState,
+    stylePaddingTopState
   ]);
   React2.useEffect(() => {
     const viewability = setupViewability({

package/index.mjs

@@ -1029,7 +1029,7 @@ function prepareMVCP(ctx, state, dataChanged) {
       if (newPosition !== void 0) {
         const totalSize = peek$(ctx, "totalSize");
         let diff = newPosition - prevPosition;
-        if (state.scroll + state.scrollLength > totalSize) {
+        if (diff !== 0 && state.scroll + state.scrollLength > totalSize) {
           if (diff > 0) {
             diff = Math.max(0, totalSize - state.scroll - state.scrollLength);
           } else {
@@ -1675,12 +1675,11 @@ function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, vie
   if (isLast && viewPosition === void 0) {
     viewPosition = 1;
   }
-  const firstIndexScrollPostion = firstIndexOffset - viewOffset;
   state.scrollForNextCalculateItemsInView = void 0;
   scrollTo(state, {
     animated,
     index,
-    offset: firstIndexScrollPostion,
+    offset: firstIndexOffset,
     viewOffset,
     viewPosition: viewPosition != null ? viewPosition : 0
   });
@@ -2286,7 +2285,7 @@ function checkResetContainers(ctx, state, isFirst, dataProp) {
 
 // src/core/doInitialAllocateContainers.ts
 function doInitialAllocateContainers(ctx, state) {
-  var _a;
+  var _a, _b, _c;
   const {
     scrollLength,
     props: {
@@ -2302,14 +2301,13 @@ function doInitialAllocateContainers(ctx, state) {
   const hasContainers = peek$(ctx, "numContainers");
   if (scrollLength > 0 && data.length > 0 && !hasContainers) {
     let averageItemSize;
-    const fn = getFixedItemSize || getEstimatedItemSize;
-    if (fn) {
+    if (getFixedItemSize || getEstimatedItemSize) {
       let totalSize = 0;
       const num = Math.min(20, data.length);
       for (let i = 0; i < num; i++) {
         const item = data[i];
         const itemType = getItemType ? (_a = getItemType(item, i)) != null ? _a : "" : "";
-        totalSize += fn(i, item, itemType);
+        totalSize += (_c = (_b = getFixedItemSize == null ? void 0 : getFixedItemSize(i, item, itemType)) != null ? _b : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(i, item, itemType)) != null ? _c : estimatedItemSize;
       }
       averageItemSize = totalSize / num;
     } else {
@@ -2325,10 +2323,10 @@ function doInitialAllocateContainers(ctx, state) {
     if (!IsNewArchitecture || state.lastLayout) {
       if (state.props.initialScroll) {
         requestAnimationFrame(() => {
-          calculateItemsInView(ctx, state, { dataChanged: true });
+          calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
         });
       } else {
-        calculateItemsInView(ctx, state, { dataChanged: true });
+        calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
       }
     }
     return true;
@@ -2571,7 +2569,7 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   } = state;
   if (!data) return 0;
   const index = indexByKey.get(itemKey);
-  const prevSize = getItemSize(state, itemKey, index, data);
+  const prevSize = getItemSize(state, itemKey, index, data[index]);
   const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
   sizesKnown.set(itemKey, size);
   if (!getEstimatedItemSize && !getFixedItemSize && size > 0) {
@@ -2719,6 +2717,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     columnWrapperStyle,
     contentContainerStyle: contentContainerStyleProp,
     data: dataProp = [],
+    dataVersion,
     drawDistance = 250,
     enableAverages = true,
     estimatedItemSize: estimatedItemSizeProp,
@@ -2843,7 +2842,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }
   const state = refState.current;
   const isFirst = !state.props.renderItem;
-  const didDataChange = state.props.data !== dataProp;
+  const didDataChange = state.props.dataVersion !== dataVersion || state.props.data !== dataProp;
   if (didDataChange) {
     state.dataChangeNeedsScrollUpdate = true;
   }
@@ -2851,6 +2850,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   state.props = {
     alignItemsAtEnd,
     data: dataProp,
+    dataVersion,
     enableAverages,
     estimatedItemSize,
     getEstimatedItemSize,
@@ -2890,7 +2890,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);
@@ -2977,15 +2977,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         dataProp
       );
     }
-  }, [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({

package/package.json

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