From f551137e1d60fdfa17b6a79d59f81ee841b6fdf6 Mon Sep 17 00:00:00 2001 From: Tony Date: Mon, 4 May 2020 23:58:40 -0400 Subject: [PATCH 1/4] #57 get bounds --- Draggable.js | 2 +- README.md | 10 ++++++++-- example/DraggableDemo/Draggable.js | 2 +- index.d.ts | 3 ++- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/Draggable.js b/Draggable.js index 8c3d8df..565cfb8 100644 --- 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) { diff --git a/README.md b/README.md index 255d12b..017f0e6 100644 --- 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,7 +119,13 @@ 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 top left corner | +| top | as y at top left corner | +| right | as x at bottom right corner | +| bottom | as y at bottom right corner | ## Methods (not supported above V2.0.0) | Method | Params | Description | | :------------ |:---------------:|:-----| diff --git a/example/DraggableDemo/Draggable.js b/example/DraggableDemo/Draggable.js index 8c3d8df..565cfb8 100644 --- 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) { diff --git a/index.d.ts b/index.d.ts index fd87613..ecbf665 100644 --- 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; From 849f73b3c689a11594d5e89546c405757d82ffe0 Mon Sep 17 00:00:00 2001 From: Tony Date: Tue, 5 May 2020 00:08:31 -0400 Subject: [PATCH 2/4] update README --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 017f0e6..8d3f63d 100644 --- a/README.md +++ b/README.md @@ -122,15 +122,15 @@ return ( #### bounds | Argument | Description | | :------------ |:---------------| -| left | as x at top left corner | -| top | as y at top left corner | -| right | as x at bottom right corner | -| bottom | as y at bottom right corner | +| 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? From 408c3909c0b3b77702b33f029bb77a85421e5630 Mon Sep 17 00:00:00 2001 From: Tony Date: Tue, 5 May 2020 00:22:27 -0400 Subject: [PATCH 3/4] v3.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a3f2f60..9acb7f4 100644 --- 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", From 08edeb3274c59d09f87cf4d980561ef3180a78a9 Mon Sep 17 00:00:00 2001 From: Tony Date: Wed, 6 May 2020 18:23:41 -0400 Subject: [PATCH 4/4] add getBounds to deps --- Draggable.js | 2 +- example/DraggableDemo/Draggable.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Draggable.js b/Draggable.js index 565cfb8..d1c8650 100644 --- a/Draggable.js +++ b/Draggable.js @@ -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/example/DraggableDemo/Draggable.js b/example/DraggableDemo/Draggable.js index 565cfb8..d1c8650 100644 --- a/example/DraggableDemo/Draggable.js +++ b/example/DraggableDemo/Draggable.js @@ -102,7 +102,7 @@ export default function Draggable(props) { reversePosition(); } }, - [onDragRelease, shouldReverse, onRelease, reversePosition], + [onDragRelease, shouldReverse, onRelease, reversePosition, getBounds], ); const onPanResponderGrant = React.useCallback(