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,

src/index.js

@@ -7,6 +7,7 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import "./assets/vars.css";
 import "animate.css";
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
+import TippyDefault from "./common/component/TippyDefault";
 import MarkdownStyleOverride from "./common/component/MarkdownStyleOverride";
 import ReduxRoutes from "./routes";
 import NewVersion from "./common/component/NewVersion";
@@ -15,6 +16,7 @@ root.render(
   <>
     <Reset />
     <Toaster />
+    <TippyDefault />
     <DndProvider backend={HTML5Backend}>
       <ReduxRoutes />
     </DndProvider>

src/routes/chat/ChannelChat/index.js

@@ -124,8 +124,6 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   onHide={() => {
                     setToolVisible("");
                   }}
-                  delay={[0, 0]}
-                  duration={0}
                   placement="left-start"
                   popperOptions={{ strategy: "fixed" }}
                   offset={[0, 80]}
@@ -155,8 +153,6 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   onHide={() => {
                     setToolVisible("");
                   }}
-                  delay={[0, 0]}
-                  duration={0}
                   placement="left-start"
                   popperOptions={{ strategy: "fixed" }}
                   offset={[0, 180]}

src/routes/chat/DMChat/index.js

@@ -60,14 +60,6 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
             </li> */}
             <Tooltip tip="Favorite" placement="left">
               <Tippy
-                // onShow={() => {
-                //   setToolVisible('favorite');
-                // }}
-                // onHide={() => {
-                //   setToolVisible('');
-                // }}
-                delay={[0, 0]}
-                duration={0}
                 placement="left-start"
                 popperOptions={{ strategy: "fixed" }}
                 offset={[0, 180]}

src/routes/chat/DMList/NavItem.js

@@ -34,7 +34,6 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
   const navigate = useNavigate();
   const {
     visible: contextMenuVisible,
-    offset,
     handleContextMenuEvent,
     hideContextMenu,
   } = useContextMenu();
@@ -87,8 +86,8 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
       interactive
       popperOptions={{ strategy: "fixed" }}
       placement="right-start"
-      offset={[offset.y, offset.x]}
       visible={contextMenuVisible}
+      followCursor={"initial"}
       onClickOutside={hideContextMenu}
       key={uid}
       content={

src/routes/setting/APIConfig.js

@@ -1,107 +1,112 @@
-import { useEffect } from 'react';
-import styled from 'styled-components';
-import { hideAll } from 'tippy.js';
+import { useEffect } from "react";
+import styled from "styled-components";
+import { hideAll } from "tippy.js";
 const StyledConfirm = styled.div`
- padding: 12px;
- border-radius: 10px;
- border: 1px solid orange;
- background-color: #fff;
- display: flex;
- flex-direction: column;
- gap: 10px;
- width: 250px;
- .tip {
-  /* word-break: break-all; */
-  color: orange;
-  font-size: 12px;
-  line-height: 1.5;
- }
- .btns {
-  display: flex;
-  width: 100%;
-  justify-content: flex-end;
-  gap: 14px;
- }
-`;
-const Styled = styled.div`
- max-width: 500px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- gap: 15px;
- > .input {
-  width: 100%;
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid orange;
+  background-color: #fff;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  label {
-   white-space: nowrap;
-   font-size: 14px;
-   color: #555;
+  gap: 10px;
+  width: 250px;
+  .tip {
+    /* word-break: break-all; */
+    color: orange;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+  .btns {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    gap: 14px;
   }
- }
- > .tip {
-  font-size: 12px;
-  color: #999;
-  line-height: 1.5;
- }
 `;
-import Input from '../../common/component/styled/Input';
-import Button from '../../common/component/styled/Button';
-import {
- useGetThirdPartySecretQuery,
- useUpdateThirdPartySecretMutation
-} from '../../app/services/server';
-import Tippy from '@tippyjs/react';
-import toast from 'react-hot-toast';
-export default function APIConfig() {
- const { data } = useGetThirdPartySecretQuery();
- const [updateSecret, { data: updatedSecret, isSuccess, isLoading }] =
-  useUpdateThirdPartySecretMutation();
- console.log('secret', data);
- useEffect(() => {
-  if (isSuccess) {
-   hideAll();
-   toast.success('Update API Secret Successfully!');
-  }
- }, [isSuccess]);
-
- return (
-  <Styled>
-   <div className="input">
-    <label htmlFor="secret">API Secure Key:</label>
-    <Input type="password" id="secret" value={updatedSecret || data} />
-   </div>
-   <Tippy
-    delay={[0, 0]}
-    duration={0}
-    interactive
-    placement="right-start"
-    trigger="click"
-    content={
-     <StyledConfirm>
-      <div className="tip">
-       Are you sure to update API secret? Previous secret will be invalided
-      </div>
-      <div className="btns">
-       <Button onClick={hideAll} className="cancel small">
-        Cancel
-       </Button>
-       <Button disabled={isLoading} className="small danger" onClick={updateSecret}>
-        Yes
-       </Button>
-      </div>
-     </StyledConfirm>
+const Styled = styled.div`
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 15px;
+  > .input {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    label {
+      white-space: nowrap;
+      font-size: 14px;
+      color: #555;
     }
-   >
-    <Button>Update Secret</Button>
-   </Tippy>
-   <div className="tip">
-    Tip: The security key agreed between the rustchat server and the third-party app is used to
-    encrypt the communication data.{' '}
-   </div>
-  </Styled>
- );
+  }
+  > .tip {
+    font-size: 12px;
+    color: #999;
+    line-height: 1.5;
+  }
+`;
+import Input from "../../common/component/styled/Input";
+import Button from "../../common/component/styled/Button";
+import {
+  useGetThirdPartySecretQuery,
+  useUpdateThirdPartySecretMutation,
+} from "../../app/services/server";
+import Tippy from "@tippyjs/react";
+import toast from "react-hot-toast";
+export default function APIConfig() {
+  const { data } = useGetThirdPartySecretQuery();
+  const [
+    updateSecret,
+    { data: updatedSecret, isSuccess, isLoading },
+  ] = useUpdateThirdPartySecretMutation();
+  console.log("secret", data);
+  useEffect(() => {
+    if (isSuccess) {
+      hideAll();
+      toast.success("Update API Secret Successfully!");
+    }
+  }, [isSuccess]);
+
+  return (
+    <Styled>
+      <div className="input">
+        <label htmlFor="secret">API Secure Key:</label>
+        <Input type="password" id="secret" value={updatedSecret || data} />
+      </div>
+      <Tippy
+        interactive
+        placement="right-start"
+        trigger="click"
+        content={
+          <StyledConfirm>
+            <div className="tip">
+              Are you sure to update API secret? Previous secret will be
+              invalided
+            </div>
+            <div className="btns">
+              <Button onClick={hideAll} className="cancel small">
+                Cancel
+              </Button>
+              <Button
+                disabled={isLoading}
+                className="small danger"
+                onClick={updateSecret}
+              >
+                Yes
+              </Button>
+            </div>
+          </StyledConfirm>
+        }
+      >
+        <Button>Update Secret</Button>
+      </Tippy>
+      <div className="tip">
+        Tip: The security key agreed between the rustchat server and the
+        third-party app is used to encrypt the communication data.{" "}
+      </div>
+    </Styled>
+  );
 }