refactor: tippy default props

src/common/component/Contact.js

@@ -77,7 +77,6 @@ export default function Contact({
   if (!curr) return null;
   return (
     <Tippy
-      duration={0}
       inertia={true}
       interactive
       disabled={!popover}

src/common/component/ManageMembers.js

@@ -168,8 +168,6 @@ export default function ManageMembers({ cid = null }) {
                   {is_admin ? "Admin" : cid ? "Member" : "User"}
                 </span>
                 <Tippy
-                  duration={0}
-                  delay={[0, 0]}
                   interactive
                   placement="right-start"
                   trigger="click"

src/common/component/Message/Commands.js

@@ -125,8 +125,6 @@ export default function Commands({
         className={`cmds ${tippyVisible ? "visible" : ""}`}
       >
         <Tippy
-          duration={0}
-          delay={[0, 0]}
           onShow={handleTippyVisible.bind(null, true)}
           onHide={handleTippyVisible.bind(null, false)}
           interactive
@@ -160,8 +158,6 @@ export default function Commands({
           </Tooltip>
         </li>
         <Tippy
-          duration={0}
-          delay={[0, 0]}
           onShow={handleTippyVisible.bind(null, true)}
           onHide={handleTippyVisible.bind(null, false)}
           interactive

src/common/component/Message/ContextMenu.js

@@ -1,4 +1,4 @@
-// import { useState, useEffect } from "react";
+// import { useState } from "react";
 import Tippy from "@tippyjs/react";
 import { useDispatch } from "react-redux";
 import ContextMenu from "../ContextMenu";
@@ -18,7 +18,6 @@ export default function MessageContextMenu({
   context,
   contextId,
   mid,
-  offset = {},
   visible,
   hide,
   editMessage,
@@ -26,7 +25,7 @@ export default function MessageContextMenu({
 }) {
   const {
     copyContent,
-    isMarkdown,
+    // isMarkdown,
     canEdit,
     canPin,
     canCopy,
@@ -57,8 +56,13 @@ export default function MessageContextMenu({
       {PinModal}
       {DeleteModal}
       <Tippy
-        duration={0}
-        delay={[0, 0]}
+        visible={visible}
+        followCursor={"initial"}
+        interactive
+        placement="right-start"
+        popperOptions={{ strategy: "fixed" }}
+        onClickOutside={hide}
+        key={mid}
         content={
           <ContextMenu
             hideMenu={hide}
@@ -102,13 +106,6 @@ export default function MessageContextMenu({
             ]}
           />
         }
-        interactive
-        placement="right-start"
-        popperOptions={{ strategy: "fixed" }}
-        offset={[offset.y, offset.x]}
-        visible={visible}
-        onClickOutside={hide}
-        key={mid}
       >
         {children}
       </Tippy>

src/common/component/Message/Mention.js

@@ -17,7 +17,6 @@ export default function Mention({ uid, popover = true }) {
   return (
     <Tippy
       disabled={!popover}
-      duration={0}
       interactive
       placement="top"
       trigger="click"

src/common/component/Message/index.js

@@ -29,7 +29,6 @@ function Message({
 }) {
   const {
     visible: contextMenuVisible,
-    offset,
     handleContextMenuEvent,
     hideContextMenu,
   } = useContextMenu();
@@ -97,7 +96,6 @@ function Message({
     >
       <Tippy
         disabled={readOnly}
-        duration={0}
         interactive
         placement="left"
         trigger="click"
@@ -114,7 +112,6 @@ function Message({
         mid={mid}
         visible={contextMenuVisible}
         hide={hideContextMenu}
-        offset={offset}
       >
         <div className="details">
           <div className="up">

src/common/component/TippyDefault.js

@@ -0,0 +1,10 @@
+import tippy, { followCursor } from "tippy.js";
+
+export default function TippyDefault() {
+  tippy.setDefaultProps({
+    duration: 0,
+    delay: [0, 0],
+    plugins: [followCursor],
+  });
+  return null;
+}

src/common/hook/useContextMenu.js

@@ -1,11 +1,14 @@
 import { useState } from "react";
-
+import { hideAll } from "tippy.js";
+import Tippy from "@tippyjs/react";
+import Menu from "../component/ContextMenu";
 export default function useContextMenu(placement = "right-start") {
   const [visible, setVisible] = useState(false);
   // for tippy.js
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const handleContextMenuEvent = (evt) => {
-    console.log("context menu event", evt, evt.currentTarget);
+    // console.log("context menu event", evt, evt.currentTarget);
+    hideAll();
     evt.preventDefault();
     const { currentTarget, clientX, clientY } = evt;
     const { left, top, width, height } = currentTarget.getBoundingClientRect();
@@ -25,7 +28,24 @@ export default function useContextMenu(placement = "right-start") {
   const hideContextMenu = () => {
     setVisible(false);
   };
+  const ContextMenu = ({ key, items, children }) => {
+    return (
+      <Tippy
+        visible={visible}
+        followCursor={"initial"}
+        interactive
+        placement="right-start"
+        popperOptions={{ strategy: "fixed" }}
+        onClickOutside={hideContextMenu}
+        key={key}
+        content={<Menu hideMenu={hideContextMenu} items={items} />}
+      >
+        {children}
+      </Tippy>
+    );
+  };
   return {
+    ContextMenu,
     offset,
     visible,
     hideContextMenu,