свайпы

src/component.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { listenSwipe, removeSwipeListener } from './touch'
+
+export default class BTComponent extends Component {
+	componentDidMount() {
+		// Свайп действия
+		if(
+			this.props.onSwipeLeft ||
+			this.props.onSwipeRight ||
+			this.props.onSwipeTop ||
+			this.props.onSwipeBottom ||
+			this.onSwipeLeft ||
+			this.onSwipeRight ||
+			this.onSwipeTop ||
+			this.onSwipeBottom
+		)
+		{
+			this.swipeFunctions = listenSwipe(this, {
+				left: this.props.onSwipeLeft || this.onSwipeLeft,
+				right: this.props.onSwipeRight || this.onSwipeRight,
+				top: this.props.onSwipeTop || this.onSwipeTop,
+				bottom: this.props.onSwipeBottom || this.onSwipeBottom,
+				initSwipe: this.props.initSwipe || this.initSwipe,
+			});
+		}
+	}
+	componentWillUnmount() {
+		if(this.swipeFunctions)
+		{
+			removeSwipeListener(this, this.swipeFunctions);
+		}
+	}
+}

src/page.js

@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import React from 'react';
+import Component from './component'
 
 export default class Page extends Component {
 	setTitle(title) {

src/torrent-page.js

@@ -131,6 +131,21 @@ export default class TorrentPage extends Page {
     this.setTitle('Information about torrent');
   }
 
+  changeTab(tab) {
+  	if(this.state.value != tab) {
+	  	this.setState({
+	      value: tab
+	    });
+  		console.log('change');
+  	}
+  }
+  onSwipeRight() {
+  	this.changeTab('files');
+  }
+  onSwipeLeft() {
+  	this.changeTab('info');
+  }
+
   handleChange = (value) => {
   	if(value == 'main') {
   		window.router('/');
@@ -164,6 +179,8 @@ export default class TorrentPage extends Page {
     }));
   }
   componentDidMount() {
+  	super.componentDidMount();
+
   	this.getTorrentInfo();
   	this.filesUpdated = (hash) => {
   		if(this.props.hash != hash)

src/touch.js

@@ -0,0 +1,95 @@
+import ReactDOM from 'react-dom';
+
+let listenSwipe = (component, handlers) =>
+{
+    let element = ReactDOM.findDOMNode(component),
+        startX,
+        startY,
+        distanceX,
+        distanceY,
+        threshold = 110,
+        allowedTime = 280,
+        thresholdAlternativeAxis = 145,
+        elapsedTime,
+        startTime;
+ 
+    let touchFunctions = {
+        touchstart : (e) => {
+            let touchObject = e.changedTouches[0]
+           
+            distanceX = 0;
+            distanceY = 0;
+            
+            startX = touchObject.pageX
+            startY = touchObject.pageY
+            
+            startTime = new Date().getTime()
+            
+            if(handlers && handlers.preventDefault)
+                e.preventDefault();
+
+            if(handlers && handlers.initSwipe)
+                handlers.initSwipe.call(component);
+        },
+        touchmove : (e) => {
+            if(handlers && handlers.preventDefault)
+                e.preventDefault();
+        },
+        touchend : (e) => {
+            let touchObject = e.changedTouches[0];
+
+            distanceX = touchObject.pageX - startX;
+            distanceY = touchObject.pageY - startY;
+
+            elapsedTime = new Date().getTime() - startTime; // get time elapsed
+            
+            let params = {
+                startX,
+                startY,
+                endX: touchObject.pageX,
+                endY: touchObject.pageY,
+                distanceX,
+                distanceY
+            };
+
+            if (elapsedTime <= allowedTime)
+            {
+                if(distanceX >= threshold && Math.abs(distanceY) <= thresholdAlternativeAxis)
+                {
+                    if(handlers && handlers.left)
+                        handlers.left.call(component, params);
+                } else 
+                if(-distanceX >= threshold && Math.abs(distanceY) <= thresholdAlternativeAxis) {
+                    if(handlers && handlers.right)
+                        handlers.right.call(component, params);
+                } else 
+                if(distanceY >= threshold && Math.abs(distanceX) <= thresholdAlternativeAxis) {
+                    if(handlers && handlers.top)
+                        handlers.top.call(component, params);
+                } else 
+                if(-distanceY >= threshold && Math.abs(distanceX) <= thresholdAlternativeAxis) {
+                    if(handlers && handlers.bottom)
+                        handlers.bottom.call(component, params);
+                }
+            }
+
+            if(handlers && handlers.preventDefault)
+                e.preventDefault();
+        }
+    };
+
+    element.addEventListener('touchstart', touchFunctions.touchstart, false);
+    element.addEventListener('touchmove', touchFunctions.touchmove, false);
+    element.addEventListener('touchend', touchFunctions.touchend, false);
+
+    return touchFunctions;
+}
+
+let removeSwipeListener = (component, touchFunctions) => {
+    let element = ReactDOM.findDOMNode(component);
+    element.removeEventListener('touchstart', touchFunctions.touchstart);
+    element.removeEventListener('touchmove', touchFunctions.touchmove);
+    element.removeEventListener('touchend', touchFunctions.touchend);
+}
+
+export { listenSwipe, removeSwipeListener }