Refactor #1917 - For TieredMenu

primefaces · Apr 12, 2021 · 2db3658 · 2db3658
1 parent 44ebc12
commit 2db3658
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/tieredmenu/TieredMenu.d.ts b/src/components/tieredmenu/TieredMenu.d.ts
@@ -10,6 +10,7 @@ interface TieredMenuProps {
     autoZIndex?: boolean;
     bazeZIndex?: number;
     appendTo?: HTMLElement;
+    transitionOptions?: object;
     onShow?(e: React.SyntheticEvent): void;
     onHide?(e: React.SyntheticEvent): void;
 }

diff --git a/src/components/tieredmenu/TieredMenu.js b/src/components/tieredmenu/TieredMenu.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
 import DomHandler from '../utils/DomHandler';
 import { TieredMenuSub } from './TieredMenuSub';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import OverlayEventBus from '../overlayeventbus/OverlayEventBus';
 import { Portal } from '../portal/Portal';
@@ -20,6 +20,7 @@ export class TieredMenu extends Component {
         autoZIndex: true,
         baseZIndex: 0,
         appendTo: null,
+        transitionOptions: null,
         onShow: null,
         onHide: null
     };
@@ -33,6 +34,7 @@ export class TieredMenu extends Component {
         autoZIndex: PropTypes.bool,
         baseZIndex: PropTypes.number,
         appendTo: PropTypes.any,
+        transitionOptions: PropTypes.object,
         onShow: PropTypes.func,
         onHide: PropTypes.func
     };
@@ -193,7 +195,7 @@ export class TieredMenu extends Component {
         const className = classNames('p-tieredmenu p-component', { 'p-tieredmenu-overlay': this.props.popup }, this.props.className);
 
         return (
-            <CSSTransition nodeRef={this.menuRef} classNames="p-connected-overlay" in={this.state.visible} timeout={{ enter: 120, exit: 100 }}
+            <CSSTransition nodeRef={this.menuRef} 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.menuRef} id={this.props.id} className={className} style={this.props.style} onClick={this.onPanelClick}>
                     <TieredMenuSub model={this.props.model} root popup={this.props.popup} />

diff --git a/src/showcase/tieredmenu/TieredMenuDoc.js b/src/showcase/tieredmenu/TieredMenuDoc.js
@@ -713,6 +713,12 @@ const items = [
                                         <td>document.body</td>
                                         <td>DOM element instance where the overlay menu should be mounted.</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>