@legendapp/list 1.0.0-beta.0 → 1.0.0-beta.2

package/index.d.mts

@@ -61,6 +61,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      * @default (props) => <ScrollView {...props} />
      */
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
+    extraData?: any;
 };
 type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {
@@ -114,6 +115,7 @@ interface InternalState {
         top: number;
         bottom: number;
     } | undefined;
+    enableScrollForNextCalculateItemsInView: boolean;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.d.ts

@@ -61,6 +61,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      * @default (props) => <ScrollView {...props} />
      */
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
+    extraData?: any;
 };
 type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {
@@ -114,6 +115,7 @@ interface InternalState {
         top: number;
         bottom: number;
     } | undefined;
+    enableScrollForNextCalculateItemsInView: boolean;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.js

@@ -115,7 +115,8 @@ var Container = ({
   const lastItemKey = use$("lastItemKey");
   const itemKey = use$(`containerItemKey${id}`);
   const data = use$(`containerItemData${id}`);
-  const renderedItem = React4.useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey, data]);
+  const extraData = use$("extraData");
+  const renderedItem = React4.useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey, data, extraData]);
   return /* @__PURE__ */ React4__namespace.default.createElement(
     reactNative.View,
     {
@@ -494,6 +495,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     onItemSizeChanged,
     scrollEventThrottle,
     refScrollView,
+    extraData,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
@@ -577,7 +579,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
       layoutsPending: /* @__PURE__ */ new Set(),
-      scrollForNextCalculateItemsInView: void 0
+      scrollForNextCalculateItemsInView: void 0,
+      enableScrollForNextCalculateItemsInView: true
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -596,6 +599,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
     }
     set$(ctx, "scrollAdjust", 0);
+    set$(ctx, "extraData", extraData);
   }
   const getAnchorElementIndex = () => {
     const state = refState.current;
@@ -655,7 +659,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     }
     let rowHeight = 0;
     const startEl = n * numColumnsProp;
