partial

Author: Gianmarco Manni

CHANGELOG.md

@@ -7,6 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Possibility to set fully control `menuItems`
+- Possibility to provide custom render component, e.g. skeleton, for mananing special case like asynchronus render (TODO)
+- Possibility to dinamically open or close `sidebar`
+
+### Changed
+
+- `topBarLeftCustomItems` and `topBarRigthCustomItems` renamed to `navbarLeftItems` and `navbarRightItems`
+- PanelItem Id type changed from `string` to being strongly typed
+
+### Fixed
+
+- When  `footer` is null, the whole section will not be rendered
+
+### Removed
+
+- `Delete Action`component
+- Built-in support for `userDropdown`. It should provide it in the navbar items.
+
 ## [3.4.0] - 2024-03-12
 
 ### Added

src/index.ts

@@ -1,4 +1,3 @@
-export * from "./lib/DeleteAction/DeleteAction";
 export * from "./lib/Layout/AuthenticationLayout";
 
 // Panel sidebar layout

src/lib/DeleteAction/DeleteAction.tsx

@@ -1,191 +1,82 @@
-import React, { ComponentType, createContext, ReactNode, useContext, useState } from "react";
-import { PanelItem } from "../Definitions/PanelItem";
+import React, { Context, createContext, useCallback, useContext, useEffect, useState } from "react";
+import { getActivePanel } from "../Utils/getActivePanel";
+import { PanelSideBarContextProps } from "./PanelSideBarContextProps";
 
-export interface PanelLinkRendererProps<T> {
-  /**
-   * The generic panel item.
-   */
-  item: PanelItem<T>;
-  /**
-   * The panel children item.
-   */
-  children: ReactNode;
-}
-
-export type MenuItemToggleFn<TPanelItem> = (menuItem: PanelItem<TPanelItem>) => void;
-
-export interface PanelSideBarContextProps<TPanelItem> {
-  activePanelId: string;
-  /**
-   * The global panel items.
-   */
-  globalItems: PanelItem<TPanelItem>[];
-  /**
-   * The local panel items.
-   */
-  localItems?: PanelItem[];
-  /**
-   * The function used to set a panel as active
-   * @param panelId The panel item identifier
-   */
-  setActivePanel: (panelId: string) => void;
-  /**
-   * The component used to render the menu item links.
-   */
-  LinkRenderer: ComponentType<PanelLinkRendererProps<TPanelItem>>;
-  /**
-   * The list of toggled menu item identifier
-   */
-  toggledMenuItemIds: string[];
-  /**
-   * The function used to toggle a menu item
-   */
-  toggleMenuItem: MenuItemToggleFn<TPanelItem>;
-  /**
-   * The footer content.
-   */
-  footer?: ReactNode;
-  /**
-   * The brand content shown on the top navigation bar.
-   */
-  brand?: ReactNode;
-  /**
-   * The user dropdown toggle content.
-   */
-  userDropDownMenuToggle?: ReactNode;
-  /**
-   * The user dropdown menu content.
-   */
-  userDropDownMenu?: ReactNode;
-  /**
-   * The menu content on the right.
-   */
-  topBarRightCustomItems?: ReactNode[];
-  /**
-   * The menu content on the left.
-   */
-  topBarLeftCustomItems?: ReactNode[];
-  /**
-   * The context theme
-   */
-  theme?: "light";
-  /**
-   * Boolean indicating if you want to render first items level as icons or directly as menu entries
-   */
-  renderFirstItemsLevelAsTiles?: boolean;
-
-  /**
-   * Boolean indicating if you want to render first level items as links or as button
-   */
-  renderTilesAsLinks?: boolean;
-
-  /**
-   * The default active panel id that will be taken if no active panel is dinamically found
-   */
-  defaultActivePanelId?: string;
-}
+export type MenuItemToggleFn<TPanelItemId extends string> = (menuItemId: TPanelItemId) => void;
 
-export const PanelSideBarContext = createContext<PanelSideBarContextProps<any> | null>(null);
+const PanelSideBarContext = createContext<PanelSideBarContextProps<any, any> | null>(null);
 
