Fix #3169: MenuItem add visible property

components/lib/breadcrumb/BreadCrumb.js

@@ -27,6 +27,9 @@ export const BreadCrumb = React.memo(
             const home = props.home;
 
             if (home) {
+                if (home.visible === false) {
+                    return null;
+                }
                 const { icon: _icon, target, url, disabled, style, className: _className, template } = home;
                 const className = classNames('p-breadcrumb-home', { 'p-disabled': disabled }, _className);
                 const icon = IconUtils.getJSXIcon(_icon, { className: 'p-menuitem-icon' }, { props });
@@ -64,6 +67,9 @@ export const BreadCrumb = React.memo(
         };
 
         const createMenuitem = (item) => {
+            if (item.visible === false) {
+                return null;
+            }
             const className = classNames(item.className, { 'p-disabled': item.disabled });
             const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
             let content = (
@@ -94,6 +100,9 @@ export const BreadCrumb = React.memo(
         const createMenuitems = () => {
             if (props.model) {
                 const items = props.model.map((item, index) => {
+                    if (item.visible === false) {
+                        return null;
+                    }
                     const menuitem = createMenuitem(item);
                     const separator = index === props.model.length - 1 ? null : createSeparator();
                     const key = item.label + '_' + index;

components/lib/contextmenu/ContextMenuSub.js

@@ -80,6 +80,9 @@ export const ContextMenuSub = React.memo((props) => {
     };
 
     const createMenuItem = (item, index) => {
+        if (item.visible === false) {
+            return null;
+        }
         const active = activeItemState === item;
         const key = item.label + '_' + index;
         const className = classNames('p-menuitem', { 'p-menuitem-active': active }, item.className);

components/lib/dock/Dock.js

@@ -24,6 +24,9 @@ export const Dock = React.memo(
         };
 
         const createItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
             const { disabled, icon: _icon, label, template, url, target } = item;
             const className = classNames('p-dock-item', {
                 'p-dock-item-second-prev': currentIndexState - 2 === index,

components/lib/megamenu/MegaMenu.js

@@ -209,6 +209,9 @@ export const MegaMenu = React.memo(
         };
 
         const createSubmenuItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
             if (item.separator) {
                 return createSeparator(index);
             } else {

components/lib/menu/Menu.js

@@ -162,6 +162,9 @@ export const Menu = React.memo(
         };
 
         const createMenuItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
             const className = classNames('p-menuitem', item.className);
             const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
             const iconClassName = classNames('p-menuitem-icon', item.icon);

components/lib/menubar/MenubarSub.js

@@ -170,6 +170,9 @@ export const MenubarSub = React.memo(
         };
 
         const createMenuitem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
             const key = item.label + '_' + index;
             const className = classNames('p-menuitem', { 'p-menuitem-active': activeItemState === item }, item.className);
             const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });

components/lib/menuitem/menuitem.d.ts

@@ -24,6 +24,7 @@ export interface MenuItem {
     items?: MenuItem[] | MenuItem[][];
     expanded?: boolean;
     disabled?: boolean;
+    visible?: boolean;
     target?: string;
     separator?: boolean;
     style?: object;

components/lib/panelmenu/PanelMenu.js

@@ -93,6 +93,9 @@ export const PanelMenu = React.memo(
         };
 
         const createPanel = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
             const key = item.label + '_' + index;
             const active = isItemActive(item);
             const className = classNames('p-panelmenu-panel', item.className);

components/lib/panelmenu/PanelMenuSub.js

@@ -93,6 +93,9 @@ export const PanelMenuSub = React.memo((props) => {
     };
 
     const createMenuItem = (item, index) => {
+        if (item.visible === false) {
+            return null;
+        }
         const key = item.label + '_' + index;
         const active = isItemActive(item);
         const className = classNames('p-menuitem', item.className);

components/lib/slidemenu/SlideMenuSub.js

@@ -50,6 +50,9 @@ export const SlideMenuSub = React.memo((props) => {
     };
 
     const createMenuitem = (item, index) => {
+        if (item.visible === false) {
+            return null;
+        }
         const key = createKey(item, index);
         const active = activeItemState === item;
         const className = classNames('p-menuitem', { 'p-menuitem-active': active, 'p-disabled': item.disabled }, item.className);

components/lib/speeddial/SpeedDial.js

@@ -148,6 +148,9 @@ export const SpeedDial = React.memo(
         }));
 
         const createItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
             const style = getItemStyle(index);
             const { disabled, icon: _icon, label, template, url, target } = item;
             const contentClassName = classNames('p-speeddial-action', { 'p-disabled': disabled });

components/lib/splitbutton/SplitButtonItem.js

@@ -19,6 +19,9 @@ export const SplitButtonItem = React.memo((props) => {
     };
 
     const createMenuitem = () => {
+        if (item.visible === false) {
+            return null;
+        }
         const { disabled, icon: _icon, label: _label, template, url, target } = props.menuitem;
         const className = classNames('p-menuitem-link', { 'p-disabled': disabled });
         const iconClassName = classNames('p-menuitem-icon', _icon);

components/lib/steps/Steps.js

@@ -33,6 +33,9 @@ export const Steps = React.memo(
         };
 
         const createItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
             const key = item.label + '_' + index;
             const active = index === props.activeIndex;
             const disabled = item.disabled || (index !== props.activeIndex && props.readOnly);

components/lib/tabmenu/TabMenu.js

@@ -60,6 +60,9 @@ export const TabMenu = React.memo(
         });
 
         const createMenuItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
             const { className: _className, style, disabled, icon: _icon, label: _label, template, url, target } = item;
             const key = _label + '_' + index;
             const active = isSelected(index);
@@ -91,7 +94,8 @@ export const TabMenu = React.memo(
                     element: content,
                     props,
                     active,
-                    index
+                    index,
+                    disabled
                 };
 
                 content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);

components/lib/tieredmenu/TieredMenuSub.js

@@ -164,6 +164,9 @@ export const TieredMenuSub = React.memo((props) => {
     };
 
     const createMenuItem = (item, index) => {
+        if (item.visible === false) {
+            return null;
+        }
         const { id, className: _className, style, disabled, icon: _icon, label: _label, items, target, url, template } = item;
         const key = _label + '_' + index;
         const active = activeItemState === item;
@@ -194,7 +197,8 @@ export const TieredMenuSub = React.memo((props) => {
                 submenuIconClassName,
                 element: content,
                 props,
-                active
+                active,
+                disabled
             };
 
             content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);

pages/menumodel/index.js

@@ -1,6 +1,6 @@
+import Head from 'next/head';
 import React, { memo } from 'react';
 import { CodeHighlight } from '../../components/doc/common/codehighlight';
-import Head from 'next/head';
 
 const MenuModelDemo = () => {
     return (
@@ -100,6 +100,12 @@ const items = [
                             <td>false</td>
                             <td>When set as true, disables the menuitem.</td>
                         </tr>
+                        <tr>
+                            <td>visible</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>When set as false, hides the menu item.</td>
+                        </tr>
                         <tr>
                             <td>target</td>
                             <td>string</td>