@legendapp/list 0.4.2 → 0.4.3

package/index.d.mts

@@ -63,6 +63,7 @@ interface LegendListRenderItemProps<ItemT> {
     item: ItemT;
     index: number;
     useViewability: (configId: string, callback: ViewabilityCallback) => void;
+    useViewabilityAmount: (callback: ViewabilityAmountCallback) => void;
     useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
     useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
 }
@@ -107,6 +108,14 @@ interface ViewToken<ItemT = any> {
     index: number;
     isViewable: boolean;
 }
+interface ViewAmountToken<ItemT = any> extends ViewToken<ItemT> {
+    sizeVisible: number;
+    size: number;
+    percentVisible: number;
+    percentOfScroller: number;
+    position: number;
+    scrollSize: number;
+}
 interface ViewabilityConfigCallbackPair {
     viewabilityConfig: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged;
@@ -146,6 +155,7 @@ interface ViewabilityConfig {
     waitForInteraction?: boolean | undefined;
 }
 type ViewabilityCallback = (viewToken: ViewToken) => void;
+type ViewabilityAmountCallback = (viewToken: ViewAmountToken) => void;
 interface LegendListRecyclingState<T> {
     item: T;
     prevItem: T | undefined;
@@ -157,4 +167,4 @@ declare const LegendList: <T>(props: LegendListProps<T> & {
     ref?: ForwardedRef<LegendListRef>;
 }) => ReactElement;
 
-export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewToken, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };
+export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };

package/index.d.ts

@@ -63,6 +63,7 @@ interface LegendListRenderItemProps<ItemT> {
     item: ItemT;
     index: number;
     useViewability: (configId: string, callback: ViewabilityCallback) => void;
+    useViewabilityAmount: (callback: ViewabilityAmountCallback) => void;
     useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
     useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
 }
@@ -107,6 +108,14 @@ interface ViewToken<ItemT = any> {
     index: number;
     isViewable: boolean;
 }
+interface ViewAmountToken<ItemT = any> extends ViewToken<ItemT> {
+    sizeVisible: number;
+    size: number;
+    percentVisible: number;
+    percentOfScroller: number;
+    position: number;
+    scrollSize: number;
+}
 interface ViewabilityConfigCallbackPair {
     viewabilityConfig: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged;
@@ -146,6 +155,7 @@ interface ViewabilityConfig {
     waitForInteraction?: boolean | undefined;
 }
 type ViewabilityCallback = (viewToken: ViewToken) => void;
+type ViewabilityAmountCallback = (viewToken: ViewAmountToken) => void;
 interface LegendListRecyclingState<T> {
     item: T;
     prevItem: T | undefined;
@@ -157,4 +167,4 @@ declare const LegendList: <T>(props: LegendListProps<T> & {
     ref?: ForwardedRef<LegendListRef>;
 }) => ReactElement;
 
-export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewToken, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };
+export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };

package/index.js

@@ -271,6 +271,7 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
 var mapViewabilityCallbacks = /* @__PURE__ */ new Map();
+var mapViewabilityAmountCallbacks = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
   viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
@@ -315,7 +316,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   const changed = [];
   if (previousViewableItems) {
     for (const viewToken of previousViewableItems) {
-      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize)) {
+      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize, viewToken.item, viewToken.index)) {
         viewToken.isViewable = false;
         changed.push(viewToken);
       }
