react-swipeable - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

CHANGELOG.md

@@ -0,1 +1,19 @@
+# 3.1.0
+
+* Adds `isFLick` to onSwipe events
+* Removes React as a peer dep
+* Adds onSwiping events
+
+# 3.0.2
+
+* Fixes onSwipeDown and onSwipeUp events
+
+# 3.0.1
+
+* Fixes vertical swiping
+
+# 3.0.0
+
+* Refactors build into jsx.
+
 # 2.1.0
@@ -2,0 +20,0 @@

js/Swipeable.js

@@ -6,2 +6,3 @@ var React = require('react')
     onSwiped: React.PropTypes.func,
+    onSwiping: React.PropTypes.func,
     onSwipingUp: React.PropTypes.func,
@@ -77,2 +78,6 @@ onSwipingRight: React.PropTypes.func,
 
+    if (this.props.onSwiping) {
+      this.props.onSwiping(e, pos.deltaX, pos.deltaY, pos.absX, pos.absY)
+    }
+
     if (pos.absX > pos.absY) {
@@ -128,11 +133,11 @@ if (pos.deltaX > 0) {
         if (pos.deltaX > 0) {
-          this.props.onSwipedLeft && this.props.onSwipedLeft(ev, pos.deltaX)
+          this.props.onSwipedLeft && this.props.onSwipedLeft(ev, pos.deltaX, isFlick)
         } else {
-          this.props.onSwipedRight && this.props.onSwipedRight(ev, pos.deltaX)
+          this.props.onSwipedRight && this.props.onSwipedRight(ev, pos.deltaX, isFlick)
         }
       } else {
         if (pos.deltaY > 0) {
-          this.props.onSwipedUp && this.props.onSwipedUp(ev, pos.deltaY)
+          this.props.onSwipedUp && this.props.onSwipedUp(ev, pos.deltaY, isFlick)
         } else {
-          this.props.onSwipedDown && this.props.onSwipedDown(ev, pos.deltaY)
+          this.props.onSwipedDown && this.props.onSwipedDown(ev, pos.deltaY, isFlick)
         }
@@ -139,0 +144,0 @@ }

jsx/Swipeable.jsx

@@ -6,2 +6,3 @@ var React = require('react')
     onSwiped: React.PropTypes.func,
+    onSwiping: React.PropTypes.func,
     onSwipingUp: React.PropTypes.func,
@@ -77,2 +78,6 @@ onSwipingRight: React.PropTypes.func,
 
+    if (this.props.onSwiping) {
+      this.props.onSwiping(e, pos.deltaX, pos.deltaY, pos.absX, pos.absY)
+    }
+
     if (pos.absX > pos.absY) {
@@ -128,11 +133,11 @@ if (pos.deltaX > 0) {
         if (pos.deltaX > 0) {
-          this.props.onSwipedLeft && this.props.onSwipedLeft(ev, pos.deltaX)
+          this.props.onSwipedLeft && this.props.onSwipedLeft(ev, pos.deltaX, isFlick)
         } else {
-          this.props.onSwipedRight && this.props.onSwipedRight(ev, pos.deltaX)
+          this.props.onSwipedRight && this.props.onSwipedRight(ev, pos.deltaX, isFlick)
         }
       } else {
         if (pos.deltaY > 0) {
-          this.props.onSwipedUp && this.props.onSwipedUp(ev, pos.deltaY)
+          this.props.onSwipedUp && this.props.onSwipedUp(ev, pos.deltaY, isFlick)
         } else {
-          this.props.onSwipedDown && this.props.onSwipedDown(ev, pos.deltaY)
+          this.props.onSwipedDown && this.props.onSwipedDown(ev, pos.deltaY, isFlick)
         }
@@ -139,0 +144,0 @@ }

package.json

 {
   "name": "react-swipeable",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Swipe bindings for react",
@@ -26,9 +26,7 @@ "main": "js/Swipeable.js",
   "license": "MIT",
-  "peerDependencies": {
-    "react": ">=0.12.x"
-  },
   "devDependencies": {
     "gulp": "^3.8.11",
-    "gulp-react": "^3.0.1"
+    "gulp-react": "^3.0.1",
+    "react": ">=0.12.x"
   }
 }

README.md

@@ -5,28 +5,33 @@ # Swipeable
 
-    npm install react-swipeable
+```console
+$ npm install react-swipeable
+```
 
 ## Use
 
-    var Swipeable = require('react-swipeable')
+```js
+var Swipeable = require('react-swipeable')
 
-    var SampleComponent = React.createClass({
-      render: function () {
-        return (
-          <Swipeable
-            onSwipingUp={this.swipingUp}
-            onSwipingRight={this.swipingRight}
-            onSwipingDown={this.swipingDown}
-            onSwipingLeft={this.swipingLeft}
-            onSwipedUp={this.swipedUp}
-            onSwipedRight={this.swipedRight}
-            onSwipedDown={this.swipedDown}
-            onSwipedLeft={this.swipedLeft}
-            onSwiped={this.handleSwipeAction}>
-            <div>
-              This element can be swiped
-            </div>
-          </Swipeable>
-        )
-      }
-    })
+var SampleComponent = React.createClass({
+  render: function () {
+    return (
+      <Swipeable
+        onSwiping={this.swiping}
+        onSwipingUp={this.swipingUp}
+        onSwipingRight={this.swipingRight}
+        onSwipingDown={this.swipingDown}
+        onSwipingLeft={this.swipingLeft}
+        onSwipedUp={this.swipedUp}
+        onSwipedRight={this.swipedRight}
+        onSwipedDown={this.swipedDown}
+        onSwipedLeft={this.swipedLeft}
+        onSwiped={this.handleSwipeAction}>
+        <div>
+          This element can be swiped
+        </div>
+      </Swipeable>
+    )
+  }
+})
+```
 
@@ -36,3 +41,3 @@ # Props
 **None of the props are required.**
-`onSwipingUp`, `onSwipingRight`, `onSwipingDown`, `onSwipingLeft` calls back with the event
+`onSwiping`, `onSwipingUp`, `onSwipingRight`, `onSwipingDown`, `onSwipingLeft`, calls back with the event
 as well as the absolute delta of where the swipe started and where it's currently at. These constantly fire throughout touch events.
@@ -49,16 +54,18 @@
 
-###PropTypes
+### PropTypes
 
-    onFlick: React.PropTypes.func,
-    onSwiped: React.PropTypes.func,
-    onSwipingUp: React.PropTypes.func,
-    onSwipingRight: React.PropTypes.func,
-    onSwipingDown: React.PropTypes.func,
-    onSwipingLeft: React.PropTypes.func,
-    onSwipedUp: React.PropTypes.func,
-    onSwipedRight: React.PropTypes.func,
-    onSwipedDown: React.PropTypes.func,
-    onSwipedLeft: React.PropTypes.func,
-    flickThreshold: React.PropTypes.number,
-    delta: React.PropTypes.number
+```
+  onSwiped: React.PropTypes.func,
+  onSwiping: React.PropTypes.func,
+  onSwipingUp: React.PropTypes.func,
+  onSwipingRight: React.PropTypes.func,
+  onSwipingDown: React.PropTypes.func,
+  onSwipingLeft: React.PropTypes.func,
+  onSwipedUp: React.PropTypes.func,
+  onSwipedRight: React.PropTypes.func,
+  onSwipedDown: React.PropTypes.func,
+  onSwipedLeft: React.PropTypes.func,
+  flickThreshold: React.PropTypes.number,
+  delta: React.PropTypes.number
+```
 
@@ -68,8 +75,14 @@ ## Development
 Initial set up, run:
-    
-    npm install
 
+```console
+$ npm install
+```
+
 For watch on files and JSX transpiling, run:
 
-    gulp
+```console
+$ gulp
+```
+    
+#####Please make updates and changes to the `jsx/Swipeable.jsx`, and have gulp/babel compile the `js/Swipeable.js` file.
 
@@ -76,0 +89,0 @@ # License

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

Improved metrics

Total package byte prevSize

12657

increased by5.75%

Dependency count

0

decreased by-100%

Lines of code

290

increased by2.84%

Number of lines in readme file

88

increased by17.33%

Worsened metrics

Dev dependency count

3

increased by50%

No dependency changes