From 2d8d5798c97d8929434ac67989df25dfb029dbaf Mon Sep 17 00:00:00 2001
From: Venkata Krishna S <100816677+venkata-krishnas@users.noreply.github.com>
Date: Mon, 27 Feb 2023 11:23:51 -0500
Subject: [PATCH] Adds delay before note is displayed on hover. Solves issue
#658. (#668)
* Adds delay
* change delay to half second.
* Added async
* Changed Delay
* lint fix
* Changed hover actions
* onMouseLeave
* Change logic
---------
Co-authored-by: Jed Fox <git@jedfox.com>
---
.../loot-design/src/components/NotesButton.js | 24 +++++++++++++++++--
1 file changed, 22 insertions(+), 2 deletions(-)
diff --git a/packages/loot-design/src/components/NotesButton.js b/packages/loot-design/src/components/NotesButton.js
index b0190bf7b..4de150645 100644
--- a/packages/loot-design/src/components/NotesButton.js
+++ b/packages/loot-design/src/components/NotesButton.js
@@ -79,6 +79,22 @@ export default function NotesButton({
tooltip.close();
}
+ const [delayHandler, setDelayHandler] = useState(null);
+
+ const handleMouseEnter = event => {
+ setDelayHandler(
+ setTimeout(() => {
+ // whatever your data is
+ setHover(true);
+ }, 300),
+ );
+ };
+
+ const handleMouseLeave = () => {
+ clearTimeout(delayHandler);
+ setHover(false);
+ };
+
// This account for both the tooltip hover, and editing tooltip
const tooltipOpen = tooltip.isOpen || (hasNotes && hover);
@@ -97,8 +113,12 @@ export default function NotesButton({
'& button, & .hover-visible': { display: 'flex', opacity: 1 },
},
]}
- onMouseEnter={() => setHover(true)}
- onMouseLeave={() => setHover(false)}
+ onMouseEnter={async () => {
+ handleMouseEnter();
+ }}
+ onMouseLeave={() => {
+ handleMouseLeave();
+ }}
>
<Button
bare
--
GitLab