@legendapp/list 0.4.5 → 0.4.6

package/index.js

@@ -86,7 +86,7 @@ function $View({ $key, $style, ...rest }) {
   return /* @__PURE__ */ React6__namespace.createElement(LeanView, { style, ...rest });
 }
 function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
-  const itemIndex = use$(`containerIndex${id}`);
+  const itemIndex = use$(`containerItemIndex${id}`);
   const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
   if (itemIndex < 0) {
     return null;
@@ -133,7 +133,7 @@ var Container = ({
       $key: `containerPosition${id}`,
       $style: createStyle,
       onLayout: (event) => {
-        const index = peek$(ctx, `containerIndex${id}`);
+        const index = peek$(ctx, `containerItemIndex${id}`);
         if (index >= 0) {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
           onLayout(index, size);
@@ -413,7 +413,7 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
 function findContainerId(state, ctx, index) {
   const numContainers = peek$(ctx, "numContainers");
   for (let i = 0; i < numContainers; i++) {
-    const itemIndex = peek$(ctx, `containerIndex${i}`);
+    const itemIndex = peek$(ctx, `containerItemIndex${i}`);
     if (itemIndex === index) {
       return i;
     }
@@ -548,14 +548,14 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
       refState.current.animFrameTotalSize = requestAnimationFrame(doAdd);
     }
   }, []);
-  const getRenderedItem = React6.useCallback((index, containerIndex) => {
+  const getRenderedItem = React6.useCallback((index, containerId) => {
     var _a2, _b2, _c;
     const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
     if (!data2) {
       return null;
     }
     const useViewability = (configId, callback) => {
-      const key = containerIndex + configId;
+      const key = containerId + configId;
       useInit(() => {
         const value = ctx.mapViewabilityValues.get(key);
         if (value) {
@@ -572,15 +572,15 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     };
     const useViewabilityAmount = (callback) => {
       useInit(() => {
-        const value = ctx.mapViewabilityAmountValues.get(containerIndex);
+        const value = ctx.mapViewabilityAmountValues.get(containerId);
         if (value) {
           callback(value);
         }
       });
-      ctx.mapViewabilityAmountCallbacks.set(containerIndex, callback);
+      ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
       React6.useEffect(
         () => () => {
-          ctx.mapViewabilityAmountCallbacks.delete(containerIndex);
+          ctx.mapViewabilityAmountCallbacks.delete(containerId);
         },
         []
       );
@@ -590,7 +590,7 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
         const state = refState.current;
         let prevIndex = index;
         let prevItem = state.data[index];
-        const signal = `containerIndex${containerIndex}`;
+        const signal = `containerItemIndex${containerId}`;
         listen$(ctx, signal, () => {
           const data3 = state.data;
           if (data3) {
@@ -642,10 +642,7 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
         data: data2,
         scrollLength,
         scroll: scrollState,
-        startNoBuffer: startNoBufferState,
-        startBuffered: startBufferedState,
-        endNoBuffer: endNoBufferState,
-        endBuffered: endBufferedState
+        startBuffered: startBufferedState
       } = refState.current;
       if (!data2) {
         return;
@@ -709,20 +706,21 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
         let numContainers = prevNumContainers;
         for (let i = startBuffered; i <= endBuffered; i++) {
           let isContained = false;
+          const id = getId(i);
           for (let j = 0; j < numContainers; j++) {
-            const index = peek$(ctx, `containerIndex${j}`);
-            if (index === i) {
+            const index = peek$(ctx, `containerItemIndex${j}`);
+            const key = peek$(ctx, `containerItemKey${j}`);
+            if (index === i && key === id) {
               isContained = true;
               break;
             }
           }
           if (!isContained) {
-            const id = getId(i);
             const top2 = positions.get(id) || 0;
             let furthestIndex = -1;
             let furthestDistance = 0;
             for (let u = 0; u < numContainers; u++) {
-              const index = peek$(ctx, `containerIndex${u}`);
+              const index = peek$(ctx, `containerItemIndex${u}`);
               if (index < 0) {
                 furthestIndex = u;
                 break;
@@ -737,7 +735,8 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
               }
             }
             if (furthestIndex >= 0) {
-              set$(ctx, `containerIndex${furthestIndex}`, i);
+              set$(ctx, `containerItemIndex${furthestIndex}`, i);
+              set$(ctx, `containerItemKey${furthestIndex}`, id);
             } else {
               if (__DEV__) {
                 console.warn(
@@ -747,7 +746,8 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
               }
               const containerId = numContainers;
               numContainers++;
-              set$(ctx, `containerIndex${containerId}`, i);
+              set$(ctx, `containerItemIndex${containerId}`, i);
+              set$(ctx, `containerItemKey${containerId}`, id);
               set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             }
           }
@@ -756,11 +756,12 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
           set$(ctx, "numContainers", numContainers);
         }
         for (let i = 0; i < numContainers; i++) {
-          const itemIndex = peek$(ctx, `containerIndex${i}`);
+          const itemIndex = peek$(ctx, `containerItemIndex${i}`);
+          const itemKey = peek$(ctx, `containerItemKey${i}`);
           const item = data2[itemIndex];
           if (item) {
             const id = getId(itemIndex);
-            if (itemIndex < startBuffered || itemIndex > endBuffered) {
+            if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
               set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
             } else {
               const pos = (_c = positions.get(id)) != null ? _c : -1;
@@ -786,22 +787,22 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     });
   }, []);
   useInit(() => {
-    var _a2, _b2;
+    var _a2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
     const averageItemSize = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0]);
     const numContainers = initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) + 4;
     for (let i = 0; i < numContainers; i++) {
-      set$(ctx, `containerIndex${i}`, -1);
+      set$(ctx, `containerItemIndex${i}`, -1);
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
     }
     set$(ctx, "numContainers", numContainers);
     calculateItemsInView();
-    const sizes = (_a2 = refState.current) == null ? void 0 : _a2.sizes;
+    const sizes = refState.current.sizes;
     let totalSize = 0;
     for (let i = 0; i < data.length; i++) {
       const id = getId(i);
-      totalSize += (_b2 = sizes.get(id)) != null ? _b2 : getItemSize(i, data[i]);
+      totalSize += (_a2 = sizes.get(id)) != null ? _a2 : getItemSize(i, data[i]);
     }
     addTotalSize(totalSize);
   });
@@ -829,9 +830,9 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     const numContainers = peek$(ctx, "numContainers");
     if (data.length < numContainers) {
       for (let i = 0; i < numContainers; i++) {
-        const itemIndex = peek$(ctx, `containerIndex${i}`);
+        const itemIndex = peek$(ctx, `containerItemIndex${i}`);
         if (itemIndex >= data.length) {
-          set$(ctx, `containerIndex${i}`, -1);
+          set$(ctx, `containerItemIndex${i}`, -1);
         }
       }
     }
@@ -839,19 +840,19 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     checkAtBottom();
   }, [data]);
   const updateItemSize = React6.useCallback((index, size) => {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c;
     const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
     if (!data2) {
       return;
     }
-    const sizes = (_b2 = refState.current) == null ? void 0 : _b2.sizes;
+    const sizes = refState.current.sizes;
     const id = getId(index);
-    const wasInFirstRender = (_c = refState.current) == null ? void 0 : _c.idsInFirstRender.has(id);
+    const wasInFirstRender = (_b2 = refState.current) == null ? void 0 : _b2.idsInFirstRender.has(id);
     const prevSize = sizes.get(id) || (wasInFirstRender ? getItemSize(index, data2[index]) : 0);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       sizes.set(id, size);
       addTotalSize(size - prevSize);
-      if (((_d = refState.current) == null ? void 0 : _d.isAtBottom) && maintainScrollAtEnd) {
+      if (((_c = refState.current) == null ? void 0 : _c.isAtBottom) && maintainScrollAtEnd) {
         requestAnimationFrame(() => {
           var _a3;
           (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
@@ -878,6 +879,15 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
   const onLayout = React6.useCallback((event) => {
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     refState.current.scrollLength = scrollLength;
+    if (__DEV__) {
+      const isWidthZero = event.nativeEvent.layout.width === 0;
+      const isHeightZero = event.nativeEvent.layout.height === 0;
+      if (isWidthZero || isHeightZero) {
+        console.warn(
+          `[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 handleScroll = React6.useCallback(
     (event, fromSelf) => {
@@ -931,7 +941,7 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     {
       ...rest,
       contentContainerStyle,
-      style,
+      style: [style],
       horizontal,
       refScroller,
       initialContentOffset,

package/index.mjs

@@ -65,7 +65,7 @@ function $View({ $key, $style, ...rest }) {
   return /* @__PURE__ */ React6.createElement(LeanView, { style, ...rest });
 }
 function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
-  const itemIndex = use$(`containerIndex${id}`);
+  const itemIndex = use$(`containerItemIndex${id}`);
   const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
   if (itemIndex < 0) {
     return null;
@@ -112,7 +112,7 @@ var Container = ({
       $key: `containerPosition${id}`,
       $style: createStyle,
       onLayout: (event) => {
-        const index = peek$(ctx, `containerIndex${id}`);
+        const index = peek$(ctx, `containerItemIndex${id}`);
         if (index >= 0) {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
           onLayout(index, size);
@@ -392,7 +392,7 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
 function findContainerId(state, ctx, index) {
   const numContainers = peek$(ctx, "numContainers");
   for (let i = 0; i < numContainers; i++) {
-    const itemIndex = peek$(ctx, `containerIndex${i}`);
+    const itemIndex = peek$(ctx, `containerItemIndex${i}`);
     if (itemIndex === index) {
       return i;
     }
@@ -527,14 +527,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       refState.current.animFrameTotalSize = requestAnimationFrame(doAdd);
     }
   }, []);
-  const getRenderedItem = useCallback((index, containerIndex) => {
+  const getRenderedItem = useCallback((index, containerId) => {
     var _a2, _b2, _c;
     const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
     if (!data2) {
       return null;
     }
     const useViewability = (configId, callback) => {
-      const key = containerIndex + configId;
+      const key = containerId + configId;
       useInit(() => {
         const value = ctx.mapViewabilityValues.get(key);
         if (value) {
@@ -551,15 +551,15 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     };
     const useViewabilityAmount = (callback) => {
       useInit(() => {
-        const value = ctx.mapViewabilityAmountValues.get(containerIndex);
+        const value = ctx.mapViewabilityAmountValues.get(containerId);
         if (value) {
           callback(value);
         }
       });
-      ctx.mapViewabilityAmountCallbacks.set(containerIndex, callback);
+      ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
       useEffect(
         () => () => {
-          ctx.mapViewabilityAmountCallbacks.delete(containerIndex);
+          ctx.mapViewabilityAmountCallbacks.delete(containerId);
         },
         []
       );
@@ -569,7 +569,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         const state = refState.current;
         let prevIndex = index;
         let prevItem = state.data[index];
-        const signal = `containerIndex${containerIndex}`;
+        const signal = `containerItemIndex${containerId}`;
         listen$(ctx, signal, () => {
           const data3 = state.data;
           if (data3) {
@@ -621,10 +621,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         data: data2,
         scrollLength,
         scroll: scrollState,
-        startNoBuffer: startNoBufferState,
-        startBuffered: startBufferedState,
-        endNoBuffer: endNoBufferState,
-        endBuffered: endBufferedState
+        startBuffered: startBufferedState
       } = refState.current;
       if (!data2) {
         return;
@@ -688,20 +685,21 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         let numContainers = prevNumContainers;
         for (let i = startBuffered; i <= endBuffered; i++) {
           let isContained = false;
+          const id = getId(i);
           for (let j = 0; j < numContainers; j++) {
-            const index = peek$(ctx, `containerIndex${j}`);
-            if (index === i) {
+            const index = peek$(ctx, `containerItemIndex${j}`);
+            const key = peek$(ctx, `containerItemKey${j}`);
+            if (index === i && key === id) {
               isContained = true;
               break;
             }
           }
           if (!isContained) {
-            const id = getId(i);
             const top2 = positions.get(id) || 0;
             let furthestIndex = -1;
             let furthestDistance = 0;
             for (let u = 0; u < numContainers; u++) {
-              const index = peek$(ctx, `containerIndex${u}`);
+              const index = peek$(ctx, `containerItemIndex${u}`);
               if (index < 0) {
                 furthestIndex = u;
                 break;
@@ -716,7 +714,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
               }
             }
             if (furthestIndex >= 0) {
-              set$(ctx, `containerIndex${furthestIndex}`, i);
+              set$(ctx, `containerItemIndex${furthestIndex}`, i);
+              set$(ctx, `containerItemKey${furthestIndex}`, id);
             } else {
               if (__DEV__) {
                 console.warn(
@@ -726,7 +725,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
               }
               const containerId = numContainers;
               numContainers++;
-              set$(ctx, `containerIndex${containerId}`, i);
+              set$(ctx, `containerItemIndex${containerId}`, i);
+              set$(ctx, `containerItemKey${containerId}`, id);
               set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             }
           }
@@ -735,11 +735,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           set$(ctx, "numContainers", numContainers);
         }
         for (let i = 0; i < numContainers; i++) {
-          const itemIndex = peek$(ctx, `containerIndex${i}`);
+          const itemIndex = peek$(ctx, `containerItemIndex${i}`);
+          const itemKey = peek$(ctx, `containerItemKey${i}`);
           const item = data2[itemIndex];
           if (item) {
             const id = getId(itemIndex);
-            if (itemIndex < startBuffered || itemIndex > endBuffered) {
+            if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
               set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
             } else {
               const pos = (_c = positions.get(id)) != null ? _c : -1;
@@ -765,22 +766,22 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     });
   }, []);
   useInit(() => {
-    var _a2, _b2;
+    var _a2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
     const averageItemSize = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0]);
     const numContainers = initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) + 4;
     for (let i = 0; i < numContainers; i++) {
-      set$(ctx, `containerIndex${i}`, -1);
+      set$(ctx, `containerItemIndex${i}`, -1);
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
     }
     set$(ctx, "numContainers", numContainers);
     calculateItemsInView();
-    const sizes = (_a2 = refState.current) == null ? void 0 : _a2.sizes;
+    const sizes = refState.current.sizes;
     let totalSize = 0;
     for (let i = 0; i < data.length; i++) {
       const id = getId(i);
-      totalSize += (_b2 = sizes.get(id)) != null ? _b2 : getItemSize(i, data[i]);
+      totalSize += (_a2 = sizes.get(id)) != null ? _a2 : getItemSize(i, data[i]);
     }
     addTotalSize(totalSize);
   });
@@ -808,9 +809,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const numContainers = peek$(ctx, "numContainers");
     if (data.length < numContainers) {
       for (let i = 0; i < numContainers; i++) {
-        const itemIndex = peek$(ctx, `containerIndex${i}`);
+        const itemIndex = peek$(ctx, `containerItemIndex${i}`);
         if (itemIndex >= data.length) {
-          set$(ctx, `containerIndex${i}`, -1);
+          set$(ctx, `containerItemIndex${i}`, -1);
         }
       }
     }
@@ -818,19 +819,19 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     checkAtBottom();
   }, [data]);
   const updateItemSize = useCallback((index, size) => {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c;
     const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
     if (!data2) {
       return;
     }
-    const sizes = (_b2 = refState.current) == null ? void 0 : _b2.sizes;
+    const sizes = refState.current.sizes;
     const id = getId(index);
-    const wasInFirstRender = (_c = refState.current) == null ? void 0 : _c.idsInFirstRender.has(id);
+    const wasInFirstRender = (_b2 = refState.current) == null ? void 0 : _b2.idsInFirstRender.has(id);
     const prevSize = sizes.get(id) || (wasInFirstRender ? getItemSize(index, data2[index]) : 0);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       sizes.set(id, size);
       addTotalSize(size - prevSize);
-      if (((_d = refState.current) == null ? void 0 : _d.isAtBottom) && maintainScrollAtEnd) {
+      if (((_c = refState.current) == null ? void 0 : _c.isAtBottom) && maintainScrollAtEnd) {
         requestAnimationFrame(() => {
           var _a3;
           (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
@@ -857,6 +858,15 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   const onLayout = useCallback((event) => {
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     refState.current.scrollLength = scrollLength;
+    if (__DEV__) {
+      const isWidthZero = event.nativeEvent.layout.width === 0;
+      const isHeightZero = event.nativeEvent.layout.height === 0;
+      if (isWidthZero || isHeightZero) {
+        console.warn(
+          `[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 handleScroll = useCallback(
     (event, fromSelf) => {
@@ -910,7 +920,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     {
       ...rest,
       contentContainerStyle,
-      style,
+      style: [style],
       horizontal,
       refScroller,
       initialContentOffset,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,