@legendapp/list 1.0.0-beta.25 → 1.0.0-beta.26

package/animated.d.mts

@@ -3,7 +3,7 @@ import * as _legendapp_list from '@legendapp/list';
 import * as react_native from 'react-native';
 import { Animated } from 'react-native';
 
-declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
     data: readonly T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;

package/animated.d.ts

@@ -3,7 +3,7 @@ import * as _legendapp_list from '@legendapp/list';
 import * as react_native from 'react-native';
 import { Animated } from 'react-native';
 
-declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
     data: readonly T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;

package/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_native from 'react-native';
-import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
+import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 declare class ScrollAdjustHandler {
@@ -139,6 +139,7 @@ interface InternalState {
     queuedCalculateItemsInView: number | undefined;
     lastBatchingAction: number;
     ignoreScrollFromCalcTotal?: boolean;
+    onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
 }
 interface ViewableRange<T> {
     startBuffered: number;
@@ -258,7 +259,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 };
 declare const typedMemo: TypedMemo;
 
-declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
     data: readonly T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_native from 'react-native';
-import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
+import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 declare class ScrollAdjustHandler {
@@ -139,6 +139,7 @@ interface InternalState {
     queuedCalculateItemsInView: number | undefined;
     lastBatchingAction: number;
     ignoreScrollFromCalcTotal?: boolean;
+    onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
 }
 interface ViewableRange<T> {
     startBuffered: number;
@@ -258,7 +259,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 };
 declare const typedMemo: TypedMemo;
 
-declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
     data: readonly T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;

package/index.js

@@ -924,7 +924,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       minIndexSizeChanged: 0,
       numPendingInitialLayout: 0,
       queuedCalculateItemsInView: 0,
-      lastBatchingAction: Date.now()
+      lastBatchingAction: Date.now(),
+      onScroll: onScrollProp
     };
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
@@ -947,6 +948,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }
   const didDataChange = refState.current.data !== dataProp;
   refState.current.data = dataProp;
