diff --git a/CardStack.js b/CardStack.js index d7dafd7..57018f9 100644 --- a/CardStack.js +++ b/CardStack.js @@ -33,6 +33,7 @@ export default class CardStack extends Component { topCard: 'cardA', cards: [], touchStart: 0, + slideGesture: false }; this.distance = this.constructor.distance; } @@ -52,6 +53,18 @@ export default class CardStack extends Component { const dragDistance = this.distance((horizontalSwipe) ? gestureState.dx : 0, (verticalSwipe) ? gestureState.dy : 0 ); this.state.dragDistance.setValue(dragDistance); this.state.drag.setValue({x: (horizontalSwipe) ? gestureState.dx : 0, y: (verticalSwipe) ? gestureState.dy : 0}); + + //Catch tap events + const onTapCardDeadZone = 5; + if ( + gestureState.dx < -onTapCardDeadZone || + gestureState.dx > onTapCardDeadZone || + gestureState.dy < -onTapCardDeadZone || + gestureState.dy > onTapCardDeadZone + ) { + //must be directly set, because second card is zoom to 0.95 + this.state.slideGesture = true; + } }, onPanResponderTerminationRequest: (evt, gestureState) => true, onPanResponderRelease: (evt, gestureState) => { @@ -111,6 +124,12 @@ export default class CardStack extends Component { { this._resetCard(); } + + if (!this.state.slideGesture && swipeDuration < 300) { + this.props.onTap((this.state.sindex - 2)); + } + //must be directly set, because second card is zoom to 0.95 + this.state.slideGesture = false; }, onPanResponderTerminate: (evt, gestureState) => { }, @@ -429,6 +448,7 @@ CardStack.propTypes = { onSwipedBottom: PropTypes.func, onSwiped: PropTypes.func, onSwipedAll: PropTypes.func, + onTap: PropTypes.func, disableBottomSwipe: PropTypes.bool, disableLeftSwipe: PropTypes.bool, @@ -457,6 +477,7 @@ CardStack.defaultProps = { onSwipedAll: () => { console.log('onSwipedAll') }, + onTap: () => {}, disableBottomSwipe: false, disableLeftSwipe: false, @@ -467,6 +488,4 @@ CardStack.defaultProps = { horizontalSwipe: true, horizontalThreshold: width/2, outputRotationRange: ['-15deg','0deg','15deg'], - - }