react-swipeable
Advanced tools
Comparing version 1.5.0 to 2.0.0
{ | ||
"name": "react-swipeable", | ||
"version": "1.5.0", | ||
"version": "2.0.0", | ||
"description": "Swipe bindings for react", | ||
@@ -5,0 +5,0 @@ "main": "Swipeable.js", |
@@ -34,5 +34,5 @@ # Swipeable | ||
`onSwiped` calls back with the event and the X and Y delta. | ||
`onSwiped` calls back with the event, the X and Y delta, and whether or not the event was a flick `this.props.onSwiped(ev, x, y, isFlick)` | ||
`onFlick` is called only if a flick is detected with the event and the X and Y delta. | ||
`flickThreshold` is a number (float) which determines the max velocity of a swipe before it's considered a flick. | ||
@@ -47,2 +47,3 @@ `delta` is the amount of px before we start firing events. The default value is 10. | ||
onSwipingLeft: React.PropTypes.func, | ||
flickThreshold: React.PropTypes.number, | ||
delta: React.PropTypes.number | ||
@@ -49,0 +50,0 @@ |
var React = require('react') | ||
var assign = require('object-assign') | ||
var FLICK_THRESHOLD = 0.6 | ||
var Swipeable = React.createClass({ | ||
propTypes: { | ||
onSwiped: React.PropTypes.func, | ||
onFlick: React.PropTypes.func, | ||
onSwipingUp: React.PropTypes.func, | ||
@@ -14,2 +11,3 @@ onSwipingRight: React.PropTypes.func, | ||
onSwipingLeft: React.PropTypes.func, | ||
flickThreshold: React.PropTypes.number, | ||
delta: React.PropTypes.number | ||
@@ -29,2 +27,3 @@ }, | ||
return { | ||
flickThreshold: 0.6, | ||
delta: 10 | ||
@@ -109,15 +108,16 @@ } | ||
touchEnd: function (e) { | ||
touchEnd: function (ev) { | ||
if (this.state.swiping) { | ||
var pos = this.calculatePos(e) | ||
var pos = this.calculatePos(ev) | ||
var time = Date.now() - this.state.start | ||
var velocity = Math.sqrt(pos.absX * pos.absX + pos.absY * pos.absY) / time | ||
var isFlick = velocity > FLICK_THRESHOLD | ||
var isFlick = velocity > this.props.flickThreshold | ||
if (isFlick) { | ||
this.props.onFlick && this.props.onFlick(e, pos.deltaX, pos.deltaY) | ||
} else { | ||
this.props.onSwiped && this.props.onSwiped(e, pos.deltaX, pos.deltaY) | ||
} | ||
this.props.onSwiped && this.props.onSwiped( | ||
ev, | ||
pos.deltaX, | ||
pos.deltaY, | ||
isFlick | ||
) | ||
} | ||
@@ -124,0 +124,0 @@ this.setState(this.getInitialState()) |
6332
6
114
52