react-native-reorderable-list 0.8.0 → 0.9.0

package/src/components/ReorderableListCore/ReorderableListCore.tsx

@@ -43,7 +43,6 @@ interface ReorderableListCoreProps<T> extends ReorderableListProps<T> {
 
 const ReorderableListCore = <T,>(
   {
-    data,
     autoscrollThreshold = 0.1,
     autoscrollSpeedScale = 1,
     autoscrollDelay = AUTOSCROLL_CONFIG.delay,
@@ -54,17 +53,17 @@ const ReorderableListCore = <T,>(
     onScroll,
     onDragStart,
     onDragEnd,
-    keyExtractor,
-    extraData,
     scrollViewContainerRef,
     scrollViewHeightY,
     scrollViewScrollOffsetY,
     scrollViewScrollEnabled,
-    scrollEnabled,
     initialScrollViewScrollEnabled,
     scrollable,
     outerScrollGesture,
     cellAnimations,
+    shouldUpdateActiveItem,
+    panEnabled = true,
+    panActivateAfterLongPress,
     ...rest
   }: ReorderableListCoreProps<T>,
   ref: React.ForwardedRef<FlatList<T>>,
@@ -99,13 +98,16 @@ const ReorderableListCore = <T,>(
     // flatlist will default to true if we pass explicitly undefined,
     // but internally we would treat it as false, so we force true
     initialScrollEnabled:
-      typeof scrollEnabled === 'undefined' ? true : scrollEnabled,
+      typeof rest.scrollEnabled === 'undefined' ? true : rest.scrollEnabled,
     initialScrollViewScrollEnabled:
       typeof initialScrollViewScrollEnabled === 'undefined'
         ? true
         : initialScrollViewScrollEnabled,
     nestedScrollable: scrollable,
     cellAnimations,
+    shouldUpdateActiveItem,
+    panEnabled,
+    panActivateAfterLongPress,
   });
 
   const combinedGesture = useMemo(() => {
@@ -145,17 +147,13 @@ const ReorderableListCore = <T,>(
         <AnimatedFlatList
           {...rest}
           ref={handleRef}
-          data={data}
           CellRendererComponent={renderAnimatedCell}
           onLayout={handleFlatListLayout}
           onScroll={composedScrollHandler}
           scrollEventThrottle={1}
           horizontal={false}
           removeClippedSubviews={false}
-          keyExtractor={keyExtractor}
-          extraData={extraData}
           numColumns={1}
-          scrollEnabled={scrollEnabled}
         />
       </GestureDetector>
     </ReorderableListContext.Provider>

package/src/components/ReorderableListCore/useReorderableListCore.ts

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {
   FlatList,
   LayoutChangeEvent,
@@ -59,6 +59,9 @@ interface UseReorderableListCoreArgs<T> {
   initialScrollViewScrollEnabled: boolean | undefined;
   nestedScrollable: boolean | undefined;
   cellAnimations: ReorderableListCellAnimations | undefined;
+  shouldUpdateActiveItem: boolean | undefined;
+  panEnabled: boolean;
+  panActivateAfterLongPress: number | undefined;
 }
 
 export const useReorderableListCore = <T>({
@@ -80,8 +83,12 @@ export const useReorderableListCore = <T>({
   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);
@@ -124,6 +131,7 @@ export const useReorderableListCore = <T>({
       currentIndex,
       draggedIndex,
       dragEndHandlers,
+      activeIndex,
       scale: scale || scaleDefault,
       opacity: opacity || opacityDefault,
     }),
@@ -132,6 +140,7 @@ export const useReorderableListCore = <T>({
       currentIndex,
       draggedIndex,
       dragEndHandlers,
+      activeIndex,
       scale,
       scaleDefault,
       opacity,
@@ -177,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(
@@ -367,6 +388,10 @@ export const useReorderableListCore = <T>({
         // 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);
@@ -644,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
@@ -664,6 +693,7 @@ export const useReorderableListCore = <T>({
     },
     [
       resetSharedValues,
+      shouldUpdateActiveItem,
       dragInitialScrollOffsetY,
       scrollViewScrollOffsetY,
       scrollViewDragInitialScrollOffsetY,

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

@@ -8,6 +8,7 @@ interface ReorderableListContextData {
   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

@@ -4,6 +4,7 @@ import {
   ScrollViewContainer,
 } from './components';
 import {
+  useIsActive,
   useReorderableDrag,
   useReorderableDragEnd,
   useReorderableDragStart,
@@ -19,6 +20,7 @@ import type {
 import {reorderItems} from './utils';
 
 export {
+  useIsActive,
   useReorderableDrag,
   useReorderableDragStart,
   useReorderableDragEnd,

package/src/types/props.ts

@@ -74,6 +74,18 @@ export interface ReorderableListProps<T>
    * Allows passing an object with shared values that can animate a cell by using the `onDragStart` and `onDragEnd` events.
    */
   cellAnimations?: ReorderableListCellAnimations;
+  /**
+   * Whether the active item should be updated. Enables usage of `useIsActive` hook. Default: `false`.
+   */
+  shouldUpdateActiveItem?: boolean;
+  /**
+   * Wether the pan gestures necessary for dragging are enabled. Default: `true`.
+   */
+  panEnabled?: boolean;
+  /**
+   * Duration in milliseconds of a long press on the list before pan gestures, necessary for dragging, are allowed to activate.
+   */
+  panActivateAfterLongPress?: number;
   /**
    * Event fired after an item is released and the list is reordered.
    */