Fix #2808: MegaMenu start and end template attributes (#2809)

* Fix #2808: MegaMenu start and end template attributes * Fix #2808: MegaMenu start and end template attributes
primefaces · Jul 1, 2022 · 857fa6b · 857fa6b
1 parent 2251a6b
commit 857fa6b
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 27 deletions.
diff --git a/api-generator/components/megamenu.js b/api-generator/components/megamenu.js
@@ -28,6 +28,18 @@ const MegaMenuProps = [
         type: 'string',
         default: 'horizontal',
         description: 'Defines the orientation, valid values are horizontal and vertical.'
+    },
+    {
+        name: 'start',
+        type: 'any',
+        default: 'null',
+        description: 'The template of starting element.'
+    },
+    {
+        name: 'end',
+        type: 'any',
+        default: 'null',
+        description: 'The template of trailing element'
     }
 ];
 

diff --git a/components/doc/megamenu/index.js b/components/doc/megamenu/index.js
@@ -133,6 +133,9 @@ export class MegaMenuDemo extends Component {
         ];
     }
 
+    const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
+    const end = <InputText placeholder="Search" type="text" style={{width: '12rem'}} />;
+
     render() {
         return (
             <div>
@@ -142,6 +145,11 @@ export class MegaMenuDemo extends Component {
 
                     <h5>Vertical</h5>
                     <MegaMenu model={this.items} orientation="vertical" />
+
+                    <h5>Templating</h5>
+                    <MegaMenu model={items} orientation="horizontal" start={start} end={end} />
+                    <br/>
+                    <MegaMenu model={items} orientation="vertical" start={start} end={end} />
                 </div>
             </div>
         );
@@ -270,6 +278,9 @@ const MegaMenuDemo = () => {
         }
     ];
 
+    const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
+    const end = <InputText placeholder="Search" type="text" style={{width: '12rem'}} />;
+
     return (
         <div>
             <div className="card">
@@ -278,6 +289,11 @@ const MegaMenuDemo = () => {
 
                 <h5>Vertical</h5>
                 <MegaMenu model={items} orientation="vertical" />
+
+                <h5>Templating</h5>
+                <MegaMenu model={items} orientation="horizontal" start={start} end={end} />
+                <br/>
+                <MegaMenu model={items} orientation="vertical" start={start} end={end} />
             </div>
         </div>
     );
@@ -405,6 +421,9 @@ const MegaMenuDemo = () => {
         }
     ];
 
+    const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
+    const end = <InputText placeholder="Search" type="text" style={{width: '12rem'}} />;
+
     return (
         <div>
             <div className="card">
@@ -413,6 +432,11 @@ const MegaMenuDemo = () => {
 
                 <h5>Vertical</h5>
                 <MegaMenu model={items} orientation="vertical" />
+
+                <h5>Templating</h5>
+                <MegaMenu model={items} orientation="horizontal" start={start} end={end} />
+                <br/>
+                <MegaMenu model={items} orientation="vertical" start={start} end={end} />
             </div>
         </div>
     );
@@ -543,6 +567,9 @@ const MegaMenuDemo = () => {
         }
     ];
 
+    const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
+    const end = <InputText placeholder="Search" type="text" style={{width: '12rem'}} />;
+
     return (
         <div>
             <div className="card">
@@ -551,6 +578,11 @@ const MegaMenuDemo = () => {
 
                 <h5>Vertical</h5>
                 <MegaMenu model={items} orientation="vertical" />
+
+                <h5>Templating</h5>
+                <MegaMenu model={items} orientation="horizontal" start={start} end={end} />
+                <br/>
+                <MegaMenu model={items} orientation="vertical" start={start} end={end} />
             </div>
         </div>
     );
@@ -714,13 +746,14 @@ const items = [
 </CodeHighlight>
 
                     <h5>Custom Content</h5>
-                    <p>Any content inside the megamenu will be displayed on the right side by default. You may use ".ui-megamenu-custom" style class to change the location of the content.</p>
+                    <p>The megamenu can display custom content by using the "start" and "end" properties.</p>
 <CodeHighlight>
 {`
-<MegaMenu model={items}>
-    <InputText placeholder="Search" type="text"/>
-    <Button label="Logout" icon="pi pi-power-off" style={{marginLeft:4}}/>
-</MegaMenu>
+<MegaMenu
+  model={items}
+  start={<InputText placeholder="Search" type="text"/>}
+  end={<Button label="Logout" icon="pi pi-power-off"/>}
+/>
 `}
 </CodeHighlight>
 
@@ -766,6 +799,18 @@ const items = [
                                     <td>horizontal</td>
                                     <td>Defines the orientation, valid values are horizontal and vertical.</td>
                                 </tr>
+                                <tr>
+                                    <td>start</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>The template of starting element.</td>
+                                </tr>
+                                <tr>
+                                    <td>end</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>The template of trailing element</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>
@@ -786,7 +831,7 @@ const items = [
                                     <td>Container element.</td>
                                 </tr>
                                 <tr>
-                                    <td>p-menu-list</td>
+                                    <td>p-megamenu-root-list</td>
                                     <td>List element.</td>
                                 </tr>
                                 <tr>

diff --git a/components/lib/megamenu/MegaMenu.css b/components/lib/megamenu/MegaMenu.css
@@ -38,6 +38,12 @@
     list-style: none;
 }
 
+.p-megamenu .p-megamenu-custom,
+.p-megamenu .p-megamenu-end {
+    margin-left: auto;
+    align-self: center;
+}
+
 /* Horizontal */
 .p-megamenu-horizontal .p-megamenu-root-list {
     display: flex;

diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts
@@ -3,12 +3,19 @@ import { MenuItem } from '../menuitem';
 
 type MegaMenuOrientationType = 'vertical' | 'horizontal';
 
+type MegaMenuStartTemplate = React.ReactNode | ((props: MegaMenuProps) => React.ReactNode);
+
+type MegaMenuEndTemplate = React.ReactNode | ((props: MegaMenuProps) => React.ReactNode);
+
+
 export interface MegaMenuProps {
     id?: string;
     model?: MenuItem[];
     style?: object;
     className?: string;
     orientation?: MegaMenuOrientationType;
+    start?: MegaMenuStartTemplate;
+    end?: MegaMenuEndTemplate;
     children?: React.ReactNode;
 }
 

diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
@@ -338,12 +338,28 @@ export const MegaMenu = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
-    const createCustomContent = () => {
-        if (props.children) {
+    const createStartContent = () => {
+        if (props.start) {
+            const start = ObjectUtils.getJSXElement(props.start, props);
+
             return (
-                <div className="p-megamenu-custom">
-                    {props.children}
-                </div>
+                <li className="p-megamenu-start">
+                    {start}
+                </li>
+            )
+        }
+
+        return null;
+    }
+
+    const createEndContent = () => {
+        if (props.end) {
+            const end = ObjectUtils.getJSXElement(props.end, props);
+
+            return (
+                <li className="p-megamenu-end">
+                    {end}
+                </li>
             )
         }
 
@@ -356,14 +372,16 @@ export const MegaMenu = React.memo(React.forwardRef((props, ref) => {
         'p-megamenu-vertical': props.orientation === 'vertical'
     }, props.className);
     const menu = createMenu();
-    const customContent = createCustomContent();
+    const start = createStartContent();
+    const end = createEndContent();
 
     return (
         <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
             <ul className="p-megamenu-root-list" role="menubar">
+                {start}
                 {menu}
+                {end}
             </ul>
-            {customContent}
         </div>
     )
 }));
@@ -375,5 +393,7 @@ MegaMenu.defaultProps = {
     model: null,
     style: null,
     className: null,
-    orientation: 'horizontal'
+    orientation: 'horizontal',
+    start: null,
+    end: null
 }
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
@@ -52,18 +52,6 @@ export const Menubar = React.memo(React.forwardRef((props, ref) => {
         useCustomContent
     }));
 
-    const createCustomContent = () => {
-        if (props.children) {
-            return (
-                <div className="p-menubar-custom">
-                    {props.children}
-                </div>
-            )
-        }
-
-        return null;
-    }
-
     const createStartContent = () => {
         if (props.start) {
             const start = ObjectUtils.getJSXElement(props.start, props);

diff --git a/pages/megamenu/index.js b/pages/megamenu/index.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import { MegaMenu } from '../../components/lib/megamenu/MegaMenu';
+import { InputText } from '../../components/lib/inputtext/InputText';
 import MegaMenuDoc from '../../components/doc/megamenu';
 import { DocActions } from '../../components/doc/common/docactions';
 import Head from 'next/head';
+import getConfig from 'next/config';
 
 const MegaMenuDemo = () => {
 
@@ -119,6 +121,10 @@ const MegaMenuDemo = () => {
         }
     ];
 
+    const contextPath = getConfig().publicRuntimeConfig.contextPath;
+    const start = <img alt="logo" src={`${contextPath}/images/logo.png`} onError={(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
+    const end = <InputText placeholder="Search" type="text" style={{width: '12rem'}} />;
+
     return (
         <div>
             <Head>
@@ -136,10 +142,15 @@ const MegaMenuDemo = () => {
             <div className="content-section implementation">
                 <div className="card">
                     <h5>Horizontal</h5>
-                    <MegaMenu model={items} />
+                    <MegaMenu model={items} orientation="horizontal" />
 
                     <h5>Vertical</h5>
                     <MegaMenu model={items} orientation="vertical" />
+
+                    <h5>Templating</h5>
+                    <MegaMenu model={items} orientation="horizontal" start={start} end={end} />
+                    <br/>
+                    <MegaMenu model={items} orientation="vertical" start={start} end={end} />
                 </div>
             </div>