Fixed #1635 - Add template property support to MenuModel API in all m…

…enu components
primefaces · Jan 26, 2021 · b5de8d2 · b5de8d2
1 parent bcfc7c0
commit b5de8d2
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 13 deletions.
diff --git 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 && <span className="p-menuitem-text">{item.label}</span>;
+        const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null;
 
         return (
             <li className={className} style={item.style}>
                 <a href={item.url || '#'} className="p-menuitem-link" target={item.target} onClick={event => this.itemClick(event, item)}>
-                    <span className="p-menuitem-text">{item.label}</span>
+                    {label}
+                    {itemContent}
                 </a>
             </li>
         );
@@ -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
@@ -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 && <span className="p-menuitem-text">{item.label}</span>;
+        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 {
                 <a href={item.url || '#'} className={linkClassName} target={item.target} onClick={(event) => this.onItemClick(event, item, index)} role="menuitem"
                    aria-haspopup={item.items != null}>
                     {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
+                    {label}
+                    {itemContent}
                     {submenuIcon}
                     <Ripple />
                 </a>

diff --git 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 && <span className={iconClassName}></span>;
+            const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
+            const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null;
 
             return (
                 <li key={item.label + '_' + index} className={className} style={item.style} role="none">
                     <a href={item.url || '#'} className={linkClassName} target={item.target} onClick={(event) => this.onLeafClick(event, item)} role="menuitem">
                         {icon}
-                        <span className="p-menuitem-text">{item.label}</span>
+                        {label}
+                        {itemContent}
                         <Ripple />
                     </a>
                 </li>
@@ -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 && <span className={iconClassName}></span>;
+        const label = category.label && <span className="p-menuitem-text">{category.label}</span>;
+        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 {
                 <a href={category.url || '#'} className={linkClassName} target={category.target} onClick={e => this.onCategoryClick(e, category)} onKeyDown={e => this.onCategoryKeyDown(e, category)}
                    role="menuitem" aria-haspopup={category.items != null}>
                     {icon}
-                    <span className="p-menuitem-text">{category.label}</span>
+                    {label}
+                    {itemContent}
                     {submenuIcon}
                     <Ripple />
                 </a>

diff --git 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 && <span className={iconClassName}></span>;
+        const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
+        const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null;
         const tabIndex = item.disabled ? null : 0;
 
         return (
             <li key={item.label + '_' + index} className={className} style={item.style} role="none">
                 <a href={item.url||'#'} className={linkClassName} role="menuitem" target={item.target} onClick={e => this.onItemClick(e, item)} onKeyDown={e => this.onItemKeyDown(e, item)} tabIndex={tabIndex}>
                     {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
+                    {label}
+                    {itemContent}
                 </a>
             </li>
         );

diff --git 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 && <span className="p-menuitem-text">{item.label}</span>;
+        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 {
                 <a href={item.url || '#'} role="menuitem" className={linkClassName} target={item.target} aria-haspopup={item.items != null}
                     onClick={(event) => this.onItemClick(event, item)} onKeyDown={(event) => this.onItemKeyDown(event, item)}>
                     {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
+                    {label}
+                    {itemContent}
                     {submenuIcon}
                     <Ripple />
                 </a>

diff --git 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 && <span className="p-menuitem-text">{item.label}</span>;
+        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 {
                 <a href={item.url || '#'} className={linkClassName} target={item.target} onClick={(event) => this.onItemClick(event, item, index)} role="menuitem">
                     {submenuIcon}
                     {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
+                    {label}
+                    {itemContent}
                 </a>
                 {submenu}
             </li>

diff --git 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,14 +104,17 @@ 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 && <span className="p-menuitem-text">{item.label}</span>;
+        const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null;
         const submenuIcon = this.renderSubmenuIcon(item);
         const submenu = this.renderSubmenu(item);
 
         return (
             <li key={item.label + '_' + index} className={className} style={item.style}>
                 <a href={item.url || '#'} className="p-menuitem-link" target={item.target} onClick={(event) => this.onItemClick(event, item, index)}>
                     {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
+                    {label}
+                    {itemContent}
                     {submenuIcon}
                 </a>
                 {submenu}

diff --git 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 && <span className="p-steps-title">{item.label}</span>;
+        const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null;
 
         return (
             <li key={item.label + '_' + index} className={className} style={item.style} role="tab" aria-selected={index === this.props.activeIndex} aria-expanded={index === this.props.activeIndex}>
                 <a href={item.url || '#'} className="p-menuitem-link" role="presentation" target={item.target} onClick={event => this.itemClick(event, item, index)} tabIndex={isDisabled ? -1 : ''}>
                     <span className="p-steps-number">{index + 1}</span>
-                    <span className="p-steps-title">{item.label}</span>
+                    {label}
+                    {itemContent}
                 </a>
             </li>
         );

diff --git 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 && <span className={iconClassName}></span>;
+        const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
+        const itemContent = item.template ? ObjectUtils.getJSXElement(item.template, item) : null;
 
         return (
             <li ref={(el) => 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}>
                  <a href={item.url||'#'} className="p-menuitem-link" target={item.target} onClick={(event) => this.itemClick(event, item)} role="presentation">
                     {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
+                    {label}
+                    {itemContent}
                     <Ripple />
                 </a>
             </li>

diff --git 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 && <span className="p-menuitem-text">{item.label}</span>;
+        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 {
                 <a href={item.url || '#'} className={linkClassName} target={item.target} role="menuitem" aria-haspopup={item.items != null}
                     onClick={(event) => this.onItemClick(event, item)} onKeyDown={(event) => this.onItemKeyDown(event, item)}>
                     {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
+                    {label}
+                    {itemContent}
                     {submenuIcon}
                     <Ripple />
                 </a>