stateless menu items

Author: Gianmarco Manni

CHANGELOG.md

@@ -9,7 +9,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 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`
 
@@ -21,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - When `footer` is null, the whole section will not be rendered
+- Unique key prop in a list warning
 
 ### Removed
 

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

@@ -1,4 +1,4 @@
-import React, { Context, createContext, useCallback, useContext, useState } from "react";
+import React, { Context, createContext, useContext, useEffect, useMemo, useState } from "react";
 import { getActivePanel } from "../Utils/getActivePanel";
 import { PanelSideBarContextProps } from "./PanelSideBarContextProps";
 
@@ -13,7 +13,7 @@ export interface PanelSideBarMenuProviderProps<TPanelItemId extends string, TPan
    */
   children: React.ReactNode;
 
-    /**
+  /**
    * if the sidebar should be open by default.
    */
   sidebarOpenByDefault?: boolean;
@@ -23,14 +23,13 @@ export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
   props: PanelSideBarMenuProviderProps<TPanelItemId, TPanelItem>,
 ) => {
   const { children, defaultActivePanelId, sidebarOpenByDefault = true, menuItems: defaultMenuItems } = props;
-  const [menuItems, setMenuItems] = useState(defaultMenuItems);
+  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 [toggledMenuItemIds, setToggledMenuItemIds] = useState<TPanelItemId[]>(activePanelId ? [activePanelId] : []);
   const toggleMenuItem: MenuItemToggleFn<TPanelItemId> = (menuItemId) => {
     setToggledMenuItemIds((prev) => {
@@ -44,24 +43,22 @@ export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
     });
   };
 
-  const untoggleMenuItems = () => setToggledMenuItemIds([]);
-
-  const recomputeActivePanel = useCallback(() => {
+  useEffect(() => {
     const activePanelId = getActivePanel(menuItems, defaultActivePanelId)?.id;
     setActivePanelId(activePanelId);
     if (activePanelId) {
-      setToggledMenuItemIds(prev => prev.includes(activePanelId) ? prev : [...prev, activePanelId]);
+      setToggledMenuItemIds((prev) => (prev.includes(activePanelId) ? prev : [...prev, activePanelId]));
     }
-  }, []);
+  }, [menuItems]);
+
+  const untoggleMenuItems = () => setToggledMenuItemIds([]);
 
   return (
     <PanelSideBarContext.Provider
       value={{
         menuItems,
-        setMenuItems,
         activePanelId,
         setActivePanel,
-        recomputeActivePanel,
         toggledMenuItemIds,
         toggleMenuItem,
         untoggleMenuItems,

src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts

@@ -1,4 +1,3 @@
-import { Dispatch, SetStateAction } from "react";
 import { PanelItem } from "../Definitions/PanelItem";
 import { MenuItemToggleFn } from "./PanelSideBarContext";
 
@@ -12,10 +11,6 @@ export interface PanelSideBarContextProps<TPanelItemId extends string, TPanelIte
    */
   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
@@ -40,11 +35,6 @@ export interface PanelSideBarContextProps<TPanelItemId extends string, TPanelIte
    */
   untoggleMenuItems: () => void;
 
-  /**
-   * Function for recomputing active item
-   */
-  recomputeActivePanel: () => void;
-
   /**
    * If the sidebar is currently open or not
    */

src/lib/Layout/PanelSideBarLayout/PanelSideBar/PanelSidebar.tsx

@@ -52,13 +52,13 @@ export const PanelSideBar = <TPanelItemId extends string, TPanelItem>(props: Pan
     };
 
     const panelItemsRenderer = (items: PanelItem<TPanelItemId, TPanelItem>[]) =>
-      items?.map((item) =>
+      items?.map((item, index) =>
         renderTilesAsLinks ? (
-          <LinkRenderer item={item}>
+          <LinkRenderer key={index} item={item}>
             <ButtonIcon item={item} />
           </LinkRenderer>
         ) : (
-          <ButtonIcon item={item} />
+          <ButtonIcon key={index} item={item} />
         ),
       );