feat(DraggableStack): working dynamic DraggableStack (closes #23)

Author: mgcrea

example/src/pages/DraggableBasicExample.tsx

@@ -2,7 +2,6 @@ import {
   DndProvider,
   DndProviderProps,
   doesOverlapHorizontally,
-  doesOverlapVertically,
   Draggable,
   DraggableProps,
   Droppable,
@@ -26,11 +25,14 @@ export const DraggableBasicExample: FunctionComponent = () => {
     setCount(count => count + 1);
   };
 
-  const handleDragEnd: DndProviderProps['onDragEnd'] = ({active, over}) => {
+  const handleDragEnd: DndProviderProps['onDragEnd'] = ({
+    active: _active,
+    over,
+  }) => {
     'worklet';
     if (over) {
       console.log(`Current count is ${count}`);
-      runOnJS(setCount)(2);
+      runOnJS(onDragEnd)();
     }
   };
 
@@ -44,11 +46,12 @@ export const DraggableBasicExample: FunctionComponent = () => {
     console.log('onFinalize');
   };
 
-  const shouldDropWorklet = (active, item) => {
+  const shouldDropWorklet: DndProviderProps['shouldDropWorklet'] = (
+    active,
+    item,
+  ) => {
     'worklet';
     return doesOverlapHorizontally(active, item);
-    console.log({active, item});
-    return false;
   };
 
   return (

example/src/pages/DraggableStackExample.tsx

@@ -1,12 +1,20 @@
-import React, {useState, type FunctionComponent} from 'react';
-import {Button, StyleSheet, Text, View} from 'react-native';
 import {
   DndProvider,
-  type ObjectWithId,
   Draggable,
   DraggableStack,
+  UniqueIdentifier,
   type DraggableStackProps,
+  type ObjectWithId,
 } from '@mgcrea/react-native-dnd/src';
+import React, {useCallback, useState, type FunctionComponent} from 'react';
+import {Button, StyleSheet, Text, View} from 'react-native';
+import {configureReanimatedLogger} from 'react-native-reanimated';
+
+// This is the default configuration
+configureReanimatedLogger({
+  // level: ReanimatedLogLevel.warn,
+  strict: false, // Reanimated runs in strict mode by default
+});
 
 const items = ['🤓', '🤖🤖', '👻👻👻', '👾👾👾👾'];
 const data = items.map((letter, index) => ({
@@ -15,15 +23,23 @@ const data = items.map((letter, index) => ({
 })) satisfies ObjectWithId[];
 
 export const DraggableStackExample: FunctionComponent = () => {
-  const onStackOrderChange: DraggableStackProps['onOrderChange'] = value => {
-    console.log('onStackOrderChange', value);
-  };
+  const [items, setItems] = useState(data);
+  const [fontSize, setFontSize] = useState(32);
+
+  const onStackOrderChange: DraggableStackProps['onOrderChange'] = useCallback(
+    (order: UniqueIdentifier[]) => {
+      console.log('onStackOrderChange', order);
+      setTimeout(() => {
+        // setItems(items => order.map(id => items.find(item => item.id === id)!));
+        // setFontSize(fontSize => fontSize + 1);
+      }, 1000);
+    },
+    [],
+  );
   const onStackOrderUpdate: DraggableStackProps['onOrderUpdate'] = value => {
     console.log('onStackOrderUpdate', value);
   };
 
-  const [items, setItems] = useState(data);
-
   return (
     <View style={styles.container}>
       <Text style={styles.title}>DraggableStack Example</Text>
@@ -39,33 +55,49 @@ export const DraggableStackExample: FunctionComponent = () => {
               key={letter.id}
               id={letter.id}
               style={[styles.draggable]}>
-              <Text style={styles.text}>{letter.value}</Text>
+              <Text style={[styles.text, {fontSize}]}>{letter.value}</Text>
             </Draggable>
           ))}
         </DraggableStack>
       </DndProvider>
-      <Button
-        title="Add"
-        onPress={() => {
-          setItems(prevItems => {
-            const randomIndex = 2; //Math.floor(Math.random() * prevItems.length);
-            prevItems.splice(randomIndex, 0, {
-              value: '🤪',
-              id: `${prevItems.length}-🤪`,
+      <View style={{flexDirection: 'row'}}>
+        <Button
+          title="Add"
+          onPress={() => {
+            setItems(prevItems => {
+              const randomIndex = 2; //Math.floor(Math.random() * prevItems.length);
+              prevItems.splice(randomIndex, 0, {
+                value: '🤪',
+                id: `${prevItems.length}-🤪`,
+              });
+              return prevItems.slice();
             });
-            return prevItems.slice();
-          });
-        }}
-      />
-      <Button
-        title="Delete"
-        onPress={() => {
-          setItems(prevItems => {
-            const randomIndex = Math.floor(Math.random() * prevItems.length);
-            return prevItems.filter((_, index) => index !== randomIndex);
-          });
-        }}
-      />
+          }}
+        />
+        <Button
+          title="Delete"
+          onPress={() => {
+            setItems(prevItems => {
+              const randomIndex = Math.floor(Math.random() * prevItems.length);
+              return prevItems.filter((_, index) => index !== randomIndex);
+            });
+          }}
+        />
+
+        <Button
+          title="Plus"
+          onPress={() => {
+            setFontSize(prevFontSize => prevFontSize + 1);
+          }}
+        />
+
+        <Button
+          title="Minus"
+          onPress={() => {
+            setFontSize(prevFontSize => prevFontSize - 1);
+          }}
+        />
+      </View>
     </View>
   );
 };
@@ -93,7 +125,6 @@ const styles = StyleSheet.create({
   },
   draggable: {
     backgroundColor: 'seagreen',
-    opacity: 0.5,
     height: 100,
     borderColor: 'rgba(0,0,0,0.2)',
     borderWidth: 1,

src/DndContext.ts

@@ -11,7 +11,7 @@ export type DraggableOptions = Record<UniqueIdentifier, DraggableItemOptions>;
 export type DroppableOptions = Record<UniqueIdentifier, ItemOptions>;
 export type Layouts = Record<UniqueIdentifier, SharedValue<LayoutRectangle>>;
 export type Offsets = Record<UniqueIdentifier, SharedPoint>;
-export type DraggableState = "resting" | "pending" | "dragging" | "dropping" | "acting";
+export type DraggableState = "resting" | "pending" | "dragging" | "dropping" | "acting" | "sleeping";
 export type DraggableStates = Record<UniqueIdentifier, SharedValue<DraggableState>>;
 
 export type DndContextValue = {

src/components/Draggable.tsx

@@ -43,7 +43,7 @@ export const Draggable: FunctionComponent<PropsWithChildren<DraggableProps>> = (
   animatedStyleWorklet,
   ...otherProps
 }) => {
-  const { setNodeRef, setNodeLayout, offset, state } = useDraggable({
+  const { animatedRef, setNodeLayout, offset, state } = useDraggable({
     id,
     data,
     disabled,
@@ -52,6 +52,7 @@ export const Draggable: FunctionComponent<PropsWithChildren<DraggableProps>> = (
   });
 
   const animatedStyle = useAnimatedStyle(() => {
+    const isSleeping = state.value === "sleeping"; // Should not animate if sleeping
     const isActive = state.value === "dragging";
     const isActing = state.value === "acting";
     const zIndex = isActive ? 999 : isActing ? 998 : 1;
@@ -61,15 +62,17 @@ export const Draggable: FunctionComponent<PropsWithChildren<DraggableProps>> = (
       transform: [
         {
           // translateX: offset.x.value,
-          translateX: isActive
-            ? offset.x.value
-            : withSpring(offset.x.value, { damping: 100, stiffness: 1000 }),
+          translateX:
+            isActive || isSleeping
+              ? offset.x.value
+              : withSpring(offset.x.value, { damping: 100, stiffness: 1000 }),
         },
         {
           // translateY: offset.y.value,
-          translateY: isActive
-            ? offset.y.value
-            : withSpring(offset.y.value, { damping: 100, stiffness: 1000 }),
+          translateY:
+            isActive || isSleeping
+              ? offset.y.value
+              : withSpring(offset.y.value, { damping: 100, stiffness: 1000 }),
         },
       ],
     };
@@ -80,7 +83,7 @@ export const Draggable: FunctionComponent<PropsWithChildren<DraggableProps>> = (
   }, [id, state, activeOpacity]);
 
   return (
-    <Animated.View ref={setNodeRef} onLayout={setNodeLayout} style={[style, animatedStyle]} {...otherProps}>
+    <Animated.View ref={animatedRef} onLayout={setNodeLayout} style={[style, animatedStyle]} {...otherProps}>
       {children}
     </Animated.View>
   );

src/features/sort/components/DraggableGrid.tsx

@@ -1,6 +1,6 @@
-import React, { Children, useMemo, type FunctionComponent, type PropsWithChildren } from "react";
+import React, { useMemo, type FunctionComponent, type PropsWithChildren } from "react";
 import { View, type FlexStyle, type ViewProps } from "react-native";
-import type { UniqueIdentifier } from "../../../types";
+import { useChildrenIds } from "../../../hooks";
 import { useDraggableGrid, type UseDraggableGridOptions } from "../hooks/useDraggableGrid";
 
 export type DraggableGridProps = Pick<ViewProps, "style"> &
@@ -20,16 +20,7 @@ export const DraggableGrid: FunctionComponent<PropsWithChildren<DraggableGridPro
   size,
   style: styleProp,
 }) => {
-  const initialOrder = useMemo(
-    () =>
-      Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return (child.props as { id?: UniqueIdentifier }).id;
-        }
-        return null;
-      })?.filter(Boolean),
-    [children],
-  );
+  const initialOrder = useChildrenIds(children);
 
   const style = useMemo(
     () =>

src/features/sort/components/DraggableStack.tsx

@@ -1,6 +1,7 @@
-import React, { Children, useMemo, type FunctionComponent, type PropsWithChildren } from "react";
-import { View, type FlexStyle, type ViewProps } from "react-native";
-import type { UniqueIdentifier } from "../../../types";
+import React, { useEffect, useMemo, type FunctionComponent, type PropsWithChildren } from "react";
+import { type FlexStyle, type ViewProps } from "react-native";
+import Animated, { runOnUI } from "react-native-reanimated";
+import { useChildrenIds } from "../../../hooks";
 import { useDraggableStack, type UseDraggableStackOptions } from "../hooks/useDraggableStack";
 
 export type DraggableStackProps = Pick<ViewProps, "style"> &
@@ -18,16 +19,7 @@ export const DraggableStack: FunctionComponent<PropsWithChildren<DraggableStackP
   shouldSwapWorklet,
   style: styleProp,
 }) => {
-  const initialOrder = useMemo(
-    () =>
-      Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return (child.props as { id?: UniqueIdentifier }).id;
-        }
-        return null;
-      })?.filter(Boolean),
-    [children],
-  );
+  const initialOrder = useChildrenIds(children);
 
   const style = useMemo(
     () =>
@@ -43,7 +35,7 @@ export const DraggableStack: FunctionComponent<PropsWithChildren<DraggableStackP
 
   const horizontal = ["row", "row-reverse"].includes(style.flexDirection);
 
-  useDraggableStack({
+  const { refreshOffsets } = useDraggableStack({
     gap: style.gap,
     horizontal,
     initialOrder,
@@ -52,5 +44,10 @@ export const DraggableStack: FunctionComponent<PropsWithChildren<DraggableStackP
     shouldSwapWorklet,
   });
 
-  return <View style={style}>{children}</View>;
+  useEffect(() => {
+    // Refresh offsets when children change
+    runOnUI(refreshOffsets)();
+  }, [initialOrder, refreshOffsets]);
+
+  return <Animated.View style={style}>{children}</Animated.View>;
 };

src/features/sort/hooks/useDraggableSort.ts

@@ -18,7 +18,7 @@ export type ShouldSwapWorklet = (
 ) => boolean;
 
 export type UseDraggableSortOptions = {
-  initialOrder?: UniqueIdentifier[];
+  initialOrder: UniqueIdentifier[];
   horizontal?: boolean;
   onOrderChange?: (order: UniqueIdentifier[]) => void;
   onOrderUpdate?: (nextOrder: UniqueIdentifier[], prevOrder: UniqueIdentifier[]) => void;
@@ -27,7 +27,7 @@ export type UseDraggableSortOptions = {
 
 export const useDraggableSort = ({
   horizontal = false,
-  initialOrder = [],
+  initialOrder,
   onOrderChange,
   onOrderUpdate,
   shouldSwapWorklet = doesOverlapOnAxis,
@@ -93,16 +93,24 @@ export const useDraggableSort = ({
       const layouts = draggableLayouts.get();
       const addedIds = next.filter((id) => !prev.includes(id));
       addedIds.forEach((id) => {
-        const index = Object.entries(layouts)
-          .sort(([, a], [, b]) => a.get()[horizontal ? "x" : "y"] - b.get()[horizontal ? "x" : "y"])
-          .findIndex(([key]) => key === id);
+        const positionEntries = Object.entries(layouts).map<[UniqueIdentifier, number]>(([key, layout]) => [
+          key,
+          layout.get()[horizontal ? "x" : "y"],
+        ]);
+        positionEntries.sort((a, b) => a[1] - b[1]);
+        const index = positionEntries.findIndex(([key]) => key === id);
         const nextOrder = draggableSortOrder.value.slice();
         nextOrder.splice(index, 0, id);
         // draggableLastOrder.value = draggableSortOrder.value.slice();
         draggableSortOrder.value = nextOrder;
       });
+
+      // Broadcast the order change to the parent component
+      if (onOrderChange && (removedIds.length > 0 || addedIds.length > 0)) {
+        runOnJS(onOrderChange)(draggableSortOrder.value);
+      }
     },
-    [],
+    [onOrderChange],
   );
 
   // Track active layout changes and update the placeholder index