@legendapp/list 1.0.14 → 1.0.15

package/index.mjs

@@ -1,5 +1,5 @@
 import * as React2 from 'react';
-import React2__default, { useReducer, useEffect, createContext, useMemo, useRef, useCallback, useImperativeHandle, useContext, useState, forwardRef, memo, useLayoutEffect } from 'react';
+import React2__default, { useReducer, useEffect, createContext, useMemo, useRef, useCallback, useLayoutEffect, useImperativeHandle, useContext, useState, forwardRef, memo } from 'react';
 import { View, Text, Platform, Animated, ScrollView, StyleSheet, Dimensions, RefreshControl } from 'react-native';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
@@ -99,6 +99,12 @@ function useArr$(signalNames) {
   const value = useSyncExternalStore(subscribe, get);
   return value;
 }
+function useSelector$(signalName, selector) {
+  const ctx = React2.useContext(ContextState);
+  const { subscribe, get } = React2.useMemo(() => createSelectorFunctionsArr(ctx, [signalName]), [ctx, signalName]);
+  const value = useSyncExternalStore(subscribe, () => selector(get()[0]));
+  return value;
+}
 
 // src/DebugView.tsx
 var DebugRow = ({ children }) => {
@@ -287,6 +293,11 @@ function useRecyclingState(valueOrFun) {
   );
   return [refState.current.value, setState];
 }
+function useIsLastItem() {
+  const { itemKey } = useContext(ContextContainer);
+  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
+  return isLast;
+}
 var LeanViewComponent = React2.forwardRef((props, ref) => {
   return React2.createElement("RCTView", { ...props, ref });
 });
