Merge pull request primefaces#7031 from franmc01/master

refactor(panelmenu): replace submenuIcon with expandIcon and collapse…
melloware · Aug 21, 2024 · 34229f9 · 34229f9
2 parents 03023fe + d262cbd
commit 34229f9
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 19 deletions.
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -40995,6 +40995,14 @@
                             "default": "",
                             "description": "Used to get the child elements of the component."
                         },
+                        {
+                            "name": "collapseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PanelMenuProps>",
+                            "default": "",
+                            "description": "Icon used when a submenu is expanded."
+                        },
                         {
                             "name": "expandedKeys",
                             "optional": true,
@@ -41003,6 +41011,14 @@
                             "default": "",
                             "description": "A map of keys to represent the expansion state in controlled mode."
                         },
+                        {
+                            "name": "expandIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PanelMenuProps>",
+                            "default": "",
+                            "description": "Icon used when a submenu is collapsed."
+                        },
                         {
                             "name": "model",
                             "optional": true,
@@ -41035,14 +41051,6 @@
                             "default": "",
                             "description": "Used to configure passthrough(pt) options of the component."
                         },
-                        {
-                            "name": "submenuIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "IconType<PanelMenuProps>",
-                            "default": "",
-                            "description": "Icon of the submenu."
-                        },
                         {
                             "name": "transitionOptions",
                             "optional": true,
@@ -41175,11 +41183,18 @@
                             "description": "Uses to pass attributes to the header content's DOM element."
                         },
                         {
-                            "name": "submenuIcon",
+                            "name": "expandIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the expand icon's DOM element."
+                        },
+                        {
+                            "name": "collapseIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
-                            "description": "Uses to pass attributes to the submenuIcon's DOM element."
+                            "description": "Uses to pass attributes to the collapse icon's DOM element."
                         },
                         {
                             "name": "headerIcon",

diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
@@ -272,22 +272,31 @@ export const PanelMenu = React.memo(
 
             const key = item.id || idState + '_' + index;
             const active = isItemActive(item);
+
             const iconClassName = classNames('p-menuitem-icon', item.icon);
             const headerIconProps = mergeProps(
                 {
                     className: cx('headerIcon', { item })
                 },
                 getPTOptions(item, 'headerIcon', index)
             );
+
             const icon = IconUtils.getJSXIcon(item.icon, { ...headerIconProps }, { props });
+
             const submenuIconClassName = 'p-panelmenu-icon';
             const headerSubmenuIconProps = mergeProps(
                 {
                     className: cx('headerSubmenuIcon')
                 },
                 getPTOptions(item, 'headerSubmenuIcon', index)
             );
-            const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || <ChevronDownIcon {...headerSubmenuIconProps} /> : props.submenuIcon || <ChevronRightIcon {...headerSubmenuIconProps} />);
+
+            const submenuIcon = item.items && IconUtils.getJSXIcon(
+                active 
+                    ? (props.collapseIcon || <ChevronDownIcon {...headerSubmenuIconProps} />) 
+                    : (props.expandIcon || <ChevronRightIcon {...headerSubmenuIconProps} />)
+            );
+
             const headerLabelProps = mergeProps(
                 {
                     className: cx('headerLabel')

diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js
@@ -75,14 +75,15 @@ export const PanelMenuBase = ComponentBase.extend({
         id: null,
         model: null,
         style: null,
-        submenuIcon: null,
         expandedKeys: null,
         className: null,
         onExpandedKeysChange: null,
         onOpen: null,
         onClose: null,
         multiple: false,
         transitionOptions: null,
+        expandIcon: null,
+        collapseIcon: null,
         children: undefined
     },
     css: {

diff --git a/components/lib/panelmenu/PanelMenuList.js b/components/lib/panelmenu/PanelMenuList.js
@@ -429,7 +429,8 @@ export const PanelMenuList = React.memo((props) => {
             onItemToggle={onItemToggle}
             level={0}
             className={cx('submenu')}
-            submenuIcon={props.submenuIcon}
+            expandIcon={props.expandIcon}
+            collapseIcon={props.collapseIcon}
             root
             ptm={ptm}
             cx={cx}

diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js
@@ -137,7 +137,8 @@ export const PanelMenuSub = React.memo(
                                 onItemToggle={onItemToggle}
                                 menuProps={props.menuProps}
                                 model={processedItem.items}
-                                submenuIcon={props.submenuIcon}
+                                expandIcon={props.expandIcon}
+                                collapseIcon={props.collapseIcon}
                                 ptm={ptm}
                                 cx={cx}
                             />
@@ -183,7 +184,13 @@ export const PanelMenuSub = React.memo(
                 },
                 getPTOptions(processedItem, 'submenuicon', index)
             );
-            const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || <ChevronDownIcon {...submenuIconProps} /> : props.submenuIcon || <ChevronRightIcon {...submenuIconProps} />);
+
+            const submenuIcon = item.items && IconUtils.getJSXIcon(
+                active 
+                    ? (props.collapseIcon || <ChevronDownIcon {...submenuIconProps} />) 
+                    : (props.expandIcon || <ChevronRightIcon {...submenuIconProps} />)
+            );
+
             const submenu = createSubmenu(processedItem, active);
             const actionProps = mergeProps(
                 {

diff --git a/components/lib/panelmenu/panelmenu.d.ts b/components/lib/panelmenu/panelmenu.d.ts
@@ -53,9 +53,13 @@ export interface PanelMenuPassThroughOptions {
      */
     headerContent?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
-     * Uses to pass attributes to the submenuIcon's DOM element.
+     * Uses to pass attributes to the expand icon's DOM element.
      */
-    submenuIcon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    expandIcon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the collapse icon's DOM element.
+     */
+    collapseIcon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the header icon's DOM element.
      */
@@ -179,9 +183,13 @@ export interface PanelMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      */
     multiple?: boolean | undefined;
     /**
-     * Icon of the submenu.
+     * Icon used when a submenu is collapsed.
+     */
+    expandIcon?: IconType<PanelMenuProps> | undefined;
+    /**
+     * Icon used when a submenu is expanded.
      */
-    submenuIcon?: IconType<PanelMenuProps> | undefined;
+    collapseIcon?: IconType<PanelMenuProps> | undefined;
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      */