Added ontouch to folders, fixed some issues on ios

src/components/FolderItem/FolderItem.js

@@ -14,7 +14,10 @@ const FolderItem = (props) => {
             
                 <div className={props._id !== props.selected ? "file__item__listview" : "file__item__listview file__item--selected"} 
                 onClick={() => props.folderClick(props._id, props.name)}
-                onContextMenu={(e) => props.getContextMenu(e)}>
+                onContextMenu={(e) => props.getContextMenu(e)}
+                onTouchStart={props.onTouchStart}
+                onTouchEnd={props.onTouchEnd}
+                onTouchMove={props.onTouchMove}>
                     
                     <div className="file__item__listview__title__wrapper file__item__listview__title__wrapper--folder">
                         <img className="file__image__listview" src="/images/folder-svg.svg"/>
@@ -33,7 +36,10 @@ const FolderItem = (props) => {
 
             <div className="folder__item"
                 onClick={() => props.folderClick(props._id, props.name)} 
-                onContextMenu={(e) => props.getContextMenu(e)}>
+                onContextMenu={(e) => props.getContextMenu(e)}
+                onTouchStart={props.onTouchStart}
+                onTouchEnd={props.onTouchEnd}
+                onTouchMove={props.onTouchMove}>
 
             <img className="folder__image" src="/images/folder-svg.svg"/>
             <h4 className={props._id !== props.selected ? "folder__title" : "folder__title folder__title--selected"}>{props.name}</h4>

src/components/FolderItem/index.js

@@ -8,6 +8,8 @@ class FolderItemContainer extends React.Component {
 
     constructor(props) {
         super(props)
+
+        this.lastTouch = 0;
     }
 
     shouldComponentUpdate = (nextProp) => {
@@ -19,9 +21,41 @@ class FolderItemContainer extends React.Component {
                 || nextProp.quickFilesLength !== this.props.quickFilesLength)
     }
 
+    onTouchStart = () => {
+        //alert("Touch start");
+        const date = new Date();
+        this.lastTouch = date.getTime();
+    }
+
+    onTouchMove = () => {
+
+        this.lastTouch = 0;
+    }
+
+    onTouchEnd = () => {
+
+        if (this.lastTouch === 0) {
+
+            //alert("last touch 0");
+            return;
+        }
+
+        const date = new Date();
+        const difference = date - this.lastTouch;
+        //alert("Touch end: " + difference)
+        //alert("touch end: " + difference);
+        this.lastTouch = 0;
+
+        if (difference > 500) {
+            //alert("Context menu");
+            this.getContextMenu();
+        }
+
+    }
+
     getContextMenu = (e) => {
 
-        e.preventDefault();
+        if (e) e.preventDefault();
 
         const isMobile = mobileCheck();
 
@@ -30,34 +64,36 @@ class FolderItemContainer extends React.Component {
 
         let styleObj = {right:0, left:0, top: "-14px", bottom: 0}
 
-        const clientY =  e.nativeEvent.clientY;
-        const clientX = e.nativeEvent.clientX;
-
-
-        if (clientY < (windowY / 3)) {
-
-            const bottomSize = this.props.quickFilesLength === 0 ? "-126px" : "-190px"
-
-            styleObj = {bottom: bottomSize, top:"unset"}
-        } 
-
-        if (clientY > ((windowY / 4) * 3.5)) {
-
-            styleObj = {bottom:"unset", top: "-190px"}
-        }
-
-        if (clientX > windowX / 2) {
-
-            styleObj = {...styleObj, left:"unset", right:0}
-
-        } else {
-         
-            styleObj = {...styleObj, left:0, right:"unset"}
-        }
-
         if (isMobile) {
 
             styleObj = {bottom: 0, left: "2px", top:"unset"}
+
+        } else {
+
+            const clientY =  e.nativeEvent.clientY;
+            const clientX = e.nativeEvent.clientX;
+
+
+            if (clientY < (windowY / 3)) {
+
+                const bottomSize = this.props.quickFilesLength === 0 ? "-126px" : "-190px"
+
+                styleObj = {bottom: bottomSize, top:"unset"}
+            } 
+
+            if (clientY > ((windowY / 4) * 3.5)) {
+
+                styleObj = {bottom:"unset", top: "-190px"}
+            }
+
+            if (clientX > windowX / 2) {
+
+                styleObj = {...styleObj, left:"unset", right:0}
+
+            } else {
+            
+                styleObj = {...styleObj, left:0, right:"unset"}
+            }
         }
 
         this.setState(() => styleObj)
@@ -95,6 +131,9 @@ class FolderItemContainer extends React.Component {
         return <FolderItem 
                 getContextMenu={this.getContextMenu} 
                 getClassName={this.getClassName}
+                onTouchStart={this.onTouchStart}
+                onTouchMove={this.onTouchMove}
+                onTouchEnd={this.onTouchEnd}
                 state={this.state}
                 {...this.props}/>
     }

src/styles/components/_Filter.scss

@@ -18,6 +18,12 @@
     margin-left: 22px;
     font-weight: 500;
     font-size: 13px;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 .filter__folder-title-wrapper {
     margin-left: 15px;