From 5015503b4c53cd0723cba3104bf9361181d4ea59 Mon Sep 17 00:00:00 2001
From: Gabe Yuan <yugang2002@gmail.com>
Date: Sun, 28 Apr 2024 14:56:49 +0800
Subject: [PATCH] feat: hide transbox header when mouseleave

---
 src/views/Selection/TranBox.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/views/Selection/TranBox.js b/src/views/Selection/TranBox.js
index 5de344a..6b96179 100644
--- a/src/views/Selection/TranBox.js
+++ b/src/views/Selection/TranBox.js
@@ -25,6 +25,7 @@ import DictCont from "./DictCont";
 import SugCont from "./SugCont";
 import CopyBtn from "./CopyBtn";
 import { isValidWord } from "../../libs/utils";
+import { isMobile } from "../../libs/mobile";
 
 function Header({
   setShowPopup,
@@ -34,7 +35,12 @@ function Header({
   setHideClickAway,
   followSelection,
   setFollowSelection,
+  mouseHover,
 }) {
+  if (!isMobile && simpleStyle && !mouseHover) {
+    return;
+  }
+
   return (
     <Box
       className="KT-transbox-header"
@@ -263,6 +269,7 @@ export default function TranBox({
   setFollowSelection,
   extStyles,
 }) {
+  const [mouseHover, setMouseHover] = useState(false);
   return (
     <SettingProvider>
       <ThemeProvider styles={extStyles}>
@@ -280,9 +287,12 @@ export default function TranBox({
               setHideClickAway={setHideClickAway}
               followSelection={followSelection}
               setFollowSelection={setFollowSelection}
+              mouseHover={mouseHover}
             />
           }
           onClick={(e) => e.stopPropagation()}
+          onMouseEnter={() => setMouseHover(true)}
+          onMouseLeave={() => setMouseHover(false)}
         >
           <TranForm
             text={text}