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'