+  refState.current.onScroll = onScrollProp;
   const getAnchorElementIndex = () => {
     const state = refState.current;
     if (state.anchorElement) {
@@ -996,7 +998,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, []);
   const getRowHeight = (n) => {
     const { rowHeights, data } = refState.current;
-    if (numColumnsProp === 1) {
+    const numColumns = peek$(ctx, "numColumns");
+    if (numColumns === 1) {
       const id = getId(n);
       return getItemSize(id, n, data[n]);
     }
@@ -1004,8 +1007,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return rowHeights.get(n) || 0;
     }
     let rowHeight = 0;
-    const startEl = n * numColumnsProp;
-    for (let i = startEl; i < startEl + numColumnsProp && i < data.length; i++) {
+    const startEl = n * numColumns;
+    for (let i = startEl; i < startEl + numColumns && i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       rowHeight = Math.max(rowHeight, size);
@@ -1024,10 +1027,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return /* @__PURE__ */ new Map();
     }
     const map = state.belowAnchorElementPositions || /* @__PURE__ */ new Map();
+    const numColumns = peek$(ctx, "numColumns");
     for (let i = anchorIndex - 1; i >= 0; i--) {
       const id = getId(i);
-      const rowNumber = Math.floor(i / numColumnsProp);
-      if (i % numColumnsProp === 0) {
+      const rowNumber = Math.floor(i / numColumns);
+      if (i % numColumns === 0) {
         top -= getRowHeight(rowNumber);
       }
       map.set(id, top);
@@ -1064,6 +1068,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return;
     }
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+    const numColumns = peek$(ctx, "numColumns");
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     const scroll = scrollState - previousScrollAdjust - topPad;
@@ -1119,7 +1124,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       }
     }
-    const numColumns = peek$(ctx, "numColumns");
     const loopStartMod = loopStart % numColumns;
     if (loopStartMod > 0) {
       loopStart -= loopStartMod;
@@ -1276,7 +1280,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             };
             const column2 = columns.get(id) || 1;
             if (maintainVisibleContentPosition && itemIndex < anchorElementIndex) {
-              const currentRow = Math.floor(itemIndex / numColumnsProp);
+              const currentRow = Math.floor(itemIndex / numColumns);
               const rowHeight = getRowHeight(currentRow);
               const elementHeight = getItemSize(id, itemIndex, data[i]);
               const diff = rowHeight - elementHeight;
@@ -1434,13 +1438,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   };
   const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
-    var _a2, _b2, _c2;
+    var _a2, _b2, _c2, _d2;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
     const newPositions = /* @__PURE__ */ new Map();
     let column = 1;
     let maxSizeInRow = 0;
+    const numColumns = (_a2 = peek$(ctx, "numColumns")) != null ? _a2 : numColumnsProp;
     if (!refState.current) {
       return;
     }
@@ -1469,8 +1474,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
               id: getId(0)
             };
             refState.current.anchorElement = newAnchorElement;
-            (_a2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
-            (_b2 = refScroller.current) == null ? void 0 : _b2.scrollTo({ x: 0, y: 0, animated: false });
+            (_b2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _b2.clear();
+            (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
             setTimeout(() => {
               calculateItemsInView();
             }, 0);
@@ -1485,7 +1490,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           } else {
             refState.current.startBufferedId = void 0;
           }
-          (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
+          (_d2 = refScroller.current) == null ? void 0 : _d2.scrollTo({ x: 0, y: 0, animated: false });
           setTimeout(() => {
             calculateItemsInView();
           }, 0);
@@ -1498,7 +1503,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       const size = getItemSize(key, i, dataProp[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
       column++;
-      if (column > numColumnsProp) {
+      if (column > numColumns) {
         if (maintainVisibleContentPosition && anchorElementIndex !== void 0 && i < anchorElementIndex) {
           totalSizeBelowIndex += maxSizeInRow;
         }
@@ -1625,14 +1630,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const prevSize = getItemSize(itemKey, index, data);
     let needsCalculate = false;
+    let needsUpdateContainersDidLayout = false;
     if (state.numPendingInitialLayout > 0) {
       state.numPendingInitialLayout--;
       if (state.numPendingInitialLayout === 0) {
         needsCalculate = true;
         state.numPendingInitialLayout = -1;
-        queueMicrotask(() => {
-          set$(ctx, "containersDidLayout", true);
-        });
+        needsUpdateContainersDidLayout = true;
       }
     }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
@@ -1688,9 +1692,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           state.queuedCalculateItemsInView = requestAnimationFrame(() => {
             state.queuedCalculateItemsInView = void 0;
             calculateItemsInView();
+            if (needsUpdateContainersDidLayout) {
+              set$(ctx, "containersDidLayout", true);
+            }
           });
         } else {
           calculateItemsInView();
+          if (needsUpdateContainersDidLayout) {
+            queueMicrotask(() => {
+              set$(ctx, "containersDidLayout", true);
+            });
+          }
         }
       }
     }
@@ -1724,18 +1736,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, []);
   const handleScroll = React6.useCallback(
     (event, fromSelf) => {
-      var _a2, _b2, _c2;
+      var _a2, _b2, _c2, _d2;
       if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c2 = event.nativeEvent.contentSize) == null ? void 0 : _c2.width) === 0) {
         return;
       }
       const state = refState.current;
-      if (state.ignoreScrollFromCalcTotal) {
+      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+      if (state.ignoreScrollFromCalcTotal && newScroll !== 0) {
         return;
       }
       state.hasScrolled = true;
       state.lastBatchingAction = Date.now();
       const currentTime = performance.now();
-      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
         state.scrollHistory.push({ scroll: newScroll, time: currentTime });
       }
@@ -1765,7 +1777,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       checkAtBottom();
       checkAtTop();
       if (!fromSelf) {
-        onScrollProp == null ? void 0 : onScrollProp(event);
+        (_d2 = state.onScroll) == null ? void 0 : _d2.call(state, event);
       }
     },
     []

package/index.mjs

@@ -903,7 +903,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       minIndexSizeChanged: 0,
       numPendingInitialLayout: 0,
       queuedCalculateItemsInView: 0,
-      lastBatchingAction: Date.now()
+      lastBatchingAction: Date.now(),
+      onScroll: onScrollProp
     };
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
@@ -926,6 +927,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }
   const didDataChange = refState.current.data !== dataProp;
   refState.current.data = dataProp;
