Add mouse drag/fling support.

package.json

@@ -2,7 +2,7 @@
   "name": "react-touch",
   "version": "0.0.6",
   "description": "React component library for building inertial touch applications.",
-  "main": "lib/ReactTouch.js",
+  "main": "src/ReactTouch.js",
   "peerDependencies": {
     "react": "~0.9"
   },

src/ReactTouch.js

@@ -5,11 +5,9 @@ var Router = require('./routing/Router');
 var ReactTouch = {
   start: function(componentClass, domNode, routes, useHistory) {
     var EventPluginHub = require('react/lib/EventPluginHub');
-    var ResponderEventPlugin = require('./thirdparty/ResponderEventPlugin');
     var TapEventPlugin = require('./thirdparty/TapEventPlugin');
 
     EventPluginHub.injection.injectEventPluginsByName({
-      ResponderEventPlugin: ResponderEventPlugin,
       TapEventPlugin: TapEventPlugin
     });
 
@@ -19,4 +17,4 @@ var ReactTouch = {
   }
 };
 
-module.exports = ReactTouch;
+module.exports = ReactTouch;

src/primitives/TouchableArea.js

@@ -10,6 +10,43 @@ var TouchableArea = React.createClass({
     };
   },
 
+  handleMouseStart: function(e) {
+    if (!this.props.scroller || !this.props.touchable) {
+      return;
+    }
+
+    // TODO: what’s the best way to handle this with React?
+    // The problem is if your mouse gets away from the target element it will
+    // no longer receive the mousemove or mouseup events so we need to capture
+    // these events at the document level.
+    document.body.addEventListener('mousemove', this.handleMouseMove, false);
+    document.body.addEventListener('mouseup', this.handleMouseEnd, false);
+
+    this.props.scroller.doTouchStart([e], e.timeStamp);
+    e.preventDefault();
+  },
+
+  handleMouseMove: function(e) {
+    if (!this.props.scroller || !this.props.touchable) {
+      return;
+    }
+
+    this.props.scroller.doTouchMove([e], e.timeStamp);
+    e.preventDefault();
+  },
+
+  handleMouseEnd: function(e) {
+    if (!this.props.scroller || !this.props.touchable) {
+      return;
+    }
+
+    document.body.removeEventListener('mousemove', this.handleMouseMove);
+    document.body.removeEventListener('mouseup', this.handleMouseEnd);
+
+    this.props.scroller.doTouchEnd(e.timeStamp);
+    e.preventDefault();
+  },
+
   handleTouchStart: function(e) {
     if (!this.props.scroller || !this.props.touchable) {
       return;
@@ -41,6 +78,7 @@ var TouchableArea = React.createClass({
     var component = this.props.component;
     return this.transferPropsTo(
       <component
+        onMouseDown={this.handleMouseStart}
         onTouchStart={this.handleTouchStart}
         onTouchMove={this.handleTouchMove}
         onTouchEnd={this.handleTouchEnd}