-export interface PanelSideBarMenuProviderProps<TPanelItem>
-  extends Pick<
-    PanelSideBarContextProps<TPanelItem>,
-    | "globalItems"
-    | "LinkRenderer"
-    | "brand"
-    | "footer"
-    | "userDropDownMenu"
-    | "userDropDownMenuToggle"
-    | "topBarRightCustomItems"
-    | "topBarLeftCustomItems"
-    | "localItems"
-    | "theme"
-    | "renderFirstItemsLevelAsTiles"
-    | "renderTilesAsLinks"
-    | "defaultActivePanelId"
-  > {
+export interface PanelSideBarMenuProviderProps<TPanelItemId extends string, TPanelItem>
+  extends Pick<PanelSideBarContextProps<TPanelItemId, TPanelItem>, "menuItems" | "defaultActivePanelId"> {
   /**
    * The children elements.
    */
   children: React.ReactNode;
-}
-
-export const PanelSideBarProvider = <TPanelItem,>(props: PanelSideBarMenuProviderProps<TPanelItem>) => {
-  const {
-    children,
-    globalItems,
-    localItems = [],
-    LinkRenderer,
-    brand = null,
-    footer = null,
-    userDropDownMenu,
-    userDropDownMenuToggle,
-    topBarRightCustomItems,
-    topBarLeftCustomItems,
-    renderFirstItemsLevelAsTiles = true,
-    renderTilesAsLinks = false,
-    theme = "light",
-    defaultActivePanelId,
-  } = props;
-
-  const activePanel = globalItems.find((x) =>
-    x.children ? x.children.find((y) => (y.children ? y.children.find((s) => s.active) : y.active)) : x.active,
-  );
-  const firstActivePanel = activePanel ?? globalItems.find((x) => (defaultActivePanelId ? x.id === defaultActivePanelId : x.id));
 
-  const getActivePanelId = () => localItems?.at(0)?.id ?? firstActivePanel?.id ?? "";
-
-  const [activePanelId, setActivePanelId] = useState(getActivePanelId());
+    /**
+   * if the sidebar should be open by default.
+   */
+  sidebarOpenByDefault?: boolean;
+}
 
-  const [toggledMenuItemIds, setToggledMenuItemIds] = useState<string[]>([
-    (firstActivePanel?.children
-      ? firstActivePanel.children?.find((x) => x.children?.find((s) => s.active))
-      : firstActivePanel?.children?.find((x) => x.active)
-    )?.id ?? "",
-  ]);
+export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
+  props: PanelSideBarMenuProviderProps<TPanelItemId, TPanelItem>,
+) => {
+  const { children, defaultActivePanelId, sidebarOpenByDefault = true } = props;
+  const [menuItems, setMenuItems] = useState(props.menuItems);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(sidebarOpenByDefault);
+  const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
 
-  const setActivePanel = (panelId: string) => setActivePanelId(panelId);
+  const [activePanelId, setActivePanelId] = useState(getActivePanel(menuItems, defaultActivePanelId)?.id);
+  const [toggledMenuItemIds, setToggledMenuItemIds] = useState<TPanelItemId[]>(activePanelId ? [activePanelId] : []);
+  const setActivePanel = (panelId: TPanelItemId) => setActivePanelId(panelId);
 
-  const toggleMenuItem: MenuItemToggleFn<TPanelItem> = (menuItem) => {
+  const toggleMenuItem: MenuItemToggleFn<TPanelItemId> = (menuItemId) => {
     setToggledMenuItemIds((prev) => {
-      const idExists = !!prev.find((id) => id == menuItem.id);
+      const idExists = !!prev.find((id) => id == menuItemId);
 
       if (idExists) {
-        return prev.filter((id) => id !== menuItem.id);
+        return prev.filter((id) => id !== menuItemId);
       }
 
-      return [...prev, menuItem.id];
+      return [...prev, menuItemId];
     });
   };
 
+  const untoggleMenuItems = () => setToggledMenuItemIds([]);
+
+  const recomputeActivePanel = useCallback(() => {
+    const activePanelId = getActivePanel(menuItems, defaultActivePanelId)?.id;
+    setActivePanelId(activePanelId);
+    if (activePanelId) {
+      setToggledMenuItemIds(prev => prev.includes(activePanelId) ? prev : [...prev, activePanelId]);
+    }
+  }, []);
+
+  useEffect(() => recomputeActivePanel(), [menuItems]);
+
   return (
     <PanelSideBarContext.Provider
       value={{
+        menuItems,
+        setMenuItems,
         activePanelId,
-        globalItems,
-        localItems,
-        LinkRenderer,
         setActivePanel,
+        recomputeActivePanel,
         toggledMenuItemIds,
         toggleMenuItem,
-        footer,
-        userDropDownMenu,
-        userDropDownMenuToggle,
-        topBarRightCustomItems,
-        topBarLeftCustomItems,
-        brand,
-        theme,
-        renderFirstItemsLevelAsTiles,
-        renderTilesAsLinks,
+        untoggleMenuItems,
+        isSidebarOpen,
+        toggleSidebar,
       }}
     >
       {children}
     </PanelSideBarContext.Provider>
   );
 };
 
-export const usePanelSideBarContext = () => {
-  const context = useContext(PanelSideBarContext);
+export const usePanelSideBarContext = <TPanelItemId extends string, TPanelItem>() => {
+  const context = useContext(PanelSideBarContext as Context<PanelSideBarContextProps<TPanelItemId, TPanelItem>>);
   if (context === null) {
     throw new Error("usePanelSideBarContext must be used within a PanelSideBarProvider");
   }

src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext.tsx

@@ -0,0 +1,56 @@
+import { Dispatch, SetStateAction } from "react";
+import { PanelItem } from "../Definitions/PanelItem";
+import { MenuItemToggleFn } from "./PanelSideBarContext";
+
+export interface PanelSideBarContextProps<TPanelItemId extends string, TPanelItem> {
+  /**
+   * The active panel id.
+   */
+  activePanelId?: TPanelItemId;
+  /**
+   * The menu items.
+   */
+  menuItems: PanelItem<TPanelItemId, TPanelItem>[];
+
+  /**
+   * The setter for menu items.
+   */
+  setMenuItems: Dispatch<SetStateAction<PanelItem<TPanelItemId, TPanelItem>[]>>;
+  /**
+   * The function used to set a panel as active
+   * @param panelId The panel item identifier
+   */
+  setActivePanel: (panelId: TPanelItemId) => void;
+  /**
+   * The list of toggled menu item identifier
+   */
+  toggledMenuItemIds: string[];
+  /**
+   * The function used to toggle a menu item
+   */
+  toggleMenuItem: MenuItemToggleFn<TPanelItemId>;
+
+  /**
+   * The default active panel id that will be taken if no active panel is dinamically found
+   */
+  defaultActivePanelId?: TPanelItemId;
+
+  /**
+   * Function for untoggling all menu items
+   */
+  untoggleMenuItems: () => void;
+
+  /**
+   * Function for recomputing active item
+   */
+  recomputeActivePanel: () => void;
+
+  /**
+   * If the sidebar is currently open or not
+   */
+  isSidebarOpen: boolean;
+  /**
+   * Function for toggling sidebar
+   */
+  toggleSidebar: () => void;
+}