@legendapp/list 3.0.0-beta.10 → 3.0.0-beta.12

package/index.mjs

@@ -346,48 +346,70 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = createContext(null);
+function useContextContainer() {
+  return useContext(ContextContainer);
+}
 function useViewability(callback, configId) {
   const ctx = useStateContext();
-  const { containerId } = useContext(ContextContainer);
-  const key = containerId + (configId != null ? configId : "");
+  const containerContext = useContextContainer();
   useInit(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    const key = containerId + (configId != null ? configId : "");
     const value = ctx.mapViewabilityValues.get(key);
     if (value) {
       callback(value);
     }
   });
-  ctx.mapViewabilityCallbacks.set(key, callback);
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    const key = containerId + (configId != null ? configId : "");
+    ctx.mapViewabilityCallbacks.set(key, callback);
+    return () => {
       ctx.mapViewabilityCallbacks.delete(key);
-    },
-    []
-  );
+    };
+  }, [ctx, callback, configId, containerContext]);
 }
 function useViewabilityAmount(callback) {
   const ctx = useStateContext();
-  const { containerId } = useContext(ContextContainer);
+  const containerContext = useContextContainer();
   useInit(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
     const value = ctx.mapViewabilityAmountValues.get(containerId);
     if (value) {
       callback(value);
     }
   });
-  ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
+    return () => {
       ctx.mapViewabilityAmountCallbacks.delete(containerId);
-    },
-    []
-  );
+    };
+  }, [ctx, callback, containerContext]);
 }
 function useRecyclingEffect(effect) {
-  const { index, value } = useContext(ContextContainer);
+  const containerContext = useContextContainer();
   const prevValues = useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
   useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { index, value } = containerContext;
     let ret;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -402,48 +424,73 @@ function useRecyclingEffect(effect) {
       prevItem: value
     };
     return ret;
-  }, [index, value, effect]);
+  }, [effect, containerContext]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value, itemKey, triggerLayout } = useContext(ContextContainer);
-  const refState = useRef({
-    itemKey: null,
-    value: null
+  var _a3, _b;
+  const containerContext = useContextContainer();
+  const computeValue = (ctx) => {
+    if (isFunction(valueOrFun)) {
+      const initializer = valueOrFun;
+      return ctx ? initializer({
+        index: ctx.index,
+        item: ctx.value,
+        prevIndex: void 0,
+        prevItem: void 0
+      }) : initializer();
+    }
+    return valueOrFun;
+  };
+  const [stateValue, setStateValue] = useState(() => {
+    return computeValue(containerContext);
   });
-  const [_, setRenderNum] = useState(0);
-  const state = refState.current;
-  if (state.itemKey !== itemKey) {
-    state.itemKey = itemKey;
-    state.value = isFunction(valueOrFun) ? valueOrFun({
-      index,
-      item: value,
-      prevIndex: void 0,
-      prevItem: void 0
-    }) : valueOrFun;
+  const prevItemKeyRef = useRef((_a3 = containerContext == null ? void 0 : containerContext.itemKey) != null ? _a3 : null);
+  const currentItemKey = (_b = containerContext == null ? void 0 : containerContext.itemKey) != null ? _b : null;
+  if (currentItemKey !== null && prevItemKeyRef.current !== currentItemKey) {
+    prevItemKeyRef.current = currentItemKey;
+    setStateValue(computeValue(containerContext));
   }
+  const triggerLayout = containerContext == null ? void 0 : containerContext.triggerLayout;
   const setState = useCallback(
     (newState) => {
-      state.value = isFunction(newState) ? newState(state.value) : newState;
-      setRenderNum((v) => v + 1);
+      if (!triggerLayout) {
+        return;
+      }
+      setStateValue((prevValue) => {
+        return isFunction(newState) ? newState(prevValue) : newState;
+      });
       triggerLayout();
     },
-    [triggerLayout, state]
+    [triggerLayout]
   );
-  return [state.value, setState];
+  return [stateValue, setState];
 }
 function useIsLastItem() {
-  const { itemKey } = useContext(ContextContainer);
-  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
+  const containerContext = useContextContainer();
+  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
+    if (containerContext) {
+      const { itemKey } = containerContext;
+      if (!isNullOrUndefined(itemKey)) {
+        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
+      }
+    }
+    return false;
+  });
   return isLast;
 }
 function useListScrollSize() {
   const [scrollSize] = useArr$(["scrollSize"]);
   return scrollSize;
 }