@@ -326,7 +327,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     const item = data[i];
     if (item) {
       const key = getId(i);
-      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize)) {
+      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, i)) {
         const viewToken = {
           item,
           key,
@@ -342,7 +343,6 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
   Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
   if (changed.length > 0) {
-    console.log("changed", changed);
     viewabilityState.viewableItems = viewableItems;
     for (let i = 0; i < changed.length; i++) {
       const change = changed[i];
@@ -353,7 +353,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     }
   }
 }
-function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
+function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
   const { sizes, positions, scroll } = state;
   const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
@@ -363,25 +363,57 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
   const size = sizes.get(key) || 0;
   const bottom = top + size;
   const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
-  if (isEntirelyVisible) {
-    return true;
+  const sizeVisible = isEntirelyVisible ? size : Math.min(bottom, scrollSize) - Math.max(top, 0);
+  const percentVisible = size ? isEntirelyVisible ? 100 : 100 * (sizeVisible / size) : 0;
+  const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
+  const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
+  const isViewable2 = percent >= viewablePercentThreshold;
+  const containerId = findContainerId(state, ctx, index);
+  const cb = mapViewabilityAmountCallbacks.get(containerId);
+  if (cb) {
+    cb({
+      index,
+      isViewable: isViewable2,
+      item,
+      key,
+      percentVisible,
+      percentOfScroller,
+      sizeVisible,
+      size,
+      position: top,
+      scrollSize
+    });
+  }
+  return isViewable2;
+}
+function findContainerId(state, ctx, index) {
+  const numContainers = peek$(ctx, "numContainers");
+  for (let i = 0; i < numContainers; i++) {
+    const itemIndex = peek$(ctx, `containerIndex${i}`);
+    if (itemIndex === index) {
+      return i;
+    }
   }
-  const visibleHeight = Math.min(bottom, scrollSize) - Math.max(top, 0);
-  const percent = 100 * (visibleHeight / (viewAreaMode ? scrollSize : size));
-  return percent >= viewablePercentThreshold;
+  return -1;
 }
 function maybeUpdateViewabilityCallback(configId, viewToken) {
   const key = viewToken.key + configId;
   const cb = mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
-function registerViewabilityCallback(itemKey, configId, callback) {
-  const key = itemKey + configId;
+function registerViewabilityCallback(containerId, configId, callback) {
+  const key = containerId + configId;
   mapViewabilityCallbacks.set(key, callback);
   return () => {
     mapViewabilityCallbacks.delete(key);
   };
 }
+function registerViewabilityAmountCallback(containerId, callback) {
+  mapViewabilityAmountCallbacks.set(containerId, callback);
+  return () => {
+    mapViewabilityAmountCallbacks.delete(containerId);
+  };
+}
 
 // src/LegendList.tsx
 var DEFAULT_SCROLL_BUFFER = 0;
@@ -509,9 +541,11 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
       if (!data2) {
         return null;
       }
-      const itemKey = getId(index);
       const useViewability = (configId, callback) => {
-        React6.useEffect(() => registerViewabilityCallback(itemKey, configId, callback), []);
+        React6.useEffect(() => registerViewabilityCallback(containerIndex, configId, callback), []);
+      };
+      const useViewabilityAmount = (callback) => {
+        React6.useEffect(() => registerViewabilityAmountCallback(containerIndex, callback), []);
       };
       const useRecyclingEffect = (effect) => {
         React6.useEffect(() => {
@@ -549,7 +583,6 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
         );
         useRecyclingEffect((state) => {
           const newState = updateState(state);
-          console.log("setting state", newState);
           stateInfo[1](newState);
         });
         return stateInfo;
@@ -558,6 +591,7 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
         item: data2[index],
         index,
         useViewability,
+        useViewabilityAmount,
         useRecyclingEffect,
         useRecyclingState
       });

package/index.mjs

@@ -250,6 +250,7 @@ var ListComponent = React6.memo(function ListComponent2({
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
 var mapViewabilityCallbacks = /* @__PURE__ */ new Map();
+var mapViewabilityAmountCallbacks = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
   viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
@@ -294,7 +295,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   const changed = [];
   if (previousViewableItems) {
     for (const viewToken of previousViewableItems) {
-      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize)) {
+      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize, viewToken.item, viewToken.index)) {
         viewToken.isViewable = false;
         changed.push(viewToken);
       }
@@ -305,7 +306,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     const item = data[i];
     if (item) {
       const key = getId(i);
-      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize)) {
+      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, i)) {
         const viewToken = {
           item,
           key,
@@ -321,7 +322,6 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
   Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
   if (changed.length > 0) {
-    console.log("changed", changed);
     viewabilityState.viewableItems = viewableItems;
     for (let i = 0; i < changed.length; i++) {
       const change = changed[i];
@@ -332,7 +332,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     }
   }
 }
-function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
+function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
   const { sizes, positions, scroll } = state;
   const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
@@ -342,25 +342,57 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
   const size = sizes.get(key) || 0;
   const bottom = top + size;
   const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
-  if (isEntirelyVisible) {
-    return true;
+  const sizeVisible = isEntirelyVisible ? size : Math.min(bottom, scrollSize) - Math.max(top, 0);
+  const percentVisible = size ? isEntirelyVisible ? 100 : 100 * (sizeVisible / size) : 0;
+  const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
+  const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
+  const isViewable2 = percent >= viewablePercentThreshold;
+  const containerId = findContainerId(state, ctx, index);
+  const cb = mapViewabilityAmountCallbacks.get(containerId);
+  if (cb) {
+    cb({
+      index,
+      isViewable: isViewable2,
+      item,
+      key,
+      percentVisible,
+      percentOfScroller,
+      sizeVisible,
+      size,
+      position: top,
+      scrollSize
+    });
+  }
+  return isViewable2;
+}
+function findContainerId(state, ctx, index) {
+  const numContainers = peek$(ctx, "numContainers");
+  for (let i = 0; i < numContainers; i++) {
+    const itemIndex = peek$(ctx, `containerIndex${i}`);
+    if (itemIndex === index) {
+      return i;
+    }
   }
-  const visibleHeight = Math.min(bottom, scrollSize) - Math.max(top, 0);
-  const percent = 100 * (visibleHeight / (viewAreaMode ? scrollSize : size));
-  return percent >= viewablePercentThreshold;
+  return -1;
 }
 function maybeUpdateViewabilityCallback(configId, viewToken) {
   const key = viewToken.key + configId;
   const cb = mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
-function registerViewabilityCallback(itemKey, configId, callback) {
-  const key = itemKey + configId;
+function registerViewabilityCallback(containerId, configId, callback) {
+  const key = containerId + configId;
   mapViewabilityCallbacks.set(key, callback);
   return () => {
     mapViewabilityCallbacks.delete(key);
   };
 }
+function registerViewabilityAmountCallback(containerId, callback) {
+  mapViewabilityAmountCallbacks.set(containerId, callback);
+  return () => {
+    mapViewabilityAmountCallbacks.delete(containerId);
+  };
+}
 
 // src/LegendList.tsx
 var DEFAULT_SCROLL_BUFFER = 0;
@@ -488,9 +520,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       if (!data2) {
         return null;
       }
-      const itemKey = getId(index);
       const useViewability = (configId, callback) => {
-        useEffect(() => registerViewabilityCallback(itemKey, configId, callback), []);
+        useEffect(() => registerViewabilityCallback(containerIndex, configId, callback), []);
+      };
+      const useViewabilityAmount = (callback) => {
+        useEffect(() => registerViewabilityAmountCallback(containerIndex, callback), []);
       };
       const useRecyclingEffect = (effect) => {
         useEffect(() => {
@@ -528,7 +562,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         );
         useRecyclingEffect((state) => {
           const newState = updateState(state);
-          console.log("setting state", newState);
           stateInfo[1](newState);
         });
         return stateInfo;
@@ -537,6 +570,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         item: data2[index],
         index,
         useViewability,
+        useViewabilityAmount,
         useRecyclingEffect,
         useRecyclingState
       });

package/package.json

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