From de73e3b5ee26abb5c52b4f70aaf907d0175b75cf Mon Sep 17 00:00:00 2001
From: Stephen Seager <stephense@stephens-mbp14-2.local>
Date: Fri, 22 Dec 2023 14:26:49 +0000
Subject: [PATCH] Add onCellMoved callback

---
 src/components/CellRendererComponent.tsx |  4 +++-
 src/components/DraggableFlatList.tsx     |  9 ++++++++-
 src/hooks/useCellTranslate.tsx           | 17 +++++++++++++++--
 src/types.ts                             |  1 +
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/CellRendererComponent.tsx b/src/components/CellRendererComponent.tsx
index d7b833b7..1cc459da 100644
--- a/src/components/CellRendererComponent.tsx
+++ b/src/components/CellRendererComponent.tsx
@@ -27,10 +27,11 @@ type Props<T> = {
   children: React.ReactNode;
   onLayout?: (e: LayoutChangeEvent) => void;
   style?: StyleProp<ViewStyle>;
+  onCellMoved?: () => void;
 };
 
 function CellRendererComponent<T>(props: Props<T>) {
-  const { item, index, onLayout, children, ...rest } = props;
+  const { item, index, onLayout, children, onCellMoved, ...rest } = props;
 
   const viewRef = useRef<Animated.View>(null);
   const { cellDataRef, propsRef, containerRef } = useRefs<T>();
@@ -52,6 +53,7 @@ function CellRendererComponent<T>(props: Props<T>) {
     cellOffset: offset,
     cellSize: size,
     cellIndex: index,
+    onCellMoved: onCellMoved,
   });
 
   const isActive = activeKey === key;
diff --git a/src/components/DraggableFlatList.tsx b/src/components/DraggableFlatList.tsx
index d7d98c27..1ba55325 100644
--- a/src/components/DraggableFlatList.tsx
+++ b/src/components/DraggableFlatList.tsx
@@ -357,6 +357,13 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
     props.onViewableItemsChanged?.(info);
   });
 
+  const memoCellRendererComponent = useCallback(
+    (cellProps) => (
+      <CellRendererComponent {...cellProps} onCellMoved={props.onCellMoved} />
+    ),
+    []
+  );
+
   return (
     <DraggableFlatListProvider
       activeKey={activeKey}
@@ -377,7 +384,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
             {...props}
             data={props.data}
             onViewableItemsChanged={onViewableItemsChanged}
-            CellRendererComponent={CellRendererComponent}
+            CellRendererComponent={memoCellRendererComponent}
             ref={flatlistRef}
             onContentSizeChange={onListContentSizeChange}
             scrollEnabled={!activeKey && scrollEnabled}
diff --git a/src/hooks/useCellTranslate.tsx b/src/hooks/useCellTranslate.tsx
index ce4ab68a..f5c274fa 100644
--- a/src/hooks/useCellTranslate.tsx
+++ b/src/hooks/useCellTranslate.tsx
@@ -1,4 +1,8 @@
-import Animated, { useDerivedValue, withSpring } from "react-native-reanimated";
+import Animated, {
+  runOnJS,
+  useDerivedValue,
+  withSpring,
+} from "react-native-reanimated";
 import { useAnimatedValues } from "../context/animatedValueContext";
 import { useDraggableFlatListContext } from "../context/draggableFlatListContext";
 import { useRefs } from "../context/refContext";
@@ -7,9 +11,15 @@ type Params = {
   cellIndex: number;
   cellSize: Animated.SharedValue<number>;
   cellOffset: Animated.SharedValue<number>;
+  onCellMoved?: () => void;
 };
 
-export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
+export function useCellTranslate({
+  cellIndex,
+  cellSize,
+  cellOffset,
+  onCellMoved,
+}: Params) {
   const {
     activeIndexAnim,
     activeCellSize,
@@ -76,6 +86,9 @@ export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
 
     if (result !== -1 && result !== spacerIndexAnim.value) {
       spacerIndexAnim.value = result;
+      if (onCellMoved) {
+        runOnJS(onCellMoved)();
+      }
     }
 
     if (spacerIndexAnim.value === cellIndex) {
diff --git a/src/types.ts b/src/types.ts
index d6755c8f..18343ec3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -52,6 +52,7 @@ export type DraggableFlatListProps<T> = Modify<
       layout: LayoutChangeEvent["nativeEvent"]["layout"];
       containerRef: React.RefObject<Animated.View>;
     }) => void;
+    onCellMoved?: () => void;
   } & Partial<DefaultProps>
 >;