Merge pull request #53 from josch87/enhancement/gunther52-tooltip-imp…

…rovements Enhancement/gunther52 tooltip improvements
josch87 · Dec 31, 2023 · 5127c7c · 5127c7c
2 parents 45bc96b + d77e821
commit 5127c7c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/components/ActionMenu/ActionMenu.js b/components/ActionMenu/ActionMenu.js
@@ -5,8 +5,8 @@ import {
 } from "@/assets/Icons8";
 import Image from "next/image";
 import {
-  Dropdown,
-  DropdownItem,
+  StyledDropdownList,
+  StyledDropdownListItem,
   StyledActionMenu,
   StyledImage,
   StyledLink,
@@ -16,10 +16,10 @@ import { useEffect, useRef, useState } from "react";
 import { Tooltip } from "react-tooltip";
 
 export default function ActionMenu() {
-  const [dropdown, setDropdown] = useState(false);
+  const [isActionMenuOpen, setIsActionMenuOpen] = useState(false);
 
   function closeDropdown() {
-    dropdown && setDropdown(false);
+    isActionMenuOpen && setIsActionMenuOpen(false);
   }
 
   const actionMenuItems = [
@@ -41,8 +41,12 @@ export default function ActionMenu() {
 
   useEffect(() => {
     const handler = (event) => {
-      if (dropdown && ref.current && !ref.current.contains(event.target)) {
-        setDropdown(false);
+      if (
+        isActionMenuOpen &&
+        ref.current &&
+        !ref.current.contains(event.target)
+      ) {
+        setIsActionMenuOpen(false);
       }
     };
     document.addEventListener("mousedown", handler);
@@ -52,27 +56,27 @@ export default function ActionMenu() {
       document.removeEventListener("mousedown", handler);
       document.removeEventListener("touchstart", handler);
     };
-  }, [dropdown]);
+  }, [isActionMenuOpen]);
 
   return (
     <StyledActionMenu ref={ref}>
-      <Tooltip id="action-menu-tooltip" />
+      {isActionMenuOpen ? null : <Tooltip id="action-menu-tooltip" />}
       <StyledImage
         src={materialPlus}
         width={30}
         height={30}
         alt="Create new &#8230; menu"
-        aria-expanded={dropdown ? "true" : "false"}
-        onClick={() => setDropdown((prev) => !prev)}
+        aria-expanded={isActionMenuOpen ? "true" : "false"}
+        onClick={() => setIsActionMenuOpen((prev) => !prev)}
         data-tooltip-id="action-menu-tooltip"
         data-tooltip-content="Create new &#8230;"
         data-tooltip-place="bottom"
       />
-      {dropdown && (
-        <Dropdown>
+      {isActionMenuOpen && (
+        <StyledDropdownList>
           {actionMenuItems.map((actionMenuItem, index) => {
             return (
-              <DropdownItem key={index} onClick={closeDropdown}>
+              <StyledDropdownListItem key={index} onClick={closeDropdown}>
                 <StyledLink href={actionMenuItem.url}>
                   <StyledSpan>
                     <Image
@@ -84,10 +88,10 @@ export default function ActionMenu() {
                     {actionMenuItem.title}
                   </StyledSpan>
                 </StyledLink>
-              </DropdownItem>
+              </StyledDropdownListItem>
             );
           })}
-        </Dropdown>
+        </StyledDropdownList>
       )}
     </StyledActionMenu>
   );

diff --git a/components/ActionMenu/ActionMenu.styled.js b/components/ActionMenu/ActionMenu.styled.js
@@ -10,7 +10,7 @@ export const StyledImage = styled(Image)`
   cursor: pointer;
 `;
 
-export const Dropdown = styled.ul`
+export const StyledDropdownList = styled.ul`
   position: absolute;
   padding: 5px;
   right: 0;
@@ -21,7 +21,7 @@ export const Dropdown = styled.ul`
   box-shadow: 0 0 20px #d3d3d3;
 `;
 
-export const DropdownItem = styled.li`
+export const StyledDropdownListItem = styled.li`
   list-style: none;
 `;