@legendapp/list 0.6.2 → 0.6.3

package/index.d.mts

@@ -101,6 +101,11 @@ interface InternalState {
     }>;
     scrollTimer: Timer | undefined;
     startReachedBlockedByTimer: boolean;
+    layoutsPending: Set<number>;
+    scrollForNextCalculateItemsInView: {
+        top: number;
+        bottom: number;
+    } | undefined;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.d.ts

@@ -101,6 +101,11 @@ interface InternalState {
     }>;
     scrollTimer: Timer | undefined;
     startReachedBlockedByTimer: boolean;
+    layoutsPending: Set<number>;
+    scrollForNextCalculateItemsInView: {
+        top: number;
+        bottom: number;
+    } | undefined;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.js

@@ -39,12 +39,16 @@ function StateProvider({ children }) {
 function useStateContext() {
   return React4__namespace.useContext(ContextState);
 }
+function createSelectorFunctions(ctx, signalName) {
+  return {
+    subscribe: (cb) => listen$(ctx, signalName, cb),
+    get: () => peek$(ctx, signalName)
+  };
+}
 function use$(signalName) {
   const ctx = React4__namespace.useContext(ContextState);
-  const value = React4.useSyncExternalStore(
-    (onStoreChange) => listen$(ctx, signalName, onStoreChange),
-    () => ctx.values.get(signalName)
-  );
+  const { subscribe, get } = React4__namespace.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const value = React4.useSyncExternalStore(subscribe, get);
   return value;
 }
 function listen$(ctx, signalName, cb) {
@@ -118,14 +122,6 @@ var Container = ({
         if (key !== void 0) {
           const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
           updateItemSize(id, key, size);
-          const otherAxisSize2 = horizontal ? event.nativeEvent.layout.width : event.nativeEvent.layout.height;
-          set$(ctx, "otherAxisSize", Math.max(otherAxisSize2, peek$(ctx, "otherAxisSize") || 0));
-          const measured = peek$(ctx, `containerDidLayout${id}`);
-          if (!measured) {
-            requestAnimationFrame(() => {
-              set$(ctx, `containerDidLayout${id}`, true);
-            });
-          }
         }
       }
     },
@@ -460,7 +456,7 @@ var LegendList = React4.forwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React4__namespace.createElement(StateProvider, null, /* @__PURE__ */ React4__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = React4.forwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const {
     data,
     initialScrollIndex,
@@ -567,7 +563,9 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       scrollTimer: void 0,
       belowAnchorElementPositions: void 0,
       rowHeights: /* @__PURE__ */ new Map(),
-      startReachedBlockedByTimer: false
+      startReachedBlockedByTimer: false,
+      layoutsPending: /* @__PURE__ */ new Set(),
+      scrollForNextCalculateItemsInView: void 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -698,7 +696,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler
+      scrollAdjustHandler,
+      layoutsPending
     } = state;
     if (state.animFrameLayout) {
       cancelAnimationFrame(state.animFrameLayout);
@@ -711,6 +710,12 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
+    if (refState.current.scrollForNextCalculateItemsInView) {
+      const { top: top2, bottom } = refState.current.scrollForNextCalculateItemsInView;
+      if (scroll > top2 && scroll < bottom) {
+        return;
+      }
+    }
     const scrollBottom = scroll + scrollLength;
     let startNoBuffer = null;
     let startBuffered = null;
@@ -804,6 +809,14 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       endBuffered,
       endNoBuffer
     });
+    const nextTop = Math.ceil(startBuffered ? positions.get(startBufferedId) + scrollBuffer : 0);
+    const nextBottom = Math.floor(
+      endBuffered ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
+    );
+    refState.current.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
+      top: nextTop,
+      bottom: nextBottom
+    } : void 0;
     if (startBuffered !== null && endBuffered !== null) {
       const prevNumContainers = ctx.values.get("numContainers");
       let numContainers = prevNumContainers;
@@ -846,7 +859,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
             const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
-            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
+            set$(ctx, `containerItemData${containerId}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
@@ -896,6 +909,12 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         }
       }
     }
+    if (layoutsPending.size > 0) {
+      for (const containerId of layoutsPending) {
+        set$(ctx, `containerDidLayout${containerId}`, true);
+      }
+      layoutsPending.clear();
+    }
     if (refState.current.viewabilityConfigCallbackPairs) {
       updateViewableItems(
         refState.current,
@@ -977,6 +996,33 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
     }
   };
+  const resetContainers = () => {
+    const state = refState.current;
+    if (state) {
+      if (data.length > state.data.length) {
+        state.isEndReached = false;
+      }
+      refState.current.scrollForNextCalculateItemsInView = void 0;
+      state.data = data;
+      const numContainers = peek$(ctx, "numContainers");
+      for (let i = 0; i < numContainers; i++) {
+        const itemKey = peek$(ctx, `containerItemKey${i}`);
+        if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
+          set$(ctx, `containerItemKey${i}`, void 0);
+          set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+          set$(ctx, `containerColumn${i}`, -1);
+        }
+      }
+      if (!keyExtractorProp) {
+        state.sizes.clear();
+        state.positions;
+      }
+      calculateItemsInView(state.scrollVelocity);
+      doMaintainScrollAtEnd(false);
+      checkAtTop();
+      checkAtBottom();
+    }
+  };
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
     if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
@@ -1010,40 +1056,24 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
     }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
+  }
+  React4.useEffect(() => {
     if (!isFirst) {
-      if (data.length > refState.current.data.length) {
-        refState.current.isEndReached = false;
-      }
-      refState.current.data = data;
-      const numContainers = peek$(ctx, "numContainers");
-      for (let i = 0; i < numContainers; i++) {
-        const itemKey = peek$(ctx, `containerItemKey${i}`);
-        if (!keyExtractorProp || itemKey && ((_a = refState.current) == null ? void 0 : _a.indexByKey.get(itemKey)) === void 0) {
-          set$(ctx, `containerItemKey${i}`, void 0);
-          set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
-          set$(ctx, `containerColumn${i}`, -1);
-        }
-      }
-      if (!keyExtractorProp) {
-        refState.current.sizes.clear();
-        refState.current.positions;
-      }
-      setTimeout(() => {
-        calculateItemsInView(refState.current.scrollVelocity);
-        doMaintainScrollAtEnd(false);
-        checkAtTop();
-        checkAtBottom();
-      }, 0);
+      resetContainers();
     }
-  }
+  }, [isFirst, data, numColumnsProp]);
   refState.current.renderItem = renderItem;
-  set$(ctx, "lastItemKey", getId(data[data.length - 1]));
-  set$(ctx, "numColumns", numColumnsProp);
-  set$(
-    ctx,
-    "stylePaddingTop",
-    (_e = (_d = (_b = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _b.paddingTop) != null ? _d : (_c = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _c.paddingTop) != null ? _e : 0
-  );
+  const lastItemKey = getId(data[data.length - 1]);
+  const stylePaddingTop = (_d = (_c = (_a = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
+  const initalizeStateVars = () => {
+    set$(ctx, "lastItemKey", lastItemKey);
+    set$(ctx, "numColumns", numColumnsProp);
+    set$(ctx, "stylePaddingTop", stylePaddingTop);
+  };
+  if (isFirst) {
+    initalizeStateVars();
+  }
+  React4.useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
   const getRenderedItem = React4.useCallback((key, containerId) => {
     var _a2, _b2;
     const state = refState.current;
@@ -1111,7 +1141,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           }
         };
         run();
-        listen$(ctx, signal, run);
+        return listen$(ctx, signal, run);
       }, []);
     };
     const useRecyclingState = (valueOrFun) => {
@@ -1165,6 +1195,10 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     const numColumns = peek$(ctx, "numColumns");
     const row = Math.floor(index / numColumns);
     const prevSize = getRowHeight(row);
+    const measured = peek$(ctx, `containerDidLayout${containerId}`);
+    if (!measured) {
+      state.layoutsPending.add(containerId);
+    }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
       if (numColumns > 1) {
@@ -1202,6 +1236,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           );
         }, 1e3);
       }
+      refState.current.scrollForNextCalculateItemsInView = void 0;
       addTotalSize(itemKey, diff, 0);
       doMaintainScrollAtEnd(true);
       const scrollVelocity = state.scrollVelocity;
@@ -1215,6 +1250,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           calculateItemsInView(state.scrollVelocity);
         }
       }
+    } else {
+      set$(ctx, `containerDidLayout${containerId}`, true);
     }
   }, []);
   const handleScrollDebounced = React4.useCallback((velocity) => {

package/index.mjs

@@ -1,5 +1,5 @@
 import * as React4 from 'react';
-import React4__default, { forwardRef, useRef, useMemo, useCallback, useImperativeHandle, useSyncExternalStore, useEffect, useState } from 'react';
+import React4__default, { forwardRef, useRef, useMemo, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useState } from 'react';
 import { Animated, ScrollView, View, Dimensions, StyleSheet, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
 
 // src/LegendList.tsx
@@ -18,12 +18,16 @@ function StateProvider({ children }) {
 function useStateContext() {
   return React4.useContext(ContextState);
 }
+function createSelectorFunctions(ctx, signalName) {
+  return {
+    subscribe: (cb) => listen$(ctx, signalName, cb),
+    get: () => peek$(ctx, signalName)
+  };
+}
 function use$(signalName) {
   const ctx = React4.useContext(ContextState);
-  const value = useSyncExternalStore(
-    (onStoreChange) => listen$(ctx, signalName, onStoreChange),
-    () => ctx.values.get(signalName)
-  );
+  const { subscribe, get } = React4.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const value = useSyncExternalStore(subscribe, get);
   return value;
 }
 function listen$(ctx, signalName, cb) {
@@ -97,14 +101,6 @@ var Container = ({
         if (key !== void 0) {
           const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
           updateItemSize(id, key, size);
-          const otherAxisSize2 = horizontal ? event.nativeEvent.layout.width : event.nativeEvent.layout.height;
-          set$(ctx, "otherAxisSize", Math.max(otherAxisSize2, peek$(ctx, "otherAxisSize") || 0));
-          const measured = peek$(ctx, `containerDidLayout${id}`);
-          if (!measured) {
-            requestAnimationFrame(() => {
-              set$(ctx, `containerDidLayout${id}`, true);
-            });
-          }
         }
       }
     },
@@ -439,7 +435,7 @@ var LegendList = forwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React4.createElement(StateProvider, null, /* @__PURE__ */ React4.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const {
     data,
     initialScrollIndex,
@@ -546,7 +542,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       scrollTimer: void 0,
       belowAnchorElementPositions: void 0,
       rowHeights: /* @__PURE__ */ new Map(),
-      startReachedBlockedByTimer: false
+      startReachedBlockedByTimer: false,
+      layoutsPending: /* @__PURE__ */ new Set(),
+      scrollForNextCalculateItemsInView: void 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -677,7 +675,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler
+      scrollAdjustHandler,
+      layoutsPending
     } = state;
     if (state.animFrameLayout) {
       cancelAnimationFrame(state.animFrameLayout);
@@ -690,6 +689,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
+    if (refState.current.scrollForNextCalculateItemsInView) {
+      const { top: top2, bottom } = refState.current.scrollForNextCalculateItemsInView;
+      if (scroll > top2 && scroll < bottom) {
+        return;
+      }
+    }
     const scrollBottom = scroll + scrollLength;
     let startNoBuffer = null;
     let startBuffered = null;
@@ -783,6 +788,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       endBuffered,
       endNoBuffer
     });
+    const nextTop = Math.ceil(startBuffered ? positions.get(startBufferedId) + scrollBuffer : 0);
+    const nextBottom = Math.floor(
+      endBuffered ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
+    );
+    refState.current.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
+      top: nextTop,
+      bottom: nextBottom
+    } : void 0;
     if (startBuffered !== null && endBuffered !== null) {
       const prevNumContainers = ctx.values.get("numContainers");
       let numContainers = prevNumContainers;
@@ -825,7 +838,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
             const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
-            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
+            set$(ctx, `containerItemData${containerId}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
@@ -875,6 +888,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         }
       }
     }
