From 86a419ec30ac236d80967b930676103e826e5016 Mon Sep 17 00:00:00 2001 From: Paschalis Economou Date: Sat, 27 Apr 2024 19:39:31 +0200 Subject: [PATCH 1/4] feat: added context to menu, mirroring tab menu --- components/doc/common/apidoc/index.json | 34 +++++++++++++++++++++++++ components/lib/menu/Menu.js | 20 +++++++++++---- components/lib/menu/menu.d.ts | 19 ++++++++++++++ 3 files changed, 68 insertions(+), 5 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 13a0f54ad9..7ac70de337 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -34403,6 +34403,40 @@ "optional": false, "readonly": false, "type": "MenuState" + }, + { + "name": "context", + "optional": false, + "readonly": false, + "type": "MenuContext" + } + ], + "callbacks": [] + }, + "MenuContext": { + "description": "Defines current options in Menu component.", + "relatedProp": "", + "props": [ + { + "name": "item", + "optional": false, + "readonly": false, + "type": "any", + "description": "Current menuitem" + }, + { + "name": "index", + "optional": false, + "readonly": false, + "type": "number", + "description": "Index of the menuitem" + }, + { + "name": "parentId", + "optional": false, + "readonly": false, + "type": "null | string", + "description": "Id of the submenu header containing the menuitem" } ], "callbacks": [] diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index 59dc685054..f90cf63063 100644 --- a/components/lib/menu/Menu.js +++ b/components/lib/menu/Menu.js @@ -29,6 +29,16 @@ export const Menu = React.memo( } }); + const getMenuItemPTOptions = (key, item, index, parentId) => { + return ptm(key, { + context: { + item, + index, + parentId + } + }); + }; + useHandleStyle(MenuBase.css.styles, isUnstyled, { name: 'menu' }); const menuRef = React.useRef(null); const listRef = React.useRef(null); @@ -335,14 +345,14 @@ export const Menu = React.memo( { className: cx('icon') }, - ptm('icon') + getMenuItemPTOptions('icon', item, index, parentId) ); const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props }); const labelProps = mergeProps( { className: cx('label') }, - ptm('label') + getMenuItemPTOptions('label', item, index, parentId) ); const label = item.label && {item.label}; const key = item.id || (parentId || idState) + '_' + index; @@ -351,7 +361,7 @@ export const Menu = React.memo( onClick: (event) => onItemClick(event, item, key), className: cx('content') }, - ptm('content') + getMenuItemPTOptions('content', item, index, parentId) ); const actionProps = mergeProps( @@ -366,7 +376,7 @@ export const Menu = React.memo( 'aria-disabled': item.disabled, 'data-p-disabled': item.disabled }, - ptm('action') + getMenuItemPTOptions('action', item, index, parentId) ); let content = ( @@ -405,7 +415,7 @@ export const Menu = React.memo( 'data-p-focused': focusedOptionId() === key, 'data-p-disabled': item.disabled || false }, - ptm('menuitem') + getMenuItemPTOptions('menuitem', item, index, parentId) ); return
  • {content}
    • ; diff --git a/components/lib/menu/menu.d.ts b/components/lib/menu/menu.d.ts index eb6e9e008f..49de53936a 100644 --- a/components/lib/menu/menu.d.ts +++ b/components/lib/menu/menu.d.ts @@ -24,6 +24,25 @@ export declare type MenuPassThroughTransitionType = ReactCSSTransitionProps | (( export interface MenuPassThroughMethodOptions { props: MenuProps; state: MenuState; + context: MenuContext; +} + +/** + * Defines current options in Menu component. + */ +export interface MenuContext { + /** + * Current menuitem + */ + item: any; + /** + * Index of the menuitem + */ + index: number; + /** + * Id of the submenu header containing the menuitem + */ + parentId: string | null; } /** From 1708ee4b4474fa7997b2ca1ed1ccc71a9344de26 Mon Sep 17 00:00:00 2001 From: Paschalis Economou Date: Sat, 27 Apr 2024 19:52:06 +0200 Subject: [PATCH 2/4] refactor: eliminate code duplication --- components/lib/menu/Menu.js | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index f90cf63063..11aa81ae7d 100644 --- a/components/lib/menu/Menu.js +++ b/components/lib/menu/Menu.js @@ -29,14 +29,8 @@ export const Menu = React.memo( } }); - const getMenuItemPTOptions = (key, item, index, parentId) => { - return ptm(key, { - context: { - item, - index, - parentId - } - }); + const getMenuItemPTOptions = (key, menuContext) => { + return ptm(key, { context: menuContext }); }; useHandleStyle(MenuBase.css.styles, isUnstyled, { name: 'menu' }); @@ -338,21 +332,22 @@ export const Menu = React.memo( if (item.visible === false) { return null; } - + + const menuContext = {item, index, parentId} const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled }); const iconClassName = classNames('p-menuitem-icon', item.icon); const iconProps = mergeProps( { className: cx('icon') }, - getMenuItemPTOptions('icon', item, index, parentId) + getMenuItemPTOptions('icon', menuContext) ); const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props }); const labelProps = mergeProps( { className: cx('label') }, - getMenuItemPTOptions('label', item, index, parentId) + getMenuItemPTOptions('label', menuContext) ); const label = item.label && {item.label}; const key = item.id || (parentId || idState) + '_' + index; @@ -361,7 +356,7 @@ export const Menu = React.memo( onClick: (event) => onItemClick(event, item, key), className: cx('content') }, - getMenuItemPTOptions('content', item, index, parentId) + getMenuItemPTOptions('content', menuContext) ); const actionProps = mergeProps( @@ -376,7 +371,7 @@ export const Menu = React.memo( 'aria-disabled': item.disabled, 'data-p-disabled': item.disabled }, - getMenuItemPTOptions('action', item, index, parentId) + getMenuItemPTOptions('action', menuContext) ); let content = ( @@ -415,7 +410,7 @@ export const Menu = React.memo( 'data-p-focused': focusedOptionId() === key, 'data-p-disabled': item.disabled || false }, - getMenuItemPTOptions('menuitem', item, index, parentId) + getMenuItemPTOptions('menuitem', menuContext) ); return
  • {content}
    • ; From 795f8208fa6b58396b0d630a0ce1a2082c6ef121 Mon Sep 17 00:00:00 2001 From: Paschalis Economou Date: Sat, 27 Apr 2024 20:05:58 +0200 Subject: [PATCH 3/4] chore: formatted code --- components/lib/menu/Menu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index 11aa81ae7d..ace9b032e8 100644 --- a/components/lib/menu/Menu.js +++ b/components/lib/menu/Menu.js @@ -332,8 +332,8 @@ export const Menu = React.memo( if (item.visible === false) { return null; } - - const menuContext = {item, index, parentId} + + const menuContext = { item, index, parentId }; const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled }); const iconClassName = classNames('p-menuitem-icon', item.icon); const iconProps = mergeProps( From 68cb21cf31f537db4efb2adfcaced1485d6874f9 Mon Sep 17 00:00:00 2001 From: Paschalis Economou Date: Sat, 27 Apr 2024 20:06:17 +0200 Subject: [PATCH 4/4] fix: added correct type for menu item --- components/doc/common/apidoc/index.json | 2 +- components/lib/menu/menu.d.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 7ac70de337..f388697fcd 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -34421,7 +34421,7 @@ "name": "item", "optional": false, "readonly": false, - "type": "any", + "type": "MenuItem", "description": "Current menuitem" }, { diff --git a/components/lib/menu/menu.d.ts b/components/lib/menu/menu.d.ts index 49de53936a..f64c5bd8a1 100644 --- a/components/lib/menu/menu.d.ts +++ b/components/lib/menu/menu.d.ts @@ -34,7 +34,7 @@ export interface MenuContext { /** * Current menuitem */ - item: any; + item: MenuItem; /** * Index of the menuitem */