feat: add onDragBegin prop

kosmydel · Aug 24, 2023 · df90465 · df90465
1 parent 892d577
commit df90465
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -9,4 +9,5 @@ export type Props = {
   items: Item[];
   renderItem: (params: RenderItemParams<Item>) => React.ReactNode;
   onDragEnd?: (params: { data: Item[] }) => void;
+  onDragBegin?: () => void;
 };