Refactor #1917 - For ConfirmPopup

primefaces · Apr 12, 2021 · a2d80d2 · a2d80d2
1 parent 88d526e
commit a2d80d2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/confirmpopup/ConfirmPopup.d.ts b/src/components/confirmpopup/ConfirmPopup.d.ts
@@ -18,6 +18,7 @@ interface ConfirmPopupProps {
     appendTo?: HTMLElement;
     dismissable?: boolean;
     footer?: TemplateType;
+    transitionOptions?: object;
     onHide?(result: string): void;
     accept?(): void;
     reject?(): void;

diff --git a/src/components/confirmpopup/ConfirmPopup.js b/src/components/confirmpopup/ConfirmPopup.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
 import { Button } from '../button/Button';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
@@ -66,7 +66,8 @@ export class ConfirmPopup extends Component {
         footer: null,
         onHide: null,
         accept: null,
-        reject: null
+        reject: null,
+        transitionOptions: null
     }
 
     static propTypes = {
@@ -87,7 +88,8 @@ export class ConfirmPopup extends Component {
         footer: PropTypes.any,
         onHide: PropTypes.func,
         accept: PropTypes.func,
-        reject: PropTypes.func
+        reject: PropTypes.func,
+        transitionOptions: PropTypes.object
     }
 
     constructor(props) {
@@ -331,7 +333,7 @@ export class ConfirmPopup extends Component {
         const footer = this.renderFooter();
 
         return (
-            <CSSTransition nodeRef={this.overlayRef} classNames="p-connected-overlay" in={this.state.visible} timeout={{ enter: 120, exit: 100 }}
+            <CSSTransition nodeRef={this.overlayRef} classNames="p-connected-overlay" in={this.state.visible} timeout={{ enter: 120, exit: 100 }} options={this.props.transitionOptions}
                 unmountOnExit onEnter={this.onEnter} onEntered={this.onEntered} onExit={this.onExit} onExited={this.onExited}>
                 <div ref={this.overlayRef} id={this.props.id} className={className} style={this.props.style} onClick={this.onPanelClick}>
                     {content}

diff --git a/src/showcase/confirmpopup/ConfirmPopupDoc.js b/src/showcase/confirmpopup/ConfirmPopupDoc.js
@@ -358,6 +358,12 @@ const confirm = (event) => {
                                         <td>null</td>
                                         <td>Style class 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>