+var noop = () => {
+};
 function useSyncLayout() {
-  {
-    const { triggerLayout: syncLayout } = useContext(ContextContainer);
+  const containerContext = useContextContainer();
+  if (containerContext) {
+    const { triggerLayout: syncLayout } = containerContext;
     return syncLayout;
+  } else {
+    return noop;
   }
 }
 
@@ -1088,9 +1135,6 @@ function ScrollAdjust() {
         } else {
           scrollView.scrollBy(0, scrollDelta);
         }
-        if (IS_DEV) {
-          console.log("ScrollAdjust (web scrollBy)", scrollDelta, "total offset:", scrollOffset);
-        }
       }
       lastScrollOffsetRef.current = scrollOffset;
     }
@@ -1139,7 +1183,6 @@ var ListComponent = typedMemo(function ListComponent2({
   getRenderedItem: getRenderedItem2,
   updateItemSize: updateItemSize2,
   refScrollView,
-  maintainVisibleContentPosition,
   renderScrollComponent,
   scrollAdjustHandler,
   onLayoutHeader,
@@ -1148,6 +1191,7 @@ var ListComponent = typedMemo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
+  const maintainVisibleContentPosition = ctx.state.props.maintainVisibleContentPosition;
   const ScrollComponent = renderScrollComponent ? useMemo(
     () => React3.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
@@ -1165,7 +1209,7 @@ var ListComponent = typedMemo(function ListComponent2({
       ],
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       horizontal,
-      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition.scroll || maintainVisibleContentPosition.dataChanges ? { minIndexForVisible: 0 } : void 0,
       onLayout,
       onScroll: onScroll2,
       ref: refScrollView,
@@ -1709,14 +1753,16 @@ function requestAdjust(ctx, positionDiff, dataChanged) {
 function prepareMVCP(ctx, dataChanged) {
   const state = ctx.state;
   const { idsInView, positions, props } = state;
-  const { maintainVisibleContentPosition } = props;
+  const {
+    maintainVisibleContentPosition: { dataChanges: mvcpDataChanges, scroll: mvcpScroll }
+  } = props;
   const scrollingTo = state.scrollingTo;
   let prevPosition;
   let targetId;
   const idsInViewWithPositions = [];
   const scrollTarget = scrollingTo == null ? void 0 : scrollingTo.index;
   const scrollingToViewPosition = scrollingTo == null ? void 0 : scrollingTo.viewPosition;
-  const shouldMVCP = !dataChanged || maintainVisibleContentPosition;
+  const shouldMVCP = dataChanged ? mvcpDataChanges : mvcpScroll;
   const indexByKey = state.indexByKey;
   if (shouldMVCP) {
     if (scrollTarget !== void 0) {
@@ -1739,7 +1785,7 @@ function prepareMVCP(ctx, dataChanged) {
     }
     return () => {
       let positionDiff = 0;
-      if (dataChanged && targetId === void 0 && maintainVisibleContentPosition) {
+      if (dataChanged && targetId === void 0 && mvcpDataChanges) {
         for (let i = 0; i < idsInViewWithPositions.length; i++) {
           const { id, position } = idsInViewWithPositions[i];
           const newPosition = positions.get(id);
@@ -1873,39 +1919,40 @@ function updateTotalSize(ctx) {
 // src/utils/getScrollVelocity.ts
 var getScrollVelocity = (state) => {
   const { scrollHistory } = state;
-  let velocity = 0;
-  if (scrollHistory.length >= 1) {
-    const newest = scrollHistory[scrollHistory.length - 1];
-    let oldest;
-    let start = 0;
-    const now = Date.now();
-    for (let i = 0; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      const nextEntry = scrollHistory[i + 1];
-      if (i > 0) {
-        const prevEntry = scrollHistory[i - 1];
-        const prevDirection = entry.scroll - prevEntry.scroll;
-        const currentDirection = nextEntry.scroll - entry.scroll;
-        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
-          start = i;
-          break;
-        }
-      }
+  const newestIndex = scrollHistory.length - 1;
+  if (newestIndex < 1) {
+    return 0;
+  }
+  const newest = scrollHistory[newestIndex];
+  const now = Date.now();
+  let direction = 0;
+  for (let i = newestIndex; i > 0; i--) {
+    const delta = scrollHistory[i].scroll - scrollHistory[i - 1].scroll;
+    if (delta !== 0) {
+      direction = Math.sign(delta);
+      break;
     }
-    for (let i = start; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      if (now - entry.time <= 1e3) {
-        oldest = entry;
-        break;
-      }
+  }
+  if (direction === 0) {
+    return 0;
+  }
+  let oldest = newest;
+  for (let i = newestIndex - 1; i >= 0; i--) {
+    const current = scrollHistory[i];
+    const next = scrollHistory[i + 1];
+    const delta = next.scroll - current.scroll;
+    const deltaSign = Math.sign(delta);
+    if (deltaSign !== 0 && deltaSign !== direction) {
+      break;
     }
-    if (oldest && oldest !== newest) {
-      const scrollDiff = newest.scroll - oldest.scroll;
-      const timeDiff = newest.time - oldest.time;
-      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
+    if (now - current.time > 1e3) {
+      break;
     }
+    oldest = current;
   }
-  return velocity;
+  const scrollDiff = newest.scroll - oldest.scroll;
+  const timeDiff = newest.time - oldest.time;
+  return timeDiff > 0 ? scrollDiff / timeDiff : 0;
 };
 
 // src/utils/updateSnapToOffsets.ts
@@ -2835,7 +2882,7 @@ function checkFinishedScrollFrame(ctx) {
   if (scrollingTo) {
     const { state } = ctx;
     state.animFrameCheckFinishedScroll = void 0;
-    const scroll = state.scroll;
+    const scroll = state.scrollPending;
     const adjust = state.scrollAdjustHandler.getAdjust();
     const clampedTargetOffset = clampScrollOffset(ctx, scrollingTo.offset - (scrollingTo.viewOffset || 0));
     const maxOffset = clampScrollOffset(ctx, scroll);
@@ -3090,7 +3137,6 @@ function onScroll(ctx, event) {
     return;
   }
   let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
-  state.scrollPending = newScroll;
   if (state.scrollingTo) {
     const maxOffset = clampScrollOffset(ctx, newScroll);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
@@ -3104,8 +3150,11 @@ function onScroll(ctx, event) {
       return;
     }
   }
+  state.scrollPending = newScroll;
   updateScroll(ctx, newScroll);
-  checkFinishedScroll(ctx);
+  if (state.scrollingTo) {
+    checkFinishedScroll(ctx);
+  }
   onScrollProp == null ? void 0 : onScrollProp(event);
 }
 
@@ -3440,6 +3489,24 @@ function getRenderedItem(ctx, key) {
   }
   return { index, item: data[index], renderedItem };
 }
+
+// src/utils/normalizeMaintainVisibleContentPosition.ts
+function normalizeMaintainVisibleContentPosition(value) {
+  var _a3, _b;
+  if (value === true) {
+    return { dataChanges: true, scroll: true };
+  }
+  if (value && typeof value === "object") {
+    return {
+      dataChanges: (_a3 = value.dataChanges) != null ? _a3 : false,
+      scroll: (_b = value.scroll) != null ? _b : true
+    };
+  }
+  if (value === false) {
+    return { dataChanges: false, scroll: false };
+  }
+  return { dataChanges: false, scroll: true };
+}
 function useThrottleDebounce(mode) {
   const timeoutRef = useRef(null);
   const lastCallTimeRef = useRef(0);
@@ -3534,7 +3601,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     ListHeaderComponent,
     maintainScrollAtEnd = false,
     maintainScrollAtEndThreshold = 0.1,
-    maintainVisibleContentPosition = false,
+    maintainVisibleContentPosition: maintainVisibleContentPositionProp,
     numColumns: numColumnsProp = 1,
     onEndReached,
     onEndReachedThreshold = 0.5,
@@ -3572,6 +3639,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const style = { ...StyleSheet.flatten(styleProp) };
   const stylePaddingTopState = extractPadding(style, contentContainerStyle, "Top");
   const stylePaddingBottomState = extractPadding(style, contentContainerStyle, "Bottom");
+  const maintainVisibleContentPositionConfig = normalizeMaintainVisibleContentPosition(
+    maintainVisibleContentPositionProp
+  );
   const [renderNum, setRenderNum] = useState(0);
   const initialScrollProp = initialScrollAtEnd ? { index: Math.max(0, dataProp.length - 1), viewOffset: -stylePaddingBottomState } : initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
   const [canRender, setCanRender] = React3.useState(!IsNewArchitecture);
@@ -3656,7 +3726,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       };
       const internalState = ctx.state;
       internalState.triggerCalculateItemsInView = (params) => calculateItemsInView(ctx, params);
-      set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
+      set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPositionConfig);
       set$(ctx, "extraData", extraData);
     }
     refState.current = ctx.state;
@@ -3687,7 +3757,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     keyExtractor,
     maintainScrollAtEnd,
     maintainScrollAtEndThreshold,
-    maintainVisibleContentPosition,
+    maintainVisibleContentPosition: maintainVisibleContentPositionConfig,
     numColumns: numColumnsProp,
     onEndReached,
     onEndReachedThreshold,
@@ -3722,7 +3792,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     setPaddingTop(ctx, { stylePaddingTop: stylePaddingTopState });
     refState.current.props.stylePaddingBottom = stylePaddingBottomState;
     let paddingDiff = stylePaddingTopState - prevPaddingTop;
-    if (paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
+    if (maintainVisibleContentPositionConfig.scroll && paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
       if (state.scroll < 0) {
         paddingDiff += state.scroll;
       }
@@ -3757,7 +3827,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       value = 0;
     }
     if (!value) {
-      state.didFinishInitialScroll = true;
+      setInitialRenderState(ctx, { didInitialScroll: true });
     }
     return value;
   }, [renderNum]);
@@ -3879,7 +3949,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       initialContentOffset,
       ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
       ListHeaderComponent,
-      maintainVisibleContentPosition,
       onLayout,
       onLayoutHeader,
       onMomentumScrollEnd: fns.onMomentumScrollEnd,

package/index.native.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Dispatch, SetStateAction } from 'react';
-import { L as LegendListProps, a as LegendListRef, V as ViewabilityCallback, b as ViewabilityAmountCallback, c as LegendListRecyclingState } from './types-1Hgg1rTO.mjs';
-export { C as ColumnWrapperStyle, u as GetRenderedItem, G as GetRenderedItemResult, s as InitialScrollAnchor, I as InternalState, d as LegendListPropsBase, f as LegendListRenderItemProps, g as LegendListState, M as MaintainScrollAtEndOptions, O as OnViewableItemsChanged, p as ScrollIndexWithOffset, r as ScrollIndexWithOffsetAndContentOffset, q as ScrollIndexWithOffsetPosition, S as ScrollTarget, T as ThresholdSnapshot, m as TypedForwardRef, n as TypedMemo, i as ViewAmountToken, h as ViewToken, l as ViewabilityConfig, j as ViewabilityConfigCallbackPair, k as ViewabilityConfigCallbackPairs, e as ViewableRange, t as typedForwardRef, o as typedMemo } from './types-1Hgg1rTO.mjs';
+import { L as LegendListProps, a as LegendListRef, V as ViewabilityCallback, b as ViewabilityAmountCallback, c as LegendListRecyclingState } from './types-C83aU7VI.mjs';
+export { C as ColumnWrapperStyle, w as GetRenderedItem, G as GetRenderedItemResult, v as InitialScrollAnchor, I as InternalState, d as LegendListPropsBase, h as LegendListRenderItemProps, i as LegendListState, f as MaintainScrollAtEndOptions, M as MaintainVisibleContentPositionConfig, e as MaintainVisibleContentPositionNormalized, O as OnViewableItemsChanged, r as ScrollIndexWithOffset, u as ScrollIndexWithOffsetAndContentOffset, s as ScrollIndexWithOffsetPosition, S as ScrollTarget, T as ThresholdSnapshot, o as TypedForwardRef, p as TypedMemo, k as ViewAmountToken, j as ViewToken, n as ViewabilityConfig, l as ViewabilityConfigCallbackPair, m as ViewabilityConfigCallbackPairs, g as ViewableRange, t as typedForwardRef, q as typedMemo } from './types-C83aU7VI.mjs';
 import 'react-native';
 import 'react-native-reanimated';
 
@@ -12,7 +12,7 @@ declare const LegendList: (<T>(props: LegendListProps<T> & React.RefAttributes<L
 declare function useViewability<ItemT = any>(callback: ViewabilityCallback<ItemT>, configId?: string): void;
 declare function useViewabilityAmount<ItemT = any>(callback: ViewabilityAmountCallback<ItemT>): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
-declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
+declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT, Dispatch<SetStateAction<ItemT>>];
 declare function useIsLastItem(): boolean;
 declare function useListScrollSize(): {
     width: number;

package/index.native.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Dispatch, SetStateAction } from 'react';
-import { L as LegendListProps, a as LegendListRef, V as ViewabilityCallback, b as ViewabilityAmountCallback, c as LegendListRecyclingState } from './types-1Hgg1rTO.js';
-export { C as ColumnWrapperStyle, u as GetRenderedItem, G as GetRenderedItemResult, s as InitialScrollAnchor, I as InternalState, d as LegendListPropsBase, f as LegendListRenderItemProps, g as LegendListState, M as MaintainScrollAtEndOptions, O as OnViewableItemsChanged, p as ScrollIndexWithOffset, r as ScrollIndexWithOffsetAndContentOffset, q as ScrollIndexWithOffsetPosition, S as ScrollTarget, T as ThresholdSnapshot, m as TypedForwardRef, n as TypedMemo, i as ViewAmountToken, h as ViewToken, l as ViewabilityConfig, j as ViewabilityConfigCallbackPair, k as ViewabilityConfigCallbackPairs, e as ViewableRange, t as typedForwardRef, o as typedMemo } from './types-1Hgg1rTO.js';
+import { L as LegendListProps, a as LegendListRef, V as ViewabilityCallback, b as ViewabilityAmountCallback, c as LegendListRecyclingState } from './types-C83aU7VI.js';
+export { C as ColumnWrapperStyle, w as GetRenderedItem, G as GetRenderedItemResult, v as InitialScrollAnchor, I as InternalState, d as LegendListPropsBase, h as LegendListRenderItemProps, i as LegendListState, f as MaintainScrollAtEndOptions, M as MaintainVisibleContentPositionConfig, e as MaintainVisibleContentPositionNormalized, O as OnViewableItemsChanged, r as ScrollIndexWithOffset, u as ScrollIndexWithOffsetAndContentOffset, s as ScrollIndexWithOffsetPosition, S as ScrollTarget, T as ThresholdSnapshot, o as TypedForwardRef, p as TypedMemo, k as ViewAmountToken, j as ViewToken, n as ViewabilityConfig, l as ViewabilityConfigCallbackPair, m as ViewabilityConfigCallbackPairs, g as ViewableRange, t as typedForwardRef, q as typedMemo } from './types-C83aU7VI.js';
 import 'react-native';
 import 'react-native-reanimated';
 
@@ -12,7 +12,7 @@ declare const LegendList: (<T>(props: LegendListProps<T> & React.RefAttributes<L
 declare function useViewability<ItemT = any>(callback: ViewabilityCallback<ItemT>, configId?: string): void;
 declare function useViewabilityAmount<ItemT = any>(callback: ViewabilityAmountCallback<ItemT>): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
-declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
+declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT, Dispatch<SetStateAction<ItemT>>];
 declare function useIsLastItem(): boolean;
 declare function useListScrollSize(): {
     width: number;