Skip to content

Commit

Permalink
Fix #2808: MegaMenu start and end template attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware committed Apr 27, 2022
1 parent 26cf672 commit 42530a5
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 31 deletions.
45 changes: 35 additions & 10 deletions components/doc/megamenu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,12 +132,15 @@ 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" />;
render() {
return (
<div>
<div className="card">
<h5>Horizontal</h5>
<MegaMenu model={this.items} />
<MegaMenu model={this.items} start={start} end={end}/>
<h5>Vertical</h5>
<MegaMenu model={this.items} orientation="vertical" />
Expand Down Expand Up @@ -269,11 +272,14 @@ 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" />;
return (
<div>
<div className="card">
<h5>Horizontal</h5>
<MegaMenu model={items} />
<MegaMenu model={items} start={start} end={end}/>
<h5>Vertical</h5>
<MegaMenu model={items} orientation="vertical" />
Expand Down Expand Up @@ -404,11 +410,14 @@ 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" />;
return (
<div>
<div className="card">
<h5>Horizontal</h5>
<MegaMenu model={items} />
<MegaMenu model={items} start={start} end={end} />
<h5>Vertical</h5>
<MegaMenu model={items} orientation="vertical" />
Expand Down Expand Up @@ -542,11 +551,14 @@ 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" />;
return (
<div>
<div className="card">
<h5>Horizontal</h5>
<MegaMenu model={items} />
<MegaMenu model={items} start={start} end={end} />
<h5>Vertical</h5>
<MegaMenu model={items} orientation="vertical" />
Expand Down Expand Up @@ -713,13 +725,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>

Expand Down Expand Up @@ -765,6 +778,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>
Expand All @@ -785,7 +810,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>
Expand Down
6 changes: 6 additions & 0 deletions components/lib/megamenu/MegaMenu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 7 additions & 0 deletions components/lib/megamenu/MegaMenu.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
36 changes: 28 additions & 8 deletions components/lib/megamenu/MegaMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}

Expand All @@ -357,14 +373,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>
)
}));
Expand All @@ -376,5 +394,7 @@ MegaMenu.defaultProps = {
model: null,
style: null,
className: null,
orientation: 'horizontal'
orientation: 'horizontal',
start: null,
end: null
}
12 changes: 0 additions & 12 deletions components/lib/menubar/Menubar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
8 changes: 7 additions & 1 deletion pages/megamenu/index.js
View file
Original file line number Diff line number Diff line change
@@ -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 = () => {

Expand Down Expand Up @@ -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" />;

return (
<div>
<Head>
Expand All @@ -136,7 +142,7 @@ const MegaMenuDemo = () => {
<div className="content-section implementation">
<div className="card">
<h5>Horizontal</h5>
<MegaMenu model={items} />
<MegaMenu model={items} start={start} end={end} />

<h5>Vertical</h5>
<MegaMenu model={items} orientation="vertical" />
Expand Down

0 comments on commit 42530a5

Please sign in to comment.