Fix primefaces#3753: Menu add alignment property

melloware · Dec 8, 2022 · 0a96f01 · 0a96f01
1 parent e0afe5f
commit 0a96f01
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 31 deletions.
diff --git a/components/doc/menu/apidoc.js b/components/doc/menu/apidoc.js
@@ -37,6 +37,12 @@ export function ApiDoc(props) {
                                 <td>false</td>
                                 <td>Defines if menu would displayed as a popup.</td>
                             </tr>
+                            <tr>
+                                <td>popupAlignment</td>
+                                <td>string</td>
+                                <td>left</td>
+                                <td>In popup mode determines how the overlay is aligned with its target. Values either 'left' or 'right'.</td>
+                            </tr>
                             <tr>
                                 <td>style</td>
                                 <td>string</td>

diff --git a/components/doc/menu/overlaydoc.js b/components/doc/menu/overlaydoc.js
@@ -6,7 +6,8 @@ import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
 
 export function OverlayDoc(props) {
-    const menu = useRef(null);
+    const menuLeft = useRef(null);
+    const menuRight = useRef(null);
     const toast = useRef(null);
     const items = [
         {
@@ -32,7 +33,7 @@ export function OverlayDoc(props) {
             label: 'Navigate',
             items: [
                 {
-                    label: 'React Website',
+                    label: 'React Docs Website',
                     icon: 'pi pi-external-link',
                     url: 'https://reactjs.org/'
                 },
@@ -48,9 +49,11 @@ export function OverlayDoc(props) {
     ];
     const code = {
         basic: `
-<Toast ref={toast}></Toast>
-<Menu model={items} popup ref={menu} id="popup_menu" />
-<Button label="Show" icon="pi pi-bars" onClick={(event) => menu.current.toggle(event)} aria-controls="popup_menu" aria-haspopup />      
+<Toast ref={toast} />
+<Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
+<Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
+<Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
+<Button label="Show Right" icon="pi pi-align-right" className="mr-2" onClick={(event) => menuRight.current.toggle(event)} aria-controls="popup_menu_right" aria-haspopup />
 `,
         javascript: `
 import { useRef } from 'react';
@@ -59,7 +62,8 @@ import { Menu } from 'primereact/menu';
 import { Toast } from 'primereact/toast';
 
 export default function OverlayDoc() {
-    const menu = useRef(null);
+    const menuLeft = useRef(null);
+    const menuRight = useRef(null);
     const toast = useRef(null);
     const items = [
         {
@@ -85,7 +89,7 @@ export default function OverlayDoc() {
             label: 'Navigate',
             items: [
                 {
-                    label: 'React Website',
+                    label: 'React Docs Website',
                     icon: 'pi pi-external-link',
                     url: 'https://reactjs.org/'
                 },
@@ -103,8 +107,10 @@ export default function OverlayDoc() {
     return (
         <div>
             <Toast ref={toast}></Toast>
-            <Menu model={items} popup ref={menu} id="popup_menu" />
-            <Button label="Show" icon="pi pi-bars" onClick={(event) => menu.current.toggle(event)} aria-controls="popup_menu" aria-haspopup />
+            <Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
+            <Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
+            <Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
+            <Button label="Show Right" icon="pi pi-align-right" className="mr-2" onClick={(event) => menuRight.current.toggle(event)} aria-controls="popup_menu_right" aria-haspopup />
         </div>
     )
 }
@@ -116,9 +122,10 @@ import { Menu } from 'primereact/menu';
 import { Toast } from 'primereact/toast';
 
 export default function OverlayDoc() {
-    const menu = useRef(null);
+    const menuLeft = useRef<Menu>(null);
+    const menuRight = useRef<Menu>(null);
     const toast = useRef<Toast>(null);
-    const items = [
+    const items: MenuItem[] = [
         {
             label: 'Options',
             items: [
@@ -142,7 +149,7 @@ export default function OverlayDoc() {
             label: 'Navigate',
             items: [
                 {
-                    label: 'React Website',
+                    label: 'React Docs Website',
                     icon: 'pi pi-external-link',
                     url: 'https://reactjs.org/'
                 },
@@ -160,8 +167,10 @@ export default function OverlayDoc() {
     return (
         <div>
             <Toast ref={toast}></Toast>
-            <Menu model={items} popup ref={menu} id="popup_menu" />
-            <Button label="Show" icon="pi pi-bars" onClick={(event) => menu.current.toggle(event)} aria-controls="popup_menu" aria-haspopup />
+            <Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
+            <Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
+            <Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
+            <Button label="Show Right" icon="pi pi-align-right" className="mr-2" onClick={(event) => menuRight.current.toggle(event)} aria-controls="popup_menu_right" aria-haspopup />
         </div>
     )
 }
@@ -171,12 +180,17 @@ export default function OverlayDoc() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
+                <p>
+                    Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target. The <i>popupAlignment</i> property allows you to control how the overlay is aligned with
+                    its target.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Toast ref={toast}></Toast>
-                <Menu model={items} popup ref={menu} id="popup_menu" />
-                <Button label="Show" icon="pi pi-bars" onClick={(event) => menu.current.toggle(event)} aria-controls="popup_menu" aria-haspopup />
+                <Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
+                <Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
+                <Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
+                <Button label="Show Right" icon="pi pi-align-right" className="mr-2" onClick={(event) => menuRight.current.toggle(event)} aria-controls="popup_menu_right" aria-haspopup />
             </div>
             <DocSectionCode code={code} />
         </>

diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
@@ -110,7 +110,7 @@ export const Menu = React.memo(
 
         const onEnter = () => {
             ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']);
-            DomHandler.absolutePosition(menuRef.current, targetRef.current);
+            DomHandler.absolutePosition(menuRef.current, targetRef.current, props.popupAlignment);
         };
 
         const onEntered = () => {
@@ -270,15 +270,16 @@ export const Menu = React.memo(
 Menu.displayName = 'Menu';
 Menu.defaultProps = {
     __TYPE: 'Menu',
+    appendTo: null,
+    autoZIndex: true,
+    baseZIndex: 0,
+    className: null,
     id: null,
     model: null,
+    onHide: null,
+    onShow: null,
     popup: false,
+    popupAlignment: 'left',
     style: null,
-    className: null,
-    autoZIndex: true,
-    baseZIndex: 0,
-    appendTo: null,
-    transitionOptions: null,
-    onShow: null,
-    onHide: null
+    transitionOptions: null
 };
diff --git a/components/lib/menu/menu.d.ts b/components/lib/menu/menu.d.ts
@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { MenuItem } from '../menuitem';
 import { CSSTransitionProps } from '../csstransition';
+import { MenuItem } from '../menuitem';
 
 type MenuAppendToType = 'self' | HTMLElement | undefined | null;
 
+type MenuAlignmentType = 'left' | 'right';
+
 export interface MenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    model?: MenuItem[];
-    popup?: boolean;
+    appendTo?: MenuAppendToType;
     autoZIndex?: boolean;
     baseZIndex?: number;
-    appendTo?: MenuAppendToType;
+    children?: React.ReactNode;
+    model?: MenuItem[];
+    popup?: boolean;
+    popupAlignment?: MenuAlignmentType;
     transitionOptions?: CSSTransitionProps;
-    onShow?(e: React.SyntheticEvent): void;
     onHide?(e: React.SyntheticEvent): void;
-    children?: React.ReactNode;
+    onShow?(e: React.SyntheticEvent): void;
 }
 
 export declare class Menu extends React.Component<MenuProps, any> {