From 789e6b0da1106ee03e4515f77926966243026708 Mon Sep 17 00:00:00 2001
From: Johnny Chan <johnny.chan@okay.com>
Date: Tue, 18 Apr 2023 16:25:43 +0800
Subject: [PATCH] add onLoingPressIut reset animation size

---
 src/block.tsx          |  8 +++++---
 src/draggable-grid.tsx | 19 ++++++++++++++++---
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/block.tsx b/src/block.tsx
index 6b2927f..d768b12 100644
--- a/src/block.tsx
+++ b/src/block.tsx
@@ -15,9 +15,10 @@ interface BlockProps {
   dragStartAnimationStyle: StyleProp<any>
   onPress?: () => void
   onLongPress: () => void
+  onLongPressOut: () => void
   panHandlers: GestureResponderHandlers
-  delayLongPress:number
-  children?:React.ReactNode
+  delayLongPress: number
+  children?: React.ReactNode
 }
 
 export const Block: FunctionComponent<BlockProps> = ({
@@ -25,6 +26,7 @@ export const Block: FunctionComponent<BlockProps> = ({
   dragStartAnimationStyle,
   onPress,
   onLongPress,
+  onLongPressOut,
   children,
   panHandlers,
   delayLongPress
@@ -32,7 +34,7 @@ export const Block: FunctionComponent<BlockProps> = ({
   return (
     <Animated.View style={[styles.blockContainer, style, dragStartAnimationStyle]} {...panHandlers}>
       <Animated.View>
-        <TouchableWithoutFeedback delayLongPress={delayLongPress} onPress={onPress} onLongPress={onLongPress}>
+        <TouchableWithoutFeedback delayLongPress={delayLongPress} delayPressOut={100} onPress={onPress} onLongPress={onLongPress} onPressOut={onLongPressOut}>
           {children}
         </TouchableWithoutFeedback>
       </Animated.View>
diff --git a/src/draggable-grid.tsx b/src/draggable-grid.tsx
index fa7d5ad..01d2ee5 100644
--- a/src/draggable-grid.tsx
+++ b/src/draggable-grid.tsx
@@ -34,7 +34,7 @@ export interface IDraggableGridProps<DataType extends IBaseItemType> {
   onDragging?: (gestureState: PanResponderGestureState) => void
   onDragRelease?: (newSortedData: DataType[]) => void
   onResetSort?: (newSortedData: DataType[]) => void
-  delayLongPress?:number
+  delayLongPress?: number
 }
 interface IMap<T> {
   [key: string]: T
@@ -53,7 +53,7 @@ interface IItem<DataType> {
 }
 let activeBlockOffset = { x: 0, y: 0 }
 
-export const DraggableGrid = function<DataType extends IBaseItemType>(
+export const DraggableGrid = function <DataType extends IBaseItemType>(
   props: IDraggableGridProps<DataType>,
 ) {
   const [blockPositions] = useState<IPositionOffset[]>([])
@@ -72,6 +72,7 @@ export const DraggableGrid = function<DataType extends IBaseItemType>(
     height: 0,
   })
   const [activeItemIndex, setActiveItemIndex] = useState<undefined | number>()
+  const [isDragging, setIsDragging] = useState(false)
 
   const assessGridSize = (event: IOnLayoutEvent) => {
     if (!hadInitBlockSize) {
@@ -146,6 +147,7 @@ export const DraggableGrid = function<DataType extends IBaseItemType>(
     const activeItem = getActiveItem()
     if (!activeItem) return false
     const { moveX, moveY } = gestureState
+    setIsDragging(true)
     props.onDragging && props.onDragging(gestureState)
 
     const xChokeAmount = Math.max(0, activeBlockOffset.x + moveX - (gridLayout.width - blockWidth))
@@ -188,6 +190,7 @@ export const DraggableGrid = function<DataType extends IBaseItemType>(
   function onHandRelease() {
     const activeItem = getActiveItem()
     if (!activeItem) return false
+    setIsDragging(false)
     props.onDragRelease && props.onDragRelease(getSortData())
     setPanResponderCapture(false)
     activeItem.currentPosition.flattenOffset()
@@ -253,6 +256,13 @@ export const DraggableGrid = function<DataType extends IBaseItemType>(
     setPanResponderCapture(true)
     setActiveItemIndex(itemIndex)
   }
+  function endLongPressAnimation() {
+    if (!props.dragStartAnimation) {
+      if (!isDragging) {
+        setActiveItemIndex(undefined)
+      }
+    }
+  }
   function startDragStartAnimation() {
     if (!props.dragStartAnimation) {
       dragStartAnimatedValue.setValue(1)
@@ -350,7 +360,9 @@ export const DraggableGrid = function<DataType extends IBaseItemType>(
     })
   }
   useEffect(() => {
-    startDragStartAnimation()
+    if (activeItemIndex !== undefined) {
+      startDragStartAnimation()
+    }
   }, [activeItemIndex])
   useEffect(() => {
     if (hadInitBlockSize) {
@@ -368,6 +380,7 @@ export const DraggableGrid = function<DataType extends IBaseItemType>(
       <Block
         onPress={onBlockPress.bind(null, itemIndex)}
         onLongPress={setActiveBlock.bind(null, itemIndex, item.itemData)}
+        onLongPressOut={endLongPressAnimation}
         panHandlers={panResponder.panHandlers}
         style={getBlockStyle(itemIndex)}
         dragStartAnimationStyle={getDragStartAnimation(itemIndex)}