Feat/panning fixes

src/components/panningViews/panDismissibleView.js

@@ -9,6 +9,7 @@ import PanningProvider from './panningProvider';
 const DEFAULT_SPEED = 20;
 const DEFAULT_BOUNCINESS = 6;
 const DEFAULT_DISMISS_ANIMATION_DURATION = 280;
+const DEFAULT_MAXIMUM_DRAGS_AFTER_SWIPE = 1;
 
 /**
  * @description: PanDismissibleView component created to making listening to swipe and drag events easier,
@@ -37,6 +38,10 @@ class PanDismissibleView extends PureComponent {
       bounciness: PropTypes.number,
       duration: PropTypes.number,
     }),
+    /**
+     * The maximum number of swipes that can occur after a swipe before resetting the swipe (default is 1)
+     */
+    maximumDragsAfterSwipe: PropTypes.number,
   };
 
   static defaultProps = {
@@ -51,6 +56,7 @@ class PanDismissibleView extends PureComponent {
       bounciness: DEFAULT_BOUNCINESS,
       duration: DEFAULT_DISMISS_ANIMATION_DURATION,
     },
+    maximumDragsAfterSwipe: DEFAULT_MAXIMUM_DRAGS_AFTER_SWIPE,
     onDismiss: _.noop,
   };
 
@@ -61,6 +67,7 @@ class PanDismissibleView extends PureComponent {
       animTranslateX: new Animated.Value(0),
       animTranslateY: new Animated.Value(0),
       isAnimating: false,
+      forceDismissIsPending: false
     };
     this.ref = React.createRef();
   }
@@ -110,22 +117,32 @@ class PanDismissibleView extends PureComponent {
     }
   };
 
-  initPositions = () => {
+  initPositions = (extraDataForSetState, runAfterSetState) => {
     this.setNativeProps(0, 0);
     this.setState({
       animTranslateX: new Animated.Value(0),
       animTranslateY: new Animated.Value(0),
-    });
+      ...extraDataForSetState
+    }, runAfterSetState);
   };
 
   onPanStart = () => {
     this.swipe = {};
+    this.counter = 0;
   };
 
   onDrag = deltas => {
+    const {maximumDragsAfterSwipe} = this.props;
     const left = deltas.x ? Math.round(deltas.x) : 0;
     const top = deltas.y ? Math.round(deltas.y) : 0;
     this.setNativeProps(left, top);
+    if (this.swipe.x || this.swipe.y) {
+      if (this.counter < maximumDragsAfterSwipe) {
+        this.counter += 1;
+      } else {
+        this.swipe = {};
+      }
+    }
   };
 
   setNativeProps = (left, top) => {
@@ -193,8 +210,9 @@ class PanDismissibleView extends PureComponent {
   };
 
   onInitAnimationFinished = () => {
-    this.setState({isAnimating: false});
-    this.initPositions();
+    const {forceDismissIsPending} = this.state;
+    const runAfterSetState = forceDismissIsPending ? this.animateDismiss : undefined;
+    this.initPositions({isAnimating: false, forceDismissIsPending: false}, runAfterSetState);
   };
 
   getDismissAnimationDirection = () => {
@@ -232,14 +250,19 @@ class PanDismissibleView extends PureComponent {
   // isDown === true --> animate to the bottom
   // isDown === false --> animate to the top
   animateDismiss = () => {
-    const {directions = []} = this.props;
-    const hasUp = directions.includes(PanningProvider.Directions.UP);
-    const hasRight = directions.includes(PanningProvider.Directions.RIGHT);
-    const hasLeft = directions.includes(PanningProvider.Directions.LEFT);
-    const hasDown = !hasUp && !hasLeft && !hasRight; // default
-    const verticalDismiss = hasDown ? true : hasUp ? false : undefined;
-    const horizontalDismiss = hasRight ? true : hasLeft ? false : undefined;
-    this._animateDismiss(horizontalDismiss, verticalDismiss);
+    const {isAnimating} = this.state;
+    if (isAnimating) {
+      this.setState({forceDismissIsPending: true});
+    } else {
+      const {directions = []} = this.props;
+      const hasUp = directions.includes(PanningProvider.Directions.UP);
+      const hasRight = directions.includes(PanningProvider.Directions.RIGHT);
+      const hasLeft = directions.includes(PanningProvider.Directions.LEFT);
+      const hasDown = !hasUp && !hasLeft && !hasRight; // default
+      const verticalDismiss = hasDown ? true : hasUp ? false : undefined;
+      const horizontalDismiss = hasRight ? true : hasLeft ? false : undefined;
+      this._animateDismiss(horizontalDismiss, verticalDismiss);
+    }
   };
 
   _animateDismiss = (isRight, isDown) => {

src/components/panningViews/panningProvider.js

@@ -55,11 +55,11 @@ export default class PanningProvider extends Component {
   };
 
   onDrag = ({directions, deltas}) => {
-    this.setState({dragDirections: directions, dragDeltas: deltas});
+    this.setState({dragDirections: directions, dragDeltas: deltas, swipeDirections: {}, swipeVelocities: {}});
   };
 
   onSwipe = ({directions, velocities}) => {
-    this.setState({swipeDirections: directions, swipeVelocities: velocities});
+    this.setState({swipeDirections: directions, swipeVelocities: velocities, dragDirections: {}, dragDeltas: {}});
   };
 
   render() {