-    for (let i = startEl; i < startEl + numColumnsProp; i++) {
+    for (let i = startEl; i < startEl + numColumnsProp && i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       rowHeight = Math.max(rowHeight, size);
@@ -696,7 +700,6 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     return res;
   };
   const calculateItemsInView = React4.useCallback((speed) => {
-    var _a2, _b2, _c2, _d2;
     const state = refState.current;
     const {
       data: data2,
@@ -719,8 +722,8 @@ 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 (state.scrollForNextCalculateItemsInView) {
+      const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
       if (scroll > top2 && scroll < bottom) {
         return;
       }
@@ -763,13 +766,13 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a3;
+      var _a2;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         topOffset = initialContentOffset || 0;
       }
       return topOffset;
@@ -811,21 +814,23 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         maxSizeInRow = 0;
       }
     }
-    Object.assign(refState.current, {
+    Object.assign(state, {
       startBuffered,
       startBufferedId,
       startNoBuffer,
       endBuffered,
       endNoBuffer
     });
-    const nextTop = Math.ceil(startBuffered ? positions.get(startBufferedId) + scrollBuffer : 0);
+    const nextTop = Math.ceil(startBuffered !== null ? positions.get(startBufferedId) + scrollBuffer : 0);
     const nextBottom = Math.floor(
-      endBuffered ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
+      endBuffered !== null ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
     );
-    refState.current.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
-      top: nextTop,
-      bottom: nextBottom
-    } : void 0;
+    if (state.enableScrollForNextCalculateItemsInView) {
+      state.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;
@@ -849,7 +854,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
               furthestIndex = u;
               break;
             }
-            const index = (_a2 = refState.current) == null ? void 0 : _a2.indexByKey.get(key);
+            const index = state.indexByKey.get(key);
             const pos = peek$(ctx, `containerPosition${u}`);
             if (index < startBuffered || index > endBuffered) {
               const distance = Math.abs(pos - top2);
@@ -861,13 +866,13 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           }
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
-            const index = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(id);
+            const index = state.indexByKey.get(id);
             set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
-            const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
+            const index = state.indexByKey.get(id);
             set$(ctx, `containerItemData${containerId}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
@@ -888,7 +893,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
-        const itemIndex = (_d2 = refState.current) == null ? void 0 : _d2.indexByKey.get(itemKey);
+        const itemIndex = state.indexByKey.get(itemKey);
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
@@ -924,11 +929,11 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
       layoutsPending.clear();
     }
-    if (refState.current.viewabilityConfigCallbackPairs) {
+    if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
-        refState.current,
+        state,
         ctx,
-        refState.current.viewabilityConfigCallbackPairs,
+        state.viewabilityConfigCallbackPairs,
         getId,
         scrollLength,
         startNoBuffer,
@@ -1066,6 +1071,9 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         maxSizeInRow = 0;
       }
     }
+    if (maxSizeInRow > 0) {
+      totalSize += maxSizeInRow;
+    }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   }
   React4.useEffect(() => {
@@ -1074,6 +1082,9 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       !isFirst
     );
   }, [isFirst, data, numColumnsProp]);
+  React4.useEffect(() => {
+    set$(ctx, "extraData", extraData);
+  }, [extraData]);
   refState.current.renderItem = renderItem;
   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;
@@ -1183,8 +1194,11 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
   }, []);
   useInit(() => {
     var _a2;
-    refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
-    const scrollLength = refState.current.scrollLength;
+    const state = refState.current;
+    const viewability = setupViewability(props);
+    state.viewabilityConfigCallbackPairs = viewability;
+    state.enableScrollForNextCalculateItemsInView = !viewability;
+    const scrollLength = state.scrollLength;
     const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
     const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
     for (let i = 0; i < numContainers; i++) {
@@ -1193,7 +1207,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView(refState.current.scrollVelocity);
+    calculateItemsInView(state.scrollVelocity);
   });
   const updateItemSize = React4.useCallback((containerId, itemKey, size) => {
     var _a2;
@@ -1219,7 +1233,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         const column = columns.get(itemKey);
         const loopStart = index - (column - 1);
         let nextMaxSizeInRow = 0;
-        for (let i = loopStart; i < loopStart + numColumns; i++) {
+        for (let i = loopStart; i < loopStart + numColumns && i < data2.length; i++) {
           const id = getId(i);
           const size2 = getItemSize(id, i, data2[i]);
           nextMaxSizeInRow = Math.max(nextMaxSizeInRow, size2);

package/index.mjs

@@ -94,7 +94,8 @@ var Container = ({
   const lastItemKey = use$("lastItemKey");
   const itemKey = use$(`containerItemKey${id}`);
   const data = use$(`containerItemData${id}`);
-  const renderedItem = useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey, data]);
+  const extraData = use$("extraData");
+  const renderedItem = useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey, data, extraData]);
   return /* @__PURE__ */ React4__default.createElement(
     View,
     {
@@ -473,6 +474,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     onItemSizeChanged,
     scrollEventThrottle,
     refScrollView,
+    extraData,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
@@ -556,7 +558,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
       layoutsPending: /* @__PURE__ */ new Set(),
-      scrollForNextCalculateItemsInView: void 0
+      scrollForNextCalculateItemsInView: void 0,
+      enableScrollForNextCalculateItemsInView: true
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -575,6 +578,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     }
     set$(ctx, "scrollAdjust", 0);
+    set$(ctx, "extraData", extraData);
   }
   const getAnchorElementIndex = () => {
     const state = refState.current;
@@ -634,7 +638,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
     let rowHeight = 0;
     const startEl = n * numColumnsProp;
-    for (let i = startEl; i < startEl + numColumnsProp; i++) {
+    for (let i = startEl; i < startEl + numColumnsProp && i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       rowHeight = Math.max(rowHeight, size);
@@ -675,7 +679,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     return res;
   };
   const calculateItemsInView = useCallback((speed) => {
-    var _a2, _b2, _c2, _d2;
     const state = refState.current;
     const {
       data: data2,
@@ -698,8 +701,8 @@ 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 (state.scrollForNextCalculateItemsInView) {
+      const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
       if (scroll > top2 && scroll < bottom) {
         return;
       }
@@ -742,13 +745,13 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a3;
+      var _a2;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         topOffset = initialContentOffset || 0;
       }
       return topOffset;
@@ -790,21 +793,23 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         maxSizeInRow = 0;
       }
     }
-    Object.assign(refState.current, {
+    Object.assign(state, {
       startBuffered,
       startBufferedId,
       startNoBuffer,
       endBuffered,
       endNoBuffer
     });
-    const nextTop = Math.ceil(startBuffered ? positions.get(startBufferedId) + scrollBuffer : 0);
+    const nextTop = Math.ceil(startBuffered !== null ? positions.get(startBufferedId) + scrollBuffer : 0);
     const nextBottom = Math.floor(
-      endBuffered ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
+      endBuffered !== null ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
     );
-    refState.current.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
-      top: nextTop,
-      bottom: nextBottom
-    } : void 0;
+    if (state.enableScrollForNextCalculateItemsInView) {
+      state.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;
@@ -828,7 +833,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
               furthestIndex = u;
               break;
             }
-            const index = (_a2 = refState.current) == null ? void 0 : _a2.indexByKey.get(key);
+            const index = state.indexByKey.get(key);
             const pos = peek$(ctx, `containerPosition${u}`);
             if (index < startBuffered || index > endBuffered) {
               const distance = Math.abs(pos - top2);
@@ -840,13 +845,13 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           }
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
-            const index = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(id);
+            const index = state.indexByKey.get(id);
             set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
-            const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
+            const index = state.indexByKey.get(id);
             set$(ctx, `containerItemData${containerId}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
@@ -867,7 +872,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
-        const itemIndex = (_d2 = refState.current) == null ? void 0 : _d2.indexByKey.get(itemKey);
+        const itemIndex = state.indexByKey.get(itemKey);
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
@@ -903,11 +908,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
       layoutsPending.clear();
     }
-    if (refState.current.viewabilityConfigCallbackPairs) {
+    if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
-        refState.current,
+        state,
         ctx,
-        refState.current.viewabilityConfigCallbackPairs,
+        state.viewabilityConfigCallbackPairs,
         getId,
         scrollLength,
         startNoBuffer,
@@ -1045,6 +1050,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         maxSizeInRow = 0;
       }
     }
+    if (maxSizeInRow > 0) {
+      totalSize += maxSizeInRow;
+    }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   }
   useEffect(() => {
@@ -1053,6 +1061,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       !isFirst
     );
   }, [isFirst, data, numColumnsProp]);
