Feature: Implement shouldStopTouchMovePropagation

ethanselzer · Jan 16, 2018 · a03cb52 · a03cb52
1 parent d709c61
commit a03cb52
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -5,8 +5,6 @@ In the mouse environment it supports scroll position changes during a hover sess
 
 react-cursor-position re-renders child components with new position props when the cursor or touch position changes.
 
-It is safe for server rendering and single page applications.
-
 ## Status
 
 [![CircleCI](https://img.shields.io/circleci/project/github/ethanselzer/react-cursor-position.svg)](https://circleci.com/gh/ethanselzer/react-cursor-position)

diff --git a/src/ReactCursorPosition.js b/src/ReactCursorPosition.js
@@ -60,6 +60,7 @@ export default class extends React.Component {
         pressDuration: PropTypes.number,
         pressMoveThreshold: PropTypes.number,
         shouldDecorateChildren: PropTypes.bool,
+        shouldStopTouchMovePropagation: PropTypes.bool,
         style: PropTypes.object
     };
 
@@ -74,7 +75,8 @@ export default class extends React.Component {
         onDetectedEnvironmentChanged: noop,
         pressDuration: 500,
         pressMoveThreshold: 5,
-        shouldDecorateChildren: true
+        shouldDecorateChildren: true,
+        shouldStopTouchMovePropagation: false
     };
 
     onTouchStart(e) {
@@ -105,6 +107,10 @@ export default class extends React.Component {
 
         this.setPositionState(position);
         e.preventDefault();
+
+        if (this.props.shouldStopTouchMovePropagation) {
+            e.stopPropagation();
+        }
     }
 
     onTouchEnd() {

diff --git a/test/ReactCursorPosition.spec.js b/test/ReactCursorPosition.spec.js
@@ -154,6 +154,18 @@ describe('ReactCursorPosition', () => {
         expect(instance.clearTimers.calledOnce).to.be.true;
     });
 
+    it('prevents default on touch move, when activated', () => {
+        const tree = getMountedComponentTree({ isActivatedOnTouch: true });
+        const touchEvent = getTouchEvent();
+        sinon.spy(touchEvent, 'preventDefault');
+
+        tree.instance().onTouchStart(touchEvent);
+        tree.instance().onTouchMove(touchEvent);
+        tree.update();
+
+        expect(touchEvent.preventDefault.called).to.be.true;
+    });
+
     describe('Add Touch and Mouse Event Listeners', () => {
         it('fills touch event listeners collection', () => {
             positionObserver = getMountedComponentTree();
@@ -643,6 +655,35 @@ describe('ReactCursorPosition', () => {
             expect(childComponent.props()).to.be.empty;
         });
 
+        describe('support for shouldStopTouchMovePropagation', () => {
+            it('is unset by default', () => {
+                const tree = getMountedComponentTree({ isActivatedOnTouch: true });
+                const touchEvent = getTouchEvent();
+                sinon.spy(touchEvent, 'stopPropagation');
+
+                tree.instance().onTouchStart(touchEvent);
+                tree.instance().onTouchMove(touchEvent);
+                tree.update();
+
+                expect(touchEvent.stopPropagation.called).to.be.false;
+            });
+
+            it('can be set', () => {
+                const tree = getMountedComponentTree({
+                    isActivatedOnTouch: true,
+                    shouldStopTouchMovePropagation: true
+                });
+                const touchEvent = getTouchEvent();
+                sinon.spy(touchEvent, 'stopPropagation');
+
+                tree.instance().onTouchStart(touchEvent);
+                tree.instance().onTouchMove(touchEvent);
+                tree.update();
+
+                expect(touchEvent.stopPropagation.called).to.be.true;
+            });
+        })
+
         describe('Support for pressDuration', (done) => {
             it('sets isActive if pressThreshold is not exceeded for duration', () => {
                 const clock = sinon.useFakeTimers();
@@ -874,6 +915,7 @@ describe('ReactCursorPosition', () => {
                 }
             },
             preventDefault: () => {},
+            stopPropagation: () => {},
             touches: [{
                 pageX,
                 pageY