swapped over context menu and quick items to completly functional components

src/hooks/contextMenu.ts

@@ -1,12 +1,12 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 export const useContextMenu = () => {
   const [contextData, setContextData] = useState({
     selected: false,
     X: 0,
     Y: 0,
-    lastTouched: 0,
   });
+  const lastTouched = useRef(0);
 
   const onContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e) e.stopPropagation();
@@ -25,9 +25,44 @@ export const useContextMenu = () => {
       selected: false,
       X: 0,
       Y: 0,
-      lastTouched: 0,
     });
   };
 
-  return { ...contextData, onContextMenu, closeContextMenu };
+  const onTouchStart = () => {
+    lastTouched.current = new Date().getTime();
+  };
+
+  const onTouchMove = () => {
+    lastTouched.current = 0;
+  };
+
+  const onTouchEnd = () => {
+    if (lastTouched.current === 0) {
+      return;
+    }
+
+    const date = new Date();
+    const difference = date.getTime() - lastTouched.current;
+
+    if (difference > 500) {
+      setContextData({
+        ...contextData,
+        selected: true,
+      });
+    }
+  };
+
+  const clickStopPropagation = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  return {
+    ...contextData,
+    onContextMenu,
+    closeContextMenu,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    clickStopPropagation,
+  };
 };