Fix #3398/#3407: SlideMenu add onNavigate, setLevelState (#3411)

primefaces · Oct 2, 2022 · 51e3cad · 51e3cad
1 parent 2275791
commit 51e3cad
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 2 deletions.
diff --git a/api-generator/components/slidemenu.js b/api-generator/components/slidemenu.js
@@ -107,6 +107,17 @@ const SlideMenuEvents = [
                 description: 'Browser event'
             }
         ]
+    },
+    {
+        name: 'onNavigate',
+        description: 'Callback to invoke when a menu is navigated to.',
+        arguments: [
+            {
+                name: 'event.level',
+                type: 'number',
+                description: 'The menu level navigated to'
+            }
+        ]
     }
 ];
 

diff --git a/components/doc/slidemenu/index.js b/components/doc/slidemenu/index.js
@@ -972,6 +972,11 @@ const items = [
                                     <td>void</td>
                                     <td>Navigates the slide menu backwards.</td>
                                 </tr>
+                                <tr>
+                                    <td>setLevelState</td>
+                                    <td>level: Number of the menu to set</td>
+                                    <td>Navigates the slide menu to this specific level.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>
@@ -989,14 +994,19 @@ const items = [
                             <tbody>
                                 <tr>
                                     <td>onShow</td>
-                                    <td>event: Browser event </td>
+                                    <td>event: Browser event</td>
                                     <td>Callback to invoke when a popup menu is shown.</td>
                                 </tr>
                                 <tr>
                                     <td>onHide</td>
-                                    <td>event: Browser event </td>
+                                    <td>event: Browser event</td>
                                     <td>Callback to invoke when a popup menu is hidden.</td>
                                 </tr>
+                                <tr>
+                                    <td>onNavigate</td>
+                                    <td>level: number</td>
+                                    <td>Callback to invoke when a menu is navigated to.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>

diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js
@@ -86,6 +86,10 @@ export const SlideMenu = React.memo(
             setLevelState(0);
         }, [props.model]);
 
+        useUpdateEffect(() => {
+            props.onNavigate && props.onNavigate({ level: levelState });
+        }, [levelState]);
+
         useUnmountEffect(() => {
             ZIndexUtils.clear(menuRef.current);
         });
@@ -97,6 +101,7 @@ export const SlideMenu = React.memo(
             hide,
             navigateForward,
             navigateBack,
+            setLevelState,
             getElement: () => menuRef.current
         }));
 
@@ -171,6 +176,7 @@ SlideMenu.defaultProps = {
     model: null,
     onHide: null,
     onShow: null,
+    onNavigate: null,
     popup: false,
     style: null,
     transitionOptions: null,

diff --git a/components/lib/slidemenu/slidemenu.d.ts b/components/lib/slidemenu/slidemenu.d.ts
@@ -4,6 +4,10 @@ import { MenuItem } from '../menuitem';
 
 type SlideMenuAppendToType = 'self' | HTMLElement | undefined | null;
 
+interface SlideMenuNavigateParams {
+    level: number;
+}
+
 export interface SlideMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
     appendTo?: SlideMenuAppendToType;
     autoZIndex?: boolean;
@@ -19,12 +23,14 @@ export interface SlideMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLA
     viewportHeight?: number;
     onShow?(e: React.SyntheticEvent): void;
     onHide?(e: React.SyntheticEvent): void;
+    onNavigate?(e: SlideMenuNavigateParams): void;
 }
 
 export declare class SlideMenu extends React.Component<SlideMenuProps, any> {
     public show(event: React.SyntheticEvent): void;
     public hide(event: React.SyntheticEvent): void;
     public toggle(event: React.SyntheticEvent): void;
+    public setLevelState(level: number): void;
     public navigateForward(): void;
     public navigateBack(): void;
     public getElement(): HTMLDivElement;