@legendapp/list 1.0.0-beta.50 → 1.0.0-beta.52

package/index.mjs

@@ -128,6 +128,16 @@ function useInterval(callback, delay) {
 function isFunction(obj) {
   return typeof obj === "function";
 }
+var warned = /* @__PURE__ */ new Set();
+function warnDevOnce(id, text) {
+  if (__DEV__ && !warned.has(id)) {
+    warned.add(id);
+    console.warn(`[legend-list] ${text}`);
+  }
+}
+function roundSize(size) {
+  return Math.floor(size * 8) / 8;
+}
 var symbolFirst = Symbol();
 function useInit(cb) {
   const refValue = useRef(symbolFirst);
@@ -306,7 +316,7 @@ var Container = ({
   const onLayout = (event) => {
     if (itemKey !== void 0) {
       const layout = event.nativeEvent.layout;
-      const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
+      const size = roundSize(layout[horizontal ? "width" : "height"]);
       refLastSize.current = size;
       updateItemSize(itemKey, size);
     }
@@ -876,9 +886,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     renderItem,
     estimatedItemSize,
     getEstimatedItemSize,
+    suggestEstimatedItemSize,
     ListEmptyComponent,
     onItemSizeChanged,
-    scrollEventThrottle,
     refScrollView,
     waitForInitialLayout = true,
     extraData,
@@ -926,14 +936,31 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const ret = index < data.length ? keyExtractor ? keyExtractor(data[index], index) : index : null;
     return `${ret}`;
   };
-  const getItemSize = (key, index, data) => {
-    var _a;
-    const sizeKnown = refState.current.sizes.get(key);
+  const getItemSize = (key, index, data, useAverageSize = false) => {
+    const state = refState.current;
+    const sizeKnown = state.sizesKnown.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = (_a = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize) != null ? _a : DEFAULT_ITEM_SIZE;
-    refState.current.sizes.set(key, size);
+    let size;
+    if (getEstimatedItemSize) {
+      size = getEstimatedItemSize(index, data);
+    }
+    if (size === void 0 && useAverageSize) {
+      const itemType = "";
+      const average = state.averageSizes[itemType];
+      if (average) {
+        size = roundSize(average.avg);
+      }
+    }
+    const sizePrevious = state.sizesKnown.get(key);
+    if (sizePrevious !== void 0) {
+      return sizePrevious;
+    }
+    if (size === void 0) {
+      size = estimatedItemSize != null ? estimatedItemSize : DEFAULT_ITEM_SIZE;
+    }
+    state.sizes.set(key, size);
     return size;
   };
   const calculateOffsetForIndex = (index = initialScrollIndex) => {
@@ -1004,6 +1031,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       numPendingInitialLayout: 0,
       queuedCalculateItemsInView: 0,
       lastBatchingAction: Date.now(),
+      averageSizes: {},
       onScroll: onScrollProp
     };
     const dataLength = dataProp.length;
@@ -1019,7 +1047,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           id: getId(0)
         };
       } else {
-        console.warn("[legend-list] maintainVisibleContentPosition was not able to find an anchor element");
+        __DEV__ && warnDevOnce(
+          "maintainVisibleContentPosition",
+          "[legend-list] maintainVisibleContentPosition was not able to find an anchor element"
+        );
       }
     }
     set$(ctx, "scrollAdjust", 0);
@@ -1181,14 +1212,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     var _a;
     const state = refState.current;
     const { data, scrollLength, positions, startBuffered, endBuffered } = state;
-    if (!data || scrollLength === 0) {
+    const numColumns = peek$(ctx, "numColumns");
+    if (!data || scrollLength === 0 || numColumns > 1) {
       return;
     }
     const numContainers = ctx.values.get("numContainers");
     let numMeasurements = 0;
     for (let i = 0; i < numContainers; i++) {
       const itemKey = peek$(ctx, `containerItemKey${i}`);
-      const isSizeKnown = refState.current.sizesKnown.get(itemKey);
+      const isSizeKnown = state.sizesKnown.get(itemKey);
       if (itemKey && !isSizeKnown) {
         const containerRef = ctx.viewRefs.get(i);
         if (containerRef) {
@@ -1313,7 +1345,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
       const top2 = newPosition || positions.get(id);
       if (top2 !== void 0) {
-        const size = getItemSize(id, i, data[i]);
+        const size = getItemSize(
+          id,
+          i,
+          data[i],
+          /*useAverageSize*/
+          true
+        );
         const bottom = top2 + size;
         if (bottom > scroll - scrollBuffer) {
           loopStart = i;
@@ -1343,7 +1381,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     };
     for (let i = Math.max(0, loopStart); i < data.length; i++) {
       const id = getId(i);
-      const size = getItemSize(id, i, data[i]);
+      const size = getItemSize(
+        id,
+        i,
+        data[i],
+        /*useAverageSize*/
+        true
+      );
       maxSizeInRow = Math.max(maxSizeInRow, size);
       if (top === void 0 || id === ((_a = state.anchorElement) == null ? void 0 : _a.id)) {
         top = getInitialTop(i);
@@ -1567,9 +1611,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
       requestAnimationFrame(() => {
         var _a;
+        state.maintainingScrollAtEnd = true;
         (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
           animated
         });
+        setTimeout(
+          () => {
+            state.maintainingScrollAtEnd = false;
+          },
+          0
+        );
       });
       return true;
     }
@@ -1597,9 +1648,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (!refState.current) {
       return;
     }
-    const { queuedInitialLayout, scrollLength, scroll } = refState.current;
+    const { queuedInitialLayout, scrollLength, scroll, maintainingScrollAtEnd } = refState.current;
     const contentSize = getContentSize(ctx);
-    if (contentSize > 0 && queuedInitialLayout) {
+    if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
       const distanceFromEnd = contentSize - scroll - scrollLength;
       const distanceFromEndAbs = Math.abs(distanceFromEnd);
       const isContentLess = contentSize < scrollLength;
@@ -1667,13 +1718,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
           state.isEndReached = false;
         }
-        checkAtTop();
-        checkAtBottom();
+        if (!didMaintainScrollAtEnd) {
+          checkAtTop();
+          checkAtBottom();
+        }
       }
     }
   };
   const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
     var _a, _b;
+    const state = refState.current;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
@@ -1681,7 +1735,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     let column = 1;
     let maxSizeInRow = 0;
     const numColumns = (_a = peek$(ctx, "numColumns")) != null ? _a : numColumnsProp;
-    if (!refState.current) {
+    if (!state) {
       return;
     }
     for (let i = 0; i < dataProp.length; i++) {
@@ -1694,36 +1748,36 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       }
       indexByKey.set(key, i);
-      if (!forgetPositions && refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
-        newPositions.set(key, refState.current.positions.get(key));
+      if (!forgetPositions && state.positions.get(key) != null && state.indexByKey.get(key) === i) {
+        newPositions.set(key, state.positions.get(key));
       }
     }
-    refState.current.indexByKey = indexByKey;
-    refState.current.positions = newPositions;
+    state.indexByKey = indexByKey;
+    state.positions = newPositions;
     if (!forgetPositions && !isFirst) {
       if (maintainVisibleContentPosition) {
-        if (refState.current.anchorElement == null || indexByKey.get(refState.current.anchorElement.id) == null) {
+        if (state.anchorElement == null || indexByKey.get(state.anchorElement.id) == null) {
           if (dataProp.length) {
             const newAnchorElement = {
               coordinate: 0,
               id: getId(0)
             };
-            refState.current.anchorElement = newAnchorElement;
-            (_b = refState.current.belowAnchorElementPositions) == null ? void 0 : _b.clear();
+            state.anchorElement = newAnchorElement;
+            (_b = state.belowAnchorElementPositions) == null ? void 0 : _b.clear();
             scrollTo(0, false);
             setTimeout(() => {
               calculateItemsInView();
             }, 0);
           } else {
-            refState.current.startBufferedId = void 0;
+            state.startBufferedId = void 0;
           }
         }
       } else {
-        if (refState.current.startBufferedId != null && newPositions.get(refState.current.startBufferedId) == null) {
+        if (state.startBufferedId != null && newPositions.get(state.startBufferedId) == null) {
           if (dataProp.length) {
-            refState.current.startBufferedId = getId(0);
+            state.startBufferedId = getId(0);
           } else {
-            refState.current.startBufferedId = void 0;
+            state.startBufferedId = void 0;
           }
           scrollTo(0, false);
           setTimeout(() => {
@@ -1750,7 +1804,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (maxSizeInRow > 0) {
       totalSize += maxSizeInRow;
     }
-    const state = refState.current;
     state.ignoreScrollFromCalcTotal = true;
     requestAnimationFrame(() => {
       state.ignoreScrollFromCalcTotal = false;
@@ -1783,6 +1836,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
+      __DEV__ && warnDevOnce(
+        "keyExtractor",
+        "Changing data without a keyExtractor can cause slow performance and resetting scroll. If your list data can change you should use a keyExtractor with a unique id for best performance and behavior."
+      );
       refState.current.sizes.clear();
       refState.current.positions.clear();
     }
@@ -1813,24 +1870,28 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (index === void 0) {
       return null;
     }
-    const useViewability2 = __DEV__ ? (configId, callback) => {
-      console.warn(
-        `[legend-list] useViewability has been moved from a render prop to a regular import: import { useViewability } from "@legendapp/list";`
+    const useViewability2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useViewability",
+        `useViewability has been moved from a render prop to a regular import: import { useViewability } from "@legendapp/list";`
       );
     } : void 0;
-    const useViewabilityAmount2 = __DEV__ ? (callback) => {
-      console.warn(
-        `[legend-list] useViewabilityAmount has been moved from a render prop to a regular import: import { useViewabilityAmount } from "@legendapp/list";`
+    const useViewabilityAmount2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useViewabilityAmount",
+        `useViewabilityAmount has been moved from a render prop to a regular import: import { useViewabilityAmount } from "@legendapp/list";`
       );
     } : void 0;
-    const useRecyclingEffect2 = __DEV__ ? (effect) => {
-      console.warn(
-        `[legend-list] useRecyclingEffect has been moved from a render prop to a regular import: import { useRecyclingEffect } from "@legendapp/list";`
+    const useRecyclingEffect2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useRecyclingEffect",
+        `useRecyclingEffect has been moved from a render prop to a regular import: import { useRecyclingEffect } from "@legendapp/list";`
       );
     } : void 0;
-    const useRecyclingState2 = __DEV__ ? (valueOrFun) => {
-      console.warn(
-        `[legend-list] useRecyclingState has been moved from a render prop to a regular import: import { useRecyclingState } from "@legendapp/list";`
+    const useRecyclingState2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useRecyclingState",
+        `useRecyclingState has been moved from a render prop to a regular import: import { useRecyclingState } from "@legendapp/list";`
       );
     } : void 0;
     const renderedItem = (_b = (_a = refState.current).renderItem) == null ? void 0 : _b.call(_a, {
@@ -1883,7 +1944,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   });
   const updateItemSize = useCallback((itemKey, size, fromFixGaps) => {
     const state = refState.current;
-    const { sizes, indexByKey, sizesKnown, data, rowHeights, startBuffered, endBuffered } = state;
+    const { sizes, indexByKey, sizesKnown, data, rowHeights, startBuffered, endBuffered, averageSizes } = state;
     if (!data) {
       return;
     }
@@ -1901,7 +1962,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         needsUpdateContainersDidLayout = true;
       }
     }
-    sizesKnown == null ? void 0 : sizesKnown.set(itemKey, size);
+    sizesKnown.set(itemKey, size);
+    const itemType = "";
+    let averages = averageSizes[itemType];
+    if (!averages) {
+      averages = averageSizes[itemType] = {
+        num: 0,
+        avg: 0
+      };
+    }
+    averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
+    averages.num++;
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
       needsCalculate = true;
@@ -1916,19 +1987,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         sizes.set(itemKey, size);
         diff = size - prevSize;
       }
-      if (__DEV__ && !estimatedItemSize && !getEstimatedItemSize) {
+      if (__DEV__ && suggestEstimatedItemSize) {
         if (state.timeoutSizeMessage) {
           clearTimeout(state.timeoutSizeMessage);
         }
         state.timeoutSizeMessage = setTimeout(() => {
           state.timeoutSizeMessage = void 0;
-          let total = 0;
-          let num = 0;
-          for (const [_, size2] of sizesKnown) {
-            num++;
-            total += size2;
-          }
-          const avg = Math.round(total / num);
+          const num = sizesKnown.size;
+          const avg = state.averageSizes[""].avg;
           console.warn(
             `[legend-list] estimatedItemSize or getEstimatedItemSize are not defined. Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
           );
@@ -1988,7 +2054,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       const isWidthZero = event.nativeEvent.layout.width === 0;
       const isHeightZero = event.nativeEvent.layout.height === 0;
       if (isWidthZero || isHeightZero) {
-        console.warn(
+        warnDevOnce(
+          "height0",
           `[legend-list] List ${isWidthZero ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
         );
       }
@@ -2155,7 +2222,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       alignItemsAtEnd,
       ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
       maintainVisibleContentPosition,
-      scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : Platform.OS === "web" ? 16 : void 0,
+      scrollEventThrottle: Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
       refreshControl: refreshControl != null ? refreshControl : onRefresh && /* @__PURE__ */ React6.createElement(
         RefreshControl,