diff --git a/README.md b/README.md index c4341ef6..5f80294d 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,7 @@ 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) => {} | diff --git a/Swiper.js b/Swiper.js index 43b67eac..bea5fb12 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 = ( @@ -152,7 +154,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 @@ -556,13 +558,14 @@ class Swiper extends Component { onSwipedCallbacks = (swipeDirectionCallback) => { const previousCardIndex = this.state.firstCardIndex this.props.onSwiped(previousCardIndex, this.state.cards[previousCardIndex]) - this.setState(this.rebuildStackValues) + if (swipeDirectionCallback) { swipeDirectionCallback(previousCardIndex, this.state.cards[previousCardIndex]) } } setCardIndex = (newCardIndex, swipedAllCards) => { + this.props.currentCardIndex(newCardIndex) if (this._mounted) { this.setState( { @@ -897,6 +900,8 @@ Swiper.propTypes = { onSwipedRight: PropTypes.func, onSwipedTop: PropTypes.func, onSwiping: PropTypes.func, + currentCardIndex: PropTypes.func, + onSwipeGuesterState: PropTypes.func, onTapCard: PropTypes.func, onTapCardDeadZone: PropTypes.number, outputCardOpacityRangeX: PropTypes.array, @@ -980,6 +985,8 @@ Swiper.defaultProps = { onSwipedRight: cardIndex => { }, onSwipedTop: cardIndex => { }, onSwiping: () => { }, + currentCardIndex: () => { }, + onSwipeGuesterState:()=>{}, onTapCard: (cardIndex) => { }, onTapCardDeadZone: 5, outputCardOpacityRangeX: [0.8, 1, 1, 1, 0.8], diff --git a/index.d.ts b/index.d.ts index 1ef616e3..fca823f0 100644 --- a/index.d.ts +++ b/index.d.ts @@ -39,6 +39,10 @@ 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];