react-native-reorderable-list 0.7.1 → 0.9.0

package/src/components/ReorderableListCore/useReorderableListCore.ts

@@ -1,8 +1,7 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {
   FlatList,
   LayoutChangeEvent,
-  NativeScrollEvent,
   ScrollView,
   unstable_batchedUpdates,
 } from 'react-native';
@@ -23,8 +22,17 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import {AUTOSCROLL_CONFIG} from './constants';
-import {ReorderableListDragEndEvent, ReorderableListState} from '../../types';
+import {
+  OPACITY_ANIMATION_CONFIG_DEFAULT,
+  SCALE_ANIMATION_CONFIG_DEFAULT,
+} from './animationDefaults';
+import {AUTOSCROLL_CONFIG} from './autoscrollConfig';
+import {
+  ReorderableListCellAnimations,
+  ReorderableListDragEndEvent,
+  ReorderableListDragStartEvent,
+  ReorderableListState,
+} from '../../types';
 import type {ReorderableListReorderEvent} from '../../types';
 
 const version = React.version.split('.');
@@ -40,8 +48,8 @@ interface UseReorderableListCoreArgs<T> {
   animationDuration: number;
   dragReorderThreshold: number;
   onReorder: (event: ReorderableListReorderEvent) => void;
+  onDragStart?: (event: ReorderableListDragStartEvent) => void;
   onDragEnd?: (event: ReorderableListDragEndEvent) => void;
-  onScroll?: (event: NativeScrollEvent) => void;
   onLayout?: (event: LayoutChangeEvent) => void;
   scrollViewContainerRef: React.RefObject<ScrollView> | undefined;
   scrollViewHeightY: SharedValue<number> | undefined;
@@ -50,6 +58,10 @@ interface UseReorderableListCoreArgs<T> {
   initialScrollEnabled: boolean | undefined;
   initialScrollViewScrollEnabled: boolean | undefined;
   nestedScrollable: boolean | undefined;
+  cellAnimations: ReorderableListCellAnimations | undefined;
+  shouldUpdateActiveItem: boolean | undefined;
+  panEnabled: boolean;
+  panActivateAfterLongPress: number | undefined;
 }
 
 export const useReorderableListCore = <T>({
@@ -60,8 +72,8 @@ export const useReorderableListCore = <T>({
   animationDuration,
   dragReorderThreshold,
   onReorder,
+  onDragStart,
   onDragEnd,
-  onScroll,
   onLayout,
   scrollViewContainerRef,
   scrollViewHeightY,
@@ -70,8 +82,13 @@ export const useReorderableListCore = <T>({
   initialScrollEnabled,
   initialScrollViewScrollEnabled,
   nestedScrollable,
+  cellAnimations,
+  shouldUpdateActiveItem,
+  panActivateAfterLongPress,
+  panEnabled,
 }: UseReorderableListCoreArgs<T>) => {
   const flatListRef = useAnimatedRef<FlatList>();
+  const [activeIndex, setActiveIndex] = useState(-1);
   const scrollEnabled = useSharedValue(initialScrollEnabled);
   const gestureState = useSharedValue<State>(State.UNDETERMINED);
   const currentY = useSharedValue(0);
@@ -100,6 +117,9 @@ export const useReorderableListCore = <T>({
   >([]);
   const startY = useSharedValue(0);
   const duration = useSharedValue(animationDuration);
+  const scaleDefault = useSharedValue(1);
+  const opacityDefault = useSharedValue(1);
+  const {scale, opacity} = cellAnimations || {};
 
   useEffect(() => {
     duration.value = animationDuration;
@@ -111,8 +131,21 @@ export const useReorderableListCore = <T>({
       currentIndex,
       draggedIndex,
       dragEndHandlers,
+      activeIndex,
+      scale: scale || scaleDefault,
+      opacity: opacity || opacityDefault,
     }),
-    [draggedHeight, currentIndex, draggedIndex, dragEndHandlers],
+    [
+      draggedHeight,
+      currentIndex,
+      draggedIndex,
+      dragEndHandlers,
+      activeIndex,
+      scale,
+      scaleDefault,
+      opacity,
+      opacityDefault,
+    ],
   );
 
   const panGestureHandler = useMemo(
@@ -124,22 +157,18 @@ export const useReorderableListCore = <T>({
             startY.value = e.y;
             currentY.value = e.y;
             currentTranslationY.value = e.translationY;
-            if (draggedIndex.value >= 0) {
-              dragY.value = e.translationY;
-            }
+            dragY.value = e.translationY;
             gestureState.value = e.state;
           }
         })
         .onUpdate(e => {
-          if (state.value !== ReorderableListState.RELEASING) {
+          if (state.value !== ReorderableListState.RELEASED) {
             currentY.value = startY.value + e.translationY;
             currentTranslationY.value = e.translationY;
-            if (draggedIndex.value >= 0) {
-              dragY.value =
-                e.translationY +
-                dragScrollTranslationY.value +
-                scrollViewDragScrollTranslationY.value;
-            }
+            dragY.value =
+              e.translationY +
+              dragScrollTranslationY.value +
+              scrollViewDragScrollTranslationY.value;
             gestureState.value = e.state;
           }
         })
@@ -150,7 +179,6 @@ export const useReorderableListCore = <T>({
       currentY,
       dragScrollTranslationY,
       scrollViewDragScrollTranslationY,
-      draggedIndex,
       gestureState,
       dragY,
       startY,
@@ -158,9 +186,21 @@ export const useReorderableListCore = <T>({
     ],
   );
 
+  const panGestureHandlerWithOptions = useMemo(() => {
+    if (typeof panActivateAfterLongPress === 'number') {
+      panGestureHandler.activateAfterLongPress(panActivateAfterLongPress);
+    }
+
+    if (!panEnabled) {
+      panGestureHandler.enabled(panEnabled);
+    }
+
+    return panGestureHandler;
+  }, [panActivateAfterLongPress, panEnabled, panGestureHandler]);
+
   const gestureHandler = useMemo(
-    () => Gesture.Simultaneous(Gesture.Native(), panGestureHandler),
-    [panGestureHandler],
+    () => Gesture.Simultaneous(Gesture.Native(), panGestureHandlerWithOptions),
+    [panGestureHandlerWithOptions],
   );
 
   const setScrollEnabled = useCallback(
@@ -195,21 +235,23 @@ export const useReorderableListCore = <T>({
   const resetSharedValues = useCallback(() => {
     'worklet';
 
-    // current index is reset on item render for the on end event
-    draggedIndex.value = -1;
-    // released flag is reset after release is triggered in the item
     state.value = ReorderableListState.IDLE;
+    draggedIndex.value = -1;
     dragY.value = 0;
     dragScrollTranslationY.value = 0;
     scrollViewDragScrollTranslationY.value = 0;
   }, [
+    draggedIndex,
     dragY,
     dragScrollTranslationY,
     scrollViewDragScrollTranslationY,
-    draggedIndex,
     state,
   ]);
 
+  const resetSharedValuesAfterAnimations = useCallback(() => {
+    setTimeout(runOnUI(resetSharedValues), duration.value);
+  }, [resetSharedValues, duration]);
+
   const reorder = (fromIndex: number, toIndex: number) => {
     runOnUI(resetSharedValues)();
 
@@ -313,19 +355,43 @@ export const useReorderableListCore = <T>({
     ],
   );
 
+  const runDefaultDragAnimations = useCallback(
+    (type: 'start' | 'end') => {
+      'worklet';
+
+      // if animation is not disabled and not custom run the default
+      if (scale !== false && !scale) {
+        const scaleConfig = SCALE_ANIMATION_CONFIG_DEFAULT[type];
+        scaleDefault.value = withTiming(scaleConfig.toValue, scaleConfig);
+      }
+
+      // if animation is not disabled and not custom run the default
+      if (opacity !== false && !opacity) {
+        const opacityConfig = OPACITY_ANIMATION_CONFIG_DEFAULT[type];
+        opacityDefault.value = withTiming(opacityConfig.toValue, opacityConfig);
+      }
+    },
+    [scale, scaleDefault, opacity, opacityDefault],
+  );
+
   useAnimatedReaction(
     () => gestureState.value,
     () => {
       if (
         gestureState.value !== State.ACTIVE &&
         gestureState.value !== State.BEGAN &&
-        (state.value === ReorderableListState.DRAGGING ||
-          state.value === ReorderableListState.AUTO_SCROLL)
+        (state.value === ReorderableListState.DRAGGED ||
+          state.value === ReorderableListState.AUTOSCROLL)
       ) {
-        state.value = ReorderableListState.RELEASING;
+        state.value = ReorderableListState.RELEASED;
 
         // enable back scroll on releasing
         runOnJS(setScrollEnabled)(true);
+
+        if (shouldUpdateActiveItem) {
+          runOnJS(setActiveIndex)(-1);
+        }
+
         // trigger onDragEnd event
         let e = {from: draggedIndex.value, to: currentIndex.value};
         onDragEnd?.(e);
@@ -348,6 +414,8 @@ export const useReorderableListCore = <T>({
               currentItemOffset +
               (draggedItemHeight - currentItemHeight);
 
+        runDefaultDragAnimations('end');
+
         if (dragY.value !== newTopPosition) {
           // animate dragged item to its new position on release
           dragY.value = withTiming(
@@ -364,7 +432,7 @@ export const useReorderableListCore = <T>({
           // user might drag and release the item without moving it so,
           // since the animation end callback is not executed in that case
           // we need to reset values as the reorder function would do
-          resetSharedValues();
+          runOnJS(resetSharedValuesAfterAnimations)();
         }
       }
     },
@@ -485,20 +553,20 @@ export const useReorderableListCore = <T>({
     () => currentY.value + scrollViewDragScrollTranslationY.value,
     y => {
       if (
-        state.value === ReorderableListState.DRAGGING ||
-        state.value === ReorderableListState.AUTO_SCROLL
+        state.value === ReorderableListState.DRAGGED ||
+        state.value === ReorderableListState.AUTOSCROLL
       ) {
         setCurrentIndex(y);
 
         if (scrollDirection(y) !== 0) {
-          if (state.value !== ReorderableListState.AUTO_SCROLL) {
+          if (state.value !== ReorderableListState.AUTOSCROLL) {
             // trigger autoscroll
             lastAutoscrollTrigger.value = autoscrollTrigger.value;
             autoscrollTrigger.value *= -1;
-            state.value = ReorderableListState.AUTO_SCROLL;
+            state.value = ReorderableListState.AUTOSCROLL;
           }
-        } else if (state.value === ReorderableListState.AUTO_SCROLL) {
-          state.value = ReorderableListState.DRAGGING;
+        } else if (state.value === ReorderableListState.AUTOSCROLL) {
+          state.value = ReorderableListState.DRAGGED;
         }
       }
     },
@@ -509,7 +577,7 @@ export const useReorderableListCore = <T>({
     () => {
       if (
         autoscrollTrigger.value !== lastAutoscrollTrigger.value &&
-        state.value === ReorderableListState.AUTO_SCROLL
+        state.value === ReorderableListState.AUTOSCROLL
       ) {
         let y = currentY.value + scrollViewDragScrollTranslationY.value;
         const autoscrollIncrement =
@@ -550,7 +618,7 @@ export const useReorderableListCore = <T>({
         flatListScrollOffsetY.value - dragInitialScrollOffsetY.value;
     }
 
-    if (state.value === ReorderableListState.AUTO_SCROLL) {
+    if (state.value === ReorderableListState.AUTOSCROLL) {
       dragY.value =
         currentTranslationY.value +
         dragScrollTranslationY.value +
@@ -562,8 +630,6 @@ export const useReorderableListCore = <T>({
         withTiming(autoscrollTrigger.value * -1, {duration: 0}),
       );
     }
-
-    onScroll?.(e);
   });
 
   // parent scroll handler
@@ -579,7 +645,7 @@ export const useReorderableListCore = <T>({
             value - scrollViewDragInitialScrollOffsetY.value;
         }
 
-        if (state.value === ReorderableListState.AUTO_SCROLL) {
+        if (state.value === ReorderableListState.AUTOSCROLL) {
           dragY.value =
             currentTranslationY.value + scrollViewDragScrollTranslationY.value;
 
@@ -603,6 +669,10 @@ export const useReorderableListCore = <T>({
         // after scrolling the parent list it would offset the new dragged item in another nested list
         resetSharedValues();
 
+        if (shouldUpdateActiveItem) {
+          runOnJS(setActiveIndex)(index);
+        }
+
         dragInitialScrollOffsetY.value = flatListScrollOffsetY.value;
         scrollViewDragInitialScrollOffsetY.value = scrollViewScrollOffsetY
           ? scrollViewScrollOffsetY.value
@@ -612,13 +682,18 @@ export const useReorderableListCore = <T>({
         draggedIndex.value = index;
         previousIndex.value = -1;
         currentIndex.value = index;
-        state.value = ReorderableListState.DRAGGING;
+        state.value = ReorderableListState.DRAGGED;
 
         runOnJS(setScrollEnabled)(false);
+
+        // run animation before onDragStart to avoid potentially waiting for it
+        runDefaultDragAnimations('start');
+        onDragStart?.({index});
       }
     },
     [
       resetSharedValues,
+      shouldUpdateActiveItem,
       dragInitialScrollOffsetY,
       scrollViewScrollOffsetY,
       scrollViewDragInitialScrollOffsetY,
@@ -630,6 +705,8 @@ export const useReorderableListCore = <T>({
       state,
       flatListScrollOffsetY,
       itemHeight,
+      onDragStart,
+      runDefaultDragAnimations,
     ],
   );
 

package/src/components/ScrollViewContainer.tsx

@@ -5,6 +5,7 @@ import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {
   useAnimatedRef,
   useAnimatedScrollHandler,
+  useComposedEventHandler,
   useSharedValue,
 } from 'react-native-reanimated';
 
@@ -27,12 +28,15 @@ export const ScrollViewContainer: React.FC<ScrollViewContainerProps> = ({
   const handleScroll = useAnimatedScrollHandler(
     e => {
       scrollViewScrollOffsetY.value = e.contentOffset.y;
-
-      onScroll?.(e);
     },
     [scrollViewScrollOffsetY],
   );
 
+  const composedScrollHandler = useComposedEventHandler([
+    handleScroll,
+    onScroll || null,
+  ]);
+
   const contextValue = useMemo(
     () => ({
       scrollViewContainerRef,
@@ -64,7 +68,7 @@ export const ScrollViewContainer: React.FC<ScrollViewContainerProps> = ({
         <Animated.ScrollView
           {...rest}
           ref={scrollViewContainerRef}
-          onScroll={handleScroll}
+          onScroll={composedScrollHandler}
           onLayout={handleLayout}
           scrollEnabled={scrollEnabled}
         />

package/src/components/index.ts

@@ -1,5 +1,4 @@
 export * from './ReorderableList';
 export * from './NestedReorderableList';
 export * from './ReorderableListCell';
-export * from './ReorderableListItem';
 export * from './ScrollViewContainer';

package/src/contexts/ReorderableCellContext.ts

@@ -6,6 +6,7 @@ interface ReorderableCellContextData {
   index: number;
   dragHandler: () => void;
   draggedIndex: SharedValue<number>;
+  isActive: boolean;
 }
 
 export const ReorderableCellContext = React.createContext<

package/src/contexts/ReorderableListContext.ts

@@ -6,6 +6,9 @@ interface ReorderableListContextData {
   currentIndex: SharedValue<number>;
   draggedHeight: SharedValue<number>;
   dragEndHandlers: SharedValue<((from: number, to: number) => void)[][]>;
+  scale: SharedValue<number>;
+  opacity: SharedValue<number>;
+  activeIndex: number;
 }
 
 export const ReorderableListContext = React.createContext<

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './useIsActive';
 export * from './useReorderableDrag';
 export * from './useReorderableDragStart';
 export * from './useReorderableDragEnd';

package/src/hooks/useIsActive.ts

@@ -0,0 +1,7 @@
+import {useContext} from './useContext';
+import {ReorderableCellContext} from '../contexts';
+
+export const useIsActive = () => {
+  const {isActive} = useContext(ReorderableCellContext);
+  return isActive;
+};

package/src/index.ts

@@ -1,18 +1,18 @@
 import {
   NestedReorderableList,
   ReorderableList,
-  ReorderableListItem,
   ScrollViewContainer,
 } from './components';
 import {
+  useIsActive,
   useReorderableDrag,
   useReorderableDragEnd,
   useReorderableDragStart,
 } from './hooks';
 import type {
+  ReorderableListCellAnimations,
   ReorderableListDragEndEvent,
-  ReorderableListItemConfig,
-  ReorderableListItemProps,
+  ReorderableListDragStartEvent,
   ReorderableListProps,
   ReorderableListReorderEvent,
   ScrollViewContainerProps,
@@ -20,15 +20,15 @@ import type {
 import {reorderItems} from './utils';
 
 export {
+  useIsActive,
   useReorderableDrag,
   useReorderableDragStart,
   useReorderableDragEnd,
   ReorderableListProps,
   ReorderableListReorderEvent,
+  ReorderableListCellAnimations,
+  ReorderableListDragStartEvent,
   ReorderableListDragEndEvent,
-  ReorderableListItem,
-  ReorderableListItemConfig,
-  ReorderableListItemProps,
   ScrollViewContainer,
   ScrollViewContainerProps,
   NestedReorderableList,

package/src/types/misc.ts

@@ -1,6 +1,6 @@
 export enum ReorderableListState {
   IDLE = 0,
-  DRAGGING,
-  RELEASING,
-  AUTO_SCROLL,
+  DRAGGED,
+  RELEASED,
+  AUTOSCROLL,
 }

package/src/types/props.ts

@@ -1,11 +1,6 @@
-import type {
-  FlatListProps,
-  NativeScrollEvent,
-  ScrollViewProps,
-  ViewProps,
-} from 'react-native';
+import type {FlatListProps, ScrollViewProps} from 'react-native';
 
-import {EasingFunction} from 'react-native-reanimated';
+import {SharedValue, useAnimatedScrollHandler} from 'react-native-reanimated';
 
 export interface ReorderableListReorderEvent {
   /**
@@ -18,6 +13,13 @@ export interface ReorderableListReorderEvent {
   to: number;
 }
 
+export interface ReorderableListDragStartEvent {
+  /**
+   * Index of the dragged item.
+   */
+  index: number;
+}
+
 export interface ReorderableListDragEndEvent {
   /**
    * Index of the dragged item.
@@ -69,63 +71,56 @@ export interface ReorderableListProps<T>
    */
   animationDuration?: number;
   /**
-   * Event fired after an item is released and the list is reordered.
+   * Allows passing an object with shared values that can animate a cell by using the `onDragStart` and `onDragEnd` events.
    */
-  onReorder: (event: ReorderableListReorderEvent) => void;
+  cellAnimations?: ReorderableListCellAnimations;
   /**
-   * Event fired at most once per frame during scrolling. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
+   * Whether the active item should be updated. Enables usage of `useIsActive` hook. Default: `false`.
    */
-  onScroll?: (event: NativeScrollEvent) => void;
+  shouldUpdateActiveItem?: boolean;
   /**
-   * Event fired when the dragged item is released. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
+   * Wether the pan gestures necessary for dragging are enabled. Default: `true`.
    */
-  onDragEnd?: (event: ReorderableListDragEndEvent) => void;
-}
-
-export interface ReorderableListItemConfig {
-  /**
-   * Value of the animated style on drag end.
-   */
-  enabled?: boolean;
+  panEnabled?: boolean;
   /**
-   * Value of the animated style on drag end.
+   * Duration in milliseconds of a long press on the list before pan gestures, necessary for dragging, are allowed to activate.
    */
-  valueEnd?: number;
+  panActivateAfterLongPress?: number;
   /**
-   * Value of the animated style on drag start.
+   * Event fired after an item is released and the list is reordered.
    */
-  valueStart?: number;
+  onReorder: (event: ReorderableListReorderEvent) => void;
   /**
-   * Easing function for the animation to the end value. Default: `Easing.in(Easing.ease)`.
+   * An animated scroll handler created with useAnimatedScrollHandler. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
    */
-  easingEnd?: EasingFunction;
+  onScroll?: ReturnType<typeof useAnimatedScrollHandler>;
   /**
-   * Easing function for the animation to the start value. Default: `Easing.out(Easing.ease)`.
+   * Event fired when an item is dragged. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
    */
-  easingStart?: EasingFunction;
+  onDragStart?: (event: ReorderableListDragStartEvent) => void;
   /**
-   * Duration of the animations in milliseconds. Default: `200`.
+   * Event fired when the dragged item is released. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
    */
-  duration?: number;
+  onDragEnd?: (event: ReorderableListDragEndEvent) => void;
 }
 
-export interface ReorderableListItemProps extends ViewProps {
+export interface ReorderableListCellAnimations {
   /**
-   * Config for the `opacity` animation. Enabled by default with custom default options.
+   * Shared value to animate the opacity of a dragged item. Set to false to disable default opacity animations.
    */
-  opacityAnimationConfig?: ReorderableListItemConfig;
+  opacity?: SharedValue<number> | false;
   /**
-   * Config for the `scale` animation. Enabled by default with custom default options.
+   * Shared value to animate the scale of a dragged item. Set to false to disable default scale animations.
    */
-  scaleAnimationConfig?: ReorderableListItemConfig;
+  scale?: SharedValue<number> | false;
 }
 
 export interface ScrollViewContainerProps
   extends Omit<ScrollViewProps, 'onScroll'> {
   /**
-   * Event fired at most once per frame during scrolling. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
+   * An animated scroll handler created with useAnimatedScrollHandler. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
    */
-  onScroll?: (event: NativeScrollEvent) => void;
+  onScroll?: ReturnType<typeof useAnimatedScrollHandler>;
 }
 
 export interface NestedReorderableListProps<T> extends ReorderableListProps<T> {

package/lib/commonjs/components/ReorderableListCore/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","IOS_CONFIG","delay","increment","ANDROID_FABRIC_CONFIG","ANDROID_PAPER_CONFIG","IS_FABRIC","exports","global","AUTOSCROLL_CONFIG","Platform","select","android","ios","web","macos","windows","native"],"sourceRoot":"../../../../src","sources":["components/ReorderableListCore/constants.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,MAAMC,UAAU,GAAG;EACjBC,KAAK,EAAE,EAAE;EACTC,SAAS,EAAE;AACb,CAAC;AAED,MAAMC,qBAAqB,GAAG;EAC5BF,KAAK,EAAE,EAAE;EACTC,SAAS,EAAE;AACb,CAAC;AAED,MAAME,oBAAoB,GAAG;EAC3BH,KAAK,EAAE,EAAE;EACTC,SAAS,EAAE;AACb,CAAC;AAEM,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GACpBE,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAI,uBAAuB,IAAIA,MAAM;AAEpE,MAAMC,iBAAiB,GAAAF,OAAA,CAAAE,iBAAA,GAAGC,qBAAQ,CAACC,MAAM,CAAC;EAC/C;EACAC,OAAO,EAAEN,SAAS,GAAGF,qBAAqB,GAAGC,oBAAoB;EACjEQ,GAAG,EAAEZ,UAAU;EAEf;EACAa,GAAG,EAAEb,UAAU;EACfc,KAAK,EAAEd,UAAU;EACjBe,OAAO,EAAEf,UAAU;EACnBgB,MAAM,EAAEhB;AACV,CAAC,CAAC","ignoreList":[]}