From c8bb4279f125ca03f2881a21a853e03b539be279 Mon Sep 17 00:00:00 2001 From: Matt Blessed Date: Fri, 29 Apr 2022 14:42:56 -0400 Subject: [PATCH] change `preventSwipe` to a function returning the actual value This is an interm solution to the `preventSwipe` parameter not being update-able after the initial render of the card due to the event listeners. Fixes #88 --- index.d.ts | 12 +++++++++--- index.js | 6 +++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/index.d.ts b/index.d.ts index 52c973d..7f16ddf 100644 --- a/index.d.ts +++ b/index.d.ts @@ -47,11 +47,17 @@ declare interface Props { onCardLeftScreen?: CardLeftScreenHandler; /** - * An array of directions for which to prevent swiping out of screen. Valid arguments are `'left'`, `'right'`, `'up'` and `'down'`. + * A fn to get the prevent swipe parameter. An array of directions for which to prevent swiping + * out of screen. Valid arguments are `'left'`, `'right'`, `'up'` and `'down'`. * - * @default [] + * This is required to allow the value to be read from within the event listeners until the issue + * following issue is closed. + * + * https://github.com/3DJakob/react-tinder-card/issues/88 + * + * @default null */ - preventSwipe?: string[]; + preventSwipe?: () => string[]; /** * What method to evaluate what direction to throw the card on release. 'velocity' will evaluate direction based on the direction of the swiping movement. 'position' will evaluate direction based on the position the card has on the screen like in the app tinder. diff --git a/index.js b/index.js index 0db7f45..73fe23b 100644 --- a/index.js +++ b/index.js @@ -142,7 +142,7 @@ const mouseCoordinatesFromEvent = (e) => { return { x: e.clientX, y: e.clientY } } -const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, onCardLocationChange, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled }, ref) => { +const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, onCardLocationChange, onCardLeftScreen, className, preventSwipe = () => [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled }, ref) => { settings.swipeThreshold = swipeThreshold const swipeAlreadyReleased = React.useRef(false) @@ -180,10 +180,10 @@ const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, o const dir = getSwipeDirection(swipeRequirementType === 'velocity' ? speed : currentPostion) if (dir !== 'none') { - if (onSwipe && !preventSwipe.includes(dir)) onSwipe(dir) + if (onSwipe && !preventSwipe().includes(dir)) onSwipe(dir) if (flickOnSwipe) { - if (!preventSwipe.includes(dir)) { + if (!preventSwipe().includes(dir)) { const outVelocity = swipeRequirementType === 'velocity' ? speed : normalize(currentPostion, 600) await animateOut(element, outVelocity) element.style.display = 'none'