Added onTap prop. (#61)

This is fired after the onTouchEnd when the movement
is less the the specified delta.

README.md

@@ -49,6 +49,8 @@ as well as the x distance, + or -, from where the swipe started to where it ende
 
 **`onSwiped`** is called with the event, the X and Y delta, whether or not the event was a flick, and the current velocity of the swipe. `this.props.onSwiped(e, x, y, isFlick, velocity)`
 
+**`onTap`** is called with the onTouchEnd event when the element has been tapped. `this.props.onTap(e)`
+
 #####Configuration Props
 
 **`flickThreshold`** is a number (float) which determines the max velocity of a swipe before it's considered a flick. The default value is `0.6`.
@@ -77,6 +79,7 @@ as well as the x distance, + or -, from where the swipe started to where it ende
   onSwipedRight: React.PropTypes.func,
   onSwipedDown: React.PropTypes.func,
   onSwipedLeft: React.PropTypes.func,
+  onTap: React.PropTypes.func,
   flickThreshold: React.PropTypes.number,
   delta: React.PropTypes.number,
   preventDefaultTouchmoveEvent: React.PropTypes.bool,

examples/app/Main.js

@@ -6,6 +6,7 @@ const DIRECTIONS = ['Left', 'Right', 'Up', 'Down'];
 const initialState = {
   swiping: false,
   swiped: false,
+  tap: false,
   swipingDirection: '',
   swipedDirection: '',
 };
@@ -28,6 +29,7 @@ const initialStateApplied = {
   onSwipedRightApplied: true,
   onSwipedUpApplied: true,
   onSwipedDownApplied: true,
+  onTapApplied: true,
 };
 
 export default class Main extends Component {
@@ -72,6 +74,14 @@ export default class Main extends Component {
     });
   }
 
+  onTap(...args) {
+    console.log('onTap args: ', args)
+    this.setState({
+      tap: true,
+    });
+  }
+
+
   updateValue(type, value) {
     this.setState({
       [type]: value,
@@ -101,10 +111,12 @@ export default class Main extends Component {
       swiped,
       swipingDirection,
       swipedDirection,
+      tap,
       flickThreshold,
       delta,
       onSwipingApplied,
       onSwipedApplied,
+      onTapApplied,
       preventDefaultTouchmoveEvent,
       stopPropagation,
       nodeName,
@@ -124,6 +136,9 @@ export default class Main extends Component {
     if (onSwipedApplied) {
       swipeableDirProps.onSwiped = (...args)=>this.onSwiped(...args);
     }
+    if (onTapApplied) {
+      swipeableDirProps.onTap = (...args)=>this.onTap(...args);
+    }
 
     return (
       <div className="row">
@@ -164,6 +179,13 @@ export default class Main extends Component {
                 </td>
                 <td>onSwiped</td><td>{swiped ? 'True' : 'False'}</td>
               </tr>
+              <tr style={{color: onTapApplied ? '#000000' : '#cccccc'}}>
+                <td className="text-center">
+                  <input type="checkbox" checked={onTapApplied}
+                    onChange={(e)=>this.updateValue('onTapApplied', e.target.checked)} />
+                </td>
+                <td>onTap</td><td>{tap ? 'True' : 'False'}</td>
+              </tr>
               <tr>
                 <td className="text-center"><a href="#appliedDirs">↓&nbsp;Below&nbsp;↓</a></td>
                 <td>onSwiping[Direction]</td><td>{swipingDirection}</td>

src/Swipeable.js

@@ -195,6 +195,8 @@ const Swipeable = React.createClass({
           this.props.onSwipedDown && this.props.onSwipedDown(e, pos.deltaY, isFlick)
         }
       }
+    } else {
+      this.props.onTap && this.props.onTap(e)
     }
 
     this.swipeable = getInitialState();
@@ -221,6 +223,7 @@ const Swipeable = React.createClass({
     delete newProps.onSwipedRight
     delete newProps.onSwipedDown
     delete newProps.onSwipedLeft
+    delete newProps.onTap
     delete newProps.flickThreshold
     delete newProps.delta
     delete newProps.preventDefaultTouchmoveEvent