@legendapp/list 1.0.0-beta.4 → 1.0.0-beta.6

package/index.d.mts

@@ -120,6 +120,7 @@ interface InternalState {
         bottom: number;
     } | undefined;
     enableScrollForNextCalculateItemsInView: boolean;
+    minIndexSizeChanged: number | undefined;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.d.ts

@@ -120,6 +120,7 @@ interface InternalState {
         bottom: number;
     } | undefined;
     enableScrollForNextCalculateItemsInView: boolean;
+    minIndexSizeChanged: number | undefined;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.js

@@ -229,7 +229,7 @@ var Container = ({
   if (isNewArchitecture) {
     React5.useLayoutEffect(() => {
       var _a, _b;
-      if (itemKey) {
+      if (itemKey !== void 0) {
         const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
         if (measured) {
           const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
@@ -254,12 +254,24 @@ var Container = ({
 var useAnimatedValue = reactNative.useAnimatedValue || ((initialValue) => {
   return React5.useRef(new reactNative.Animated.Value(initialValue)).current;
 });
-function useValue$(key, getValue, key2) {
+function useValue$(key, getValue, useMicrotask) {
   var _a;
   const ctx = useStateContext();
   const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
   React5.useMemo(() => {
-    listen$(ctx, key, (v) => animValue.setValue(getValue ? getValue(v) : v));
+    let newValue = void 0;
+    listen$(ctx, key, (v) => {
+      if (useMicrotask && newValue === void 0) {
+        queueMicrotask(() => {
+          animValue.setValue(newValue);
+          newValue = void 0;
+        });
+      }
+      newValue = getValue ? getValue(v) : v;
+      if (!useMicrotask) {
+        animValue.setValue(newValue);
+      }
+    });
   }, []);
   return animValue;
 }
@@ -274,7 +286,12 @@ var Containers = React5__namespace.memo(function Containers2({
   getRenderedItem
 }) {
   const numContainers = use$("numContainersPooled");
-  const animSize = useValue$("totalSize");
+  const animSize = useValue$(
+    "totalSize",
+    void 0,
+    /*useMicrotask*/
+    true
+  );
   const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
@@ -598,17 +615,22 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     renderItem,
     estimatedItemSize,
     getEstimatedItemSize,
-    onEndReached,
-    onStartReached,
     ListEmptyComponent,
     onItemSizeChanged,
     scrollEventThrottle,
     refScrollView,
     waitForInitialLayout = true,
     extraData,
+    onLayout: onLayoutProp,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
+  const callbacks = React5.useRef({
+    onStartReached: rest.onStartReached,
+    onEndReached: rest.onEndReached
+  });
+  callbacks.current.onStartReached = rest.onStartReached;
+  callbacks.current.onEndReached = rest.onEndReached;
   const ctx = useStateContext();
   const refScroller = React5.useRef(null);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
@@ -689,7 +711,8 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
       scrollForNextCalculateItemsInView: void 0,
-      enableScrollForNextCalculateItemsInView: true
+      enableScrollForNextCalculateItemsInView: true,
+      minIndexSizeChanged: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -851,8 +874,11 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    const originalStartId = startBufferedIdOrig && state.indexByKey.get(startBufferedIdOrig);
-    let loopStart = originalStartId || 0;
+    let loopStart = startBufferedIdOrig ? state.indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    if (state.minIndexSizeChanged !== void 0) {
+      loopStart = Math.min(state.minIndexSizeChanged, loopStart);
+      state.minIndexSizeChanged = void 0;
+    }
     const anchorElementIndex = getAnchorElementIndex();
     for (let i = loopStart; i >= 0; i--) {
       const id = getId(i);
@@ -1096,6 +1122,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
+      const { onEndReached } = callbacks.current;
       if (onEndReached) {
         if (!refState.current.isEndReached) {
           if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
@@ -1117,6 +1144,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
     refState.current.isAtTop = distanceFromTop < 0;
+    const { onStartReached } = callbacks.current;
     if (onStartReached) {
       if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
         if (distanceFromTop < onStartReachedThreshold * scrollLength) {
@@ -1145,12 +1173,12 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
           const itemKey = peek$(ctx, `containerItemKey${i}`);
           if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
             set$(ctx, `containerItemKey${i}`, void 0);
+            set$(ctx, `containerItemData${i}`, void 0);
             set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${i}`, -1);
           }
         }
         if (!keyExtractorProp) {
-          state.sizes.clear();
           state.positions.clear();
         }
         calculateItemsInView(state.scrollVelocity);
@@ -1166,7 +1194,6 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
     if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
-      refState.current.sizes.clear();
       refState.current.positions.clear();
     }
     refState.current.data = data;
@@ -1178,6 +1205,13 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     let maxSizeInRow = 0;
     for (let i = 0; i < data.length; i++) {
       const key = getId(i);
+      if (__DEV__) {
+        if (indexByKey.has(key)) {
+          console.error(
+            `[legend-list] Error: Detected overlapping key (${key}) which causes missing items and gaps and other terrrible things. Check that keyExtractor returns unique values.`
+          );
+        }
+      }
       indexByKey.set(key, i);
       if (refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
         newPositions.set(key, refState.current.positions.get(key));
@@ -1316,6 +1350,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     const { sizes, indexByKey, columns, sizesLaidOut } = state;
     const index = indexByKey.get(itemKey);
     const numColumns = peek$(ctx, "numColumns");
+    state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const row = Math.floor(index / numColumns);
     const prevSize = getRowHeight(row);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
@@ -1398,6 +1433,9 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         );
       }
     }
+    if (onLayoutProp) {
+      onLayoutProp(event);
+    }
   }, []);
   const handleScroll = React5.useCallback(
     (event, fromSelf) => {
@@ -1451,9 +1489,9 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       };
       return {
         getNativeScrollRef: () => refScroller.current,
-        getScrollableNode: refScroller.current.getScrollableNode,
-        getScrollResponder: refScroller.current.getScrollResponder,
-        flashScrollIndicators: refScroller.current.flashScrollIndicators,
+        getScrollableNode: () => refScroller.current.getScrollableNode(),
+        getScrollResponder: () => refScroller.current.getScrollResponder(),
+        flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
         scrollToIndex,
         scrollToOffset: ({ offset, animated }) => {
           const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
@@ -1465,7 +1503,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
             scrollToIndex({ index, animated });
           }
         },
-        scrollToEnd: refScroller.current.scrollToEnd
+        scrollToEnd: () => refScroller.current.scrollToEnd()
       };
     },
     []

package/index.mjs

@@ -208,7 +208,7 @@ var Container = ({
   if (isNewArchitecture) {
     useLayoutEffect(() => {
       var _a, _b;
-      if (itemKey) {
+      if (itemKey !== void 0) {
         const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
         if (measured) {
           const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
@@ -233,12 +233,24 @@ var Container = ({
 var useAnimatedValue = useAnimatedValue$1 || ((initialValue) => {
   return useRef(new Animated.Value(initialValue)).current;
 });
-function useValue$(key, getValue, key2) {
+function useValue$(key, getValue, useMicrotask) {
   var _a;
   const ctx = useStateContext();
   const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
   useMemo(() => {
-    listen$(ctx, key, (v) => animValue.setValue(getValue ? getValue(v) : v));
+    let newValue = void 0;
+    listen$(ctx, key, (v) => {
+      if (useMicrotask && newValue === void 0) {
+        queueMicrotask(() => {
+          animValue.setValue(newValue);
+          newValue = void 0;
+        });
+      }
+      newValue = getValue ? getValue(v) : v;
+      if (!useMicrotask) {
+        animValue.setValue(newValue);
+      }
+    });
   }, []);
   return animValue;
 }
@@ -253,7 +265,12 @@ var Containers = React5.memo(function Containers2({
   getRenderedItem
 }) {
   const numContainers = use$("numContainersPooled");
-  const animSize = useValue$("totalSize");
+  const animSize = useValue$(
+    "totalSize",
+    void 0,
+    /*useMicrotask*/
+    true
+  );
   const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
@@ -577,17 +594,22 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     renderItem,
     estimatedItemSize,
     getEstimatedItemSize,
-    onEndReached,
-    onStartReached,
     ListEmptyComponent,
     onItemSizeChanged,
     scrollEventThrottle,
     refScrollView,
     waitForInitialLayout = true,
     extraData,
+    onLayout: onLayoutProp,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
+  const callbacks = useRef({
+    onStartReached: rest.onStartReached,
+    onEndReached: rest.onEndReached
+  });
+  callbacks.current.onStartReached = rest.onStartReached;
+  callbacks.current.onEndReached = rest.onEndReached;
   const ctx = useStateContext();
   const refScroller = useRef(null);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
@@ -668,7 +690,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
       scrollForNextCalculateItemsInView: void 0,
-      enableScrollForNextCalculateItemsInView: true
+      enableScrollForNextCalculateItemsInView: true,
+      minIndexSizeChanged: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -830,8 +853,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    const originalStartId = startBufferedIdOrig && state.indexByKey.get(startBufferedIdOrig);
-    let loopStart = originalStartId || 0;
+    let loopStart = startBufferedIdOrig ? state.indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    if (state.minIndexSizeChanged !== void 0) {
+      loopStart = Math.min(state.minIndexSizeChanged, loopStart);
+      state.minIndexSizeChanged = void 0;
+    }
     const anchorElementIndex = getAnchorElementIndex();
     for (let i = loopStart; i >= 0; i--) {
       const id = getId(i);
@@ -1075,6 +1101,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
+      const { onEndReached } = callbacks.current;
       if (onEndReached) {
         if (!refState.current.isEndReached) {
           if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
@@ -1096,6 +1123,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
     refState.current.isAtTop = distanceFromTop < 0;
+    const { onStartReached } = callbacks.current;
     if (onStartReached) {
       if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
         if (distanceFromTop < onStartReachedThreshold * scrollLength) {
@@ -1124,12 +1152,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           const itemKey = peek$(ctx, `containerItemKey${i}`);
           if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
             set$(ctx, `containerItemKey${i}`, void 0);
+            set$(ctx, `containerItemData${i}`, void 0);
             set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${i}`, -1);
           }
         }
         if (!keyExtractorProp) {
-          state.sizes.clear();
           state.positions.clear();
         }
         calculateItemsInView(state.scrollVelocity);
@@ -1145,7 +1173,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
     if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
-      refState.current.sizes.clear();
       refState.current.positions.clear();
     }
     refState.current.data = data;
@@ -1157,6 +1184,13 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     let maxSizeInRow = 0;
     for (let i = 0; i < data.length; i++) {
       const key = getId(i);
+      if (__DEV__) {
+        if (indexByKey.has(key)) {
+          console.error(
+            `[legend-list] Error: Detected overlapping key (${key}) which causes missing items and gaps and other terrrible things. Check that keyExtractor returns unique values.`
+          );
+        }
+      }
       indexByKey.set(key, i);
       if (refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
         newPositions.set(key, refState.current.positions.get(key));
@@ -1295,6 +1329,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const { sizes, indexByKey, columns, sizesLaidOut } = state;
     const index = indexByKey.get(itemKey);
     const numColumns = peek$(ctx, "numColumns");
+    state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const row = Math.floor(index / numColumns);
     const prevSize = getRowHeight(row);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
@@ -1377,6 +1412,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         );
       }
     }
+    if (onLayoutProp) {
+      onLayoutProp(event);
+    }
   }, []);
   const handleScroll = useCallback(
     (event, fromSelf) => {
@@ -1430,9 +1468,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       };
       return {
         getNativeScrollRef: () => refScroller.current,
-        getScrollableNode: refScroller.current.getScrollableNode,
-        getScrollResponder: refScroller.current.getScrollResponder,
-        flashScrollIndicators: refScroller.current.flashScrollIndicators,
+        getScrollableNode: () => refScroller.current.getScrollableNode(),
+        getScrollResponder: () => refScroller.current.getScrollResponder(),
+        flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
         scrollToIndex,
         scrollToOffset: ({ offset, animated }) => {
           const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
@@ -1444,7 +1482,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             scrollToIndex({ index, animated });
           }
         },
-        scrollToEnd: refScroller.current.scrollToEnd
+        scrollToEnd: () => refScroller.current.scrollToEnd()
       };
     },
     []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,

package/reanimated.d.mts

@@ -8,6 +8,9 @@ interface AnimatedLegendListProps<ItemT> extends Omit<PropsBase<ItemT>, KeysToOm
     refScrollView?: react__default.Ref<Animated.ScrollView>;
 }
 type OtherAnimatedLegendListProps<ItemT> = Pick<PropsBase<ItemT>, KeysToOmit>;
-declare const AnimatedLegendList: react__default.ForwardRefExoticComponent<Omit<Omit<AnimatedLegendListProps<unknown>, "refLegendList"> & OtherAnimatedLegendListProps<unknown>, "ref"> & react__default.RefAttributes<LegendListRef>>;
+type AnimatedLegendListDefinition = <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "refLegendList"> & OtherAnimatedLegendListProps<ItemT> & {
+    ref?: react__default.Ref<LegendListRef>;
+}) => react__default.ReactElement | null;
+declare const AnimatedLegendList: AnimatedLegendListDefinition;
 
 export { AnimatedLegendList };

package/reanimated.d.ts

@@ -8,6 +8,9 @@ interface AnimatedLegendListProps<ItemT> extends Omit<PropsBase<ItemT>, KeysToOm
     refScrollView?: react__default.Ref<Animated.ScrollView>;
 }
 type OtherAnimatedLegendListProps<ItemT> = Pick<PropsBase<ItemT>, KeysToOmit>;
-declare const AnimatedLegendList: react__default.ForwardRefExoticComponent<Omit<Omit<AnimatedLegendListProps<unknown>, "refLegendList"> & OtherAnimatedLegendListProps<unknown>, "ref"> & react__default.RefAttributes<LegendListRef>>;
+type AnimatedLegendListDefinition = <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "refLegendList"> & OtherAnimatedLegendListProps<ItemT> & {
+    ref?: react__default.Ref<LegendListRef>;
+}) => react__default.ReactElement | null;
+declare const AnimatedLegendList: AnimatedLegendListDefinition;
 
 export { AnimatedLegendList };