react-swipeable - npm Package Compare versions

Comparing version 3.7.0 to 3.8.0

CHANGELOG.md

@@ -0,4 +1,9 @@
+# 3.8.0
+
+* Allow `onMouseDown`, `onMouseUp`, and `onMouseMove` props to fire appropriately again. [#55](https://github.com/dogfessional/react-swipeable/pull/55), thanks [@lochstar](https://github.com/lochstar)
+* Stop using this.state to track swipes, thanks [@grantila](https://github.com/grantila) for pointing out this change and submitting PR, [#58](https://github.com/dogfessional/react-swipeable/pull/58). Should provide minor performance gains since `Swipeable` will no longer be calling `this.setState` internally.
+
 # 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)
+* 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)
 
@@ -5,0 +10,0 @@ # 3.6.0

lib/Swipeable.js

@@ -7,2 +7,11 @@ 'use strict';
 
+function getInitialState() {
+  return {
+    x: null,
+    y: null,
+    swiping: false,
+    start: 0
+  };
+}
+
 var Swipeable = React.createClass({
@@ -30,9 +39,4 @@ displayName: 'Swipeable',
 
-  getInitialState: function getInitialState() {
-    return {
-      x: null,
-      y: null,
-      swiping: false,
-      start: 0
-    };
+  componentWillMount: function componentWillMount() {
+    this.swipeable = getInitialState();
   },
@@ -62,4 +66,4 @@
 
-    var xd = this.state.x - x;
-    var yd = this.state.y - y;
+    var xd = this.swipeable.x - x;
+    var yd = this.swipeable.y - y;
 
@@ -69,3 +73,3 @@ var axd = Math.abs(xd);
 
-    var time = Date.now() - this.state.start;
+    var time = Date.now() - this.swipeable.start;
     var velocity = Math.sqrt(axd * axd + ayd * ayd) / time;
@@ -83,2 +87,10 @@
   eventStart: function eventStart(e) {
+    if (typeof this.props.onMouseDown === 'function') {
+      this.props.onMouseDown(e);
+    }
+
+    if (e.type === 'mousedown' && !this.props.trackMouse) {
+      return;
+    }
+
     if (e.touches && e.touches.length > 1) {
@@ -94,3 +106,3 @@ return;
 
-    this.setState({
+    this.swipeable = {
       start: Date.now(),
@@ -100,10 +112,18 @@ x: touches[0].clientX,
       swiping: false
-    });
+    };
   },
 
   eventMove: function eventMove(e) {
-    if (!this.state.x || !this.state.y || e.touches && e.touches.length > 1) {
+    if (typeof this.props.onMouseMove === 'function') {
+      this.props.onMouseMove(e);
+    }
+
+    if (e.type === 'mousemove' && !this.props.trackMouse) {
       return;
     }
 
+    if (!this.swipeable.x || !this.swipeable.y || e.touches && e.touches.length > 1) {
+      return;
+    }
+
     var cancelPageSwipe = false;
@@ -148,3 +168,3 @@ var pos = this.calculatePos(e);
 
-    this.setState({ swiping: true });
+    this.swipeable.swiping = true;
 
@@ -157,3 +177,11 @@ if (cancelPageSwipe && this.props.preventDefaultTouchmoveEvent) {
   eventEnd: function eventEnd(e) {
-    if (this.state.swiping) {
+    if (typeof this.props.onMouseUp === 'function') {
+      this.props.onMouseUp(e);
+    }
+
+    if (e.type === 'mouseup' && !this.props.trackMouse) {
+      return;
+    }
+
+    if (this.swipeable.swiping) {
       var pos = this.calculatePos(e);
@@ -182,3 +210,3 @@
 
-    this.setState(this.getInitialState());
+    this.swipeable = getInitialState();
   },
@@ -191,5 +219,5 @@
       onTouchEnd: this.eventEnd,
-      onMouseDown: this.props.trackMouse && this.eventStart,
-      onMouseMove: this.props.trackMouse && this.eventMove,
-      onMouseUp: this.props.trackMouse && this.eventEnd
+      onMouseDown: this.eventStart,
+      onMouseMove: this.eventMove,
+      onMouseUp: this.eventEnd
     });
@@ -196,0 +224,0 @@

package.json

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

src/Swipeable.js

 const React = require('react')
 
+function getInitialState () {
+  return {
+    x: null,
+    y: null,
+    swiping: false,
+    start: 0
+  };
+}
+
 const Swipeable = React.createClass({
@@ -23,9 +32,4 @@ propTypes: {
 
-  getInitialState: function () {
-    return {
-      x: null,
-      y: null,
-      swiping: false,
-      start: 0
-    }
+  componentWillMount: function () {
+    this.swipeable = getInitialState();
   },
@@ -54,4 +58,4 @@
 
-    const xd = this.state.x - x
-    const yd = this.state.y - y
+    const xd = this.swipeable.x - x
+    const yd = this.swipeable.y - y
 
@@ -61,3 +65,3 @@ const axd = Math.abs(xd)
 
-    const time = Date.now() - this.state.start
+    const time = Date.now() - this.swipeable.start
     const velocity = Math.sqrt(axd * axd + ayd * ayd) / time
@@ -75,2 +79,10 @@
   eventStart: function (e) {
+    if (typeof this.props.onMouseDown === 'function') {
+      this.props.onMouseDown(e);
+    }
+
+    if (e.type === 'mousedown' && !this.props.trackMouse) {
+      return
+    }
+
     if (e.touches && e.touches.length > 1) {
@@ -86,3 +98,3 @@ return
 
-    this.setState({
+    this.swipeable = {
       start: Date.now(),
@@ -92,10 +104,18 @@ x: touches[0].clientX,
       swiping: false
-    })
+    };
   },
 
   eventMove: function (e) {
-    if (!this.state.x || !this.state.y || e.touches && e.touches.length > 1) {
+    if (typeof this.props.onMouseMove === 'function') {
+      this.props.onMouseMove(e);
+    }
+
+    if (e.type === 'mousemove' && !this.props.trackMouse) {
       return
     }
 
+    if (!this.swipeable.x || !this.swipeable.y || e.touches && e.touches.length > 1) {
+      return
+    }
+
     let cancelPageSwipe = false
@@ -140,3 +160,3 @@ const pos = this.calculatePos(e)
 
-    this.setState({ swiping: true })
+    this.swipeable.swiping = true;
 
@@ -149,3 +169,11 @@ if (cancelPageSwipe && this.props.preventDefaultTouchmoveEvent) {
   eventEnd: function (e) {
-    if (this.state.swiping) {
+    if (typeof this.props.onMouseUp === 'function') {
+      this.props.onMouseUp(e);
+    }
+
+    if (e.type === 'mouseup' && !this.props.trackMouse) {
+      return
+    }
+
+    if (this.swipeable.swiping) {
       const pos = this.calculatePos(e)
@@ -180,3 +208,3 @@
 
-    this.setState(this.getInitialState())
+    this.swipeable = getInitialState();
   },
@@ -190,5 +218,5 @@
       onTouchEnd: this.eventEnd,
-      onMouseDown: this.props.trackMouse && this.eventStart,
-      onMouseMove: this.props.trackMouse && this.eventMove,
-      onMouseUp: this.props.trackMouse && this.eventEnd
+      onMouseDown: this.eventStart,
+      onMouseMove: this.eventMove,
+      onMouseUp: this.eventEnd
     }
@@ -195,0 +223,0 @@

No alert changes

Improved metrics

Total package byte prevSize

21288

increased by8.08%

Lines of code

402

increased by11.67%

No dependency changes