Added Hide Feature on MenuItems (#56)

Michele-Masciave · Gianmarco Manni · web-flow · commit 0e4974a63422 · 2024-05-27T08:50:49.000+02:00
Co-authored-by: Gianmarco Manni &lt;gianmarco.manni@neolution.ch&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- various utility functions `getPreExpandedMenuItems`, `getChildrenPanelItemsIds`, `getHiddenPanelIds`
+- possibility to dynamic display the menu items
+- improved Context status management so that the Layout is using only the states inside it
+
+### Fixed
+
+- issue for which hiding a menu entry was breaking the rules of hook
+
 ## [4.0.0] - 2024-05-14
 
 ### Added
diff --git a/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx b/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx
@@ -1,18 +1,18 @@
-import React from "react";
-import { PanelSideBarProvider, PanelSideBarLayout, PanelItem, PanelLinkRendererProps } from "react-pattern-ui";
+import React, { PropsWithChildren, ReactNode } from "react";
+import { PanelSideBarProvider, PanelSideBarLayout, PanelItem, PanelLinkRendererProps, usePanelSideBarContext } from "react-pattern-ui";
 import { faBars, faCogs } from "@fortawesome/free-solid-svg-icons";
 
 type AppRoutes = "home" | "settings" | "dropdownTest" | "dropdown-test1" | "dropdown-test2";
 type TSideBarMenuItem = PanelItem<AppRoutes>;
 
 // Configuration object for avoiding duplicated code
-interface PanelSideBarConfiguration {
+interface PanelSideBarConfiguration extends PropsWithChildren {
   renderFirstItemsLevelAsTiles?: boolean;
   useToggleButton?: boolean;
 }
 
 const getPanelSidebarInternal = (items: TSideBarMenuItem[], config?: PanelSideBarConfiguration) => {
-  const { renderFirstItemsLevelAsTiles = true, useToggleButton = false } = config ?? {};
+  const { renderFirstItemsLevelAsTiles = true, useToggleButton = false, children } = config ?? {};
   return (
     <PanelSideBarProvider
       menuItems={items}
@@ -32,13 +32,13 @@ const getPanelSidebarInternal = (items: TSideBarMenuItem[], config?: PanelSideBa
       )}
     >
       <PanelSideBarLayout useToggleButton={useToggleButton}>
-        <div id="pageContent">Cypress</div>
+        <div id="pageContent">{children ?? "Cypress"}</div>
       </PanelSideBarLayout>
     </PanelSideBarProvider>
   );
 };
 
-const getSidebarItems = (active?: boolean, disabled?: boolean): TSideBarMenuItem[] => [
+const getSidebarItems = (active?: boolean, disabled?: boolean, expanded?: boolean): TSideBarMenuItem[] => [
   {
     id: "home",
     title: "Home",
@@ -65,6 +65,7 @@ const getSidebarItems = (active?: boolean, disabled?: boolean): TSideBarMenuItem
       {
         title: "Dropdown",
         id: "dropdownTest",
+        expanded,
         children: [
           {
             title: "Dropdown test 1",
@@ -81,19 +82,24 @@ const getSidebarItems = (active?: boolean, disabled?: boolean): TSideBarMenuItem
   },
 ];
 
-const PanelSideBarWithTiles = (props: { active?: boolean; disabled?: boolean }) => {
-  const { active, disabled } = props;
-  return getPanelSidebarInternal(getSidebarItems(active, disabled));
+interface PanelSideBarProps extends PropsWithChildren {
+  active?: boolean;
+  disabled?: boolean;
+  expanded?: boolean;
+}
+
+const PanelSideBarWithTiles = (props: PanelSideBarProps) => {
+  const { active, disabled, expanded, children } = props;
+  return getPanelSidebarInternal(getSidebarItems(active, disabled, expanded), { children });
 };
 
-const PanelSideBarNoTiles = (props: { active?: boolean; disabled?: boolean }) => {
+const PanelSideBarNoTiles = (props: PanelSideBarProps) => {
   const { active, disabled } = props;
   return getPanelSidebarInternal(getSidebarItems(active, disabled), { renderFirstItemsLevelAsTiles: false, useToggleButton: true });
 };
 
 describe("PanelSidebar.cy.tsx", () => {
   it("icon and titles rendered correctly", () => {
-    const sidebarItems = getSidebarItems();
     cy.mount(<PanelSideBarWithTiles />);
 
     // Check if icon are rendered
@@ -143,7 +149,6 @@ describe("PanelSidebar.cy.tsx", () => {
   });
 
   it("toggle sidebar", () => {
-    const sidebarItems = getSidebarItems();
     cy.mount(<PanelSideBarWithTiles />);
 
     // Check toggle sidebar
@@ -172,4 +177,73 @@ describe("PanelSidebar.cy.tsx", () => {
     cy.get("#sidebar-toggle").click();
     cy.get("#side-nav").should("have.css", "width", "0px");
   });
+
+  it("check dropdown correctly pre-expanded", () => {
+    cy.mount(<PanelSideBarWithTiles expanded />);
+    cy.get("button[title=Settings]").click();
+    cy.get("#dropdown-test1").should("be.visible");
+    cy.get("#dropdown-test2").should("be.visible");
+  });
+
+  it("dynamically toggle menu item", () => {
+    const Button = () => {
+      const { toggleMenuItem } = usePanelSideBarContext();
+      return (
+        <button id="test-toggle" onClick={() => toggleMenuItem("dropdownTest")}>
+          Toggle
+        </button>
+      );
+    };
+
+    cy.mount(<PanelSideBarWithTiles expanded children={<Button />} />);
+    cy.get("button[title=Settings]").click();
+    cy.get("li:has(.dropdown-toggle)").should("be.visible").should("have.class", "menu-open");
+    cy.get("#test-toggle").click();
+    cy.get("li:has(.dropdown-toggle)").should("be.visible").should("not.have.class", "menu-open");
+    cy.get("#test-toggle").click();
+    cy.get("li:has(.dropdown-toggle)").should("be.visible").should("have.class", "menu-open");
+  });
+
+  it("dynamically hide menu items", () => {
+    const Button = () => {
+      const { setHiddenMenuItemsIds } = usePanelSideBarContext();
+      return (
+        <button id="test-hide" onClick={() => setHiddenMenuItemsIds(["dropdown-test1", "dropdown-test2"])}>
+          Hide
+        </button>
+      );
+    };
+
+    cy.mount(<PanelSideBarWithTiles expanded children={<Button />} />);
+    cy.get("button[title=Settings]").click();
+    cy.get("#dropdown-test1").should("be.visible");
+    cy.get("#dropdown-test2").should("be.visible");
+    cy.get("#test-hide").click();
+    cy.get("#dropdown-test1").should("not.be.visible");
+    cy.get("#dropdown-test2").should("not.be.visible");
+  });
+
+  it("dynamically open and close menu item", () => {
+    const Button = () => {
+      const { openMenuItems, closeMenuItems } = usePanelSideBarContext();
+      return (
+        <>
+          <button id="test-open-item" onClick={() => openMenuItems(["dropdownTest"])}>
+            Open
+          </button>
+          <button id="test-close-item" onClick={() => closeMenuItems(["dropdownTest"])}>
+            Close
+          </button>
+        </>
+      );
+    };
+
+    cy.mount(<PanelSideBarWithTiles children={<Button />} />);
+    cy.get("button[title=Settings]").click();
+    cy.get("li:has(.dropdown-toggle)").should("be.visible").should("not.have.class", "menu-open");
+    cy.get("#test-open-item").click();
+    cy.get("li:has(.dropdown-toggle)").should("be.visible").should("have.class", "menu-open");
+    cy.get("#test-close-item").click();
+    cy.get("li:has(.dropdown-toggle)").should("be.visible").should("not.have.class", "menu-open");
+  });
 });
diff --git a/src/index.ts b/src/index.ts
@@ -6,3 +6,4 @@ export * from "./lib/Layout/PanelSideBarLayout/PanelSideBarLayout";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelItem";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelLinkRenderer";
+export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Utils/panelUtils";
diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext.tsx
@@ -1,6 +1,7 @@
 import React, { Context, createContext, useContext, useEffect, useMemo, useState } from "react";
-import { getActivePanel } from "../Utils/getActivePanel";
+import { getActivePanel, getActivePanelParentsIds } from "../Utils/getActivePanel";
 import { PanelSideBarContextProps } from "./PanelSideBarContextProps";
+import { getHiddenPanelIds, getPreExpandedMenuItems } from "../Utils/panelUtils";
 
 export type MenuItemToggleFn<TPanelItemId extends string> = (menuItemId: TPanelItemId) => void;
 
@@ -36,14 +37,15 @@ export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
     theme = "blue",
   } = props;
   const menuItems = useMemo(() => defaultMenuItems, [defaultMenuItems]);
-
   const [isSidebarOpen, setIsSidebarOpen] = useState(sidebarOpenByDefault);
   const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
 
   const [activePanelId, setActivePanelId] = useState(getActivePanel(menuItems, defaultActivePanelId)?.id);
   const setActivePanel = (panelId: TPanelItemId) => setActivePanelId(panelId);
 
-  const preExpandedMenuItemIds = menuItems.filter((x) => x.expanded).map((x) => x.id);
+  const [hiddenMenuItemIds, setHiddenMenuItemsIds] = useState<TPanelItemId[]>(getHiddenPanelIds(menuItems));
+
+  const preExpandedMenuItemIds = getPreExpandedMenuItems(menuItems);
   const [toggledMenuItemIds, setToggledMenuItemIds] = useState<TPanelItemId[]>(
     activePanelId ? preExpandedMenuItemIds.concat(activePanelId) : preExpandedMenuItemIds,
   );
@@ -63,12 +65,28 @@ export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
     const activePanelId = getActivePanel(menuItems, defaultActivePanelId)?.id;
     setActivePanelId(activePanelId);
     if (activePanelId) {
-      setToggledMenuItemIds((prev) => (prev.includes(activePanelId) ? prev : [...prev, activePanelId]));
+      setToggledMenuItemIds((prev) => {
+        const toggledMenuItemIds = [...getActivePanelParentsIds(menuItems, activePanelId), activePanelId].filter((x) => !prev.includes(x));
+        return [...prev, ...toggledMenuItemIds];
+      });
     }
   }, [menuItems]);
 
   const untoggleMenuItems = () => setToggledMenuItemIds([]);
 
+  const openMenuItems = (panelItemIds: TPanelItemId[]) => {
+    setToggledMenuItemIds((prev) => [...prev, ...panelItemIds.filter((x) => !prev.includes(x))]);
+  };
+
+  const closeMenuItems = (panelItemIds: TPanelItemId[], includeActivePanel?: boolean) => {
+    const activePanels = activePanelId ? [...getActivePanelParentsIds(menuItems, activePanelId), activePanelId] : [];
+    setToggledMenuItemIds((prev) =>
+      includeActivePanel
+        ? prev.filter((x) => !panelItemIds.includes(x))
+        : prev.filter((x) => !panelItemIds.filter((y) => !activePanels.includes(y)).includes(x)),
+    );
+  };
+
   return (
     <PanelSideBarContext.Provider
       value={{
@@ -84,6 +102,10 @@ export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
         theme,
         renderFirstItemsLevelAsTiles,
         renderTilesAsLinks,
+        openMenuItems,
+        closeMenuItems,
+        hiddenMenuItemIds,
+        setHiddenMenuItemsIds,
       }}
     >
       {children}
diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts
@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction } from "react";
 import { PanelItem } from "../Definitions/PanelItem";
 import { PanelLinkRenderer } from "../Definitions/PanelLinkRenderer";
 import { MenuItemToggleFn } from "./PanelSideBarContext";
@@ -27,7 +28,7 @@ export interface PanelSideBarContextProps<TPanelItemId extends string, TPanelIte
   toggleMenuItem: MenuItemToggleFn<TPanelItemId>;
 
   /**
-   * The default active panel id that will be taken if no active panel is dinamically found
+   * The default active panel id that will be taken if no active panel is dynamically found
    */
   defaultActivePanelId?: TPanelItemId;
 
@@ -63,4 +64,27 @@ export interface PanelSideBarContextProps<TPanelItemId extends string, TPanelIte
    * The component used to render the menu item links.
    */
   LinkRenderer: PanelLinkRenderer<TPanelItemId, TPanelItem>;
+
+  /**
+   * The list of toggled menu item identifier
+   */
+  hiddenMenuItemIds: TPanelItemId[];
+
+  /**
+   * Function to get the hidden menu items
+   */
+  setHiddenMenuItemsIds: Dispatch<SetStateAction<TPanelItemId[]>>;
+
+  /**
+   * Function to open menu items
+   * @param panelItemIds the panel item identifiers to open
+   */
+  openMenuItems: (panelItemIds: TPanelItemId[]) => void;
+
+  /**
+   * Function to close menu items
+   * @param panelItemIds the panel item identifiers to close
+   * @param includeActivePanel whether needs to include the active panel
+   */
+  closeMenuItems: (panelItemIds: TPanelItemId[], includeActivePanel?: boolean) => void;
 }
diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/PanelSideBarItem.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/PanelSideBarItem.tsx
@@ -1,29 +1,25 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
-import { useState, useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import { Collapse, NavItem } from "reactstrap";
 import { PanelItem } from "./../PanelSideBar/Definitions/PanelItem";
 import { usePanelSideBarContext } from "./Context/PanelSideBarContext";
 import { hasActiveChildren } from "./Utils/getActivePanel";
 
 export interface PanelSideBarItemProps<TPanelItemId extends string, TPanelItem> {
   children: PanelItem<TPanelItemId, TPanelItem>;
-  onClick?: (menuItemId: TPanelItemId) => void;
   depth?: number;
   active?: boolean;
-  toggledItemIds: string[];
+  isParentHidden?: boolean;
 }
 
 // eslint-disable-next-line complexity
 const PanelSideBarItem = <TPanelItemId extends string, TPanelItem>(props: PanelSideBarItemProps<TPanelItemId, TPanelItem>) => {
-  const { depth = 0, children: item, onClick, toggledItemIds = [] } = props;
-  const { LinkRenderer } = usePanelSideBarContext<TPanelItemId, TPanelItem>();
+  const { depth = 0, children: item, isParentHidden = false } = props;
+  const { LinkRenderer, toggledMenuItemIds, toggleMenuItem, hiddenMenuItemIds } = usePanelSideBarContext<TPanelItemId, TPanelItem>();
   const hasitem = !!item.children?.length;
   const isActive = (hasitem && item.children && hasActiveChildren(item.children)) || item.active;
-  const [isOpen, setIsOpen] = useState(isActive || toggledItemIds?.includes(item.id) || item.expanded);
-  if (item.display === false) {
-    return null;
-  }
+  const isOpen = toggledMenuItemIds?.includes(item.id);
   const scrollToActiveItemRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -35,7 +31,12 @@ const PanelSideBarItem = <TPanelItemId extends string, TPanelItem>(props: PanelS
   return (
     <>
       <NavItem
-        onClick={() => onClick && onClick(item.id)}
+        hidden={isParentHidden || hiddenMenuItemIds.includes(item.id)}
+        onClick={() => {
+          if (hasitem && !item.collapseIconOnly) {
+            toggleMenuItem(item.id);
+          }
+        }}
         className={classNames({ "menu-open": isOpen, active: isActive })}
         style={{ paddingLeft: depth ? `${depth + 1}rem` : undefined }}
       >
@@ -54,7 +55,11 @@ const PanelSideBarItem = <TPanelItemId extends string, TPanelItem>(props: PanelS
               <a
                 role="button"
                 className={classNames("nav-link", { "w-100": !item.collapseIconOnly }, { "dropdown-toggle": hasitem })}
-                onClick={() => setIsOpen(!isOpen)}
+                onClick={() => {
+                  if (item.collapseIconOnly) {
+                    toggleMenuItem(item.id);
+                  }
+                }}
               >
                 {!item.collapseIconOnly && (
                   <span>
@@ -76,17 +81,15 @@ const PanelSideBarItem = <TPanelItemId extends string, TPanelItem>(props: PanelS
           )}
         </div>
       </NavItem>
-
       {hasitem && (
         <Collapse isOpen={isOpen} navbar className={classNames("item-menu", { "mb-1": isOpen })}>
           {item.children?.map((childItem) => (
             <PanelSideBarItem
               key={childItem.id}
               children={childItem}
-              onClick={() => onClick && onClick(childItem.id)}
               depth={depth + 1}
               active={item.active}
-              toggledItemIds={toggledItemIds}
+              isParentHidden={hiddenMenuItemIds.includes(item.id)}
             />
           ))}
         </Collapse>
diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/PanelSidebar.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/PanelSidebar.tsx
diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Utils/getActivePanel.ts b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Utils/getActivePanel.ts
diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Utils/panelUtils.ts b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Utils/panelUtils.ts
