Skip to content

Commit

Permalink
Refactor #4391 - For Menu
Browse files Browse the repository at this point in the history
  • Loading branch information
ulasturann committed May 17, 2023
1 parent 8644001 commit 5e05469
Show file tree
Hide file tree
Showing 7 changed files with 505 additions and 27 deletions.
117 changes: 117 additions & 0 deletions components/doc/common/apidoc/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -22952,6 +22952,14 @@
"type": "ReactNode",
"default": "",
"description": "Used to get the child elements of the component."
},
{
"name": "pt",
"optional": true,
"readonly": false,
"type": "MenuPassThroughOptions",
"default": "",
"description": "Uses to pass attributes to DOM elements inside the component."
}
]
},
Expand Down Expand Up @@ -22987,6 +22995,115 @@
]
}
}
},
"interfaces": {
"description": "Defines the custom interfaces used by the module.",
"values": {
"MenuPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "MenuProps"
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "MenuState"
}
],
"callbacks": []
},
"MenuPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "pt",
"props": [
{
"name": "root",
"optional": true,
"readonly": false,
"type": "MenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the root's DOM element."
},
{
"name": "menu",
"optional": true,
"readonly": false,
"type": "MenuPassThroughType<HTMLAttributes<HTMLUListElement>>",
"description": "Uses to pass attributes to the list's DOM element."
},
{
"name": "submenuHeader",
"optional": true,
"readonly": false,
"type": "MenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
"description": "Uses to pass attributes to the submenu header's DOM element."
},
{
"name": "menuitem",
"optional": true,
"readonly": false,
"type": "MenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
"description": "Uses to pass attributes to the list item's DOM element."
},
{
"name": "action",
"optional": true,
"readonly": false,
"type": "MenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
"description": "Uses to pass attributes to the action's DOM element."
},
{
"name": "icon",
"optional": true,
"readonly": false,
"type": "MenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
"description": "Uses to pass attributes to the icon's DOM element."
},
{
"name": "label",
"optional": true,
"readonly": false,
"type": "MenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
"description": "Uses to pass attributes to the label's DOM element."
},
{
"name": "separator",
"optional": true,
"readonly": false,
"type": "MenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
"description": "Uses to pass attributes to the separator's DOM element."
}
],
"callbacks": []
},
"MenuState": {
"description": "Defines current inline state in Menu component.",
"relatedProp": "",
"props": [
{
"name": "visible",
"optional": false,
"readonly": false,
"type": "boolean",
"description": "Current visible state as a boolean."
}
],
"callbacks": []
}
}
},
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"MenuPassThroughType": {
"values": "PassThroughType<T, MenuPassThroughMethodOptions>"
}
}
}
},
"menubar": {
Expand Down
195 changes: 195 additions & 0 deletions components/doc/menu/pt/ptdoc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
import { useRef } from 'react';
import { useRouter } from 'next/router';
import { Menu } from '../../../lib/menu/Menu';
import { DocSectionCode } from '../../common/docsectioncode';
import { DocSectionText } from '../../common/docsectiontext';
import { Toast } from '../../../lib/toast/Toast';

export function PTDoc(props) {
const toast = useRef(null);
const router = useRouter();
const items = [
{
label: 'Options',
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'React Website',
icon: 'pi pi-external-link',
url: 'https://reactjs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
command: () => {
router.push('/fileupload');
}
}
]
}
];

const code = {
basic: `
<Menu
model={items}
pt={{
submenuHeader: { className: 'text-primary' }
}}
/>
`,
javascript: `
import React, { useRef } from 'react';
import { useRouter } from 'next/router';
import { Menu } from 'primereact/menu';
import { Toast } from 'primereact/toast';
export default function PTDemo() {
const items = [
{
label: 'Options',
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'React Website',
icon: 'pi pi-external-link',
url: 'https://reactjs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
command: () => {
router.push('/fileupload');
}
}
]
}
];
return (
<div className="card flex justify-content-center">
<Toast ref={toast} />
<Menu
model={items}
pt={{
submenuHeader: { className: 'text-primary' }
}}
/>
</div>
)
}
`,
typescript: `
import React, { useRef } from 'react';
import { useRouter } from 'next/router';
import { Menu } from 'primereact/menu';
import { MenuItem } from 'primereact/menuitem';
import { Toast } from 'primereact/toast';
export default function PTDemo() {
const items: MenuItem[] = [
{
label: 'Options',
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'React Website',
icon: 'pi pi-external-link',
url: 'https://reactjs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
command: () => {
router.push('/fileupload');
}
}
]
}
];
return (
<div className="card flex justify-content-center">
<Toast ref={toast} />
<Menu
model={items}
pt={{
submenuHeader: { className: 'text-primary' }
}}
/>
</div>
)
}
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<div className="card flex justify-content-center">
<Toast ref={toast} />
<Menu
model={items}
pt={{
submenuHeader: { className: 'text-primary' }
}}
/>
</div>
<DocSectionCode code={code} />
</>
);
}
15 changes: 15 additions & 0 deletions components/doc/menu/pt/wireframe.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@

import React from 'react';
import { DocSectionText } from '../../common/docsectiontext';

export const Wireframe = (props) => {

return (
<>
<DocSectionText {...props} />
<div>
<img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="menu" />
</div>
</>
);
};
Loading

0 comments on commit 5e05469

Please sign in to comment.