Merge pull request #58 from tongyy/tongyy-patch-3

#57 get bounds
tongyy · May 7, 2020 · 502f92d · 502f92d
2 parents b12e0ca + 08edeb3
commit 502f92d
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/Draggable.js b/Draggable.js
@@ -93,7 +93,7 @@ export default function Draggable(props) {
     (e, gestureState) => {
       isDragging.current = false;
       if (onDragRelease) {
-        onDragRelease(e, gestureState);
+        onDragRelease(e, gestureState, getBounds());
         onRelease(e, true);
       }
       if (!shouldReverse) {
@@ -102,7 +102,7 @@ export default function Draggable(props) {
         reversePosition();
       }
     },
-    [onDragRelease, shouldReverse, onRelease, reversePosition],
+    [onDragRelease, shouldReverse, onRelease, reversePosition, getBounds],
   );
 
   const onPanResponderGrant = React.useCallback(

diff --git a/README.md b/README.md
@@ -85,7 +85,7 @@ return (
 | :------------ |:---------------:|:---------------:|:-----|
 | onDrag | func | event, gestureState | called every frame component is moved |
 | onShortPressRelease | func | event | called when a press is released that isn't a long press or drag |
-| onDragRelease | func | event, gestureState | called when a drag is released |
+| onDragRelease | func | event, gestureState, bounds | called when a drag is released |
 | onLongPress | func | event | called when a long press is started |
 | onPressIn | func | event | called when a press is started |
 | onPressOut | func | event | called when a press is stopped, or the component is dragged |
@@ -119,12 +119,18 @@ return (
 | vy | current velocity of the gesture |
 | numberActiveTouches | Number of touches currently on screen |
 | gestureState | called at the end of interaction, regardless if press or drag |
-
+#### bounds
+| Argument | Description | 
+| :------------ |:---------------|
+| left | as x at the top left corner |
+| top | as y at the top left corner |
+| right | as x at the bottom right corner |
+| bottom | as y at the bottom right corner |
 ## Methods (not supported above V2.0.0)
 | Method | Params | Description |
 | :------------ |:---------------:|:-----|
 | reversePosition | --- | **use onReverse callback instead.** manually reset Draggable to start position |
-| getPosition| --- |**use onDragRelease callback instead.**  get the value of pageX, pageY|
+| getPosition| --- |**use onDragRelease callback instead.**  get the accurate coordinates x,y from the bounds|
 
 # What's next?
 

diff --git a/example/DraggableDemo/Draggable.js b/example/DraggableDemo/Draggable.js
@@ -93,7 +93,7 @@ export default function Draggable(props) {
     (e, gestureState) => {
       isDragging.current = false;
       if (onDragRelease) {
-        onDragRelease(e, gestureState);
+        onDragRelease(e, gestureState, getBounds());
         onRelease(e, true);
       }
       if (!shouldReverse) {
@@ -102,7 +102,7 @@ export default function Draggable(props) {
         reversePosition();
       }
     },
-    [onDragRelease, shouldReverse, onRelease, reversePosition],
+    [onDragRelease, shouldReverse, onRelease, reversePosition, getBounds],
   );
 
   const onPanResponderGrant = React.useCallback(

diff --git a/index.d.ts b/index.d.ts
@@ -20,7 +20,8 @@ export interface IDraggableProps {
     touchableOpacityProps?: object;
     onDrag?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
     onShortPressRelease?: (event: GestureResponderEvent) => void;
-    onDragRelease?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
+    onDragRelease?: (event: GestureResponderEvent, gestureState: PanResponderGestureState, bounds:
+        {left: number, top: number, right: number, bottom: number}) => void;
     onLongPress?: (event: GestureResponderEvent) => void;
     onPressIn?: (event: GestureResponderEvent) => void;
     onPressOut?: (event: GestureResponderEvent) => void;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-draggable",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "draggable",
   "main": "index.js",
   "types": "index.d.ts",