Refactor #1917 - For Messages

primefaces · Apr 12, 2021 · 4614d05 · 4614d05
1 parent 822661f
commit 4614d05
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/components/messages/Messages.d.ts b/src/components/messages/Messages.d.ts
@@ -16,6 +16,7 @@ interface MessagesProps {
     id?: string;
     className?: string;
     style?: object;
+    transitionOptions?: object;
     onRemove?(message: MessageOptions): void;
     onClick?(message: MessageOptions): void;
 }

diff --git a/src/components/messages/Messages.js b/src/components/messages/Messages.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { UIMessage } from './UIMessage';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { TransitionGroup } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 
 let messageIdx = 0;
 
@@ -11,6 +12,7 @@ export class Messages extends Component {
         id: null,
         className: null,
         style: null,
+        transitionOptions: null,
         onRemove: null,
         onClick: null
     }
@@ -19,6 +21,7 @@ export class Messages extends Component {
         id: PropTypes.string,
         className: PropTypes.string,
         style: PropTypes.object,
+        transitionOptions: PropTypes.object,
         onRemove: PropTypes.func,
         onClick: PropTypes.func
     };
@@ -85,7 +88,7 @@ export class Messages extends Component {
                             const messageRef = React.createRef();
 
                             return (
-                                <CSSTransition nodeRef={messageRef} key={message.id} classNames="p-message" unmountOnExit timeout={{ enter: 300, exit: 300 }}>
+                                <CSSTransition nodeRef={messageRef} key={message.id} classNames="p-message" unmountOnExit timeout={{ enter: 300, exit: 300 }} options={this.props.transitionOptions}>
                                     <UIMessage ref={messageRef} message={message} onClick={this.props.onClick} onClose={this.onClose} />
                                 </CSSTransition>
                             )

diff --git a/src/showcase/messages/MessagesDoc.js b/src/showcase/messages/MessagesDoc.js
@@ -605,6 +605,12 @@ messages.current.show({ life: 5000, severity: 'error', summary: 'Error Message',
                                         <td>null</td>
                                         <td>Inline style of the element.</td>
                                     </tr>
+                                    <tr>
+                                        <td>transitionOptions</td>
+                                        <td>object</td>
+                                        <td>null</td>
+                                        <td>The properties of <a href="https://reactcommunity.org/react-transition-group/css-transition" rel="noopener noreferrer" target="_blank">CSSTransition</a> can be customized, except for "nodeRef" and "in" properties.</td>
+                                    </tr>
                                 </tbody>
                             </table>
                         </div>