Skip to content

Commit

Permalink
Refactor #4359 - for Dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@habubey
habubey committed May 9, 2023
1 parent 684fdcb commit 81ab7b6
Show file tree
Hide file tree
Showing 9 changed files with 509 additions and 68 deletions.
132 changes: 132 additions & 0 deletions components/doc/common/apidoc/index.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13546,6 +13546,130 @@
"interfaces": {
"description": "Defines the custom interfaces used by the module.",
"values": {
"DialogPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "DialogProps"
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "DialogState"
}
],
"callbacks": []
},
"DialogPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "DialogProps.pt",
"props": [
{
"name": "root",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the root's DOM element."
},
{
"name": "header",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the header's DOM element."
},
{
"name": "headerTitle",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the header title's DOM element."
},
{
"name": "headerIcons",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the header icons' DOM element."
},
{
"name": "maximizableButton",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLButtonElement>>",
"description": "Uses to pass attributes to the maximizable button's DOM element."
},
{
"name": "maximizableIcon",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
"description": "Uses to pass attributes to the maximizable icon's DOM element."
},
{
"name": "closeButton",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
"description": "Uses to pass attributes to the close button's component."
},
{
"name": "closeButtonIcon",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLButtonElement>>",
"description": "Uses to pass attributes to the close button icon's component."
},
{
"name": "content",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the content's DOM element."
},
{
"name": "footer",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the footer's DOM element."
},
{
"name": "mask",
"optional": true,
"readonly": false,
"type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the mask's DOM element."
}
],
"callbacks": []
},
"DialogState": {
"description": "Defines current inline state in Dialog component.",
"relatedProp": "",
"props": [
{
"name": "containerVisible",
"optional": false,
"readonly": false,
"type": "boolean",
"description": "Current visible state of the container as a boolean."
},
{
"name": "maximized",
"optional": false,
"readonly": false,
"type": "boolean",
"description": "Current maximized state as a boolean."
}
],
"callbacks": []
},
"DialogBreakpoints": {
"description": "Dialog break options",
"relatedProp": "",
Expand All @@ -13560,6 +13684,14 @@
"callbacks": []
}
}
},
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"DialogPassThroughType": {
"values": "PassThroughType<T, DialogPassThroughMethodOptions>"
}
}
}
},
"divider": {
Expand Down
115 changes: 115 additions & 0 deletions components/doc/dialog/pt/ptdoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import { DocSectionText } from '../../common/docsectiontext';
import { DocSectionCode } from '../../common/docsectioncode';
import { Dialog } from '../../../lib/dialog/Dialog';
import { Button } from '../../../lib/button/Button';
import { useState } from 'react';

export function PTDoc(props) {
const [visible, setVisible] = useState(false);

const code = {
basic: `
<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
<Dialog
header="Header"
visible={visible}
modal
onHide={() => setVisible(false)}
pt={{
root: { className: 'w-12 sm:w-9 md:w-6' }
}}
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Dialog>
`,
javascript: `
import React, { useState } from 'react';
import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button';
export default function PTDemo() {
const [visible, setVisible] = useState(false);
return (
<div className="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
<Dialog
header="Header"
visible={visible}
modal
onHide={() => setVisible(false)}
pt={{
root: { className: 'w-12 sm:w-9 md:w-6' }
}}
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Dialog>
</div>
</div>
)
}
`,
typescript: `
import React, { useState } from 'react';
import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button';
export default function PTDemo() {
const [visible, setVisible] = useState<boolean>(false);
return (
<div className="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
<Dialog
header="Header"
visible={visible}
modal
onHide={() => setVisible(false)}
pt={{
root: { className: 'w-12 sm:w-9 md:w-6' }
}}
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Dialog>
</div>
)
}
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<div className="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />

<Dialog
header="Header"
visible={visible}
modal
onHide={() => setVisible(false)}
pt={{
root: { className: 'w-12 sm:w-9 md:w-6' }
}}
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Dialog>
</div>
<DocSectionCode code={code} />
</>
);
}
13 changes: 13 additions & 0 deletions components/doc/dialog/pt/wireframe.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import { DocSectionText } from '../../common/docsectiontext';

export const Wireframe = (props) => {
return (
<>
<DocSectionText {...props} />
<div>
<img className="w-full" src="/images/pt/wireframe-placeholder.jpg" alt="wireframe" />
</div>
</>
);
};
Loading

0 comments on commit 81ab7b6

Please sign in to comment.