Fixed #3209 - Toast: Allow us to specify our own ids for each ToastMe…

…ssage
primefaces · Aug 29, 2022 · a9ff149 · a9ff149
1 parent 0b945e5
commit a9ff149
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
@@ -19,13 +19,16 @@ export const Toast = React.memo(
                 let messages;
 
                 if (Array.isArray(value)) {
-                    for (let i = 0; i < value.length; i++) {
-                        value[i].id = messageIdx++;
-                        messages = [...messagesState, ...value];
-                    }
+                    const multipleMessages = value.reduce((acc, message) => {
+                        acc.push({ _pId: messageIdx++, message });
+
+                        return acc;
+                    }, []);
+
+                    messages = messagesState ? [...messagesState, ...multipleMessages] : multipleMessages;
                 } else {
-                    value.id = messageIdx++;
-                    messages = messagesState ? [...messagesState, value] : [value];
+                    const message = { _pId: messageIdx++, message: value };
+                    messages = messagesState ? [...messagesState, message] : [message];
                 }
 
                 messagesState.length === 0 && ZIndexUtils.set('toast', containerRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['toast']);
@@ -44,11 +47,11 @@ export const Toast = React.memo(
             setMessagesState(replaced);
         };
 
-        const onClose = (message) => {
-            const messages = messagesState.filter((msg) => msg.id !== message.id);
+        const onClose = (messageInfo) => {
+            const messages = messagesState.filter((msg) => msg._pId !== messageInfo._pId);
             setMessagesState(messages);
 
-            props.onRemove && props.onRemove(message);
+            props.onRemove && props.onRemove(messageInfo.message);
         };
 
         const onEntered = () => {
@@ -80,12 +83,12 @@ export const Toast = React.memo(
             return (
                 <div ref={containerRef} id={props.id} className={className} style={props.style} {...otherProps}>
                     <TransitionGroup>
-                        {messagesState.map((message) => {
+                        {messagesState.map((messageInfo) => {
                             const messageRef = React.createRef();
 
                             return (
-                                <CSSTransition nodeRef={messageRef} key={message.id} classNames="p-toast-message" unmountOnExit timeout={{ enter: 300, exit: 300 }} onEntered={onEntered} onExited={onExited} options={props.transitionOptions}>
-                                    <ToastMessage ref={messageRef} message={message} onClick={props.onClick} onClose={onClose} />
+                                <CSSTransition nodeRef={messageRef} key={messageInfo._pId} classNames="p-toast-message" unmountOnExit timeout={{ enter: 300, exit: 300 }} onEntered={onEntered} onExited={onExited} options={props.transitionOptions}>
+                                    <ToastMessage ref={messageRef} messageInfo={messageInfo} onClick={props.onClick} onClose={onClose} />
                                 </CSSTransition>
                             );
                         })}

diff --git a/components/lib/toast/ToastMessage.js b/components/lib/toast/ToastMessage.js
@@ -5,7 +5,8 @@ import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const ToastMessage = React.memo(
     React.forwardRef((props, ref) => {
-        const { severity, content, summary, detail, closable, life, sticky, className: _className, style, contentClassName: _contentClassName, contentStyle } = props.message;
+        const messageInfo = props.messageInfo;
+        const { severity, content, summary, detail, closable, life, sticky, className: _className, style, contentClassName: _contentClassName, contentStyle } = messageInfo.message;
 
         const [clearTimer] = useTimeout(
             () => {
@@ -17,12 +18,12 @@ export const ToastMessage = React.memo(
 
         const onClose = () => {
             clearTimer();
-            props.onClose && props.onClose(props.message);
+            props.onClose && props.onClose(messageInfo);
         };
 
         const onClick = (event) => {
             if (props.onClick && !(DomHandler.hasClass(event.target, 'p-toast-icon-close') || DomHandler.hasClass(event.target, 'p-toast-icon-close-icon'))) {
-                props.onClick(props.message);
+                props.onClick(messageInfo.message);
             }
         };
 
@@ -40,8 +41,8 @@ export const ToastMessage = React.memo(
         };
 
         const createMessage = () => {
-            if (props.message) {
-                const contentEl = ObjectUtils.getJSXElement(content, { ...props, onClose });
+            if (messageInfo) {
+                const contentEl = ObjectUtils.getJSXElement(content, { message: messageInfo.message, onClick, onClose });
                 const iconClassName = classNames('p-toast-message-icon pi', {
                     'pi-info-circle': severity === 'info',
                     'pi-exclamation-triangle': severity === 'warn',