Refactor #1917 - For Toast

primefaces · Apr 12, 2021 · 1695d3b · 1695d3b
1 parent 2db3658
commit 1695d3b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/components/toast/Toast.d.ts b/src/components/toast/Toast.d.ts
@@ -20,6 +20,7 @@ interface ToastProps {
     style?: object;
     baseZIndex?: number;
     position?: PositionType;
+    transitionOptions?: object;
     onClick?(message: ToastMessage): void;
     onRemove?(message: ToastMessage): void;
 }

diff --git a/src/components/toast/Toast.js b/src/components/toast/Toast.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
 import { ToastMessage } from './ToastMessage';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { TransitionGroup } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import { ZIndexUtils } from '../utils/ZIndexUtils';
 
 let messageIdx = 0;
@@ -15,6 +16,7 @@ export class Toast extends Component {
         style: null,
         baseZIndex: 0,
         position: 'top-right',
+        transitionOptions: null,
         onClick: null,
         onRemove: null
     }
@@ -25,6 +27,7 @@ export class Toast extends Component {
         style: PropTypes.object,
         baseZIndex: PropTypes.number,
         position: PropTypes.string,
+        transitionOptions: PropTypes.object,
         onClick: PropTypes.func,
         onRemove: PropTypes.func
     };
@@ -96,7 +99,7 @@ export class Toast extends Component {
                             const messageRef = React.createRef();
 
                             return (
-                                <CSSTransition nodeRef={messageRef} key={message.id} classNames="p-toast-message" unmountOnExit timeout={{ enter: 300, exit: 300 }}>
+                                <CSSTransition nodeRef={messageRef} key={message.id} classNames="p-toast-message" unmountOnExit timeout={{ enter: 300, exit: 300 }} options={this.props.transitionOptions}>
                                     <ToastMessage ref={messageRef} message={message} onClick={this.props.onClick} onClose={this.onClose} />
                                 </CSSTransition>
                             )

diff --git a/src/showcase/toast/ToastDoc.js b/src/showcase/toast/ToastDoc.js
@@ -615,6 +615,12 @@ toast.current.show({life: 5000, severity: 'error', summary: 'Error Message', det
                                         <td>topright</td>
                                         <td>Position of the toast in viewport, valid values are "top-right", "top-left", "bottom-left" and "bottom-right".</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>