refactored clicks logic;

epam · Sep 27, 2023 · 7149653 · 7149653
1 parent 76a415b
commit 7149653
Showing 1 changed file with 28 additions and 41 deletions.
diff --git a/src/ui/MobileSettings/MobileSettings.jsx b/src/ui/MobileSettings/MobileSettings.jsx
@@ -14,12 +14,12 @@ export const MobileSettings = () => {
   const [isMenuHidden, setIsMenuHidden] = useState(false);
 
   const containerRef = useRef(null);
+  const pressTimer = useRef(null);
   const toggleSettingsMenu = () => {
     setIsSettingsMenuOpen(!isSettingsMenuOpen);
     setIs2DMenuOpen(false);
     setIsCursorMenuOpen(false);
   };
-
   const toggle2DMenu = () => {
     setIs2DMenuOpen(!is2DMenuOpen);
     setIsSettingsMenuOpen(false);
@@ -30,60 +30,47 @@ export const MobileSettings = () => {
     setIsSettingsMenuOpen(false);
     setIs2DMenuOpen(false);
   };
+  const closeAllMenu = () => {
+    setIsSettingsMenuOpen(false);
+    setIs2DMenuOpen(false);
+    setIsCursorMenuOpen(false);
+  };
 
   useEffect(() => {
-    const handleResize = () => {
-      setIsSmallScreen(window.matchMedia('(max-width: 768px)').matches);
+    const onLongPress = () => {
+      setIsMenuHidden((current) => !current);
+      closeAllMenu();
     };
 
-    window.addEventListener('resize', handleResize);
+    const startPress = () => {
+      pressTimer.current = setTimeout(() => {
+        onLongPress();
+      }, 1000);
+    };
 
-    return () => {
-      window.removeEventListener('resize', handleResize);
+    const endPress = () => {
+      clearTimeout(pressTimer.current);
     };
-  }, []);
 
-  useEffect(() => {
-    let touchStartTime;
-    let touchEndTime;
+    document.addEventListener('touchstart', startPress);
+    document.addEventListener('touchend', endPress);
 
-    const handleTouchStart = () => {
-      touchStartTime = new Date().getTime();
+    return () => {
+      document.removeEventListener('touchstart', startPress);
+      document.removeEventListener('touchend', endPress);
     };
-    const handleClickOutside = () => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsSettingsMenuOpen(false);
-        setIs2DMenuOpen(false);
-        setIsCursorMenuOpen(false);
-        setTimeout(() => {
-          if (!isMenuHidden) {
-            setIsSettingsMenuOpen(false);
-            setIs2DMenuOpen(false);
-            setIsCursorMenuOpen(false);
-            setIsMenuHidden(true);
-          } else {
-            setIsMenuHidden(false);
-          }
-        }, 1000);
-      }
+  }, []);
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.matchMedia('(max-width: 768px)').matches);
     };
 
-    const handleTouchEnd = () => {
-      touchEndTime = new Date().getTime();
-      const touchDuration = touchEndTime - touchStartTime;
-
-      if (touchDuration >= 1000) {
-        handleClickOutside();
-      }
-    };
-    document.addEventListener('touchstart', handleTouchStart);
-    document.addEventListener('touchend', handleTouchEnd);
+    window.addEventListener('resize', handleResize);
 
     return () => {
-      document.removeEventListener('touchstart', handleTouchStart);
-      document.removeEventListener('touchend', handleTouchEnd);
+      window.removeEventListener('resize', handleResize);
     };
-  }, [isMenuHidden]);
+  }, []);
   return (
     <div className={`${css.settings__menu} ${isMenuHidden ? css.hidden : css.settings__menu}`} ref={containerRef}>
       <div className={css.buttons__container}>