@legendapp/list 1.0.0-beta.22 → 1.0.0-beta.23

package/index.d.mts

@@ -100,7 +100,7 @@ interface InternalState {
     isAtBottom: boolean;
     isAtTop: boolean;
     data: readonly any[];
-    hasScrolled: boolean;
+    hasScrolled?: boolean;
     scrollLength: number;
     startBuffered: number;
     startBufferedId?: string;
@@ -135,6 +135,9 @@ interface InternalState {
     enableScrollForNextCalculateItemsInView: boolean;
     minIndexSizeChanged: number | undefined;
     numPendingInitialLayout: number;
+    queuedCalculateItemsInView: number | undefined;
+    lastBatchingAction: number;
+    ignoreScrollFromCalcTotal?: boolean;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.d.ts

@@ -100,7 +100,7 @@ interface InternalState {
     isAtBottom: boolean;
     isAtTop: boolean;
     data: readonly any[];
-    hasScrolled: boolean;
+    hasScrolled?: boolean;
     scrollLength: number;
     startBuffered: number;
     startBufferedId?: string;
@@ -135,6 +135,9 @@ interface InternalState {
     enableScrollForNextCalculateItemsInView: boolean;
     minIndexSizeChanged: number | undefined;
     numPendingInitialLayout: number;
+    queuedCalculateItemsInView: number | undefined;
+    lastBatchingAction: number;
+    ignoreScrollFromCalcTotal?: boolean;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.js

@@ -247,9 +247,7 @@ var Container = ({
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     verticalPaddingStyles = {
       paddingBottom: !lastItemKeys.has(itemKey) ? rowGap || gap || void 0 : void 0,
-      // Apply horizontal padding based on column position (first, middle, or last)
-      paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
-      paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
+      paddingHorizontal: (columnGap || gap || 0) / 2
     };
   }
   const style = horizontal ? {
@@ -272,18 +270,6 @@ var Container = ({
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
-  React6.useEffect(() => {
-    if (itemKey) {
-      const timeout = setTimeout(() => {
-        if (refLastSize.current) {
-          updateItemSize(id, itemKey, refLastSize.current);
-        }
-      }, 16);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [itemKey]);
   const onLayout = (event) => {
     if (itemKey !== void 0) {
       const layout = event.nativeEvent.layout;
@@ -300,7 +286,7 @@ var Container = ({
         return;
       }
       refLastSize.current = size;
-      updateItemSize(id, itemKey, size);
+      updateItemSize(itemKey, size);
     }
   };
   const ref = React6.useRef(null);
@@ -312,11 +298,24 @@ var Container = ({
         if (measured) {
           const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
           if (size) {
-            updateItemSize(id, itemKey, size);
+            updateItemSize(itemKey, size);
           }
         }
       }
     }, [itemKey]);
+  } else {
+    React6.useEffect(() => {
+      if (itemKey) {
+        const timeout = setTimeout(() => {
+          if (refLastSize.current) {
+            updateItemSize(itemKey, refLastSize.current);
+          }
+        }, 16);
+        return () => {
+          clearTimeout(timeout);
+        };
+      }
+    }, [itemKey]);
   }
   const contextValue = React6.useMemo(
     () => ({ containerId: id, itemKey, index, value: data }),
@@ -371,6 +370,9 @@ var Containers = typedMemo(function Containers2({
   updateItemSize,
   getRenderedItem
 }) {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
+  const numColumns = use$("numColumns");
   const numContainers = use$("numContainersPooled");
   const animSize = useValue$(
     "totalSizeWithScrollAdjust",
@@ -397,6 +399,13 @@ var Containers = typedMemo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    const mx = (columnGap || gap || 0) / 2;
+    if (mx) {
+      style.marginHorizontal = -mx;
+    }
+  }
   return /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style }, containers);
 });
 
@@ -864,7 +873,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       isAtBottom: false,
       isAtTop: false,
       data: dataProp,
-      hasScrolled: false,
       scrollLength: initialScrollLength,
       startBuffered: 0,
       startNoBuffer: 0,
@@ -894,7 +902,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollForNextCalculateItemsInView: void 0,
       enableScrollForNextCalculateItemsInView: true,
       minIndexSizeChanged: 0,
-      numPendingInitialLayout: 0
+      numPendingInitialLayout: 0,
+      queuedCalculateItemsInView: 0,
+      lastBatchingAction: Date.now()
     };
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
@@ -1017,7 +1027,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return res;
   };
-  const calculateItemsInView = React6.useCallback((speed) => {
+  const calculateItemsInView = React6.useCallback(() => {
     var _a2;
     const state = refState.current;
     const {
@@ -1027,7 +1037,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler
+      scrollAdjustHandler,
+      scrollVelocity: speed
     } = state;
     if (!data || scrollLength === 0) {
       return;
@@ -1386,7 +1397,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (!keyExtractorProp) {
           state.positions.clear();
         }
-        calculateItemsInView(state.scrollVelocity);
+        calculateItemsInView();
         const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
         if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
           state.isEndReached = false;
@@ -1435,7 +1446,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             (_a2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
             (_b2 = refScroller.current) == null ? void 0 : _b2.scrollTo({ x: 0, y: 0, animated: false });
             setTimeout(() => {
-              calculateItemsInView(0);
+              calculateItemsInView();
             }, 0);
           } else {
             refState.current.startBufferedId = void 0;
@@ -1450,7 +1461,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           }
           (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
           setTimeout(() => {
-            calculateItemsInView(0);
+            calculateItemsInView();
           }, 0);
         }
       }
@@ -1473,10 +1484,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (maxSizeInRow > 0) {
       totalSize += maxSizeInRow;
     }
+    const state = refState.current;
+    state.ignoreScrollFromCalcTotal = true;
+    requestAnimationFrame(() => {
+      state.ignoreScrollFromCalcTotal = false;
+    });
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   };
   const isFirst = !refState.current.renderItem;
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+    refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
       refState.current.sizes.clear();
       refState.current.positions.clear();
@@ -1557,10 +1574,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       set$(ctx, "numContainersPooled", numContainers * 2);
       if (initialScrollIndex) {
         requestAnimationFrame(() => {
-          calculateItemsInView(state.scrollVelocity);
+          calculateItemsInView();
         });
       } else {
-        calculateItemsInView(state.scrollVelocity);
+        calculateItemsInView();
       }
     }
   };
@@ -1571,7 +1588,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.enableScrollForNextCalculateItemsInView = !viewability;
     doInitialAllocateContainers();
   });
-  const updateItemSize = React6.useCallback((containerId, itemKey, size) => {
+  const updateItemSize = React6.useCallback((itemKey, size) => {
     const state = refState.current;
     const { sizes, indexByKey, sizesLaidOut, data, rowHeights } = state;
     if (!data) {
@@ -1641,27 +1658,30 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (needsCalculate) {
       const scrollVelocity = state.scrollVelocity;
       if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
-        calculateItemsInView(state.scrollVelocity);
+        if (Date.now() - state.lastBatchingAction < 500) {
+          state.queuedCalculateItemsInView = requestAnimationFrame(() => {
+            state.queuedCalculateItemsInView = void 0;
+            calculateItemsInView();
+          });
+        } else {
+          calculateItemsInView();
+        }
       }
     }
   }, []);
-  const handleScrollDebounced = React6.useCallback((velocity) => {
-    calculateItemsInView(velocity);
-    checkAtBottom();
-    checkAtTop();
-  }, []);
   const onLayout = React6.useCallback((event) => {
+    const state = refState.current;
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
-    const didChange = scrollLength !== refState.current.scrollLength;
-    refState.current.scrollLength;
-    refState.current.scrollLength = scrollLength;
+    const didChange = scrollLength !== state.scrollLength;
+    state.scrollLength = scrollLength;
+    state.lastBatchingAction = Date.now();
     doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
     doUpdatePaddingTop();
     checkAtBottom();
     checkAtTop();
     if (didChange) {
-      calculateItemsInView(0);
+      calculateItemsInView();
     }
     if (__DEV__) {
       const isWidthZero = event.nativeEvent.layout.width === 0;
@@ -1683,7 +1703,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         return;
       }
       const state = refState.current;
+      if (state.ignoreScrollFromCalcTotal) {
+        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)) {
@@ -1711,7 +1735,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.scroll = newScroll;
       state.scrollTime = currentTime;
       state.scrollVelocity = velocity;
-      handleScrollDebounced(velocity);
+      calculateItemsInView();
+      checkAtBottom();
+      checkAtTop();
       if (!fromSelf) {
         onScrollProp == null ? void 0 : onScrollProp(event);
       }
@@ -1750,7 +1776,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             if (wasAdjusted) {
               refState.current.scrollVelocity = 0;
               refState.current.scrollHistory = [];
-              calculateItemsInView(0);
+              calculateItemsInView();
             }
           },
           animated ? 1e3 : 50
@@ -1801,7 +1827,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (wasPaused) {
           refState.current.scrollVelocity = 0;
           refState.current.scrollHistory = [];
-          calculateItemsInView(0);
+          calculateItemsInView();
         }
         if (onMomentumScrollEnd) {
           onMomentumScrollEnd(event);

package/index.mjs

@@ -226,9 +226,7 @@ var Container = ({
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     verticalPaddingStyles = {
       paddingBottom: !lastItemKeys.has(itemKey) ? rowGap || gap || void 0 : void 0,
-      // Apply horizontal padding based on column position (first, middle, or last)
-      paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
-      paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
+      paddingHorizontal: (columnGap || gap || 0) / 2
     };
   }
   const style = horizontal ? {
@@ -251,18 +249,6 @@ var Container = ({
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
-  useEffect(() => {
-    if (itemKey) {
-      const timeout = setTimeout(() => {
-        if (refLastSize.current) {
-          updateItemSize(id, itemKey, refLastSize.current);
-        }
-      }, 16);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [itemKey]);
   const onLayout = (event) => {
     if (itemKey !== void 0) {
       const layout = event.nativeEvent.layout;
@@ -279,7 +265,7 @@ var Container = ({
         return;
       }
       refLastSize.current = size;
-      updateItemSize(id, itemKey, size);
+      updateItemSize(itemKey, size);
     }
   };
   const ref = useRef(null);
@@ -291,11 +277,24 @@ var Container = ({
         if (measured) {
           const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
           if (size) {
-            updateItemSize(id, itemKey, size);
+            updateItemSize(itemKey, size);
           }
         }
       }
     }, [itemKey]);
+  } else {
+    useEffect(() => {
+      if (itemKey) {
+        const timeout = setTimeout(() => {
+          if (refLastSize.current) {
+            updateItemSize(itemKey, refLastSize.current);
+          }
+        }, 16);
+        return () => {
+          clearTimeout(timeout);
+        };
+      }
+    }, [itemKey]);
   }
   const contextValue = useMemo(
     () => ({ containerId: id, itemKey, index, value: data }),
@@ -350,6 +349,9 @@ var Containers = typedMemo(function Containers2({
   updateItemSize,
   getRenderedItem
 }) {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
+  const numColumns = use$("numColumns");
   const numContainers = use$("numContainersPooled");
   const animSize = useValue$(
     "totalSizeWithScrollAdjust",
@@ -376,6 +378,13 @@ var Containers = typedMemo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    const mx = (columnGap || gap || 0) / 2;
+    if (mx) {
+      style.marginHorizontal = -mx;
+    }
+  }
   return /* @__PURE__ */ React6.createElement(Animated.View, { style }, containers);
 });
 
@@ -843,7 +852,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       isAtBottom: false,
       isAtTop: false,
       data: dataProp,
-      hasScrolled: false,
       scrollLength: initialScrollLength,
       startBuffered: 0,
       startNoBuffer: 0,
@@ -873,7 +881,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollForNextCalculateItemsInView: void 0,
       enableScrollForNextCalculateItemsInView: true,
       minIndexSizeChanged: 0,
-      numPendingInitialLayout: 0
+      numPendingInitialLayout: 0,
+      queuedCalculateItemsInView: 0,
+      lastBatchingAction: Date.now()
     };
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
@@ -996,7 +1006,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return res;
   };
-  const calculateItemsInView = useCallback((speed) => {
+  const calculateItemsInView = useCallback(() => {
     var _a2;
     const state = refState.current;
     const {
@@ -1006,7 +1016,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler
+      scrollAdjustHandler,
+      scrollVelocity: speed
     } = state;
     if (!data || scrollLength === 0) {
       return;
@@ -1365,7 +1376,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (!keyExtractorProp) {
           state.positions.clear();
         }
-        calculateItemsInView(state.scrollVelocity);
+        calculateItemsInView();
         const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
         if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
           state.isEndReached = false;
@@ -1414,7 +1425,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             (_a2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
             (_b2 = refScroller.current) == null ? void 0 : _b2.scrollTo({ x: 0, y: 0, animated: false });
             setTimeout(() => {
-              calculateItemsInView(0);
+              calculateItemsInView();
             }, 0);
           } else {
             refState.current.startBufferedId = void 0;
@@ -1429,7 +1440,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           }
           (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
           setTimeout(() => {
-            calculateItemsInView(0);
+            calculateItemsInView();
           }, 0);
         }
       }
@@ -1452,10 +1463,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (maxSizeInRow > 0) {
       totalSize += maxSizeInRow;
     }
+    const state = refState.current;
+    state.ignoreScrollFromCalcTotal = true;
+    requestAnimationFrame(() => {
+      state.ignoreScrollFromCalcTotal = false;
+    });
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   };
   const isFirst = !refState.current.renderItem;
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+    refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
       refState.current.sizes.clear();
       refState.current.positions.clear();
@@ -1536,10 +1553,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       set$(ctx, "numContainersPooled", numContainers * 2);
       if (initialScrollIndex) {
         requestAnimationFrame(() => {
-          calculateItemsInView(state.scrollVelocity);
+          calculateItemsInView();
         });
       } else {
-        calculateItemsInView(state.scrollVelocity);
+        calculateItemsInView();
       }
     }
   };
@@ -1550,7 +1567,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.enableScrollForNextCalculateItemsInView = !viewability;
     doInitialAllocateContainers();
   });
-  const updateItemSize = useCallback((containerId, itemKey, size) => {
+  const updateItemSize = useCallback((itemKey, size) => {
     const state = refState.current;
     const { sizes, indexByKey, sizesLaidOut, data, rowHeights } = state;
     if (!data) {
@@ -1620,27 +1637,30 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (needsCalculate) {
       const scrollVelocity = state.scrollVelocity;
       if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
-        calculateItemsInView(state.scrollVelocity);
+        if (Date.now() - state.lastBatchingAction < 500) {
+          state.queuedCalculateItemsInView = requestAnimationFrame(() => {
+            state.queuedCalculateItemsInView = void 0;
+            calculateItemsInView();
+          });
+        } else {
+          calculateItemsInView();
+        }
       }
     }
   }, []);
-  const handleScrollDebounced = useCallback((velocity) => {
-    calculateItemsInView(velocity);
-    checkAtBottom();
-    checkAtTop();
-  }, []);
   const onLayout = useCallback((event) => {
+    const state = refState.current;
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
-    const didChange = scrollLength !== refState.current.scrollLength;
-    refState.current.scrollLength;
-    refState.current.scrollLength = scrollLength;
+    const didChange = scrollLength !== state.scrollLength;
+    state.scrollLength = scrollLength;
+    state.lastBatchingAction = Date.now();
     doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
     doUpdatePaddingTop();
     checkAtBottom();
     checkAtTop();
     if (didChange) {
-      calculateItemsInView(0);
+      calculateItemsInView();
     }
     if (__DEV__) {
       const isWidthZero = event.nativeEvent.layout.width === 0;
@@ -1662,7 +1682,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         return;
       }
       const state = refState.current;
+      if (state.ignoreScrollFromCalcTotal) {
+        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)) {
@@ -1690,7 +1714,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.scroll = newScroll;
       state.scrollTime = currentTime;
       state.scrollVelocity = velocity;
-      handleScrollDebounced(velocity);
+      calculateItemsInView();
+      checkAtBottom();
+      checkAtTop();
       if (!fromSelf) {
         onScrollProp == null ? void 0 : onScrollProp(event);
       }
@@ -1729,7 +1755,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             if (wasAdjusted) {
               refState.current.scrollVelocity = 0;
               refState.current.scrollHistory = [];
-              calculateItemsInView(0);
+              calculateItemsInView();
             }
           },
           animated ? 1e3 : 50
@@ -1780,7 +1806,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (wasPaused) {
           refState.current.scrollVelocity = 0;
           refState.current.scrollHistory = [];
-          calculateItemsInView(0);
+          calculateItemsInView();
         }
         if (onMomentumScrollEnd) {
           onMomentumScrollEnd(event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.23",
   "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,