@@ -345,12 +356,12 @@ var Container = ({
     if (horizontal) {
       paddingStyles = {
         paddingRight: !lastItemKeys.includes(itemKey) ? columnGap || gap || void 0 : void 0,
-        paddingVertical: (rowGap || gap || 0) / 2
+        paddingVertical: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
       };
     } else {
       paddingStyles = {
         paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
-        paddingHorizontal: (columnGap || gap || 0) / 2
+        paddingHorizontal: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
       };
     }
   }
@@ -358,7 +369,6 @@ var Container = ({
     flexDirection: ItemSeparatorComponent ? "row" : void 0,
     position: "absolute",
     top: otherAxisPos,
-    bottom: numColumns > 1 ? null : 0,
     height: otherAxisSize,
     left: position.relativeCoordinate,
     ...paddingStyles || {}
@@ -381,17 +391,17 @@ var Container = ({
   const onLayout = (event) => {
     var _a, _b;
     if (!isNullOrUndefined(itemKey)) {
-      const layout = event.nativeEvent.layout;
-      let size = roundSize(layout[horizontal ? "width" : "height"]);
+      let layout = event.nativeEvent.layout;
+      const size = layout[horizontal ? "width" : "height"];
       const doUpdate = () => {
-        refLastSize.current = size;
-        updateItemSize(itemKey, size);
+        refLastSize.current = { width: layout.width, height: layout.height };
+        updateItemSize(itemKey, layout);
       };
       if (IsNewArchitecture || size > 0) {
         doUpdate();
       } else {
         (_b = (_a = ref.current) == null ? void 0 : _a.measure) == null ? void 0 : _b.call(_a, (x, y, width, height) => {
-          size = roundSize(horizontal ? width : height);
+          layout = { width, height };
           doUpdate();
         });
       }
@@ -405,7 +415,7 @@ var Container = ({
         if (measured) {
           const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
           if (size) {
-            updateItemSize(itemKey, size);
+            updateItemSize(itemKey, measured);
           }
         }
       }
@@ -430,7 +440,7 @@ var Container = ({
   }, [id, itemKey, index, data]);
   const contentFragment = /* @__PURE__ */ React2__default.createElement(React2__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React2__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React2__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
-    const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
+    const anchorStyle = horizontal ? position.type === "top" ? { position: "absolute", left: 0, top: 0, bottom: 0, flexDirection: "row", alignItems: "stretch" } : { position: "absolute", right: 0, top: 0, bottom: 0, flexDirection: "row", alignItems: "stretch" } : position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
     if (__DEV__ && ENABLE_DEVMODE) {
       anchorStyle.borderColor = position.type === "top" ? "red" : "blue";
       anchorStyle.borderWidth = 1;
@@ -479,7 +489,7 @@ var Containers = typedMemo(function Containers2({
 }) {
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
-  const [numContainers] = useArr$(["numContainersPooled"]);
+  const [numContainers, numColumns] = useArr$(["numContainersPooled", "numColumns"]);
   const animSize = useValue$(
     "totalSizeWithScrollAdjust",
     void 0,
@@ -487,6 +497,12 @@ var Containers = typedMemo(function Containers2({
     true
   );
   const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
+  const otherAxisSize = useValue$(
+    "otherAxisSize",
+    void 0,
+    /*useMicrotask*/
+    true
+  );
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
@@ -504,8 +520,8 @@ var Containers = typedMemo(function Containers2({
       )
     );
   }
-  const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
-  if (columnWrapperStyle) {
+  const style = horizontal ? { width: animSize, opacity: animOpacity, minHeight: otherAxisSize } : { height: animSize, opacity: animOpacity, minWidth: otherAxisSize };
+  if (columnWrapperStyle && numColumns > 1) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     if (horizontal) {
       const my = (rowGap || gap || 0) / 2;
@@ -1005,6 +1021,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onViewableItemsChanged,
     ...rest
   } = props;
+  const refLoadStartTime = useRef(Date.now());
   const callbacks = useRef({
     onStartReached: rest.onStartReached,
     onEndReached: rest.onEndReached
@@ -1209,6 +1226,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const setDidLayout = () => {
     refState.current.queuedInitialLayout = true;
     checkAtBottom();
+    const setIt = () => {
+      set$(ctx, "containersDidLayout", true);
+      if (props.onLoad) {
+        props.onLoad({ elapsedTimeInMs: Date.now() - refLoadStartTime.current });
+      }
+    };
     if (initialScrollIndex) {
       queueMicrotask(() => {
         scrollToIndex({ index: initialScrollIndex, animated: false });
@@ -1216,13 +1239,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           if (!IsNewArchitecture) {
             scrollToIndex({ index: initialScrollIndex, animated: false });
           }
-          set$(ctx, "containersDidLayout", true);
+          setIt();
         });
       });
     } else {
-      queueMicrotask(() => {
-        set$(ctx, "containersDidLayout", true);
-      });
+      queueMicrotask(setIt);
     }
   };
   const addTotalSize = useCallback((key, add, totalSizeBelowAnchor) => {
@@ -1354,10 +1375,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           });
           numMeasurements++;
           if (measured) {
-            const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
             updateItemSize(
               itemKey,
-              size,
+              measured,
               /*fromFixGaps*/
               true
             );
@@ -1455,13 +1475,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         scrollBufferBottom = scrollBuffer * 0.1;
       }
     }
+    const scrollTopBuffered = scroll - scrollBufferTop;
+    const scrollBottom = scroll + scrollLength;
+    const scrollBottomBuffered = scrollBottom + scrollBufferBottom;
     if (state.scrollForNextCalculateItemsInView) {
       const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
-      if (scroll > top2 && scroll < bottom) {
+      if (scrollTopBuffered > top2 && scrollBottomBuffered < bottom) {
         return;
       }
     }
-    const scrollBottom = scroll + scrollLength;
     let startNoBuffer = null;
     let startBuffered = null;
     let startBufferedId = null;
@@ -1541,7 +1563,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (startNoBuffer === null && top + size > scroll) {
           startNoBuffer = i;
         }
-        if (startBuffered === null && top + size > scroll - scrollBufferTop) {
+        if (startBuffered === null && top + size > scrollTopBuffered) {
           startBuffered = i;
           startBufferedId = id;
           nextTop = top;
@@ -1550,7 +1572,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           if (top <= scrollBottom) {
             endNoBuffer = i;
           }
-          if (top <= scrollBottom + scrollBufferBottom) {
+          if (top <= scrollBottomBuffered) {
             endBuffered = i;
             nextBottom = top + maxSizeInRow - scrollLength;
           } else {
@@ -1839,8 +1861,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         for (let i = 0; i < numContainers; i++) {
           const itemKey = peek$(ctx, `containerItemKey${i}`);
           if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
-            set$(ctx, `containerItemKey${i}`, null);
-            set$(ctx, `containerItemData${i}`, null);
+            set$(ctx, `containerItemKey${i}`, void 0);
+            set$(ctx, `containerItemData${i}`, void 0);
             set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${i}`, -1);
           }
@@ -2121,120 +2143,130 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   useInit(() => {
     doInitialAllocateContainers();
   });
-  const updateItemSize = useCallback((itemKey, size, fromFixGaps) => {
-    const state = refState.current;
-    const {
-      sizes,
-      indexByKey,
-      sizesKnown,
-      data,
-      rowHeights,
-      startBuffered,
-      endBuffered,
-      averageSizes,
-      queuedInitialLayout
-    } = state;
-    if (!data) {
-      return;
-    }
-    const index = indexByKey.get(itemKey);
-    const numColumns = peek$(ctx, "numColumns");
-    state.scrollForNextCalculateItemsInView = void 0;
-    state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
-    const prevSize = getItemSize(itemKey, index, data);
-    const prevSizeKnown = sizesKnown.get(itemKey);
-    let needsCalculate = false;
-    let needsUpdateContainersDidLayout = false;
-    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.1) {
-      let diff;
-      needsCalculate = true;
-      if (numColumns > 1) {
-        const rowNumber = Math.floor(index / numColumnsProp);
-        const prevSizeInRow = getRowHeight(rowNumber);
-        sizes.set(itemKey, size);
-        rowHeights.delete(rowNumber);
-        const sizeInRow = getRowHeight(rowNumber);
-        diff = sizeInRow - prevSizeInRow;
-      } else {
-        sizes.set(itemKey, size);
-        diff = size - prevSize;
+  const updateItemSize = useCallback(
+    (itemKey, sizeObj, fromFixGaps) => {
+      const state = refState.current;
+      const {
+        sizes,
+        indexByKey,
+        sizesKnown,
+        data,
+        rowHeights,
+        startBuffered,
+        endBuffered,
+        averageSizes,
+        queuedInitialLayout
+      } = state;
+      if (!data) {
+        return;
+      }
+      const index = indexByKey.get(itemKey);
+      const numColumns = peek$(ctx, "numColumns");
+      state.scrollForNextCalculateItemsInView = void 0;
+      state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
+      const prevSize = getItemSize(itemKey, index, data);
+      const prevSizeKnown = sizesKnown.get(itemKey);
+      let needsCalculate = false;
+      let needsUpdateContainersDidLayout = false;
+      const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
+      sizesKnown.set(itemKey, size);
+      const itemType = "";
+      let averages = averageSizes[itemType];
+      if (!averages) {
+        averages = averageSizes[itemType] = {
+          num: 0,
+          avg: 0
+        };
       }
-      if (__DEV__ && suggestEstimatedItemSize) {
-        if (state.timeoutSizeMessage) {
-          clearTimeout(state.timeoutSizeMessage);
+      averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
+      averages.num++;
+      if (!prevSize || Math.abs(prevSize - size) > 0.1) {
+        let diff;
+        needsCalculate = true;
+        if (numColumns > 1) {
+          const rowNumber = Math.floor(index / numColumnsProp);
+          const prevSizeInRow = getRowHeight(rowNumber);
+          sizes.set(itemKey, size);
+          rowHeights.delete(rowNumber);
+          const sizeInRow = getRowHeight(rowNumber);
+          diff = sizeInRow - prevSizeInRow;
+        } else {
+          sizes.set(itemKey, size);
+          diff = size - prevSize;
+        }
+        if (__DEV__ && suggestEstimatedItemSize) {
+          if (state.timeoutSizeMessage) {
+            clearTimeout(state.timeoutSizeMessage);
+          }
+          state.timeoutSizeMessage = setTimeout(() => {
+            state.timeoutSizeMessage = void 0;
+            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}.`
+            );
+          }, 1e3);
+        }
+        state.scrollForNextCalculateItemsInView = void 0;
+        addTotalSize(itemKey, diff, 0);
+        if (prevSizeKnown !== void 0 && Math.abs(prevSizeKnown - size) > 5) {
+          doMaintainScrollAtEnd(false);
+        }
+        if (onItemSizeChanged) {
+          onItemSizeChanged({
+            size,
+            previous: prevSize,
+            index,
+            itemKey,
+            itemData: data[index]
+          });
         }
-        state.timeoutSizeMessage = setTimeout(() => {
-          state.timeoutSizeMessage = void 0;
-          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}.`
-          );
-        }, 1e3);
       }
-      state.scrollForNextCalculateItemsInView = void 0;
-      addTotalSize(itemKey, diff, 0);
-      if (prevSizeKnown !== void 0 && Math.abs(prevSizeKnown - size) > 5) {
-        doMaintainScrollAtEnd(false);
-      }
-      if (onItemSizeChanged) {
-        onItemSizeChanged({
-          size,
-          previous: prevSize,
-          index,
-          itemKey,
-          itemData: data[index]
-        });
+      if (!queuedInitialLayout && checkAllSizesKnown()) {
+        needsUpdateContainersDidLayout = true;
       }
-    }
-    if (!queuedInitialLayout && checkAllSizesKnown()) {
-      needsUpdateContainersDidLayout = true;
-    }
-    let isInView = index >= startBuffered && index <= endBuffered;
-    if (!isInView) {
-      const numContainers = ctx.values.get("numContainers");
-      for (let i = 0; i < numContainers; i++) {
-        if (peek$(ctx, `containerItemKey${i}`) === itemKey) {
-          isInView = true;
-          break;
+      let isInView = index >= startBuffered && index <= endBuffered;
+      if (!isInView) {
+        const numContainers = ctx.values.get("numContainers");
+        for (let i = 0; i < numContainers; i++) {
+          if (peek$(ctx, `containerItemKey${i}`) === itemKey) {
+            isInView = true;
+            break;
+          }
         }
       }
-    }
-    if (needsUpdateContainersDidLayout || !fromFixGaps && needsCalculate && (isInView || !queuedInitialLayout)) {
-      const scrollVelocity = state.scrollVelocity;
-      let didCalculate = false;
-      if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1 || state.scrollingToOffset !== void 0) && (!waitForInitialLayout || needsUpdateContainersDidLayout || queuedInitialLayout)) {
-        if (Date.now() - state.lastBatchingAction < 500) {
-          if (!state.queuedCalculateItemsInView) {
-            state.queuedCalculateItemsInView = requestAnimationFrame(() => {
-              state.queuedCalculateItemsInView = void 0;
-              calculateItemsInView();
-            });
+      if (needsUpdateContainersDidLayout || !fromFixGaps && needsCalculate && (isInView || !queuedInitialLayout)) {
+        const scrollVelocity = state.scrollVelocity;
+        let didCalculate = false;
+        if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1 || state.scrollingToOffset !== void 0) && (!waitForInitialLayout || needsUpdateContainersDidLayout || queuedInitialLayout)) {
+          if (Date.now() - state.lastBatchingAction < 500) {
+            if (!state.queuedCalculateItemsInView) {
+              state.queuedCalculateItemsInView = requestAnimationFrame(() => {
+                state.queuedCalculateItemsInView = void 0;
+                calculateItemsInView();
+              });
+            }
+          } else {
+            calculateItemsInView();
+            didCalculate = true;
           }
-        } else {
-          calculateItemsInView();
-          didCalculate = true;
+        }
+        if (!didCalculate && !needsUpdateContainersDidLayout && IsNewArchitecture) {
+          fixGaps();
         }
       }
-      if (!didCalculate && !needsUpdateContainersDidLayout && IsNewArchitecture) {
-        fixGaps();
+      if (state.needsOtherAxisSize) {
+        const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
+        const cur = peek$(ctx, "otherAxisSize");
+        if (!cur || otherAxisSize > cur) {
+          set$(ctx, "otherAxisSize", otherAxisSize);
+        }
       }
-    }
-  }, []);
-  const onLayout = useCallback((event) => {
+    },
+    []
+  );
+  const handleLayout = useCallback((scrollLength) => {
     const state = refState.current;
-    const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     const didChange = scrollLength !== state.scrollLength;
     state.scrollLength = scrollLength;
     state.lastBatchingAction = Date.now();
@@ -2247,20 +2279,36 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (didChange) {
       calculateItemsInView();
     }
-    if (__DEV__) {
-      const isWidthZero = event.nativeEvent.layout.width === 0;
-      const isHeightZero = event.nativeEvent.layout.height === 0;
-      if (isWidthZero || isHeightZero) {
-        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.`
-        );
-      }
+  }, []);
+  const onLayout = useCallback((event) => {
+    const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
+    handleLayout(scrollLength);
+    const otherAxisSize = event.nativeEvent.layout[horizontal ? "height" : "width"];
+    if (refState.current) {
+      refState.current.needsOtherAxisSize = otherAxisSize - (stylePaddingTopState || 0) < 10;
+    }
+    if (__DEV__ && scrollLength === 0) {
+      warnDevOnce(
+        "height0",
+        `List ${horizontal ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
+      );
     }
     if (onLayoutProp) {
       onLayoutProp(event);
     }
   }, []);
+  if (IsNewArchitecture) {
+    useLayoutEffect(() => {
+      var _a, _b;
+      const measured = (_b = (_a = refScroller.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
+      if (measured) {
+        const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
+        if (size) {
+          handleLayout(size);
+        }
+      }
+    }, []);
+  }
   const handleScroll = useCallback(
     (event) => {
       var _a, _b, _c, _d;
@@ -2458,4 +2506,4 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React2.createElement(DebugView, { state: refState.current }));
 });
 
-export { LegendList, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
+export { LegendList, useIsLastItem, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };