Start working on reordering on drag end

Author: MatiPl01

example/app/src/examples/SortableGrid/PlaygroundExample.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import type { SortableGridRenderItem } from 'react-native-sortables';
 import Sortable from 'react-native-sortables';
@@ -9,6 +9,8 @@ import { colors, radius, sizes, spacing, text } from '@/theme';
 const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);
 
 export default function PlaygroundExample() {
+  const [data, setData] = useState(DATA);
+
   const renderItem = useCallback<SortableGridRenderItem<string>>(
     ({ item }) => (
       <View style={styles.card}>
@@ -23,9 +25,23 @@ export default function PlaygroundExample() {
       <Sortable.Grid
         columnGap={10}
         columns={3}
-        data={DATA}
+        data={data}
         renderItem={renderItem}
+        reorderOnDrag={false}
         rowGap={10}
+        strategy='swap'
+        onDragEnd={params => {
+          console.log(
+            'item',
+            params.key,
+            'moved from',
+            params.fromIndex,
+            'to',
+            params.toIndex,
+            `(${params.data[params.toIndex]})`
+          );
+          setData(params.data.filter(item => item !== params.key));
+        }}
       />
     </ScrollScreen>
   );

example/app/src/examples/SortableGrid/features/DropIndicatorExample.tsx

@@ -35,6 +35,7 @@ export default function DropIndicatorExample() {
             columns={COLUMNS}
             data={DATA}
             renderItem={renderItem}
+            reorderOnDrag={false}
             rowGap={spacing.xs}
             showDropIndicator
           />

packages/react-native-sortables/src/components/SortableFlex.tsx

@@ -101,6 +101,7 @@ const SortableFlexInner = memo(function SortableFlexInner({
   paddingRight,
   paddingTop,
   paddingVertical,
+  reorderOnDrag,
   rowGap,
   showDropIndicator,
   strategy,
@@ -159,6 +160,7 @@ const SortableFlexInner = memo(function SortableFlexInner({
         itemEntering={itemEntering}
         itemExiting={itemExiting}
         overflow={overflow}
+        reorderOnDrag={reorderOnDrag}
         showDropIndicator={showDropIndicator}
         strategy={strategy}
         styleProps={styleProps}
@@ -176,13 +178,15 @@ type SortableFlexComponentProps = Pick<
   | 'itemEntering'
   | 'itemExiting'
   | 'overflow'
+  | 'reorderOnDrag'
   | 'showDropIndicator'
   | 'strategy'
 > & {
   styleProps: FlexStyleProps;
 };
 
 function SortableFlexComponent({
+  reorderOnDrag,
   strategy,
   styleProps,
   ...rest
@@ -200,7 +204,7 @@ function SortableFlexComponent({
     width
   } = styleProps;
 
-  useOrderUpdater(strategy, FLEX_STRATEGIES);
+  useOrderUpdater(strategy, FLEX_STRATEGIES, reorderOnDrag);
 
   const baseContainerStyle: ViewStyle = {
     ...styleProps,

packages/react-native-sortables/src/components/SortableGrid.tsx

@@ -109,6 +109,7 @@ const SortableGridInner = typedMemo(function SortableGridInner<I>({
   itemEntering,
   itemExiting,
   overflow,
+  reorderOnDrag,
   rowGap: _rowGap,
   rowHeight,
   showDropIndicator,
@@ -156,6 +157,7 @@ const SortableGridInner = typedMemo(function SortableGridInner<I>({
         itemEntering={itemEntering}
         itemExiting={itemExiting}
         overflow={overflow}
+        reorderOnDrag={reorderOnDrag}
         rowGap={rowGap}
         rowHeight={rowHeight}
         showDropIndicator={showDropIndicator}
@@ -176,6 +178,7 @@ type SortableGridComponentProps<I> = Pick<
   | 'itemEntering'
   | 'itemExiting'
   | 'overflow'
+  | 'reorderOnDrag'
   | 'rowHeight'
   | 'showDropIndicator'
   | 'strategy'
@@ -188,6 +191,7 @@ function SortableGridComponent<I>({
   columnGap,
   groups,
   isVertical,
+  reorderOnDrag,
   rowGap,
   rowHeight,
   strategy,
@@ -199,7 +203,7 @@ function SortableGridComponent<I>({
 
   const isFirstRenderRef = useRef(true);
 
-  useOrderUpdater(strategy, GRID_STRATEGIES);
+  useOrderUpdater(strategy, GRID_STRATEGIES, reorderOnDrag);
 
   useLayoutEffect(() => {
     if (isFirstRenderRef.current) {

packages/react-native-sortables/src/constants/props.ts

@@ -57,6 +57,7 @@ export const DEFAULT_SHARED_PROPS = {
   onOrderChange: undefined,
   overDrag: 'both',
   overflow: 'visible',
+  reorderOnDrag: true,
   reorderTriggerOrigin: 'center',
   scrollableRef: undefined,
   showDropIndicator: false,

packages/react-native-sortables/src/providers/grid/GridLayoutProvider/updates/insert.ts

@@ -35,7 +35,6 @@ function useInactiveIndexToKey() {
     }),
     ({ excludedKey, fixedKeys, idxToKey }) => {
       if (excludedKey === null) {
-        result.value = EMPTY_ARRAY;
         return;
       }
 

packages/react-native-sortables/src/providers/grid/GridLayoutProvider/updates/swap.ts

@@ -37,7 +37,6 @@ function useInactiveIndexToKey() {
     ({ excludedKey, idxToKey, keyToIdx }) => {
       const excludedIndex = excludedKey ? keyToIdx[excludedKey] : undefined;
       if (excludedIndex === undefined) {
-        result.value = EMPTY_ARRAY;
         return;
       }
 

packages/react-native-sortables/src/providers/shared/hooks/useOrderUpdater.ts

@@ -1,14 +1,23 @@
+import { useCallback } from 'react';
 import { useAnimatedReaction } from 'react-native-reanimated';
 
 import { useDebugContext } from '../../../debug';
-import type { PredefinedStrategies, SortStrategyFactory } from '../../../types';
+import type {
+  OrderUpdaterCallbackProps,
+  PredefinedStrategies,
+  SortStrategyFactory
+} from '../../../types';
 import { error } from '../../../utils';
 import { useCommonValuesContext } from '../CommonValuesProvider';
 import { useDragContext } from '../DragProvider';
 
 export default function useOrderUpdater<
   P extends PredefinedStrategies = PredefinedStrategies
->(strategy: keyof P | SortStrategyFactory, predefinedStrategies: P) {
+>(
+  strategy: keyof P | SortStrategyFactory,
+  predefinedStrategies: P,
+  reorderOnDrag: boolean
+) {
   const useStrategy =
     typeof strategy === 'string' ? predefinedStrategies[strategy] : strategy;
 
@@ -25,27 +34,18 @@ export default function useOrderUpdater<
 
   const updater = useStrategy();
 
-  useAnimatedReaction(
-    () => ({
-      activeKey: activeItemKey.value,
-      dimensions: activeItemDimensions.value,
-      position: triggerOriginPosition.value
-    }),
-    ({ activeKey, dimensions, position }) => {
-      if (!activeKey || !dimensions || !position) {
-        if (debugCross) debugCross.set({ position: null });
-        return;
-      }
-
+  const handleOrderUpdate = useCallback(
+    ({
+      activeKey,
+      dimensions,
+      position
+    }: Omit<OrderUpdaterCallbackProps, 'activeIndex'>) => {
+      'worklet';
       const activeIndex = keyToIndex.value[activeKey];
       if (activeIndex === undefined) {
         return;
       }
 
-      if (debugCross) {
-        debugCross.set({ color: '#00007e', position });
-      }
-
       const newOrder = updater({
         activeIndex,
         activeKey,
@@ -61,6 +61,38 @@ export default function useOrderUpdater<
           newOrder
         );
       }
+    },
+    [handleOrderChange, keyToIndex, updater]
+  );
+
+  useAnimatedReaction(
+    () => ({
+      activeKey: activeItemKey.value,
+      dimensions: activeItemDimensions.value,
+      position: triggerOriginPosition.value
+    }),
+    ({ activeKey, dimensions, position }, prevProps) => {
+      debugCross?.set({ color: '#00007e', position });
+
+      if (reorderOnDrag) {
+        if (activeKey !== null && dimensions && position) {
+          handleOrderUpdate({ activeKey, dimensions, position });
+        } else {
+          debugCross?.set({ position: null });
+        }
+      } else if (
+        activeKey === null &&
+        prevProps?.dimensions &&
+        prevProps?.position &&
+        prevProps?.activeKey !== null
+      ) {
+        debugCross?.set({ position: null });
+        handleOrderUpdate({
+          activeKey: prevProps.activeKey,
+          dimensions: prevProps.dimensions,
+          position: prevProps.position
+        });
+      }
     }
   );
 }

packages/react-native-sortables/src/types/props/shared.ts

@@ -327,6 +327,10 @@ export type SharedProps = Simplify<
            * @default 'visible'
            */
           overflow: Overflow;
+          /** Whether to reorder items during drag gesture or after the active item is dropped
+           * @default true
+           */
+          reorderOnDrag: boolean;
           /** Enables debug mode to show additional visual helpers and console logs.
            * @note This only works in development builds and has no effect in production.
            * @default false

packages/react-native-sortables/src/types/providers/shared.ts

@@ -218,7 +218,7 @@ export type DebugContextType = {
 
 // ORDER UPDATER
 
-type OrderUpdaterCallbackProps = {
+export type OrderUpdaterCallbackProps = {
   activeKey: string;
   activeIndex: number;
   dimensions: Dimensions;