Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jul 1, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d43f57
Fix #2808: MegaMenu start and end template attributes
melloware Apr 27, 2022
54426f1
Merge branch 'master' into PR2808
melloware Apr 30, 2022
811a515
Fix #2808: MegaMenu start and end template attributes
melloware Jul 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions api-generator/components/megamenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
];

Expand Down
57 changes: 51 additions & 6 deletions components/doc/megamenu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,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>
Expand All @@ -141,6 +144,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>
);
Expand Down Expand Up @@ -269,6 +277,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">
Expand All @@ -277,6 +288,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>
);
Expand Down Expand Up @@ -404,6 +420,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">
Expand All @@ -412,6 +431,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>
);
Expand Down Expand Up @@ -542,6 +566,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">
Expand All @@ -550,6 +577,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>
);
Expand Down Expand Up @@ -713,13 +745,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 +798,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 +830,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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 = () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This method was dead unused code in MenuBar.

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
13 changes: 12 additions & 1 deletion pages/megamenu/index.js
View file
Open in desktop
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" style={{width: '12rem'}} />;

return (
<div>
<Head>
Expand All @@ -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>

Expand Down