react-swipeable - npm Package Compare versions

Comparing version 3.6.0 to 3.7.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+# 3.7.0
+
+* add ability to track mouse events as touch events. Thanks ([@jakepusateri](https://github.com/jakepusateri) and ([@Marcel-G](https://github.com/Marcel-G). [#51](https://github.com/dogfessional/react-swipeable/issues/51)
+
 # 3.6.0
@@ -2,0 +6,0 @@

lib/Swipeable.js

@@ -25,3 +25,4 @@ 'use strict';
     stopPropagation: React.PropTypes.bool,
-    nodeName: React.PropTypes.string
+    nodeName: React.PropTypes.string,
+    trackMouse: React.PropTypes.bool
   },
@@ -49,4 +50,12 @@
   calculatePos: function calculatePos(e) {
-    var x = e.changedTouches[0].clientX;
-    var y = e.changedTouches[0].clientY;
+    var x = void 0,
+        y = void 0;
+    // If not a touch, determine point from mouse coordinates
+    if (e.changedTouches) {
+      x = e.changedTouches[0].clientX;
+      y = e.changedTouches[0].clientY;
+    } else {
+      x = e.clientX;
+      y = e.clientY;
+    }
 
@@ -71,7 +80,11 @@ var xd = this.state.x - x;
 
-  touchStart: function touchStart(e) {
-    if (e.touches.length > 1) {
+  eventStart: function eventStart(e) {
+    if (e.touches && e.touches.length > 1) {
       return;
     }
-
+    // If not a touch, determine point from mouse coordinates
+    var touches = e.touches;
+    if (!touches) {
+      touches = [{ clientX: e.clientX, clientY: e.clientY }];
+    }
     if (this.props.stopPropagation) e.stopPropagation();
@@ -81,4 +94,4 @@
       start: Date.now(),
-      x: e.touches[0].clientX,
-      y: e.touches[0].clientY,
+      x: touches[0].clientX,
+      y: touches[0].clientY,
       swiping: false
@@ -88,4 +101,4 @@ });
 
-  touchMove: function touchMove(e) {
-    if (!this.state.x || !this.state.y || e.touches.length > 1) {
+  eventMove: function eventMove(e) {
+    if (!this.state.x || !this.state.y || e.touches && e.touches.length > 1) {
       return;
@@ -140,3 +153,3 @@ }
 
-  touchEnd: function touchEnd(e) {
+  eventEnd: function eventEnd(e) {
     if (this.state.swiping) {
@@ -171,5 +184,8 @@ var pos = this.calculatePos(e);
     var newProps = _extends({}, this.props, {
-      onTouchStart: this.touchStart,
-      onTouchMove: this.touchMove,
-      onTouchEnd: this.touchEnd
+      onTouchStart: this.eventStart,
+      onTouchMove: this.eventMove,
+      onTouchEnd: this.eventEnd,
+      onMouseDown: this.props.trackMouse && this.eventStart,
+      onMouseMove: this.props.trackMouse && this.eventMove,
+      onMouseUp: this.props.trackMouse && this.eventEnd
     });
@@ -193,2 +209,3 @@
     delete newProps.children;
+    delete newProps.trackMouse;
 
@@ -195,0 +212,0 @@ return React.createElement(this.props.nodeName, newProps, this.props.children);

package.json

 {
   "name": "react-swipeable",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Swipe bindings for react",
@@ -5,0 +5,0 @@ "main": "lib/Swipeable.js",

src/Swipeable.js

@@ -19,3 +19,4 @@ const React = require('react')
     stopPropagation: React.PropTypes.bool,
-    nodeName: React.PropTypes.string
+    nodeName: React.PropTypes.string,
+    trackMouse: React.PropTypes.bool
   },
@@ -43,4 +44,11 @@
   calculatePos: function (e) {
-    const x = e.changedTouches[0].clientX
-    const y = e.changedTouches[0].clientY
+    let x, y
+    // If not a touch, determine point from mouse coordinates
+    if (e.changedTouches) {
+        x = e.changedTouches[0].clientX
+        y = e.changedTouches[0].clientY
+    } else {
+        x = e.clientX
+        y = e.clientY
+    }
 
@@ -65,7 +73,11 @@ const xd = this.state.x - x
 
-  touchStart: function (e) {
-    if (e.touches.length > 1) {
+  eventStart: function (e) {
+    if (e.touches && e.touches.length > 1) {
       return
     }
-
+    // If not a touch, determine point from mouse coordinates
+    let touches = e.touches
+    if (!touches) {
+        touches = [{ clientX: e.clientX, clientY: e.clientY }]
+    }
     if (this.props.stopPropagation) e.stopPropagation()
@@ -75,4 +87,4 @@
       start: Date.now(),
-      x: e.touches[0].clientX,
-      y: e.touches[0].clientY,
+      x: touches[0].clientX,
+      y: touches[0].clientY,
       swiping: false
@@ -82,4 +94,4 @@ })
 
-  touchMove: function (e) {
-    if (!this.state.x || !this.state.y || e.touches.length > 1) {
+  eventMove: function (e) {
+    if (!this.state.x || !this.state.y || e.touches && e.touches.length > 1) {
       return
@@ -134,3 +146,3 @@ }
 
-  touchEnd: function (e) {
+  eventEnd: function (e) {
     if (this.state.swiping) {
@@ -172,5 +184,8 @@ const pos = this.calculatePos(e)
       ...this.props,
-      onTouchStart: this.touchStart,
-      onTouchMove: this.touchMove,
-      onTouchEnd: this.touchEnd,
+      onTouchStart: this.eventStart,
+      onTouchMove: this.eventMove,
+      onTouchEnd: this.eventEnd,
+      onMouseDown: this.props.trackMouse && this.eventStart,
+      onMouseMove: this.props.trackMouse && this.eventMove,
+      onMouseUp: this.props.trackMouse && this.eventEnd
     }
@@ -194,2 +209,3 @@
     delete newProps.children
+    delete newProps.trackMouse
 
@@ -196,0 +212,0 @@ return React.createElement(

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19696

increased by41.5%

Number of package files

6

increased by20%

Lines of code

360

increased by10.77%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

103

increased byInfinity%

No dependency changes