Skip to content

Commit

Permalink
replace preventSwipe with preventSwipeReader
Browse files Browse the repository at this point in the history
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 3DJakob#88
  • Loading branch information
blesson3 committed Apr 29, 2022
1 parent 25158a0 commit 6d7b662
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 6 deletions.
12 changes: 9 additions & 3 deletions index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
6 changes: 3 additions & 3 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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'
Expand Down

0 comments on commit 6d7b662

Please sign in to comment.