message menu on mobile: long press

daostack · Oct 18, 2023 · 87bf7c6 · 87bf7c6
1 parent 449066f
commit 87bf7c6
Showing 1 changed file with 12 additions and 5 deletions.
diff --git 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}>