react-native-reorderable-list 0.16.1 → 0.17.0

package/src/components/ScrollViewContainer.tsx

@@ -25,9 +25,10 @@ const ScrollViewContainerWithRef = (
     useState(false);
   const scrollViewScrollEnabledProp = usePropAsSharedValue(scrollEnabled);
   const scrollViewContainerRef = useAnimatedRef<Animated.ScrollView>();
-  const scrollViewScrollOffsetY = useSharedValue(0);
-  const scrollViewPageY = useSharedValue(0);
-  const scrollViewHeightY = useSharedValue(0);
+  const scrollViewScrollOffsetXY = useSharedValue(0);
+  const scrollViewPageXY = useSharedValue(0);
+  const scrollViewSize = useSharedValue(0);
+  const horizontalProp = usePropAsSharedValue(!!rest.horizontal);
 
   const handleRef = useCallback(
     (value: Animated.ScrollView) => {
@@ -46,9 +47,11 @@ const ScrollViewContainerWithRef = (
 
   const handleScroll = useAnimatedScrollHandler(
     e => {
-      scrollViewScrollOffsetY.value = e.contentOffset.y;
+      scrollViewScrollOffsetXY.value = horizontalProp.value
+        ? e.contentOffset.x
+        : e.contentOffset.y;
     },
-    [scrollViewScrollOffsetY],
+    [scrollViewScrollOffsetXY],
   );
 
   const composedScrollHandler = useComposedEventHandler([
@@ -59,18 +62,18 @@ const ScrollViewContainerWithRef = (
   const contextValue = useMemo(
     () => ({
       scrollViewContainerRef,
-      scrollViewPageY,
-      scrollViewHeightY,
-      scrollViewScrollOffsetY,
+      scrollViewPageXY,
+      scrollViewSize,
+      scrollViewScrollOffsetXY,
       scrollViewScrollEnabledProp,
       outerScrollGesture,
       setScrollViewForceDisableScroll,
     }),
     [
       scrollViewContainerRef,
-      scrollViewPageY,
-      scrollViewHeightY,
-      scrollViewScrollOffsetY,
+      scrollViewPageXY,
+      scrollViewSize,
+      scrollViewScrollOffsetXY,
       scrollViewScrollEnabledProp,
       outerScrollGesture,
       setScrollViewForceDisableScroll,
@@ -79,7 +82,9 @@ const ScrollViewContainerWithRef = (
 
   const handleLayout = useCallback(
     (e: LayoutChangeEvent) => {
-      scrollViewHeightY.value = e.nativeEvent.layout.height;
+      scrollViewSize.value = horizontalProp.value
+        ? e.nativeEvent.layout.width
+        : e.nativeEvent.layout.height;
 
       // measuring pageY allows wrapping nested lists in other views
       runOnUI(() => {
@@ -88,12 +93,20 @@ const ScrollViewContainerWithRef = (
           return;
         }
 
-        scrollViewPageY.value = measurement.pageY;
+        scrollViewPageXY.value = horizontalProp.value
+          ? measurement.pageX
+          : measurement.pageY;
       })();
 
       onLayout?.(e);
     },
-    [onLayout, scrollViewContainerRef, scrollViewHeightY, scrollViewPageY],
+    [
+      onLayout,
+      scrollViewContainerRef,
+      scrollViewSize,
+      scrollViewPageXY,
+      horizontalProp,
+    ],
   );
 
   return (

package/src/contexts/ReorderableListContext.ts

@@ -6,11 +6,12 @@ import {ItemLayoutAnimation, ReorderableListCellAnimations} from '../types';
 
 interface ReorderableListContextData {
   currentIndex: SharedValue<number>;
-  draggedHeight: SharedValue<number>;
+  draggedSize: SharedValue<number>;
   dragEndHandlers: SharedValue<((from: number, to: number) => void)[][]>;
   activeIndex: number;
   itemLayoutAnimation: React.MutableRefObject<ItemLayoutAnimation | undefined>;
   cellAnimations: ReorderableListCellAnimations;
+  horizontal: SharedValue<boolean>;
 }
 
 export const ReorderableListContext = React.createContext<

package/src/contexts/ScrollViewContainerContext.ts

@@ -6,9 +6,9 @@ import {SharedValue} from 'react-native-reanimated';
 
 interface ScrollViewContainerContextData {
   scrollViewContainerRef: React.RefObject<ScrollView>;
-  scrollViewPageY: SharedValue<number>;
-  scrollViewHeightY: SharedValue<number>;
-  scrollViewScrollOffsetY: SharedValue<number>;
+  scrollViewPageXY: SharedValue<number>;
+  scrollViewSize: SharedValue<number>;
+  scrollViewScrollOffsetXY: SharedValue<number>;
   scrollViewScrollEnabledProp: SharedValue<boolean>;
   outerScrollGesture: NativeGesture;
   setScrollViewForceDisableScroll: Dispatch<SetStateAction<boolean>>;

package/src/index.ts

@@ -10,6 +10,7 @@ import {
   useReorderableDragStart,
 } from './hooks';
 import type {
+  NestedReorderableListProps,
   ReorderableListCellAnimations,
   ReorderableListDragEndEvent,
   ReorderableListDragStartEvent,
@@ -25,6 +26,7 @@ export {
   useReorderableDrag,
   useReorderableDragStart,
   useReorderableDragEnd,
+  NestedReorderableListProps,
   ReorderableListProps,
   ReorderableListReorderEvent,
   ReorderableListCellAnimations,

package/src/types/props.ts

@@ -59,7 +59,6 @@ export interface ReorderableListDragEndEvent {
 }
 
 type OmittedProps =
-  | 'horizontal'
   | 'onScroll'
   | 'scrollEventThrottle'
   | 'removeClippedSubviews'
@@ -71,15 +70,35 @@ export interface ReorderableListProps<T>
   data: T[];
   /**
    * Threshold at the extremety of the list which triggers autoscroll when an item is dragged to it.
-   * A value of 0.1 means that 10% of the area at the top and 10% at the bottom of the list will trigger autoscroll
+   * A value of 0.1 means that 10% of the area at the start and 10% at the end of the list will trigger autoscroll
    * when an item is dragged to it. Min value: `0`. Max value: `0.4`. Default: `0.1`.
    */
   autoscrollThreshold?: number;
   /**
-   * Amount by which the threshold is offset at the extremety of the list.
-   * For example, setting `{top: 50}` will make the autoscroll trigger 50 pixels earlier at the top.
+   * Amount by which the threshold is offset at the extremity of the list.
+   * For example, setting `{start: 50}` will make the autoscroll trigger 50 pixels earlier at the start of the list.
    */
-  autoscrollThresholdOffset?: {top?: number; bottom?: number};
+  autoscrollThresholdOffset?: {
+    /**
+     * @deprecated Use `start` instead.
+     */
+    top?: number;
+
+    /**
+     * @deprecated Use `end` instead.
+     */
+    bottom?: number;
+
+    /**
+     * Offset from the start of the list.
+     */
+    start?: number;
+
+    /**
+     * Offset from the end of the list.
+     */
+    end?: number;
+  };
   /**
    * Scales the autoscroll spreed at which the list scrolls when an item is dragged to the scroll areas. Default: `1`.
    */