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

package/index.native.js

@@ -411,48 +411,70 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = React2.createContext(null);
+function useContextContainer() {
+  return React2.useContext(ContextContainer);
+}
 function useViewability(callback, configId) {
   const ctx = useStateContext();
-  const { containerId } = React2.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);
-  React2.useEffect(
-    () => () => {
+  React2.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 } = React2.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);
-  React2.useEffect(
-    () => () => {
+  React2.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 } = React2.useContext(ContextContainer);
+  const containerContext = useContextContainer();
   const prevValues = React2.useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
   React2.useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { index, value } = containerContext;
     let ret;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -467,38 +489,58 @@ function useRecyclingEffect(effect) {
       prevItem: value
     };
     return ret;
-  }, [index, value, effect]);
+  }, [effect, containerContext]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value, itemKey, triggerLayout } = React2.useContext(ContextContainer);
-  const refState = React2.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] = React2.useState(() => {
+    return computeValue(containerContext);
   });
-  const [_, setRenderNum] = React2.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 = React2.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 = React2.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 } = React2.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() {
@@ -508,8 +550,9 @@ function useListScrollSize() {
 var noop = () => {
 };
 function useSyncLayout() {
-  if (IsNewArchitecture) {
-    const { triggerLayout: syncLayout } = React2.useContext(ContextContainer);
+  const containerContext = useContextContainer();
+  if (IsNewArchitecture && containerContext) {
+    const { triggerLayout: syncLayout } = containerContext;
     return syncLayout;
   } else {
     return noop;
@@ -869,7 +912,6 @@ var ListComponent = typedMemo(function ListComponent2({
   getRenderedItem: getRenderedItem2,
   updateItemSize: updateItemSize2,
   refScrollView,
-  maintainVisibleContentPosition,
   renderScrollComponent,
   scrollAdjustHandler,
   onLayoutHeader,
@@ -878,6 +920,7 @@ var ListComponent = typedMemo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
+  const maintainVisibleContentPosition = ctx.state.props.maintainVisibleContentPosition;
   const ScrollComponent = renderScrollComponent ? React2.useMemo(
     () => React2__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
@@ -895,7 +938,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,
@@ -1166,7 +1209,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);
@@ -1521,14 +1564,16 @@ function ensureInitialAnchor(ctx) {
 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) {
@@ -1554,7 +1599,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);
@@ -1591,7 +1636,7 @@ function prepareMVCP(ctx, dataChanged) {
         }
       }
       if (Math.abs(positionDiff) > 0.1) {
-        requestAdjust(ctx, positionDiff, dataChanged && maintainVisibleContentPosition);
+        requestAdjust(ctx, positionDiff, dataChanged && mvcpDataChanges);
       }
     };
   }
@@ -1688,39 +1733,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
@@ -2879,7 +2925,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) {
@@ -2893,8 +2938,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);
 }
 
@@ -3248,6 +3296,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 = React2.useRef(null);
   const lastCallTimeRef = React2.useRef(0);
@@ -3342,7 +3408,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,
@@ -3380,6 +3446,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] = React2.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] = React2__namespace.useState(!IsNewArchitecture);
@@ -3464,7 +3533,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;
@@ -3495,7 +3564,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     keyExtractor,
     maintainScrollAtEnd,
     maintainScrollAtEndThreshold,
-    maintainVisibleContentPosition,
+    maintainVisibleContentPosition: maintainVisibleContentPositionConfig,
     numColumns: numColumnsProp,
     onEndReached,
     onEndReachedThreshold,
@@ -3530,7 +3599,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 && Platform2.OS === "ios") {
+    if (maintainVisibleContentPositionConfig.scroll && paddingDiff && prevPaddingTop !== void 0 && Platform2.OS === "ios") {
       if (state.scroll < 0) {
         paddingDiff += state.scroll;
       }
@@ -3575,7 +3644,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       value = 0;
     }
     if (!value) {
-      state.didFinishInitialScroll = true;
+      setInitialRenderState(ctx, { didInitialScroll: true });
     }
     return value;
   }, [renderNum]);
@@ -3704,7 +3773,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       initialContentOffset,
       ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
       ListHeaderComponent,
-      maintainVisibleContentPosition,
       onLayout,
       onLayoutHeader,
       onMomentumScrollEnd: fns.onMomentumScrollEnd,