From 52ce700ee20bf072d25bcfddad2913ca10d8556d Mon Sep 17 00:00:00 2001 From: habubey Date: Thu, 18 May 2023 14:41:30 +0300 Subject: [PATCH] Refactor #4392 - for Toast --- components/doc/common/apidoc/index.json | 196 ++++++++++++++++++++++++ components/doc/toast/pt/ptdoc.js | 98 ++++++++++++ components/doc/toast/pt/wireframe.js | 13 ++ components/lib/toast/Toast.js | 40 ++++- components/lib/toast/ToastBase.js | 10 +- components/lib/toast/ToastMessage.js | 122 ++++++++++++--- components/lib/toast/toast.d.ts | 122 ++++++++++++++- pages/toast/index.js | 22 ++- 8 files changed, 589 insertions(+), 34 deletions(-) create mode 100644 components/doc/toast/pt/ptdoc.js create mode 100644 components/doc/toast/pt/wireframe.js diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 3776ff6f32..02dc003526 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -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." } ] }, @@ -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>", + "description": "Uses to pass attributes to the root's DOM element." + }, + { + "name": "message", + "optional": true, + "readonly": false, + "type": "ToastPassThroughType>", + "description": "Uses to pass attributes to the message's DOM element." + }, + { + "name": "content", + "optional": true, + "readonly": false, + "type": "ToastPassThroughType>", + "description": "Uses to pass attributes to the content's DOM element." + }, + { + "name": "icon", + "optional": true, + "readonly": false, + "type": "ToastPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the icon's DOM element." + }, + { + "name": "text", + "optional": true, + "readonly": false, + "type": "ToastPassThroughType>", + "description": "Uses to pass attributes to the text's DOM element." + }, + { + "name": "summary", + "optional": true, + "readonly": false, + "type": "ToastPassThroughType>", + "description": "Uses to pass attributes to the summary's DOM element." + }, + { + "name": "detail", + "optional": true, + "readonly": false, + "type": "ToastPassThroughType>", + "description": "Uses to pass attributes to the detail's DOM element." + }, + { + "name": "button", + "optional": true, + "readonly": false, + "type": "ToastPassThroughType>", + "description": "Uses to pass attributes to the button's DOM element." + }, + { + "name": "buttonIcon", + "optional": true, + "readonly": false, + "type": "ToastPassThroughType | SVGProps>", + "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": "", @@ -33923,11 +34104,26 @@ "readonly": false, "type": "CSSProperties", "description": "Inline style of the message content." + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "Omit", + "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" + } + } } }, "togglebutton": { diff --git a/components/doc/toast/pt/ptdoc.js b/components/doc/toast/pt/ptdoc.js new file mode 100644 index 0000000000..f5694f583d --- /dev/null +++ b/components/doc/toast/pt/ptdoc.js @@ -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: ` + ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` }) + }} + /> + @@ -87,36 +112,68 @@ export const ToastMessage = React.memo( if (messageInfo) { const contentEl = ObjectUtils.getJSXElement(content, { message: messageInfo.message, onClick, onClose }); const iconClassName = 'p-toast-message-icon'; + const iconProps = mergeProps( + { + className: iconClassName + }, + ptm('icon', parentParams), + ptmo(pt, 'icon', params) + ); + let icon = _icon; if (!_icon) { switch (severity) { case 'info': - icon = ; + icon = ; break; case 'warn': - icon = ; + icon = ; break; case 'error': - icon = ; + icon = ; break; case 'success': - icon = ; + icon = ; break; default: break; } } - const messageIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props }); + const messageIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props }); + + const textProps = mergeProps( + { + className: 'p-toast-message-text' + }, + ptm('text', parentParams), + ptmo(pt, 'text', params) + ); + + const summaryProps = mergeProps( + { + className: 'p-toast-summary' + }, + ptm('summary', parentParams), + ptmo(pt, 'summary', params) + ); + + const detailProps = mergeProps( + { + className: 'p-toast-detail' + }, + ptm('detail', parentParams), + ptmo(pt, 'detail', params) + ); return ( contentEl || ( <> {messageIcon} -
- {summary} - {detail &&
{detail}
} +
+ {summary} + {detail &&
{detail}
}
) @@ -137,9 +194,34 @@ export const ToastMessage = React.memo( const message = createMessage(); const closeIcon = createCloseIcon(); + const messageProps = mergeProps( + { + ref, + className, + style, + role: 'alert', + 'aria-live': 'assertive', + 'aria-atomic': 'true', + onClick, + onMouseEnter: onMouseEnter, + onMouseLeave: onMouseLeave + }, + ptm('message', parentParams), + ptmo(pt, 'root', params) + ); + + const contentProps = mergeProps( + { + className: contentClassName, + style: contentStyle + }, + ptm('content', parentParams), + ptmo(pt, 'content', params) + ); + return ( -
-
+
+
{message} {closeIcon}
diff --git a/components/lib/toast/toast.d.ts b/components/lib/toast/toast.d.ts index 9af3312d0f..f2c370146b 100644 --- a/components/lib/toast/toast.d.ts +++ b/components/lib/toast/toast.d.ts @@ -9,7 +9,115 @@ */ import * as React from 'react'; import { CSSTransitionProps } from '../csstransition'; -import { IconType } from '../utils/utils'; +import { IconType, PassThroughType } from '../utils/utils'; + +export declare type ToastPassThroughType = PassThroughType; + +/** + * Custom passthrough(pt) option method. + */ +export interface ToastPassThroughMethodOptions { + props: ToastProps; + state: ToastState; +} + +/** + * Custom passthrough(pt) options. + * @see {@link ToastProps.pt} + */ +export interface ToastPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: ToastPassThroughType>; + /** + * Uses to pass attributes to the message's DOM element. + */ + message?: ToastPassThroughType>; + /** + * Uses to pass attributes to the content's DOM element. + */ + content?: ToastPassThroughType>; + /** + * Uses to pass attributes to the icon's DOM element. + */ + icon?: ToastPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the text's DOM element. + */ + text?: ToastPassThroughType>; + /** + * Uses to pass attributes to the summary's DOM element. + */ + summary?: ToastPassThroughType>; + /** + * Uses to pass attributes to the detail's DOM element. + */ + detail?: ToastPassThroughType>; + /** + * Uses to pass attributes to the button's DOM element. + */ + button?: ToastPassThroughType>; + /** + * Uses to pass attributes to the button icon's DOM element. + */ + buttonIcon?: ToastPassThroughType | React.HTMLAttributes>; +} + +/** + * Defines message options in Toast component. + */ +export interface ToastMessageOptions { + /** + * Severity level of the message. + * @defaultValue info + */ + severity?: 'success' | 'info' | 'warn' | 'error' | undefined; + /** + * Summary content of the message. + */ + summary?: string | undefined; + /** + * Detail content of the message. + */ + detail?: any | undefined; + /** + * Whether the message can be closed manually using the close icon. + * @defaultValue true + */ + closable?: boolean | undefined; + /** + * Delay in milliseconds to close the message automatically. + */ + life?: number | undefined; + /** + * Key of the Toast to display the message. + */ + group?: string | undefined; + /** + * Style class of the message. + */ + styleClass?: any; + /** + * Style class of the content. + */ + contentStyleClass?: any; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {ToastPassThroughOptions} + */ + pt?: ToastPassThroughOptions; +} + +/** + * Defines current inline state in Toast component. + */ +export interface ToastState { + /** + * Current messages. + */ + messages: any[]; +} /** * Message options for toast component @@ -73,13 +181,18 @@ export interface ToastMessage { * Inline style of the message content. */ contentStyle?: React.CSSProperties | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {Omit} + */ + pt?: Omit; } /** * Defines valid properties in Toast component. In addition to these, all properties of HTMLDivElement can be used in this component. * @group Properties */ -export interface ToastProps extends Omit, HTMLDivElement>, 'ref'> { +export interface ToastProps extends Omit, HTMLDivElement>, 'ref' | 'pt'> { /** * Base zIndex value to add to initial layering of PrimeReact components which start from 1000. * @defaultValue 0 @@ -122,6 +235,11 @@ export interface ToastProps extends Omit { component: AccessibilityDoc } ]; + const ptDocs = [ + { + id: 'pt.wireframe', + label: 'Wireframe', + component: Wireframe + }, + { + id: 'pt.toast.options', + label: 'Toast PT Options', + component: DocApiTable + }, + { + id: 'pt.demo', + label: 'Example', + component: PTDoc + } + ]; - return ; + return ; }; export default ToastDemo;