+    if (layoutsPending.size > 0) {
+      for (const containerId of layoutsPending) {
+        set$(ctx, `containerDidLayout${containerId}`, true);
+      }
+      layoutsPending.clear();
+    }
     if (refState.current.viewabilityConfigCallbackPairs) {
       updateViewableItems(
         refState.current,
@@ -956,6 +975,33 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     }
   };
+  const resetContainers = () => {
+    const state = refState.current;
+    if (state) {
+      if (data.length > state.data.length) {
+        state.isEndReached = false;
+      }
+      refState.current.scrollForNextCalculateItemsInView = void 0;
+      state.data = data;
+      const numContainers = peek$(ctx, "numContainers");
+      for (let i = 0; i < numContainers; i++) {
+        const itemKey = peek$(ctx, `containerItemKey${i}`);
+        if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
+          set$(ctx, `containerItemKey${i}`, void 0);
+          set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+          set$(ctx, `containerColumn${i}`, -1);
+        }
+      }
+      if (!keyExtractorProp) {
+        state.sizes.clear();
+        state.positions;
+      }
+      calculateItemsInView(state.scrollVelocity);
+      doMaintainScrollAtEnd(false);
+      checkAtTop();
+      checkAtBottom();
+    }
+  };
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
     if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
@@ -989,40 +1035,24 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
+  }
+  useEffect(() => {
     if (!isFirst) {
-      if (data.length > refState.current.data.length) {
-        refState.current.isEndReached = false;
-      }
-      refState.current.data = data;
-      const numContainers = peek$(ctx, "numContainers");
-      for (let i = 0; i < numContainers; i++) {
-        const itemKey = peek$(ctx, `containerItemKey${i}`);
-        if (!keyExtractorProp || itemKey && ((_a = refState.current) == null ? void 0 : _a.indexByKey.get(itemKey)) === void 0) {
-          set$(ctx, `containerItemKey${i}`, void 0);
-          set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
-          set$(ctx, `containerColumn${i}`, -1);
-        }
-      }
-      if (!keyExtractorProp) {
-        refState.current.sizes.clear();
-        refState.current.positions;
-      }
-      setTimeout(() => {
-        calculateItemsInView(refState.current.scrollVelocity);
-        doMaintainScrollAtEnd(false);
-        checkAtTop();
-        checkAtBottom();
-      }, 0);
+      resetContainers();
     }
-  }
+  }, [isFirst, data, numColumnsProp]);
   refState.current.renderItem = renderItem;
