Add PanelMenu icon templating support Related - #4226

primefaces · Apr 16, 2023 · 280bc41 · 280bc41
1 parent 1d2367c
commit 280bc41
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
@@ -4,6 +4,8 @@ import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
 import { PanelMenuBase } from './PanelMenuBase';
 import { PanelMenuSub } from './PanelMenuSub';
+import { ChevronRightIcon } from '../icon/chevronright';
+import { ChevronDownIcon } from '../icon/chevrondown';
 
 export const PanelMenu = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -106,10 +108,10 @@ export const PanelMenu = React.memo(
             const active = isItemActive(item);
             const className = classNames('p-panelmenu-panel', item.className);
             const headerClassName = classNames('p-component p-panelmenu-header', { 'p-highlight': active, 'p-disabled': item.disabled });
-            const submenuIconClassName = classNames('p-panelmenu-icon pi', { 'pi-chevron-right': !active, ' pi-chevron-down': active });
             const iconClassName = classNames('p-menuitem-icon', item.icon);
             const icon = IconUtils.getJSXIcon(item.icon, { className: 'p-menuitem-icon' }, { props });
-            const submenuIcon = item.items && <span className={submenuIconClassName}></span>;
+            const submenuIconClassName = 'p-panelmenu-icon';
+            const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || <ChevronDownIcon className={submenuIconClassName} /> : props.submenuIcon || <ChevronRightIcon className={submenuIconClassName} />)
             const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
             const contentWrapperClassName = classNames('p-toggleable-content', { 'p-toggleable-content-collapsed': !active });
             const menuContentRef = React.createRef();
@@ -145,7 +147,7 @@ export const PanelMenu = React.memo(
                     <CSSTransition nodeRef={menuContentRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} onEnter={onEnter} disabled={animationDisabled} in={active} unmountOnExit options={props.transitionOptions}>
                         <div ref={menuContentRef} className={contentWrapperClassName} role="region" id={contentId} aria-labelledby={headerId}>
                             <div className="p-panelmenu-content">
-                                <PanelMenuSub menuProps={props} model={item.items} className="p-panelmenu-root-submenu" multiple={props.multiple} />
+                                <PanelMenuSub menuProps={props} model={item.items} className="p-panelmenu-root-submenu" multiple={props.multiple} submenuIcon={props.submenuIcon} />
                             </div>
                         </div>
                     </CSSTransition>

diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js
@@ -6,6 +6,7 @@ export const PanelMenuBase = {
         id: null,
         model: null,
         style: null,
+        submenuIcon: null,
         className: null,
         multiple: false,
         transitionOptions: null,

diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMountEffect } from '../hooks/Hooks';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { ChevronRightIcon } from '../icon/chevronright';
+import { ChevronDownIcon } from '../icon/chevrondown';
 
 export const PanelMenuSub = React.memo((props) => {
     const [activeItemState, setActiveItemState] = React.useState(null);
@@ -85,7 +87,7 @@ export const PanelMenuSub = React.memo((props) => {
             return (
                 <CSSTransition nodeRef={submenuRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} in={active} unmountOnExit>
                     <div ref={submenuRef} className={className}>
-                        <PanelMenuSub menuProps={props.menuProps} model={item.items} multiple={props.multiple} />
+                        <PanelMenuSub menuProps={props.menuProps} model={item.items} multiple={props.multiple} submenuIcon={props.submenuIcon} />
                     </div>
                 </CSSTransition>
             );
@@ -104,10 +106,10 @@ export const PanelMenuSub = React.memo((props) => {
         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);
-        const submenuIconClassName = classNames('p-panelmenu-icon pi pi-fw', { 'pi-angle-right': !active, 'pi-angle-down': active });
         const icon = IconUtils.getJSXIcon(item.icon, { className: 'p-menuitem-icon' }, { props: props.menuProps });
         const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
-        const submenuIcon = item.items && <span className={submenuIconClassName}></span>;
+        const submenuIconClassName = 'p-panelmenu-icon';
+        const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || <ChevronDownIcon className={submenuIconClassName} /> : props.submenuIcon || <ChevronRightIcon className={submenuIconClassName} />)
         const submenu = createSubmenu(item, active);
         let content = (
             <a href={item.url || '#'} className={linkClassName} target={item.target} onClick={(event) => onItemClick(event, item, index)} role="menuitem" aria-disabled={item.disabled}>

diff --git a/components/lib/panelmenu/panelmenu.d.ts b/components/lib/panelmenu/panelmenu.d.ts
@@ -10,6 +10,7 @@
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
 import { MenuItem } from '../menuitem';
+import { IconType } from '../utils/utils';
 
 /**
  * Defines valid properties in PanelMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
@@ -25,6 +26,10 @@ export interface PanelMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * @defaultValue false
      */
     multiple?: boolean | undefined;
+    /**
+     * Icon of the submenu.
+     */
+    submenuIcon?: IconType<PanelMenuProps> | undefined;
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      */