@legendapp/list 2.0.0-beta.4 → 2.0.0-beta.5

package/index.js

@@ -915,7 +915,7 @@ function calculateOffsetForIndex(ctx, state, index) {
 }
 
 // src/utils/getItemSize.ts
-function getItemSize(state, key, index, data, useAverageSize, defaultAverageSize) {
+function getItemSize(state, key, index, data, useAverageSize) {
   var _a, _b;
   const {
     sizesKnown,
@@ -937,13 +937,9 @@ function getItemSize(state, key, index, data, useAverageSize, defaultAverageSize
     }
   }
   if (size === void 0 && useAverageSize && sizeKnown === void 0 && !scrollingTo) {
-    if (itemType === "") {
-      size = defaultAverageSize;
-    } else {
-      const averageSizeForType = (_b = averageSizes[itemType]) == null ? void 0 : _b.avg;
-      if (averageSizeForType !== void 0) {
-        size = roundSize(averageSizeForType);
-      }
+    const averageSizeForType = (_b = averageSizes[itemType]) == null ? void 0 : _b.avg;
+    if (averageSizeForType !== void 0) {
+      size = roundSize(averageSizeForType);
     }
   }
   if (size === void 0) {
@@ -1194,9 +1190,8 @@ function updateSnapToOffsets(ctx, state) {
 
 // src/core/updateAllPositions.ts
 function updateAllPositions(ctx, state, dataChanged, startIndex = 0) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f;
   const {
-    averageSizes,
     columns,
     indexByKey,
     positions,
@@ -1208,33 +1203,28 @@ function updateAllPositions(ctx, state, dataChanged, startIndex = 0) {
   const numColumns = peek$(ctx, "numColumns");
   const indexByKeyForChecking = __DEV__ ? /* @__PURE__ */ new Map() : void 0;
   const useAverageSize = enableAverages && !getEstimatedItemSize;
-  const itemType = "";
-  let averageSize = (_a = averageSizes[itemType]) == null ? void 0 : _a.avg;
-  if (averageSize !== void 0) {
-    averageSize = roundSize(averageSize);
-  }
   let currentRowTop = 0;
   let column = 1;
   let maxSizeInRow = 0;
   const hasColumns = numColumns > 1;
   if (startIndex > 0) {
     const prevIndex = startIndex - 1;
-    const prevId = (_b = idCache.get(prevIndex)) != null ? _b : getId(state, prevIndex);
-    const prevPosition = (_c = positions.get(prevId)) != null ? _c : 0;
+    const prevId = (_a = idCache.get(prevIndex)) != null ? _a : getId(state, prevIndex);
+    const prevPosition = (_b = positions.get(prevId)) != null ? _b : 0;
     if (hasColumns) {
-      const prevColumn = (_d = columns.get(prevId)) != null ? _d : 1;
+      const prevColumn = (_c = columns.get(prevId)) != null ? _c : 1;
       currentRowTop = prevPosition;
       column = prevColumn % numColumns + 1;
     } else {
-      const prevSize = (_e = sizesKnown.get(prevId)) != null ? _e : getItemSize(state, prevId, prevIndex, data[prevIndex], useAverageSize, averageSize);
+      const prevSize = (_d = sizesKnown.get(prevId)) != null ? _d : getItemSize(state, prevId, prevIndex, data[prevIndex], useAverageSize);
       currentRowTop = prevPosition + prevSize;
     }
   }
   const needsIndexByKey = dataChanged || indexByKey.size === 0;
   const dataLength = data.length;
   for (let i = startIndex; i < dataLength; i++) {
-    const id = (_f = idCache.get(i)) != null ? _f : getId(state, i);
-    const size = (_g = sizesKnown.get(id)) != null ? _g : getItemSize(state, id, i, data[i], useAverageSize, averageSize);
+    const id = (_e = idCache.get(i)) != null ? _e : getId(state, i);
+    const size = (_f = sizesKnown.get(id)) != null ? _f : getItemSize(state, id, i, data[i], useAverageSize);
     if (__DEV__ && needsIndexByKey) {
       if (indexByKeyForChecking.has(id)) {
         console.error(
@@ -2115,10 +2105,30 @@ function doInitialAllocateContainers(ctx, state) {
   var _a;
   const {
     scrollLength,
-    props: { data, getEstimatedItemSize, getItemType, scrollBuffer, numColumns, estimatedItemSize }
+    props: {
+      data,
+      getEstimatedItemSize,
+      getFixedItemSize,
+      getItemType,
+      scrollBuffer,
+      numColumns,
+      estimatedItemSize
+    }
   } = state;
-  if (scrollLength > 0 && data.length > 0 && !peek$(ctx, "numContainers")) {
-    const averageItemSize = getEstimatedItemSize ? getEstimatedItemSize(0, data[0], getItemType ? (_a = getItemType(data[0], 0)) != null ? _a : "" : "") : estimatedItemSize;
+  const hasContainers = peek$(ctx, "numContainers");
+  if (scrollLength > 0 && data.length > 0 && !hasContainers) {
+    let averageItemSize;
+    const fn = getFixedItemSize || getEstimatedItemSize;
+    if (fn) {
+      let totalSize = 0;
+      const num = Math.min(20, data.length);
+      for (let i = 0; i < num; i++) {
+        totalSize += fn(0, data[0], getItemType ? (_a = getItemType(data[0], 0)) != null ? _a : "" : "");
+      }
+      averageItemSize = totalSize / num;
+    } else {
+      averageItemSize = estimatedItemSize;
+    }
     const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize * numColumns);
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
@@ -2126,13 +2136,13 @@ function doInitialAllocateContainers(ctx, state) {
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
-    if (!IsNewArchitecture) {
+    if (!IsNewArchitecture || state.lastLayout) {
       if (state.props.initialScroll) {
         requestAnimationFrame(() => {
-          calculateItemsInView(ctx, state);
+          calculateItemsInView(ctx, state, { dataChanged: true });
         });
       } else {
-        calculateItemsInView(ctx, state);
+        calculateItemsInView(ctx, state, { dataChanged: true });
       }
     }
     return true;
@@ -2204,35 +2214,37 @@ function handleLayout(ctx, state, layout, setCanRender) {
   const otherAxisSize = layout[state.props.horizontal ? "height" : "width"];
   const needsCalculate = !state.lastLayout || scrollLength > state.scrollLength || state.lastLayout.x !== layout.x || state.lastLayout.y !== layout.y;
   state.lastLayout = layout;
-  const didChange = scrollLength !== state.scrollLength;
   const prevOtherAxisSize = state.otherAxisSize;
-  state.scrollLength = scrollLength;
-  state.otherAxisSize = otherAxisSize;
-  state.lastBatchingAction = Date.now();
-  state.scrollForNextCalculateItemsInView = void 0;
-  doInitialAllocateContainers(ctx, state);
-  if (needsCalculate) {
-    calculateItemsInView(ctx, state, { doMVCP: true });
-  }
-  if (didChange || otherAxisSize !== prevOtherAxisSize) {
-    set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
-  }
-  if (maintainScrollAtEnd === true || maintainScrollAtEnd.onLayout) {
-    doMaintainScrollAtEnd(ctx, state, false);
-  }
-  updateAlignItemsPaddingTop(ctx, state);
-  checkAtBottom(ctx, state);
-  checkAtTop(state);
-  if (state) {
-    state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
-  }
-  if (__DEV__ && scrollLength === 0) {
-    warnDevOnce(
-      "height0",
-      `List ${state.props.horizontal ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
-    );
+  const didChange = scrollLength !== state.scrollLength || otherAxisSize !== prevOtherAxisSize;
+  if (didChange) {
+    state.scrollLength = scrollLength;
+    state.otherAxisSize = otherAxisSize;
+    state.lastBatchingAction = Date.now();
+    state.scrollForNextCalculateItemsInView = void 0;
+    doInitialAllocateContainers(ctx, state);
+    if (needsCalculate) {
+      calculateItemsInView(ctx, state, { doMVCP: true });
+    }
+    if (didChange || otherAxisSize !== prevOtherAxisSize) {
+      set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
+    }
+    if (maintainScrollAtEnd === true || maintainScrollAtEnd.onLayout) {
+      doMaintainScrollAtEnd(ctx, state, false);
+    }
+    updateAlignItemsPaddingTop(ctx, state);
+    checkAtBottom(ctx, state);
+    checkAtTop(state);
+    if (state) {
+      state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
+    }
+    if (__DEV__ && scrollLength === 0) {
+      warnDevOnce(
+        "height0",
+        `List ${state.props.horizontal ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
+      );
+    }
+    setCanRender(true);
   }
-  setCanRender(true);
 }
 
 // src/core/onScroll.ts
@@ -2425,7 +2437,7 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   const prevSize = getItemSize(state, itemKey, index, data);
   const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
   sizesKnown.set(itemKey, size);
-  if (!getEstimatedItemSize && !getFixedItemSize) {
+  if (!getEstimatedItemSize && !getFixedItemSize && size > 0) {
     const itemType = getItemType ? (_a = getItemType(data[index], index)) != null ? _a : "" : "";
     let averages = averageSizes[itemType];
     if (!averages) {
@@ -2830,7 +2842,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   }, [snapToIndices]);
   React3.useLayoutEffect(() => {
-    const didAllocateContainers = doInitialAllocateContainersCallback();
+    const didAllocateContainers = dataProp.length > 0 && doInitialAllocateContainersCallback();
     if (!didAllocateContainers) {
       checkResetContainers(
         /*isFirst*/

package/index.mjs

@@ -894,7 +894,7 @@ function calculateOffsetForIndex(ctx, state, index) {
 }
 
 // src/utils/getItemSize.ts
-function getItemSize(state, key, index, data, useAverageSize, defaultAverageSize) {
+function getItemSize(state, key, index, data, useAverageSize) {
   var _a, _b;
   const {
     sizesKnown,
@@ -916,13 +916,9 @@ function getItemSize(state, key, index, data, useAverageSize, defaultAverageSize
     }
   }
   if (size === void 0 && useAverageSize && sizeKnown === void 0 && !scrollingTo) {
-    if (itemType === "") {
-      size = defaultAverageSize;
-    } else {
-      const averageSizeForType = (_b = averageSizes[itemType]) == null ? void 0 : _b.avg;
-      if (averageSizeForType !== void 0) {
-        size = roundSize(averageSizeForType);
-      }
+    const averageSizeForType = (_b = averageSizes[itemType]) == null ? void 0 : _b.avg;
+    if (averageSizeForType !== void 0) {
+      size = roundSize(averageSizeForType);
     }
   }
   if (size === void 0) {
@@ -1173,9 +1169,8 @@ function updateSnapToOffsets(ctx, state) {
 
 // src/core/updateAllPositions.ts
 function updateAllPositions(ctx, state, dataChanged, startIndex = 0) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f;
   const {
-    averageSizes,
     columns,
     indexByKey,
     positions,
@@ -1187,33 +1182,28 @@ function updateAllPositions(ctx, state, dataChanged, startIndex = 0) {
   const numColumns = peek$(ctx, "numColumns");
   const indexByKeyForChecking = __DEV__ ? /* @__PURE__ */ new Map() : void 0;
   const useAverageSize = enableAverages && !getEstimatedItemSize;
-  const itemType = "";
-  let averageSize = (_a = averageSizes[itemType]) == null ? void 0 : _a.avg;
-  if (averageSize !== void 0) {
-    averageSize = roundSize(averageSize);
-  }
   let currentRowTop = 0;
   let column = 1;
   let maxSizeInRow = 0;
   const hasColumns = numColumns > 1;
   if (startIndex > 0) {
     const prevIndex = startIndex - 1;
-    const prevId = (_b = idCache.get(prevIndex)) != null ? _b : getId(state, prevIndex);
-    const prevPosition = (_c = positions.get(prevId)) != null ? _c : 0;
+    const prevId = (_a = idCache.get(prevIndex)) != null ? _a : getId(state, prevIndex);
+    const prevPosition = (_b = positions.get(prevId)) != null ? _b : 0;
     if (hasColumns) {
-      const prevColumn = (_d = columns.get(prevId)) != null ? _d : 1;
+      const prevColumn = (_c = columns.get(prevId)) != null ? _c : 1;
       currentRowTop = prevPosition;
       column = prevColumn % numColumns + 1;
     } else {
-      const prevSize = (_e = sizesKnown.get(prevId)) != null ? _e : getItemSize(state, prevId, prevIndex, data[prevIndex], useAverageSize, averageSize);
+      const prevSize = (_d = sizesKnown.get(prevId)) != null ? _d : getItemSize(state, prevId, prevIndex, data[prevIndex], useAverageSize);
       currentRowTop = prevPosition + prevSize;
     }
   }
   const needsIndexByKey = dataChanged || indexByKey.size === 0;
   const dataLength = data.length;
   for (let i = startIndex; i < dataLength; i++) {
-    const id = (_f = idCache.get(i)) != null ? _f : getId(state, i);
-    const size = (_g = sizesKnown.get(id)) != null ? _g : getItemSize(state, id, i, data[i], useAverageSize, averageSize);
+    const id = (_e = idCache.get(i)) != null ? _e : getId(state, i);
+    const size = (_f = sizesKnown.get(id)) != null ? _f : getItemSize(state, id, i, data[i], useAverageSize);
     if (__DEV__ && needsIndexByKey) {
       if (indexByKeyForChecking.has(id)) {
         console.error(
@@ -2094,10 +2084,30 @@ function doInitialAllocateContainers(ctx, state) {
   var _a;
   const {
     scrollLength,
-    props: { data, getEstimatedItemSize, getItemType, scrollBuffer, numColumns, estimatedItemSize }
+    props: {
+      data,
+      getEstimatedItemSize,
+      getFixedItemSize,
+      getItemType,
+      scrollBuffer,
+      numColumns,
+      estimatedItemSize
+    }
   } = state;
-  if (scrollLength > 0 && data.length > 0 && !peek$(ctx, "numContainers")) {
-    const averageItemSize = getEstimatedItemSize ? getEstimatedItemSize(0, data[0], getItemType ? (_a = getItemType(data[0], 0)) != null ? _a : "" : "") : estimatedItemSize;
+  const hasContainers = peek$(ctx, "numContainers");
+  if (scrollLength > 0 && data.length > 0 && !hasContainers) {
+    let averageItemSize;
+    const fn = getFixedItemSize || getEstimatedItemSize;
+    if (fn) {
+      let totalSize = 0;
+      const num = Math.min(20, data.length);
+      for (let i = 0; i < num; i++) {
+        totalSize += fn(0, data[0], getItemType ? (_a = getItemType(data[0], 0)) != null ? _a : "" : "");
+      }
+      averageItemSize = totalSize / num;
+    } else {
+      averageItemSize = estimatedItemSize;
+    }
     const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize * numColumns);
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
@@ -2105,13 +2115,13 @@ function doInitialAllocateContainers(ctx, state) {
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
-    if (!IsNewArchitecture) {
+    if (!IsNewArchitecture || state.lastLayout) {
       if (state.props.initialScroll) {
         requestAnimationFrame(() => {
-          calculateItemsInView(ctx, state);
+          calculateItemsInView(ctx, state, { dataChanged: true });
         });
       } else {
-        calculateItemsInView(ctx, state);
+        calculateItemsInView(ctx, state, { dataChanged: true });
       }
     }
     return true;
@@ -2183,35 +2193,37 @@ function handleLayout(ctx, state, layout, setCanRender) {
   const otherAxisSize = layout[state.props.horizontal ? "height" : "width"];
   const needsCalculate = !state.lastLayout || scrollLength > state.scrollLength || state.lastLayout.x !== layout.x || state.lastLayout.y !== layout.y;
   state.lastLayout = layout;
-  const didChange = scrollLength !== state.scrollLength;
   const prevOtherAxisSize = state.otherAxisSize;
-  state.scrollLength = scrollLength;
-  state.otherAxisSize = otherAxisSize;
-  state.lastBatchingAction = Date.now();
-  state.scrollForNextCalculateItemsInView = void 0;
-  doInitialAllocateContainers(ctx, state);
-  if (needsCalculate) {
-    calculateItemsInView(ctx, state, { doMVCP: true });
-  }
-  if (didChange || otherAxisSize !== prevOtherAxisSize) {
-    set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
-  }
-  if (maintainScrollAtEnd === true || maintainScrollAtEnd.onLayout) {
-    doMaintainScrollAtEnd(ctx, state, false);
-  }
-  updateAlignItemsPaddingTop(ctx, state);
-  checkAtBottom(ctx, state);
-  checkAtTop(state);
-  if (state) {
-    state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
-  }
-  if (__DEV__ && scrollLength === 0) {
-    warnDevOnce(
-      "height0",
-      `List ${state.props.horizontal ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
-    );
+  const didChange = scrollLength !== state.scrollLength || otherAxisSize !== prevOtherAxisSize;
+  if (didChange) {
+    state.scrollLength = scrollLength;
+    state.otherAxisSize = otherAxisSize;
+    state.lastBatchingAction = Date.now();
+    state.scrollForNextCalculateItemsInView = void 0;
+    doInitialAllocateContainers(ctx, state);
+    if (needsCalculate) {
+      calculateItemsInView(ctx, state, { doMVCP: true });
+    }
+    if (didChange || otherAxisSize !== prevOtherAxisSize) {
+      set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
+    }
+    if (maintainScrollAtEnd === true || maintainScrollAtEnd.onLayout) {
+      doMaintainScrollAtEnd(ctx, state, false);
+    }
+    updateAlignItemsPaddingTop(ctx, state);
+    checkAtBottom(ctx, state);
+    checkAtTop(state);
+    if (state) {
+      state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
+    }
+    if (__DEV__ && scrollLength === 0) {
+      warnDevOnce(
+        "height0",
+        `List ${state.props.horizontal ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
+      );
+    }
+    setCanRender(true);
   }
-  setCanRender(true);
 }
 
 // src/core/onScroll.ts
@@ -2404,7 +2416,7 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   const prevSize = getItemSize(state, itemKey, index, data);
   const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
   sizesKnown.set(itemKey, size);
-  if (!getEstimatedItemSize && !getFixedItemSize) {
+  if (!getEstimatedItemSize && !getFixedItemSize && size > 0) {
     const itemType = getItemType ? (_a = getItemType(data[index], index)) != null ? _a : "" : "";
     let averages = averageSizes[itemType];
     if (!averages) {
@@ -2809,7 +2821,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   }, [snapToIndices]);
   useLayoutEffect(() => {
-    const didAllocateContainers = doInitialAllocateContainersCallback();
+    const didAllocateContainers = dataProp.length > 0 && doInitialAllocateContainersCallback();
     if (!didAllocateContainers) {
       checkResetContainers(
         /*isFirst*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,