From eeec2205a1c90cfecdf5576e0cbae3a366424167 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Francisco=20Mar=C3=ADn?= <50973629+franmc01@users.noreply.github.com> Date: Mon, 12 Aug 2024 18:34:26 +0000 Subject: [PATCH 1/2] refactor(panelmenu): replace submenuIcon with expandIcon and collapseIcon for enhanced customization --- components/lib/panelmenu/PanelMenu.js | 11 ++++++++++- components/lib/panelmenu/PanelMenuBase.js | 3 ++- components/lib/panelmenu/PanelMenuList.js | 3 ++- components/lib/panelmenu/PanelMenuSub.js | 11 +++++++++-- components/lib/panelmenu/panelmenu.d.ts | 16 ++++++++++++---- 5 files changed, 35 insertions(+), 9 deletions(-) diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js index d497fc6419..f393af6322 100644 --- a/components/lib/panelmenu/PanelMenu.js +++ b/components/lib/panelmenu/PanelMenu.js @@ -272,6 +272,7 @@ 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( { @@ -279,7 +280,9 @@ export const PanelMenu = React.memo( }, getPTOptions(item, 'headerIcon', index) ); + const icon = IconUtils.getJSXIcon(item.icon, { ...headerIconProps }, { props }); + const submenuIconClassName = 'p-panelmenu-icon'; const headerSubmenuIconProps = mergeProps( { @@ -287,7 +290,13 @@ export const PanelMenu = React.memo( }, getPTOptions(item, 'headerSubmenuIcon', index) ); - const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || : props.submenuIcon || ); + + const submenuIcon = item.items && IconUtils.getJSXIcon( + active + ? (props.collapseIcon || ) + : (props.expandIcon || ) + ); + const headerLabelProps = mergeProps( { className: cx('headerLabel') diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js index 4ea25c7ecb..feb5ca99b7 100644 --- a/components/lib/panelmenu/PanelMenuBase.js +++ b/components/lib/panelmenu/PanelMenuBase.js @@ -75,7 +75,6 @@ export const PanelMenuBase = ComponentBase.extend({ id: null, model: null, style: null, - submenuIcon: null, expandedKeys: null, className: null, onExpandedKeysChange: null, @@ -83,6 +82,8 @@ export const PanelMenuBase = ComponentBase.extend({ 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 index 53c9c3122b..eb92fdd904 100644 --- 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 index 82e3b0b80c..ad6036dc85 100644 --- 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 || : props.submenuIcon || ); + + const submenuIcon = item.items && IconUtils.getJSXIcon( + active + ? (props.collapseIcon || ) + : (props.expandIcon || ) + ); + const submenu = createSubmenu(processedItem, active); const actionProps = mergeProps( { diff --git a/components/lib/panelmenu/panelmenu.d.ts b/components/lib/panelmenu/panelmenu.d.ts index fce7e95600..2cc4b195de 100644 --- a/components/lib/panelmenu/panelmenu.d.ts +++ b/components/lib/panelmenu/panelmenu.d.ts @@ -53,9 +53,13 @@ export interface PanelMenuPassThroughOptions { */ headerContent?: PanelMenuPassThroughType>; /** - * Uses to pass attributes to the submenuIcon's DOM element. + * Uses to pass attributes to the expand icon's DOM element. */ - submenuIcon?: PanelMenuPassThroughType | React.HTMLAttributes>; + expandIcon?: PanelMenuPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the collapse icon's DOM element. + */ + collapseIcon?: PanelMenuPassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes to the header icon's DOM element. */ @@ -179,9 +183,13 @@ export interface PanelMenuProps extends Omit | undefined; + /** + * Icon used when a submenu is expanded. */ - submenuIcon?: IconType | undefined; + collapseIcon?: IconType | undefined; /** * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. */ From fac3628f642aa8ed4a7d2a45e7fa92aa10f7a1cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Wed, 21 Aug 2024 14:22:24 +0300 Subject: [PATCH 2/2] Updated the api doc --- components/doc/common/apidoc/index.json | 35 ++++++++++++++++++------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index deba3c73d8..37741f3162 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -40980,6 +40980,14 @@ "default": "", "description": "Used to get the child elements of the component." }, + { + "name": "collapseIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon used when a submenu is expanded." + }, { "name": "expandedKeys", "optional": true, @@ -40988,6 +40996,14 @@ "default": "", "description": "A map of keys to represent the expansion state in controlled mode." }, + { + "name": "expandIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon used when a submenu is collapsed." + }, { "name": "model", "optional": true, @@ -41020,14 +41036,6 @@ "default": "", "description": "Used to configure passthrough(pt) options of the component." }, - { - "name": "submenuIcon", - "optional": true, - "readonly": false, - "type": "IconType", - "default": "", - "description": "Icon of the submenu." - }, { "name": "transitionOptions", "optional": true, @@ -41160,11 +41168,18 @@ "description": "Uses to pass attributes to the header content's DOM element." }, { - "name": "submenuIcon", + "name": "expandIcon", + "optional": true, + "readonly": false, + "type": "PanelMenuPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the expand icon's DOM element." + }, + { + "name": "collapseIcon", "optional": true, "readonly": false, "type": "PanelMenuPassThroughType | SVGProps>", - "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",