Skip to content

Commit

Permalink
Refactor #4391 - For Dock
Browse files Browse the repository at this point in the history
  • Loading branch information
ulasturann committed May 15, 2023
1 parent aa17b4f commit 9a9c164
Show file tree
Hide file tree
Showing 7 changed files with 482 additions and 19 deletions.
112 changes: 112 additions & 0 deletions components/doc/common/apidoc/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -14421,6 +14421,14 @@
"type": "ReactNode",
"default": "",
"description": "Used to get the child elements of the component."
},
{
"name": "pt",
"optional": true,
"readonly": false,
"type": "DockPassThroughOptions",
"default": "",
"description": "Uses to pass attributes to DOM elements inside the component."
}
]
},
Expand All @@ -14433,6 +14441,102 @@
"interfaces": {
"description": "Defines the custom interfaces used by the module.",
"values": {
"DockPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "DockProps"
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "DockState"
}
],
"callbacks": []
},
"DockPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "pt",
"props": [
{
"name": "root",
"optional": true,
"readonly": false,
"type": "DockPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the root's DOM element."
},
{
"name": "container",
"optional": true,
"readonly": false,
"type": "DockPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the container's DOM element."
},
{
"name": "header",
"optional": true,
"readonly": false,
"type": "DockPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the header's DOM element."
},
{
"name": "footer",
"optional": true,
"readonly": false,
"type": "DockPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the footer's DOM element."
},
{
"name": "menu",
"optional": true,
"readonly": false,
"type": "DockPassThroughType<HTMLAttributes<HTMLUListElement>>",
"description": "Uses to pass attributes to the list's DOM element."
},
{
"name": "menuitem",
"optional": true,
"readonly": false,
"type": "DockPassThroughType<HTMLAttributes<HTMLLIElement>>",
"description": "Uses to pass attributes to the list item's DOM element."
},
{
"name": "action",
"optional": true,
"readonly": false,
"type": "DockPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
"description": "Uses to pass attributes to the action's DOM element."
},
{
"name": "icon",
"optional": true,
"readonly": false,
"type": "DockPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
"description": "Uses to pass attributes to the icon's DOM element."
}
],
"callbacks": []
},
"DockState": {
"description": "Defines current inline state in Dock component.",
"relatedProp": "",
"props": [
{
"name": "currentIndex",
"optional": false,
"readonly": false,
"type": "number",
"description": "Current index as a number."
}
],
"callbacks": []
},
"DockHeaderTemplateOptions": {
"description": "Custom header template",
"relatedProp": "header",
Expand Down Expand Up @@ -14464,6 +14568,14 @@
"extendedTypes": "DockHeaderTemplateOptions"
}
}
},
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"DockPassThroughType": {
"values": "PassThroughType<T, DockPassThroughMethodOptions>"
}
}
}
},
"dropdown": {
Expand Down
182 changes: 182 additions & 0 deletions components/doc/dock/pt/ptdoc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
import { Dock } from '../../../lib/dock/Dock';
import { DocSectionCode } from '../../common/docsectioncode';
import { DocSectionText } from '../../common/docsectiontext';

export function PTDoc(props) {
const items = [
{
label: 'Finder',
icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />
},
{
label: 'App Store',
icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />
},
{
label: 'Photos',
icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />
},
{
label: 'Trash',
icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />
}
];

const positions = [
{
label: 'Bottom',
value: 'bottom'
},
{
label: 'Top',
value: 'top'
},
{
label: 'Left',
value: 'left'
},
{
label: 'Right',
value: 'right'
}
];

const code = {
basic: `
<Dock
model={items}
position={"bottom"}
pt={{
container: {
style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
}
}}
/>
`,
javascript: `
import React from 'react';
import { Dock } from 'primereact/dock';
import './DockDemo.css';
export default function PTDemo() {
const items = [
{
label: 'Finder',
icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />,
},
{
label: 'App Store',
icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />,
},
{
label: 'Photos',
icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />,
},
{
label: 'Trash',
icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />,
}
];
return (
<div className="card dock-demo">
<div className="dock-window" style={{ backgroundImage: 'url(/images/dock/window.jpg)' }}>
<Dock
model={items}
position={"bottom"}
pt={{
container: {
style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
}
}}
/>
</div>
</div>
)
}
`,
typescript: `
import React from 'react';
import { Dock } from 'primereact/dock';
import { MenuItem } from 'primereact/menuitem';
import './DockDemo.css';
export default function PTDemo() {
const items: MenuItem[] = [
{
label: 'Finder',
icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />,
},
{
label: 'App Store',
icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />,
},
{
label: 'Photos',
icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />,
},
{
label: 'Trash',
icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />,
}
];
return (
<div className="card dock-demo">
<div className="dock-window" style={{ backgroundImage: 'url(/images/dock/window.jpg)' }}>
<Dock
model={items}
position={"bottom"}
pt={{
container: {
style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
}
}}
/>
</div>
</div>
)
}
`,
extFiles: {
'DockDemo.css': `
/* DockDemo.css */
.dock-demo .dock-window {
width: 100%;
height: 450px;
position: relative;
background-image: url('https://primefaces.org/cdn/primereact/images/dock/window.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.dock-demo .p-dock {
z-index: 1000;
}
`
}
};

return (
<>
<DocSectionText {...props}>
<p>
Menu requires a collection of menuitems as its <i>model</i>. Default location is <i>bottom</i> and other sides are also available when defined with the <i>position</i> property.
</p>
</DocSectionText>
<div className="card">
<div className="dock-window" style={{ backgroundImage: 'url(/images/dock/window.jpg)' }}>
<Dock
model={items}
position={"bottom"}
pt={{
container: {
style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
}
}}
/>
</div>
</div>
<DocSectionCode code={code} />
</>
);
}
15 changes: 15 additions & 0 deletions components/doc/dock/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="dock" />
</div>
</>
);
};
Loading

0 comments on commit 9a9c164

Please sign in to comment.