From df9046529ab533bfffb1934a8e6c591787c947d1 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Wed, 23 Aug 2023 14:36:52 +0200
Subject: [PATCH] feat: add onDragBegin prop

---
 example/src/App.tsx               | 3 +++
 src/MyDraggableList/index.tsx     | 8 +++++++-
 src/MyDraggableList/index.web.tsx | 7 ++++++-
 src/MyDraggableList/types.tsx     | 1 +
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index d6a57c9..77acaf3 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -49,6 +49,9 @@ export default function App() {
             console.log('onDragEnd', data);
             setItems(data);
           }}
+          onDragBegin={() => {
+            console.log('onDragBegin');
+          }}
         />
       </SafeAreaView>
     </GestureHandlerRootView>
diff --git a/src/MyDraggableList/index.tsx b/src/MyDraggableList/index.tsx
index fb181e8..9bdd752 100644
--- a/src/MyDraggableList/index.tsx
+++ b/src/MyDraggableList/index.tsx
@@ -2,11 +2,17 @@ import React from 'react';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 import type { Props } from './types';
 
-export const MyDraggableList = ({ items, renderItem, onDragEnd }: Props) => {
+export const MyDraggableList = ({
+  items,
+  renderItem,
+  onDragEnd,
+  onDragBegin,
+}: Props) => {
   return (
     <DraggableFlatList
       data={items}
       onDragEnd={onDragEnd}
+      onDragBegin={onDragBegin}
       keyExtractor={(item) => item.id}
       renderItem={renderItem}
     />
diff --git a/src/MyDraggableList/index.web.tsx b/src/MyDraggableList/index.web.tsx
index b305c1b..4f8b625 100644
--- a/src/MyDraggableList/index.web.tsx
+++ b/src/MyDraggableList/index.web.tsx
@@ -30,6 +30,7 @@ export const MyDraggableList = ({
   items,
   renderItem,
   onDragEnd: onDragEndCallback,
+  onDragBegin: onDragBegin,
 }: Props) => {
   const onDragEnd: OnDragEndResponder = useCallback(
     (result) => {
@@ -49,8 +50,12 @@ export const MyDraggableList = ({
     [items, onDragEndCallback]
   );
 
+  const onDragStart = useCallback(() => {
+    onDragBegin && onDragBegin();
+  }, [onDragBegin]);
+
   return (
-    <DragDropContext onDragEnd={onDragEnd}>
+    <DragDropContext onDragEnd={onDragEnd} onDragStart={onDragBegin}>
       <Droppable droppableId="droppable">
         {(droppableProvided) => (
           <View
diff --git a/src/MyDraggableList/types.tsx b/src/MyDraggableList/types.tsx
index 32cc901..ee0c385 100644
--- a/src/MyDraggableList/types.tsx
+++ b/src/MyDraggableList/types.tsx
@@ -9,4 +9,5 @@ export type Props = {
   items: Item[];
   renderItem: (params: RenderItemParams<Item>) => React.ReactNode;
   onDragEnd?: (params: { data: Item[] }) => void;
+  onDragBegin?: () => void;
 };