+  refState.current.onScroll = onScrollProp;
   const getAnchorElementIndex = () => {
     const state = refState.current;
     if (state.anchorElement) {
@@ -975,7 +977,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, []);
   const getRowHeight = (n) => {
     const { rowHeights, data } = refState.current;
-    if (numColumnsProp === 1) {
+    const numColumns = peek$(ctx, "numColumns");
+    if (numColumns === 1) {
       const id = getId(n);
       return getItemSize(id, n, data[n]);
     }
@@ -983,8 +986,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return rowHeights.get(n) || 0;
     }
     let rowHeight = 0;
-    const startEl = n * numColumnsProp;
-    for (let i = startEl; i < startEl + numColumnsProp && i < data.length; i++) {
+    const startEl = n * numColumns;
+    for (let i = startEl; i < startEl + numColumns && i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       rowHeight = Math.max(rowHeight, size);
@@ -1003,10 +1006,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return /* @__PURE__ */ new Map();
     }
     const map = state.belowAnchorElementPositions || /* @__PURE__ */ new Map();
+    const numColumns = peek$(ctx, "numColumns");
     for (let i = anchorIndex - 1; i >= 0; i--) {
       const id = getId(i);
-      const rowNumber = Math.floor(i / numColumnsProp);
-      if (i % numColumnsProp === 0) {
+      const rowNumber = Math.floor(i / numColumns);
+      if (i % numColumns === 0) {
         top -= getRowHeight(rowNumber);
       }
       map.set(id, top);
@@ -1043,6 +1047,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return;
     }
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+    const numColumns = peek$(ctx, "numColumns");
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     const scroll = scrollState - previousScrollAdjust - topPad;
@@ -1098,7 +1103,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       }
     }
-    const numColumns = peek$(ctx, "numColumns");
     const loopStartMod = loopStart % numColumns;
     if (loopStartMod > 0) {
       loopStart -= loopStartMod;
@@ -1255,7 +1259,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             };
             const column2 = columns.get(id) || 1;
             if (maintainVisibleContentPosition && itemIndex < anchorElementIndex) {
-              const currentRow = Math.floor(itemIndex / numColumnsProp);
+              const currentRow = Math.floor(itemIndex / numColumns);
               const rowHeight = getRowHeight(currentRow);
               const elementHeight = getItemSize(id, itemIndex, data[i]);
               const diff = rowHeight - elementHeight;
@@ -1413,13 +1417,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   };
   const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
-    var _a2, _b2, _c2;
+    var _a2, _b2, _c2, _d2;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
     const newPositions = /* @__PURE__ */ new Map();
     let column = 1;
     let maxSizeInRow = 0;
+    const numColumns = (_a2 = peek$(ctx, "numColumns")) != null ? _a2 : numColumnsProp;
     if (!refState.current) {
       return;
     }
@@ -1448,8 +1453,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
               id: getId(0)
             };
             refState.current.anchorElement = newAnchorElement;
-            (_a2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
-            (_b2 = refScroller.current) == null ? void 0 : _b2.scrollTo({ x: 0, y: 0, animated: false });
+            (_b2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _b2.clear();
+            (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
             setTimeout(() => {
               calculateItemsInView();
             }, 0);
@@ -1464,7 +1469,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           } else {
             refState.current.startBufferedId = void 0;
           }
-          (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
+          (_d2 = refScroller.current) == null ? void 0 : _d2.scrollTo({ x: 0, y: 0, animated: false });
           setTimeout(() => {
             calculateItemsInView();
           }, 0);
@@ -1477,7 +1482,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       const size = getItemSize(key, i, dataProp[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
       column++;
-      if (column > numColumnsProp) {
+      if (column > numColumns) {
         if (maintainVisibleContentPosition && anchorElementIndex !== void 0 && i < anchorElementIndex) {
           totalSizeBelowIndex += maxSizeInRow;
         }
@@ -1604,14 +1609,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const prevSize = getItemSize(itemKey, index, data);
     let needsCalculate = false;
+    let needsUpdateContainersDidLayout = false;
     if (state.numPendingInitialLayout > 0) {
       state.numPendingInitialLayout--;
       if (state.numPendingInitialLayout === 0) {
         needsCalculate = true;
         state.numPendingInitialLayout = -1;
-        queueMicrotask(() => {
-          set$(ctx, "containersDidLayout", true);
-        });
+        needsUpdateContainersDidLayout = true;
       }
     }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
@@ -1667,9 +1671,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           state.queuedCalculateItemsInView = requestAnimationFrame(() => {
             state.queuedCalculateItemsInView = void 0;
             calculateItemsInView();
+            if (needsUpdateContainersDidLayout) {
+              set$(ctx, "containersDidLayout", true);
+            }
           });
         } else {
           calculateItemsInView();
+          if (needsUpdateContainersDidLayout) {
+            queueMicrotask(() => {
+              set$(ctx, "containersDidLayout", true);
+            });
+          }
         }
       }
     }
@@ -1703,18 +1715,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, []);
   const handleScroll = useCallback(
     (event, fromSelf) => {
-      var _a2, _b2, _c2;
+      var _a2, _b2, _c2, _d2;
       if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c2 = event.nativeEvent.contentSize) == null ? void 0 : _c2.width) === 0) {
         return;
       }
       const state = refState.current;
-      if (state.ignoreScrollFromCalcTotal) {
+      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+      if (state.ignoreScrollFromCalcTotal && newScroll !== 0) {
         return;
       }
       state.hasScrolled = true;
       state.lastBatchingAction = Date.now();
       const currentTime = performance.now();
-      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
         state.scrollHistory.push({ scroll: newScroll, time: currentTime });
       }
@@ -1744,7 +1756,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       checkAtBottom();
       checkAtTop();
       if (!fromSelf) {
-        onScrollProp == null ? void 0 : onScrollProp(event);
+        (_d2 = state.onScroll) == null ? void 0 : _d2.call(state, event);
       }
     },
     []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.26",
   "description": "Legend List aims to be a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,