-  set$(ctx, "lastItemKey", getId(data[data.length - 1]));
-  set$(ctx, "numColumns", numColumnsProp);
-  set$(
-    ctx,
-    "stylePaddingTop",
-    (_e = (_d = (_b = StyleSheet.flatten(style)) == null ? void 0 : _b.paddingTop) != null ? _d : (_c = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _c.paddingTop) != null ? _e : 0
-  );
+  const lastItemKey = getId(data[data.length - 1]);
+  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, "lastItemKey", lastItemKey);
+    set$(ctx, "numColumns", numColumnsProp);
+    set$(ctx, "stylePaddingTop", stylePaddingTop);
+  };
+  if (isFirst) {
+    initalizeStateVars();
+  }
+  useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
   const getRenderedItem = useCallback((key, containerId) => {
     var _a2, _b2;
     const state = refState.current;
@@ -1090,7 +1120,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           }
         };
         run();
-        listen$(ctx, signal, run);
+        return listen$(ctx, signal, run);
       }, []);
     };
     const useRecyclingState = (valueOrFun) => {
@@ -1144,6 +1174,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const numColumns = peek$(ctx, "numColumns");
     const row = Math.floor(index / numColumns);
     const prevSize = getRowHeight(row);
+    const measured = peek$(ctx, `containerDidLayout${containerId}`);
+    if (!measured) {
+      state.layoutsPending.add(containerId);
+    }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
       if (numColumns > 1) {
@@ -1181,6 +1215,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           );
         }, 1e3);
       }
+      refState.current.scrollForNextCalculateItemsInView = void 0;
       addTotalSize(itemKey, diff, 0);
       doMaintainScrollAtEnd(true);
       const scrollVelocity = state.scrollVelocity;
@@ -1194,6 +1229,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           calculateItemsInView(state.scrollVelocity);
         }
       }
+    } else {
+      set$(ctx, `containerDidLayout${containerId}`, true);
     }
   }, []);
   const handleScrollDebounced = useCallback((velocity) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,