+  useEffect(() => {
+    set$(ctx, "extraData", extraData);
+  }, [extraData]);
   refState.current.renderItem = renderItem;
   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;
@@ -1162,8 +1173,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   }, []);
   useInit(() => {
     var _a2;
-    refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
-    const scrollLength = refState.current.scrollLength;
+    const state = refState.current;
+    const viewability = setupViewability(props);
+    state.viewabilityConfigCallbackPairs = viewability;
+    state.enableScrollForNextCalculateItemsInView = !viewability;
+    const scrollLength = state.scrollLength;
     const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
     const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
     for (let i = 0; i < numContainers; i++) {
@@ -1172,7 +1186,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView(refState.current.scrollVelocity);
+    calculateItemsInView(state.scrollVelocity);
   });
   const updateItemSize = useCallback((containerId, itemKey, size) => {
     var _a2;
@@ -1198,7 +1212,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         const column = columns.get(itemKey);
         const loopStart = index - (column - 1);
         let nextMaxSizeInRow = 0;
-        for (let i = loopStart; i < loopStart + numColumns; i++) {
+        for (let i = loopStart; i < loopStart + numColumns && i < data2.length; i++) {
           const id = getId(i);
           const size2 = getItemSize(id, i, data2[i]);
           nextMaxSizeInRow = Math.max(nextMaxSizeInRow, size2);

package/package.json

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