From fa98e2ccbd85422d43bad5c2d2f1006993ab0afb Mon Sep 17 00:00:00 2001 From: Melloware Date: Tue, 23 Aug 2022 17:49:32 -0400 Subject: [PATCH] Fix #3169: MenuItem add visible property (#3177) --- components/lib/breadcrumb/BreadCrumb.js | 9 +++++++++ components/lib/contextmenu/ContextMenuSub.js | 3 +++ components/lib/dock/Dock.js | 3 +++ components/lib/megamenu/MegaMenu.js | 3 +++ components/lib/menu/Menu.js | 3 +++ components/lib/menubar/MenubarSub.js | 3 +++ components/lib/menuitem/menuitem.d.ts | 1 + components/lib/panelmenu/PanelMenu.js | 3 +++ components/lib/panelmenu/PanelMenuSub.js | 3 +++ components/lib/slidemenu/SlideMenuSub.js | 3 +++ components/lib/speeddial/SpeedDial.js | 3 +++ components/lib/splitbutton/SplitButtonItem.js | 3 +++ components/lib/steps/Steps.js | 3 +++ components/lib/tabmenu/TabMenu.js | 6 +++++- components/lib/tieredmenu/TieredMenuSub.js | 6 +++++- pages/menumodel/index.js | 8 +++++++- 16 files changed, 60 insertions(+), 3 deletions(-) diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js index 53696a04a3..db38cdcf93 100644 --- a/components/lib/breadcrumb/BreadCrumb.js +++ b/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 && {item.label}; 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; diff --git a/components/lib/contextmenu/ContextMenuSub.js b/components/lib/contextmenu/ContextMenuSub.js index faadcd4897..9b5fe63520 100644 --- a/components/lib/contextmenu/ContextMenuSub.js +++ b/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); diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js index ad514c289a..d2262f3383 100644 --- a/components/lib/dock/Dock.js +++ b/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, diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js index ee35aa18ae..fd5875e1ed 100644 --- a/components/lib/megamenu/MegaMenu.js +++ b/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 { diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index ecd7670877..22d75c1a41 100644 --- a/components/lib/menu/Menu.js +++ b/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); diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js index dec675d592..9182d9bfe7 100644 --- a/components/lib/menubar/MenubarSub.js +++ b/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 }); diff --git a/components/lib/menuitem/menuitem.d.ts b/components/lib/menuitem/menuitem.d.ts index 54c8b5cdfe..c7b6fa3a90 100644 --- a/components/lib/menuitem/menuitem.d.ts +++ b/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; diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js index 7ccc30c4d8..8b65d018ef 100644 --- a/components/lib/panelmenu/PanelMenu.js +++ b/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); diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js index b3101cbccc..fe6f2a2686 100644 --- a/components/lib/panelmenu/PanelMenuSub.js +++ b/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); diff --git a/components/lib/slidemenu/SlideMenuSub.js b/components/lib/slidemenu/SlideMenuSub.js index 554829e96e..1020b4d0c6 100644 --- a/components/lib/slidemenu/SlideMenuSub.js +++ b/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); diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js index a8e697b1d5..7a5ee92504 100644 --- a/components/lib/speeddial/SpeedDial.js +++ b/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 }); diff --git a/components/lib/splitbutton/SplitButtonItem.js b/components/lib/splitbutton/SplitButtonItem.js index 51ba9e2a30..97c010adbd 100644 --- a/components/lib/splitbutton/SplitButtonItem.js +++ b/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); diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js index 54f3f50f7f..f7d09ebeec 100644 --- a/components/lib/steps/Steps.js +++ b/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); diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js index 373bd84be2..b93a3b826c 100644 --- a/components/lib/tabmenu/TabMenu.js +++ b/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); diff --git a/components/lib/tieredmenu/TieredMenuSub.js b/components/lib/tieredmenu/TieredMenuSub.js index 50ae067ce6..e25b59c3c6 100644 --- a/components/lib/tieredmenu/TieredMenuSub.js +++ b/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); diff --git a/pages/menumodel/index.js b/pages/menumodel/index.js index 47ee09d06b..f61dbaf309 100644 --- a/pages/menumodel/index.js +++ b/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 = [ false When set as true, disables the menuitem. + + visible + boolean + true + When set as false, hides the menu item. + target string