From 87bf7c66d472233e9c3fb70f58783819071ca3a5 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Wed, 18 Oct 2023 20:23:41 +0100
Subject: [PATCH] message menu on mobile: long press

---
 .../components/Chat/ChatMessage/ChatMessage.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
index 343a2e74c9..c7a7274694 100644
--- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
+++ b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -7,6 +7,7 @@ import React, {
   useMemo,
 } from "react";
 import classNames from "classnames";
+import { useLongPress } from "use-long-press";
 import {
   ElementDropdown,
   UserAvatar,
@@ -224,12 +225,18 @@ export default function ChatMessage({
     }
   };
 
-  const handleMessageClick: MouseEventHandler<HTMLDivElement> = () => {
-    if (isTabletView) {
-      setIsMenuOpen(true);
-    }
+  const handleLongPress = () => {
+    setIsMenuOpen(true);
   };
 
+  const getLongPressProps = useLongPress(
+    isTabletView ? handleLongPress : null,
+    {
+      threshold: 400,
+      cancelOnMovement: true,
+    },
+  );
+
   const handleContextMenu: MouseEventHandler<HTMLLIElement> = (event) => {
     if (!isTabletView) {
       event.preventDefault();
@@ -387,7 +394,7 @@ export default function ChatMessage({
                 [styles.highlightedOwn]:
                   highlighted && !isNotCurrentUserMessage,
               })}
-              onClick={handleMessageClick}
+              {...getLongPressProps()}
             >
               {isNotCurrentUserMessage && !isSystemMessage && (
                 <div className={styles.messageName} onClick={handleUserClick}>