@legendapp/list 3.0.0-beta.4 → 3.0.0-beta.41

package/reanimated.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var React = require('react');
-var Animated = require('react-native-reanimated');
-var list = require('@legendapp/list');
+var reactNative$1 = require('react-native');
+var Reanimated = require('react-native-reanimated');
+var reactNative = require('@legendapp/list/react-native');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -25,53 +26,178 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+var Reanimated__default = /*#__PURE__*/_interopDefault(Reanimated);
 
 // src/integrations/reanimated.tsx
-
-// src/utils/helpers.ts
-function isFunction(obj) {
-  return typeof obj === "function";
-}
-
-// src/hooks/useCombinedRef.ts
-var useCombinedRef = (...refs) => {
-  const callback = React.useCallback((element) => {
-    for (const ref of refs) {
-      if (!ref) {
-        continue;
-      }
-      if (isFunction(ref)) {
-        ref(element);
-      } else {
-        ref.current = element;
+var { POSITION_OUT_OF_VIEW, IsNewArchitecture, useArr$, useCombinedRef, getComponent } = reactNative.internal;
+var { peek$, useStateContext } = reactNative.internal;
+var typedMemo = React.memo;
+var ReanimatedScrollBridge = typedMemo(function ReanimatedScrollBridgeComponent({
+  forwardedRef,
+  scrollOffset,
+  renderScrollComponent,
+  ...props
+}) {
+  const animatedScrollRef = Reanimated.useAnimatedRef();
+  Reanimated.useScrollViewOffset(animatedScrollRef, scrollOffset);
+  const combinedRef = useCombinedRef(animatedScrollRef, forwardedRef);
+  const ScrollComponent = React__namespace.useMemo(
+    () => renderScrollComponent ? React__namespace.forwardRef(
+      (scrollViewProps, ref) => renderScrollComponent({ ...scrollViewProps, ref })
+    ) : Reanimated__default.default.ScrollView,
+    [renderScrollComponent]
+  );
+  return /* @__PURE__ */ React__namespace.createElement(ScrollComponent, { ...props, ref: combinedRef });
+});
+var StickyOverlay = typedMemo(function StickyOverlayComponent({ stickyHeaderConfig }) {
+  if (!(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)) {
+    return null;
+  }
+  return /* @__PURE__ */ React__namespace.createElement(
+    reactNative$1.View,
+    {
+      style: {
+        inset: 0,
+        pointerEvents: "none",
+        position: "absolute"
       }
+    },
+    getComponent(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)
+  );
+});
+var ReanimatedPositionViewSticky = typedMemo(function ReanimatedPositionViewStickyComponent(props) {
+  var _a;
+  const { id, horizontal, style, refView, stickyScrollOffset, stickyHeaderConfig, index, children, ...rest } = props;
+  const [position = POSITION_OUT_OF_VIEW, headerSize = 0, stylePaddingTop = 0] = useArr$([
+    `containerPosition${id}`,
+    "headerSize",
+    "stylePaddingTop"
+  ]);
+  const stickyOffset = (_a = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a : 0;
+  const stickyStart = position + headerSize + stylePaddingTop - stickyOffset;
+  const transformStyle = Reanimated.useAnimatedStyle(() => {
+    const delta = Math.max(0, stickyScrollOffset.value - stickyStart);
+    return horizontal ? { transform: [{ translateX: position + delta }] } : { transform: [{ translateY: position + delta }] };
+  }, [horizontal, position, stickyStart]);
+  const viewStyle = React__namespace.useMemo(
+    () => [style, { zIndex: index + 1e3 }, transformStyle],
+    [index, style, transformStyle]
+  );
+  return /* @__PURE__ */ React__namespace.createElement(Reanimated__default.default.View, { ref: refView, style: viewStyle, ...rest }, /* @__PURE__ */ React__namespace.createElement(StickyOverlay, { stickyHeaderConfig }), children);
+});
+var ReanimatedPositionView = typedMemo(function ReanimatedPositionViewComponent(props) {
+  const ctx = useStateContext();
+  const { id, horizontal, style, refView, children, recycleItems, layoutTransition, ...rest } = props;
+  const [positionValue = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
+  const prevItemKeyRef = React__namespace.useRef(void 0);
+  let shouldSkipTransitionForRecycleReuse = false;
+  if (recycleItems && layoutTransition) {
+    const itemKeySignal = `containerItemKey${id}`;
+    const itemKey = peek$(ctx, itemKeySignal);
+    shouldSkipTransitionForRecycleReuse = itemKey !== void 0 && prevItemKeyRef.current !== void 0 && prevItemKeyRef.current !== itemKey;
+    if (itemKey !== void 0) {
+      prevItemKeyRef.current = itemKey;
     }
-  }, refs);
-  return callback;
-};
-
-// src/integrations/reanimated.tsx
-var typedMemo = React.memo;
+  } else {
+    prevItemKeyRef.current = void 0;
+  }
+  const viewStyle = React__namespace.useMemo(
+    () => [style, horizontal ? { left: positionValue } : { top: positionValue }],
+    [horizontal, positionValue, style]
+  );
+  return /* @__PURE__ */ React__namespace.createElement(
+    Reanimated__default.default.View,
+    {
+      layout: shouldSkipTransitionForRecycleReuse ? void 0 : layoutTransition,
+      ref: refView,
+      style: viewStyle,
+      ...rest
+    },
+    children
+  );
+});
 var LegendListForwardedRef = typedMemo(
+  // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
   React__namespace.forwardRef(function LegendListForwardedRef2(props, ref) {
-    const { refLegendList, ...rest } = props;
+    const { itemLayoutAnimation, recycleItems, refLegendList, renderScrollComponent, ...rest } = props;
     const refFn = React.useCallback(
       (r) => {
         refLegendList(r);
       },
       [refLegendList]
     );
-    return /* @__PURE__ */ React__namespace.createElement(list.LegendList, { ref: refFn, refScrollView: ref, ...rest });
+    const stickyScrollOffset = Reanimated.useSharedValue(0);
+    const shouldUseReanimatedScrollView = IsNewArchitecture;
+    const renderScrollComponentForBridge = React__namespace.useMemo(
+      () => renderScrollComponent ? (scrollViewProps) => renderScrollComponent(scrollViewProps) : void 0,
+      [renderScrollComponent]
+    );
+    const renderReanimatedScrollComponent = React.useCallback(
+      (scrollViewProps) => {
+        const { ref: forwardedRef, ...restScrollViewProps } = scrollViewProps;
+        return /* @__PURE__ */ React__namespace.createElement(
+          ReanimatedScrollBridge,
+          {
+            ...restScrollViewProps,
+            forwardedRef,
+            renderScrollComponent: renderScrollComponentForBridge,
+            scrollOffset: stickyScrollOffset
+          }
+        );
+      },
+      [renderScrollComponentForBridge, stickyScrollOffset]
+    );
+    const stickyPositionComponentInternal = React__namespace.useMemo(
+      () => function StickyPositionComponent(stickyProps) {
+        return /* @__PURE__ */ React__namespace.createElement(ReanimatedPositionViewSticky, { ...stickyProps, stickyScrollOffset });
+      },
+      [stickyScrollOffset]
+    );
+    const itemLayoutAnimationRef = React__namespace.useRef(itemLayoutAnimation);
+    itemLayoutAnimationRef.current = itemLayoutAnimation;
+    const hasItemLayoutAnimation = !!itemLayoutAnimation;
+    const positionComponentInternal = React__namespace.useMemo(() => {
+      if (!hasItemLayoutAnimation) {
+        return void 0;
+      }
+      return function PositionComponent(positionProps) {
+        return /* @__PURE__ */ React__namespace.createElement(
+          ReanimatedPositionView,
+          {
+            ...positionProps,
+            layoutTransition: itemLayoutAnimationRef.current,
+            recycleItems
+          }
+        );
+      };
+    }, [hasItemLayoutAnimation, recycleItems]);
+    const legendListProps = {
+      ...rest,
+      positionComponentInternal,
+      recycleItems,
+      ...shouldUseReanimatedScrollView ? {
+        renderScrollComponent: renderReanimatedScrollComponent,
+        stickyPositionComponentInternal
+      } : {}
+    };
+    return /* @__PURE__ */ React__namespace.createElement(reactNative.LegendList, { ref: refFn, refScrollView: ref, ...legendListProps });
   })
 );
-var AnimatedLegendListComponent = Animated__default.default.createAnimatedComponent(LegendListForwardedRef);
+var AnimatedLegendListComponent = Reanimated__default.default.createAnimatedComponent(LegendListForwardedRef);
+var AnimatedLegendListComponentTyped = AnimatedLegendListComponent;
 var AnimatedLegendList = typedMemo(
+  // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
   React__namespace.forwardRef(function AnimatedLegendList2(props, ref) {
     const { refScrollView, ...rest } = props;
+    const { animatedProps } = props;
     const refLegendList = React__namespace.useRef(null);
     const combinedRef = useCombinedRef(refLegendList, ref);
-    return /* @__PURE__ */ React__namespace.createElement(AnimatedLegendListComponent, { ref: refScrollView, refLegendList: combinedRef, ...rest });
+    const forwardedProps = {
+      ...rest,
+      animatedPropsInternal: animatedProps,
+      refLegendList: combinedRef
+    };
+    return /* @__PURE__ */ React__namespace.createElement(AnimatedLegendListComponentTyped, { ...forwardedProps, ref: refScrollView });
   })
 );
 

package/reanimated.mjs

@@ -1,53 +1,179 @@
 import * as React from 'react';
 import { useCallback, memo } from 'react';
-import Animated from 'react-native-reanimated';
-import { LegendList } from '@legendapp/list';
+import { View } from 'react-native';
+import Reanimated, { useAnimatedRef, useScrollViewOffset, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { internal, LegendList } from '@legendapp/list/react-native';
 
 // src/integrations/reanimated.tsx
-
-// src/utils/helpers.ts
-function isFunction(obj) {
-  return typeof obj === "function";
-}
-
-// src/hooks/useCombinedRef.ts
-var useCombinedRef = (...refs) => {
-  const callback = useCallback((element) => {
-    for (const ref of refs) {
-      if (!ref) {
-        continue;
-      }
-      if (isFunction(ref)) {
-        ref(element);
-      } else {
-        ref.current = element;
+var { POSITION_OUT_OF_VIEW, IsNewArchitecture, useArr$, useCombinedRef, getComponent } = internal;
+var { peek$, useStateContext } = internal;
+var typedMemo = memo;
+var ReanimatedScrollBridge = typedMemo(function ReanimatedScrollBridgeComponent({
+  forwardedRef,
+  scrollOffset,
+  renderScrollComponent,
+  ...props
+}) {
+  const animatedScrollRef = useAnimatedRef();
+  useScrollViewOffset(animatedScrollRef, scrollOffset);
+  const combinedRef = useCombinedRef(animatedScrollRef, forwardedRef);
+  const ScrollComponent = React.useMemo(
+    () => renderScrollComponent ? React.forwardRef(
+      (scrollViewProps, ref) => renderScrollComponent({ ...scrollViewProps, ref })
+    ) : Reanimated.ScrollView,
+    [renderScrollComponent]
+  );
+  return /* @__PURE__ */ React.createElement(ScrollComponent, { ...props, ref: combinedRef });
+});
+var StickyOverlay = typedMemo(function StickyOverlayComponent({ stickyHeaderConfig }) {
+  if (!(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: {
+        inset: 0,
+        pointerEvents: "none",
+        position: "absolute"
       }
+    },
+    getComponent(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)
+  );
+});
+var ReanimatedPositionViewSticky = typedMemo(function ReanimatedPositionViewStickyComponent(props) {
+  var _a;
+  const { id, horizontal, style, refView, stickyScrollOffset, stickyHeaderConfig, index, children, ...rest } = props;
+  const [position = POSITION_OUT_OF_VIEW, headerSize = 0, stylePaddingTop = 0] = useArr$([
+    `containerPosition${id}`,
+    "headerSize",
+    "stylePaddingTop"
+  ]);
+  const stickyOffset = (_a = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a : 0;
+  const stickyStart = position + headerSize + stylePaddingTop - stickyOffset;
+  const transformStyle = useAnimatedStyle(() => {
+    const delta = Math.max(0, stickyScrollOffset.value - stickyStart);
+    return horizontal ? { transform: [{ translateX: position + delta }] } : { transform: [{ translateY: position + delta }] };
+  }, [horizontal, position, stickyStart]);
+  const viewStyle = React.useMemo(
+    () => [style, { zIndex: index + 1e3 }, transformStyle],
+    [index, style, transformStyle]
+  );
+  return /* @__PURE__ */ React.createElement(Reanimated.View, { ref: refView, style: viewStyle, ...rest }, /* @__PURE__ */ React.createElement(StickyOverlay, { stickyHeaderConfig }), children);
+});
+var ReanimatedPositionView = typedMemo(function ReanimatedPositionViewComponent(props) {
+  const ctx = useStateContext();
+  const { id, horizontal, style, refView, children, recycleItems, layoutTransition, ...rest } = props;
+  const [positionValue = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
+  const prevItemKeyRef = React.useRef(void 0);
+  let shouldSkipTransitionForRecycleReuse = false;
+  if (recycleItems && layoutTransition) {
+    const itemKeySignal = `containerItemKey${id}`;
+    const itemKey = peek$(ctx, itemKeySignal);
+    shouldSkipTransitionForRecycleReuse = itemKey !== void 0 && prevItemKeyRef.current !== void 0 && prevItemKeyRef.current !== itemKey;
+    if (itemKey !== void 0) {
+      prevItemKeyRef.current = itemKey;
     }
-  }, refs);
-  return callback;
-};
-
-// src/integrations/reanimated.tsx
-var typedMemo = memo;
+  } else {
+    prevItemKeyRef.current = void 0;
+  }
+  const viewStyle = React.useMemo(
+    () => [style, horizontal ? { left: positionValue } : { top: positionValue }],
+    [horizontal, positionValue, style]
+  );
+  return /* @__PURE__ */ React.createElement(
+    Reanimated.View,
+    {
+      layout: shouldSkipTransitionForRecycleReuse ? void 0 : layoutTransition,
+      ref: refView,
+      style: viewStyle,
+      ...rest
+    },
+    children
+  );
+});
 var LegendListForwardedRef = typedMemo(
+  // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
   React.forwardRef(function LegendListForwardedRef2(props, ref) {
-    const { refLegendList, ...rest } = props;
+    const { itemLayoutAnimation, recycleItems, refLegendList, renderScrollComponent, ...rest } = props;
     const refFn = useCallback(
       (r) => {
         refLegendList(r);
       },
       [refLegendList]
     );
-    return /* @__PURE__ */ React.createElement(LegendList, { ref: refFn, refScrollView: ref, ...rest });
+    const stickyScrollOffset = useSharedValue(0);
+    const shouldUseReanimatedScrollView = IsNewArchitecture;
+    const renderScrollComponentForBridge = React.useMemo(
+      () => renderScrollComponent ? (scrollViewProps) => renderScrollComponent(scrollViewProps) : void 0,
+      [renderScrollComponent]
+    );
+    const renderReanimatedScrollComponent = useCallback(
+      (scrollViewProps) => {
+        const { ref: forwardedRef, ...restScrollViewProps } = scrollViewProps;
+        return /* @__PURE__ */ React.createElement(
+          ReanimatedScrollBridge,
+          {
+            ...restScrollViewProps,
+            forwardedRef,
+            renderScrollComponent: renderScrollComponentForBridge,
+            scrollOffset: stickyScrollOffset
+          }
+        );
+      },
+      [renderScrollComponentForBridge, stickyScrollOffset]
+    );
+    const stickyPositionComponentInternal = React.useMemo(
+      () => function StickyPositionComponent(stickyProps) {
+        return /* @__PURE__ */ React.createElement(ReanimatedPositionViewSticky, { ...stickyProps, stickyScrollOffset });
+      },
+      [stickyScrollOffset]
+    );
+    const itemLayoutAnimationRef = React.useRef(itemLayoutAnimation);
+    itemLayoutAnimationRef.current = itemLayoutAnimation;
+    const hasItemLayoutAnimation = !!itemLayoutAnimation;
+    const positionComponentInternal = React.useMemo(() => {
+      if (!hasItemLayoutAnimation) {
+        return void 0;
+      }
+      return function PositionComponent(positionProps) {
+        return /* @__PURE__ */ React.createElement(
+          ReanimatedPositionView,
+          {
+            ...positionProps,
+            layoutTransition: itemLayoutAnimationRef.current,
+            recycleItems
+          }
+        );
+      };
+    }, [hasItemLayoutAnimation, recycleItems]);
+    const legendListProps = {
+      ...rest,
+      positionComponentInternal,
+      recycleItems,
+      ...shouldUseReanimatedScrollView ? {
+        renderScrollComponent: renderReanimatedScrollComponent,
+        stickyPositionComponentInternal
+      } : {}
+    };
+    return /* @__PURE__ */ React.createElement(LegendList, { ref: refFn, refScrollView: ref, ...legendListProps });
   })
 );
-var AnimatedLegendListComponent = Animated.createAnimatedComponent(LegendListForwardedRef);
+var AnimatedLegendListComponent = Reanimated.createAnimatedComponent(LegendListForwardedRef);
+var AnimatedLegendListComponentTyped = AnimatedLegendListComponent;
 var AnimatedLegendList = typedMemo(
+  // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
   React.forwardRef(function AnimatedLegendList2(props, ref) {
     const { refScrollView, ...rest } = props;
+    const { animatedProps } = props;
     const refLegendList = React.useRef(null);
     const combinedRef = useCombinedRef(refLegendList, ref);
-    return /* @__PURE__ */ React.createElement(AnimatedLegendListComponent, { ref: refScrollView, refLegendList: combinedRef, ...rest });
+    const forwardedProps = {
+      ...rest,
+      animatedPropsInternal: animatedProps,
+      refLegendList: combinedRef
+    };
+    return /* @__PURE__ */ React.createElement(AnimatedLegendListComponentTyped, { ...forwardedProps, ref: refScrollView });
   })
 );