From 819bd02779f903c28cb58d3447fbddb8bcfd408e Mon Sep 17 00:00:00 2001 From: xXCHINNAXx Date: Tue, 12 Jan 2021 18:13:42 +0530 Subject: [PATCH 1/6] Update index.d.ts added onSwiping?: (x: number, y: number) => void; onSwipeGuesterState?:(dx:number, dy:number) => void; --- index.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 79709125..16fcec9e 100644 --- a/index.d.ts +++ b/index.d.ts @@ -38,7 +38,8 @@ declare module 'react-native-deck-swiper' { onSwipedLeft?: (cardIndex: number) => void; onSwipedRight?: (cardIndex: number) => void; onSwipedTop?: (cardIndex: number) => void; - onSwiping?: () => void; + onSwiping?: (x: number, y: number) => void; + onSwipeGuesterState?:(dx:number, dy:number) => void; onTapCard?: (cardIndex: number) => void; onTapCardDeadZone?: number; outputCardOpacityRangeX?: [number, number, number, number, number]; From c9ab063fcb6d45a7bcb38286712f48743c29e036 Mon Sep 17 00:00:00 2001 From: xXCHINNAXx Date: Tue, 12 Jan 2021 18:19:51 +0530 Subject: [PATCH 2/6] Update Swiper.js added onSwipeGuesterState function to get dx and dy value. onSwiping gives x and y values but when horizontalSwipe is false x value will always be 0. In some cases (atleast in my case) dx and dy are required to detect swipe direction when horizontalSwipe is false --- Swiper.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Swiper.js b/Swiper.js index edcc1406..478b9b07 100644 --- a/Swiper.js +++ b/Swiper.js @@ -148,7 +148,7 @@ class Swiper extends Component { onPanResponderMove = (event, gestureState) => { this.props.onSwiping(this._animatedValueX, this._animatedValueY) - + this.props.onSwipeGuesterState(gestureState.dx,gestureState.dy) let { overlayOpacityHorizontalThreshold, overlayOpacityVerticalThreshold } = this.props if (!overlayOpacityHorizontalThreshold) { overlayOpacityHorizontalThreshold = this.props.horizontalThreshold @@ -884,6 +884,7 @@ Swiper.propTypes = { onSwipedRight: PropTypes.func, onSwipedTop: PropTypes.func, onSwiping: PropTypes.func, + onSwipeGuesterState: PropTypes.func, onTapCard: PropTypes.func, onTapCardDeadZone: PropTypes.number, outputCardOpacityRangeX: PropTypes.array, @@ -967,6 +968,7 @@ Swiper.defaultProps = { onSwipedRight: cardIndex => { }, onSwipedTop: cardIndex => { }, onSwiping: () => { }, + onSwipeGuesterState:()=>{}, onTapCard: (cardIndex) => { }, onTapCardDeadZone: 5, outputCardOpacityRangeX: [0.8, 1, 1, 1, 0.8], From 4e6881e8d863f5babd30b93f5f1d5679a216c278 Mon Sep 17 00:00:00 2001 From: xXCHINNAXx Date: Tue, 12 Jan 2021 18:23:11 +0530 Subject: [PATCH 3/6] Update README.md added onSwipeGuesterState --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c4341ef6..92bdcbfe 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,7 @@ With respect to bugfixes and further developments, please check the [To Do](http | onSwipedTop | func | function to be called when a card is swiped top. it receives the swiped card index | | (cardIndex) => {} | | onSwipedBottom | func | function to be called when a card is swiped bottom. it receives the swiped card index | | (cardIndex) => {} | | onSwiping | func | function to be called when a card is being moved. it receives X and Y positions | | (x, y) => {} | +| onSwipeGuesterState | func | function to be called when a card is being moved. it receives dx and dy from guesterstate in onPanResponderMove | | (x, y) => {} | | dragStart | func | function to be called when drag start | | | dragEnd | func | function to be called when drag end | onTapCard | func | function to be called when tapping a card. it receives the tapped card index | | (cardIndex) => {} | From a07cb56c08688081a738b2221c8584e5c03715c9 Mon Sep 17 00:00:00 2001 From: xXCHINNAXx Date: Thu, 11 Feb 2021 16:10:44 +0530 Subject: [PATCH 4/6] Update index.d.ts added currentCardIndex func --- index.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.d.ts b/index.d.ts index 16fcec9e..7e000049 100644 --- a/index.d.ts +++ b/index.d.ts @@ -39,7 +39,9 @@ declare module 'react-native-deck-swiper' { onSwipedRight?: (cardIndex: number) => void; onSwipedTop?: (cardIndex: number) => void; onSwiping?: (x: number, y: number) => void; + currentCardIndex?: (cardIndex:number) => void; onSwipeGuesterState?:(dx:number, dy:number) => void; + onTapCard?: (cardIndex: number) => void; onTapCardDeadZone?: number; outputCardOpacityRangeX?: [number, number, number, number, number]; From 89d1badfe1bea660d8ea36dfa27de66d6a614a31 Mon Sep 17 00:00:00 2001 From: xXCHINNAXx Date: Thu, 11 Feb 2021 16:11:23 +0530 Subject: [PATCH 5/6] Update README.md added current card index func --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 92bdcbfe..5f80294d 100644 --- a/README.md +++ b/README.md @@ -69,13 +69,13 @@ With respect to bugfixes and further developments, please check the [To Do](http | :---------------- | :----- | :------------------------------------------------------------------------------------ | :------ | | onSwipedAll | func | function to be called when all cards have been swiped | | () => {} | | onSwiped | func | function to be called when a card is swiped. it receives the swiped card index | | (cardIndex) => {} | +| currentCardIndex | func | function to be called when a card is shown. it receives the shown card index | | (cardIndex) => {} | | onSwipedAborted | func | function to be called when a card is released before reaching the threshold | | () => {} | | onSwipedLeft | func | function to be called when a card is swiped left. it receives the swiped card index | | (cardIndex) => {} | | onSwipedRight | func | function to be called when a card is swiped right. it receives the swiped card index | | (cardIndex) => {} | | onSwipedTop | func | function to be called when a card is swiped top. it receives the swiped card index | | (cardIndex) => {} | | onSwipedBottom | func | function to be called when a card is swiped bottom. it receives the swiped card index | | (cardIndex) => {} | | onSwiping | func | function to be called when a card is being moved. it receives X and Y positions | | (x, y) => {} | -| onSwipeGuesterState | func | function to be called when a card is being moved. it receives dx and dy from guesterstate in onPanResponderMove | | (x, y) => {} | | dragStart | func | function to be called when drag start | | | dragEnd | func | function to be called when drag end | onTapCard | func | function to be called when tapping a card. it receives the tapped card index | | (cardIndex) => {} | From ed23592c3668b4ad908f7720bee464fb7ef34666 Mon Sep 17 00:00:00 2001 From: xXCHINNAXx Date: Thu, 11 Feb 2021 16:12:28 +0530 Subject: [PATCH 6/6] Update Swiper.js current card index func added --- Swiper.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/Swiper.js b/Swiper.js index 478b9b07..d842d3fe 100644 --- a/Swiper.js +++ b/Swiper.js @@ -16,7 +16,9 @@ const LABEL_TYPES = { const SWIPE_MULTIPLY_FACTOR = 4.5 const calculateCardIndexes = (firstCardIndex, cards) => { - firstCardIndex = firstCardIndex || 0 + firstCardIndex = firstCardIndex || 0 + //console.log('currentCard'+firstCardIndex) + const previousCardIndex = firstCardIndex === 0 ? cards.length - 1 : firstCardIndex - 1 const secondCardIndex = firstCardIndex === cards.length - 1 ? 0 : firstCardIndex + 1 return { firstCardIndex, secondCardIndex, previousCardIndex } @@ -37,7 +39,7 @@ const rebuildStackAnimatedValues = (props) => { class Swiper extends Component { constructor (props) { super(props) - + //console.log(props) this.state = { ...calculateCardIndexes(props.cardIndex, props.cards), pan: new Animated.ValueXY(), @@ -51,8 +53,8 @@ class Swiper extends Component { swipeBackXYPositions: [], isSwipingBack: false, ...rebuildStackAnimatedValues(props) + } - this._mounted = true this._animatedValueX = 0 this._animatedValueY = 0 @@ -62,8 +64,8 @@ class Swiper extends Component { this.initializeCardStyle() this.initializePanResponder() + this.props.currentCardIndex(props.cardIndex) } - shouldComponentUpdate = (nextProps, nextState) => { const { props, state } = this const propsChanged = ( @@ -543,13 +545,14 @@ class Swiper extends Component { onSwipedCallbacks = (swipeDirectionCallback) => { const previousCardIndex = this.state.firstCardIndex this.props.onSwiped(previousCardIndex, this.state.cards[previousCardIndex]) - + if (swipeDirectionCallback) { swipeDirectionCallback(previousCardIndex, this.state.cards[previousCardIndex]) } } setCardIndex = (newCardIndex, swipedAllCards) => { + this.props.currentCardIndex(newCardIndex) if (this._mounted) { this.setState( { @@ -884,6 +887,7 @@ Swiper.propTypes = { onSwipedRight: PropTypes.func, onSwipedTop: PropTypes.func, onSwiping: PropTypes.func, + currentCardIndex: PropTypes.func, onSwipeGuesterState: PropTypes.func, onTapCard: PropTypes.func, onTapCardDeadZone: PropTypes.number, @@ -968,6 +972,7 @@ Swiper.defaultProps = { onSwipedRight: cardIndex => { }, onSwipedTop: cardIndex => { }, onSwiping: () => { }, + currentCardIndex: () => { }, onSwipeGuesterState:()=>{}, onTapCard: (cardIndex) => { }, onTapCardDeadZone: 5,