Skip to content

Commit

Permalink
Refactor #4392 - for Toast
Browse files Browse the repository at this point in the history
  • Loading branch information
@habubey
habubey committed May 18, 2023
1 parent 13c5b23 commit 52ce700
Show file tree
Hide file tree
Showing 8 changed files with 589 additions and 34 deletions.
196 changes: 196 additions & 0 deletions components/doc/common/apidoc/index.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33771,6 +33771,14 @@
"type": "ReactNode",
"default": "",
"description": "Used to get the child elements of the component."
},
{
"name": "pt",
"optional": true,
"readonly": false,
"type": "ToastPassThroughOptions",
"default": "",
"description": "Uses to pass attributes to DOM elements inside the component."
}
]
},
Expand Down Expand Up @@ -33822,6 +33830,179 @@
"interfaces": {
"description": "Defines the custom interfaces used by the module.",
"values": {
"ToastPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "ToastProps"
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "ToastState"
}
],
"callbacks": []
},
"ToastPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "pt",
"props": [
{
"name": "root",
"optional": true,
"readonly": false,
"type": "ToastPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the root's DOM element."
},
{
"name": "message",
"optional": true,
"readonly": false,
"type": "ToastPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the message's DOM element."
},
{
"name": "content",
"optional": true,
"readonly": false,
"type": "ToastPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the content's DOM element."
},
{
"name": "icon",
"optional": true,
"readonly": false,
"type": "ToastPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
"description": "Uses to pass attributes to the icon's DOM element."
},
{
"name": "text",
"optional": true,
"readonly": false,
"type": "ToastPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the text's DOM element."
},
{
"name": "summary",
"optional": true,
"readonly": false,
"type": "ToastPassThroughType<HTMLAttributes<HTMLSpanElement>>",
"description": "Uses to pass attributes to the summary's DOM element."
},
{
"name": "detail",
"optional": true,
"readonly": false,
"type": "ToastPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the detail's DOM element."
},
{
"name": "button",
"optional": true,
"readonly": false,
"type": "ToastPassThroughType<HTMLAttributes<HTMLButtonElement>>",
"description": "Uses to pass attributes to the button's DOM element."
},
{
"name": "buttonIcon",
"optional": true,
"readonly": false,
"type": "ToastPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
"description": "Uses to pass attributes to the button icon's DOM element."
}
],
"callbacks": []
},
"ToastMessageOptions": {
"description": "Defines message options in Toast component.",
"relatedProp": "",
"props": [
{
"name": "severity",
"optional": true,
"readonly": false,
"type": "\"error\" | \"success\" | \"info\" | \"warn\"",
"description": "Severity level of the message."
},
{
"name": "summary",
"optional": true,
"readonly": false,
"type": "string",
"description": "Summary content of the message."
},
{
"name": "detail",
"optional": true,
"readonly": false,
"type": "any",
"description": "Detail content of the message."
},
{
"name": "closable",
"optional": true,
"readonly": false,
"type": "boolean",
"description": "Whether the message can be closed manually using the close icon."
},
{
"name": "life",
"optional": true,
"readonly": false,
"type": "number",
"description": "Delay in milliseconds to close the message automatically."
},
{
"name": "group",
"optional": true,
"readonly": false,
"type": "string",
"description": "Key of the Toast to display the message."
},
{
"name": "styleClass",
"optional": true,
"readonly": false,
"type": "any",
"description": "Style class of the message."
},
{
"name": "contentStyleClass",
"optional": true,
"readonly": false,
"type": "any",
"description": "Style class of the content."
},
{
"name": "pt",
"optional": true,
"readonly": false,
"type": "ToastPassThroughOptions",
"description": "Uses to pass attributes to DOM elements inside the component."
}
],
"callbacks": []
},
"ToastState": {
"description": "Defines current inline state in Toast component.",
"relatedProp": "",
"props": [
{
"name": "messages",
"optional": false,
"readonly": false,
"type": "any[]",
"description": "Current messages."
}
],
"callbacks": []
},
"ToastMessage": {
"description": "Message options for toast component",
"relatedProp": "",
Expand Down Expand Up @@ -33923,11 +34104,26 @@
"readonly": false,
"type": "CSSProperties",
"description": "Inline style of the message content."
},
{
"name": "pt",
"optional": true,
"readonly": false,
"type": "Omit<ToastPassThroughOptions, \"message\">",
"description": "Uses to pass attributes to DOM elements inside the component."
}
],
"callbacks": []
}
}
},
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"ToastPassThroughType": {
"values": "PassThroughType<T, ToastPassThroughMethodOptions>"
}
}
}
},
"togglebutton": {
Expand Down
98 changes: 98 additions & 0 deletions components/doc/toast/pt/ptdoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import { useRef } from 'react';
import { Button } from '../../../lib/button/Button';
import { Toast } from '../../../lib/toast/Toast';
import { DocSectionCode } from '../../common/docsectioncode';
import { DocSectionText } from '../../common/docsectiontext';

export function PTDoc(props) {
const toast = useRef(null);

const show = () => {
toast.current.show({
severity: 'info',
summary: 'Info',
detail: 'Message Content',
pt: {
root: ({ index }) => ({ className: `bg-yellow-${((index > 5 && 5) || index || 1) * 100}` })
}
});
};

const code = {
basic: `
<Toast
ref={toast}
pt={{
message: ({ index }) => ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` })
}}
/>
<Button onClick={show} label="Show" />
`,
javascript: `
import React, { useRef } from 'react';
import { Button } from 'primereact/button';
import { Toast } from 'primereact/toast';
export default function PTDemo() {
const toast = useRef(null);
const show = () => {
toast.current.show({ severity: 'info', summary: 'Info', detail: 'Message Content' });
};
return (
<div className="card flex justify-content-center">
<Toast
ref={toast}
pt={{
message: ({ index }) => ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` })
}}
/>
<Button onClick={show} label="Show" />
</div>
)
}
`,
typescript: `
import React, { useRef } from 'react';
import { Button } from 'primereact/button';
import { Toast } from 'primereact/toast';
export default function PTDemo() {
const toast = useRef(null);
const show = () => {
toast.current.show({ severity: 'info', summary: 'Info', detail: 'Message Content' });
};
return (
<div className="card flex justify-content-center">
<Toast
ref={toast}
pt={{
message: ({ index }) => ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` })
}}
/>
<Button onClick={show} label="Show" />
</div>
)
}
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<div className="card flex justify-content-center">
<Toast
ref={toast}
pt={{
message: ({ index }) => ({ className: `bg-yellow-${((index > 5 && 5) || index || 1) * 100}` })
}}
/>
<Button onClick={show} label="Show" />
</div>
<DocSectionCode code={code} />
</>
);
}
13 changes: 13 additions & 0 deletions components/doc/toast/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="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="toast" />
</div>
</>
);
};
Loading

0 comments on commit 52ce700

Please sign in to comment.