@legendapp/list 0.4.3 → 0.4.4

package/README.md

@@ -48,7 +48,6 @@ interface PropsOptional {
     maintainScrollAtEndThreshold?: number;
     onEndReached?: ((info: { distanceFromEnd: number }) => void) | null | undefined;
     keyExtractor?: (item: T, index: number) => string;
-    onViewableRangeChanged?: (range: ViewableRange<T>) => void;
 }
 ```
 

package/index.d.mts

@@ -19,11 +19,12 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     }) => void) | null | undefined;
     keyExtractor?: (item: T, index: number) => string;
     renderItem?: (props: LegendListRenderItemProps<T>) => ReactNode;
-    onViewableRangeChanged?: (range: ViewableRange<T>) => void;
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
+    ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
+    ListEmptyComponentStyle?: StyleProp<ViewStyle> | undefined;
     ItemSeparatorComponent?: React.ComponentType<any>;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;

package/index.d.ts

@@ -19,11 +19,12 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     }) => void) | null | undefined;
     keyExtractor?: (item: T, index: number) => string;
     renderItem?: (props: LegendListRenderItemProps<T>) => ReactNode;
-    onViewableRangeChanged?: (range: ViewableRange<T>) => void;
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
+    ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
+    ListEmptyComponentStyle?: StyleProp<ViewStyle> | undefined;
     ItemSeparatorComponent?: React.ComponentType<any>;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;

package/index.js

@@ -213,6 +213,8 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
   ListHeaderComponentStyle,
   ListFooterComponent,
   ListFooterComponentStyle,
+  ListEmptyComponent,
+  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   addTotalSize,
@@ -254,6 +256,13 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
+    ListEmptyComponent && /* @__PURE__ */ React6__namespace.createElement(
+      reactNative.View,
+      {
+        style: ListEmptyComponentStyle
+      },
+      getComponent(ListEmptyComponent)
+    ),
     /* @__PURE__ */ React6__namespace.createElement(
       Containers,
       {
@@ -271,7 +280,9 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
 var mapViewabilityCallbacks = /* @__PURE__ */ new Map();
+var mapViewabilityValues = /* @__PURE__ */ new Map();
 var mapViewabilityAmountCallbacks = /* @__PURE__ */ new Map();
+var mapViewabilityAmountValues = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
   viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
@@ -369,20 +380,22 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
   const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
   const isViewable2 = percent >= viewablePercentThreshold;
   const containerId = findContainerId(state, ctx, index);
+  const value = {
+    index,
+    isViewable: isViewable2,
+    item,
+    key,
+    percentVisible,
+    percentOfScroller,
+    sizeVisible,
+    size,
+    position: top,
+    scrollSize
+  };
+  mapViewabilityAmountValues.set(containerId, value);
   const cb = mapViewabilityAmountCallbacks.get(containerId);
   if (cb) {
-    cb({
-      index,
-      isViewable: isViewable2,
-      item,
-      key,
-      percentVisible,
-      percentOfScroller,
-      sizeVisible,
-      size,
-      position: top,
-      scrollSize
-    });
+    cb(value);
   }
   return isViewable2;
 }
@@ -398,6 +411,7 @@ function findContainerId(state, ctx, index) {
 }
 function maybeUpdateViewabilityCallback(configId, viewToken) {
   const key = viewToken.key + configId;
+  mapViewabilityValues.set(key, viewToken);
   const cb = mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
@@ -443,7 +457,7 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     estimatedItemSize,
     getEstimatedItemSize,
     onEndReached,
-    onViewableRangeChanged,
+    ListEmptyComponent,
     ...rest
   } = props;
   const ctx = useStateContext();
@@ -542,9 +556,21 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
         return null;
       }
       const useViewability = (configId, callback) => {
+        React6.useMemo(() => {
+          const value = mapViewabilityValues.get(containerIndex + configId);
+          if (value) {
+            callback(value);
+          }
+        }, []);
         React6.useEffect(() => registerViewabilityCallback(containerIndex, configId, callback), []);
       };
       const useViewabilityAmount = (callback) => {
+        React6.useMemo(() => {
+          const value = mapViewabilityAmountValues.get(containerIndex);
+          if (value) {
+            callback(value);
+          }
+        }, []);
         React6.useEffect(() => registerViewabilityAmountCallback(containerIndex, callback), []);
       };
       const useRecyclingEffect = (effect) => {
@@ -735,31 +761,20 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
             }
           }
         }
-        if (onViewableRangeChanged) {
-          if (startNoBuffer !== startNoBufferState || startBuffered !== startBufferedState || endNoBuffer !== endNoBufferState || endBuffered !== endBufferedState) {
-            onViewableRangeChanged({
-              start: startNoBuffer,
-              startBuffered,
-              end: endNoBuffer,
-              endBuffered,
-              items: data2.slice(startNoBuffer, endNoBuffer + 1)
-            });
-          }
-        }
-        if (refState.current.viewabilityConfigCallbackPairs) {
-          updateViewableItems(
-            refState.current,
-            ctx,
-            refState.current.viewabilityConfigCallbackPairs,
-            getId,
-            scrollLength,
-            startNoBuffer,
-            endNoBuffer
-          );
-        }
+      }
+      if (refState.current.viewabilityConfigCallbackPairs) {
+        updateViewableItems(
+          refState.current,
+          ctx,
+          refState.current.viewabilityConfigCallbackPairs,
+          getId,
+          scrollLength,
+          startNoBuffer,
+          endNoBuffer
+        );
       }
     });
-  }, [data]);
+  }, []);
   React6.useMemo(() => {
     var _a2, _b2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
@@ -801,6 +816,15 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     if (refState.current) {
       refState.current.isEndReached = false;
     }
+    const numContainers = peek$(ctx, "numContainers");
+    if (data.length < numContainers) {
+      for (let i = 0; i < numContainers; i++) {
+        const itemIndex = peek$(ctx, `containerIndex${i}`);
+        if (itemIndex >= data.length) {
+          set$(ctx, `containerIndex${i}`, -1);
+        }
+      }
+    }
     calculateItemsInView();
     checkAtBottom();
   }, [data]);
@@ -903,7 +927,8 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
       onLayout,
       recycleItems,
       alignItemsAtEnd,
-      addTotalSize
+      addTotalSize,
+      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0
     }
   );
 });

package/index.mjs

@@ -192,6 +192,8 @@ var ListComponent = React6.memo(function ListComponent2({
   ListHeaderComponentStyle,
   ListFooterComponent,
   ListFooterComponentStyle,
+  ListEmptyComponent,
+  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   addTotalSize,
@@ -233,6 +235,13 @@ var ListComponent = React6.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
+    ListEmptyComponent && /* @__PURE__ */ React6.createElement(
+      View,
+      {
+        style: ListEmptyComponentStyle
+      },
+      getComponent(ListEmptyComponent)
+    ),
     /* @__PURE__ */ React6.createElement(
       Containers,
       {
@@ -250,7 +259,9 @@ var ListComponent = React6.memo(function ListComponent2({
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
 var mapViewabilityCallbacks = /* @__PURE__ */ new Map();
+var mapViewabilityValues = /* @__PURE__ */ new Map();
 var mapViewabilityAmountCallbacks = /* @__PURE__ */ new Map();
+var mapViewabilityAmountValues = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
   viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
@@ -348,20 +359,22 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
   const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
   const isViewable2 = percent >= viewablePercentThreshold;
   const containerId = findContainerId(state, ctx, index);
+  const value = {
+    index,
+    isViewable: isViewable2,
+    item,
+    key,
+    percentVisible,
+    percentOfScroller,
+    sizeVisible,
+    size,
+    position: top,
+    scrollSize
+  };
+  mapViewabilityAmountValues.set(containerId, value);
   const cb = mapViewabilityAmountCallbacks.get(containerId);
   if (cb) {
-    cb({
-      index,
-      isViewable: isViewable2,
-      item,
-      key,
-      percentVisible,
-      percentOfScroller,
-      sizeVisible,
-      size,
-      position: top,
-      scrollSize
-    });
+    cb(value);
   }
   return isViewable2;
 }
@@ -377,6 +390,7 @@ function findContainerId(state, ctx, index) {
 }
 function maybeUpdateViewabilityCallback(configId, viewToken) {
   const key = viewToken.key + configId;
+  mapViewabilityValues.set(key, viewToken);
   const cb = mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
@@ -422,7 +436,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     estimatedItemSize,
     getEstimatedItemSize,
     onEndReached,
-    onViewableRangeChanged,
+    ListEmptyComponent,
     ...rest
   } = props;
   const ctx = useStateContext();
@@ -521,9 +535,21 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         return null;
       }
       const useViewability = (configId, callback) => {
+        useMemo(() => {
+          const value = mapViewabilityValues.get(containerIndex + configId);
+          if (value) {
+            callback(value);
+          }
+        }, []);
         useEffect(() => registerViewabilityCallback(containerIndex, configId, callback), []);
       };
       const useViewabilityAmount = (callback) => {
+        useMemo(() => {
+          const value = mapViewabilityAmountValues.get(containerIndex);
+          if (value) {
+            callback(value);
+          }
+        }, []);
         useEffect(() => registerViewabilityAmountCallback(containerIndex, callback), []);
       };
       const useRecyclingEffect = (effect) => {
@@ -714,31 +740,20 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             }
           }
         }
-        if (onViewableRangeChanged) {
-          if (startNoBuffer !== startNoBufferState || startBuffered !== startBufferedState || endNoBuffer !== endNoBufferState || endBuffered !== endBufferedState) {
-            onViewableRangeChanged({
-              start: startNoBuffer,
-              startBuffered,
-              end: endNoBuffer,
-              endBuffered,
-              items: data2.slice(startNoBuffer, endNoBuffer + 1)
-            });
-          }
-        }
-        if (refState.current.viewabilityConfigCallbackPairs) {
-          updateViewableItems(
-            refState.current,
-            ctx,
-            refState.current.viewabilityConfigCallbackPairs,
-            getId,
-            scrollLength,
-            startNoBuffer,
-            endNoBuffer
-          );
-        }
+      }
+      if (refState.current.viewabilityConfigCallbackPairs) {
+        updateViewableItems(
+          refState.current,
+          ctx,
+          refState.current.viewabilityConfigCallbackPairs,
+          getId,
+          scrollLength,
+          startNoBuffer,
+          endNoBuffer
+        );
       }
     });
-  }, [data]);
+  }, []);
   useMemo(() => {
     var _a2, _b2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
@@ -780,6 +795,15 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (refState.current) {
       refState.current.isEndReached = false;
     }
+    const numContainers = peek$(ctx, "numContainers");
+    if (data.length < numContainers) {
+      for (let i = 0; i < numContainers; i++) {
+        const itemIndex = peek$(ctx, `containerIndex${i}`);
+        if (itemIndex >= data.length) {
+          set$(ctx, `containerIndex${i}`, -1);
+        }
+      }
+    }
     calculateItemsInView();
     checkAtBottom();
   }, [data]);
@@ -882,7 +906,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       onLayout,
       recycleItems,
       alignItemsAtEnd,
-      addTotalSize
+      addTotalSize,
+      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0
     }
   );
 });

package/package.json

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