From b5de8d2fef7b328f1bd6ae050a1a46e19a4d9771 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Tue, 26 Jan 2021 19:44:40 +0300 Subject: [PATCH] Fixed #1635 - Add template property support to MenuModel API in all menu components --- src/components/breadcrumb/BreadCrumb.js | 10 +++++++--- src/components/contextmenu/ContextMenu.js | 6 +++++- src/components/megamenu/MegaMenu.js | 11 +++++++++-- src/components/menu/Menu.js | 6 +++++- src/components/menubar/MenubarSub.js | 6 +++++- src/components/panelmenu/PanelMenu.js | 6 +++++- src/components/slidemenu/SlideMenu.js | 6 +++++- src/components/steps/Steps.js | 6 +++++- src/components/tabmenu/TabMenu.js | 6 +++++- src/components/tieredmenu/TieredMenuSub.js | 6 +++++- 10 files changed, 56 insertions(+), 13 deletions(-) diff --git a/src/components/breadcrumb/BreadCrumb.js b/src/components/breadcrumb/BreadCrumb.js index 27cb3e2d90..9b05041063 100644 --- a/src/components/breadcrumb/BreadCrumb.js +++ b/src/components/breadcrumb/BreadCrumb.js @@ -1,6 +1,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import { classNames } from '../utils/ClassNames'; +import ObjectUtils from '../utils/ObjectUtils'; export class BreadCrumb extends Component { @@ -61,13 +62,16 @@ export class BreadCrumb extends Component { ); } - renderMenuitem(item, index) { + renderMenuitem(item) { const className = classNames(item.className, {'p-disabled': item.disabled}); + const label = item.label && {item.label}; + const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null; return (
  • this.itemClick(event, item)}> - {item.label} + {label} + {itemContent}
    • ); @@ -76,7 +80,7 @@ export class BreadCrumb extends Component { renderMenuitems() { if (this.props.model) { const items = this.props.model.map((item, index)=> { - const menuitem = this.renderMenuitem(item, index); + const menuitem = this.renderMenuitem(item); const separator = (index === this.props.model.length - 1) ? null : this.renderSeparator(); return ( diff --git a/src/components/contextmenu/ContextMenu.js b/src/components/contextmenu/ContextMenu.js index 0c400fd9f0..fdc742cbe5 100644 --- a/src/components/contextmenu/ContextMenu.js +++ b/src/components/contextmenu/ContextMenu.js @@ -5,6 +5,7 @@ import ReactDOM from 'react-dom'; import DomHandler from '../utils/DomHandler'; import { CSSTransition } from 'react-transition-group'; import { Ripple } from '../ripple/Ripple'; +import ObjectUtils from '../utils/ObjectUtils'; class ContextMenuSub extends Component { @@ -148,6 +149,8 @@ class ContextMenuSub extends Component { const className = classNames('p-menuitem', {'p-menuitem-active': this.state.activeItem === item}, item.className); const linkClassName = classNames('p-menuitem-link', {'p-disabled': item.disabled}); const icon = this.renderIcon(item); + const label = item.label && {item.label}; + const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null; const submenuIcon = this.renderSubmenuIcon(item); const submenu = this.renderSubmenu(item); @@ -156,7 +159,8 @@ class ContextMenuSub extends Component { this.onItemClick(event, item, index)} role="menuitem" aria-haspopup={item.items != null}> {icon} - {item.label} + {label} + {itemContent} {submenuIcon} diff --git a/src/components/megamenu/MegaMenu.js b/src/components/megamenu/MegaMenu.js index c88de13e7f..1cbb6d21f3 100644 --- a/src/components/megamenu/MegaMenu.js +++ b/src/components/megamenu/MegaMenu.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { classNames } from '../utils/ClassNames'; import DomHandler from '../utils/DomHandler'; import { Ripple } from '../ripple/Ripple'; +import ObjectUtils from '../utils/ObjectUtils'; export class MegaMenu extends Component { @@ -276,12 +277,15 @@ export class MegaMenu extends Component { const linkClassName = classNames('p-menuitem-link', {'p-disabled': item.disabled}); const iconClassName = classNames(item.icon, 'p-menuitem-icon'); const icon = item.icon && ; + const label = item.label && {item.label}; + const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null; return (
  • this.onLeafClick(event, item)} role="menuitem"> {icon} - {item.label} + {label} + {itemContent}
    • @@ -358,6 +362,8 @@ export class MegaMenu extends Component { const linkClassName = classNames('p-menuitem-link', {'p-disabled': category.disabled}); const iconClassName = classNames('p-menuitem-icon', category.icon); const icon = category.icon && ; + const label = category.label && {category.label}; + const itemContent = category.template ? ObjectUtils.getJSXElement(category.template, category) : null; const submenuIcon = this.renderSubmenuIcon(category); const panel = this.renderCategoryPanel(category); @@ -366,7 +372,8 @@ export class MegaMenu extends Component { this.onCategoryClick(e, category)} onKeyDown={e => this.onCategoryKeyDown(e, category)} role="menuitem" aria-haspopup={category.items != null}> {icon} - {category.label} + {label} + {itemContent} {submenuIcon} diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js index e39a5b3003..749dd03a2d 100644 --- a/src/components/menu/Menu.js +++ b/src/components/menu/Menu.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import DomHandler from '../utils/DomHandler'; +import ObjectUtils from '../utils/ObjectUtils'; import { classNames } from '../utils/ClassNames'; import { CSSTransition } from 'react-transition-group'; import UniqueComponentId from '../utils/UniqueComponentId'; @@ -252,13 +253,16 @@ export class Menu extends Component { const linkClassName = classNames('p-menuitem-link', {'p-disabled': item.disabled}) const iconClassName = classNames('p-menuitem-icon', item.icon); const icon = item.icon && ; + const label = item.label && {item.label}; + const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null; const tabIndex = item.disabled ? null : 0; return (
  • this.onItemClick(e, item)} onKeyDown={e => this.onItemKeyDown(e, item)} tabIndex={tabIndex}> {icon} - {item.label} + {label} + {itemContent}
    • ); diff --git a/src/components/menubar/MenubarSub.js b/src/components/menubar/MenubarSub.js index b38989cf89..e10589a445 100644 --- a/src/components/menubar/MenubarSub.js +++ b/src/components/menubar/MenubarSub.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { classNames } from '../utils/ClassNames'; import DomHandler from '../utils/DomHandler'; import { Ripple } from '../ripple/Ripple'; +import ObjectUtils from '../utils/ObjectUtils'; export class MenubarSub extends Component { @@ -298,6 +299,8 @@ export class MenubarSub extends Component { const className = classNames('p-menuitem', {'p-menuitem-active': this.state.activeItem === item}, item.className); const linkClassName = classNames('p-menuitem-link', {'p-disabled': item.disabled}); const icon = this.renderIcon(item); + const label = item.label && {item.label}; + const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null; const submenuIcon = this.renderSubmenuIcon(item); const submenu = this.renderSubmenu(item); @@ -306,7 +309,8 @@ export class MenubarSub extends Component { this.onItemClick(event, item)} onKeyDown={(event) => this.onItemKeyDown(event, item)}> {icon} - {item.label} + {label} + {itemContent} {submenuIcon} diff --git a/src/components/panelmenu/PanelMenu.js b/src/components/panelmenu/PanelMenu.js index cacc47d30b..bc97dc19db 100644 --- a/src/components/panelmenu/PanelMenu.js +++ b/src/components/panelmenu/PanelMenu.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { classNames } from '../utils/ClassNames'; import UniqueComponentId from '../utils/UniqueComponentId'; import { CSSTransition } from 'react-transition-group'; +import ObjectUtils from '../utils/ObjectUtils'; class PanelMenuSub extends Component { @@ -101,6 +102,8 @@ class PanelMenuSub extends Component { const className = classNames('p-menuitem', item.className); const linkClassName = classNames('p-menuitem-link', {'p-disabled': item.disabled}); const icon = this.renderIcon(item, active); + const label = item.label && {item.label}; + const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null; const submenuIcon = this.renderSubmenuIcon(item, active); const submenu = this.renderSubmenu(item, active); @@ -109,7 +112,8 @@ class PanelMenuSub extends Component { this.onItemClick(event, item, index)} role="menuitem"> {submenuIcon} {icon} - {item.label} + {label} + {itemContent} {submenu} diff --git a/src/components/slidemenu/SlideMenu.js b/src/components/slidemenu/SlideMenu.js index dd71cd7f3b..e041bfacfc 100644 --- a/src/components/slidemenu/SlideMenu.js +++ b/src/components/slidemenu/SlideMenu.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { classNames } from '../utils/ClassNames'; import DomHandler from '../utils/DomHandler'; +import ObjectUtils from '../utils/ObjectUtils'; import { CSSTransition } from 'react-transition-group'; import UniqueComponentId from '../utils/UniqueComponentId'; import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler'; @@ -103,6 +104,8 @@ export class SlideMenuSub extends Component { renderMenuitem(item, index) { const className = classNames('p-menuitem', {'p-menuitem-active': this.state.activeItem === item, 'p-disabled': item.disabled}, item.className); const icon = this.renderIcon(item); + const label = item.label && {item.label}; + const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null; const submenuIcon = this.renderSubmenuIcon(item); const submenu = this.renderSubmenu(item); @@ -110,7 +113,8 @@ export class SlideMenuSub extends Component {
  • this.onItemClick(event, item, index)}> {icon} - {item.label} + {label} + {itemContent} {submenuIcon} {submenu} diff --git a/src/components/steps/Steps.js b/src/components/steps/Steps.js index b179372485..12a698458e 100644 --- a/src/components/steps/Steps.js +++ b/src/components/steps/Steps.js @@ -2,6 +2,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import { classNames } from '../utils/ClassNames'; import UniqueComponentId from '../utils/UniqueComponentId'; +import ObjectUtils from '../utils/ObjectUtils'; export class Steps extends Component { @@ -64,12 +65,15 @@ export class Steps extends Component { 'p-highlight p-steps-current': (index === this.props.activeIndex), 'p-disabled': isDisabled }); + const label = item.label && {item.label}; + const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null; return (
  • this.itemClick(event, item, index)} tabIndex={isDisabled ? -1 : ''}> {index + 1} - {item.label} + {label} + {itemContent}
    • ); diff --git a/src/components/tabmenu/TabMenu.js b/src/components/tabmenu/TabMenu.js index 78bacf826e..3f92938177 100644 --- a/src/components/tabmenu/TabMenu.js +++ b/src/components/tabmenu/TabMenu.js @@ -2,6 +2,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import { classNames } from '../utils/ClassNames'; import DomHandler from '../utils/DomHandler'; +import ObjectUtils from '../utils/ObjectUtils'; import { Ripple } from '../ripple/Ripple'; export class TabMenu extends Component { @@ -105,12 +106,15 @@ export class TabMenu extends Component { }, item.className); const iconClassName = classNames('p-menuitem-icon', item.icon); const icon = item.icon && ; + const label = item.label && {item.label}; + const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null; return (
  • this[`tab_${index}`] = el} key={item.label + '_' + index} className={className} style={item.style} role="tab" aria-selected={activeItem ? activeItem === item : index === 0} aria-expanded={activeItem ? activeItem === item : index === 0}> this.itemClick(event, item)} role="presentation"> {icon} - {item.label} + {label} + {itemContent}
    • diff --git a/src/components/tieredmenu/TieredMenuSub.js b/src/components/tieredmenu/TieredMenuSub.js index f9c77c83cb..57a8d73029 100644 --- a/src/components/tieredmenu/TieredMenuSub.js +++ b/src/components/tieredmenu/TieredMenuSub.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { classNames } from '../utils/ClassNames'; import DomHandler from '../utils/DomHandler'; import { Ripple } from '../ripple/Ripple'; +import ObjectUtils from '../utils/ObjectUtils'; export class TieredMenuSub extends Component { @@ -246,6 +247,8 @@ export class TieredMenuSub extends Component { const className = classNames('p-menuitem', {'p-menuitem-active': this.state.activeItem === item}, item.className); const linkClassName = classNames('p-menuitem-link', {'p-disabled': item.disabled}) const icon = this.renderIcon(item); + const label = item.label && {item.label}; + const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null; const submenuIcon = this.renderSubmenuIcon(item); const submenu = this.renderSubmenu(item); @@ -254,7 +257,8 @@ export class TieredMenuSub extends Component { this.onItemClick(event, item)} onKeyDown={(event) => this.onItemKeyDown(event, item)}> {icon} - {item.label} + {label} + {itemContent} {submenuIcon}