Refactor #1917 - For OverlayPanel

primefaces · Apr 12, 2021 · b5ba23a · b5ba23a
1 parent 618b270
commit b5ba23a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/overlaypanel/OverlayPanel.d.ts b/src/components/overlaypanel/OverlayPanel.d.ts
@@ -15,6 +15,7 @@ interface OverlayPanelProps {
     appendTo?: HTMLElement;
     ariaCloseLabel?: string;
     breakpoints?: Breakpoints;
+    transitionOptions?: object;
     onHide?(): void;
 }
 

diff --git a/src/components/overlaypanel/OverlayPanel.js b/src/components/overlaypanel/OverlayPanel.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
 import DomHandler from '../utils/DomHandler';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import { Ripple } from '../ripple/Ripple';
 import UniqueComponentId from '../utils/UniqueComponentId';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
@@ -21,6 +21,7 @@ export class OverlayPanel extends Component {
         appendTo: null,
         breakpoints: null,
         ariaCloseLabel: 'close',
+        transitionOptions: null,
         onHide: null
     }
 
@@ -33,6 +34,7 @@ export class OverlayPanel extends Component {
         appendTo: PropTypes.any,
         breakpoints: PropTypes.object,
         ariaCloseLabel: PropTypes.string,
+        transitionOptions: PropTypes.object,
         onHide: PropTypes.func
     }
 
@@ -279,7 +281,7 @@ export class OverlayPanel extends Component {
         let closeIcon = this.renderCloseIcon();
 
         return (
-            <CSSTransition nodeRef={this.overlayRef} classNames="p-overlaypanel" in={this.state.visible} timeout={{ enter: 120, exit: 100 }}
+            <CSSTransition nodeRef={this.overlayRef} classNames="p-overlaypanel" 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}>
                     <div className="p-overlaypanel-content">

diff --git a/src/showcase/overlaypanel/OverlayPanelDoc.js b/src/showcase/overlaypanel/OverlayPanelDoc.js
@@ -352,6 +352,12 @@ import { OverlayPanel } from 'primereact/overlaypanel';
                             <td>null</td>
                             <td>Object literal to define widths per screen size.</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>