Refactor #1917 - For PanelMenu

primefaces · Apr 12, 2021 · 8dc6139 · 8dc6139
1 parent 959eab0
commit 8dc6139
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/panelmenu/PanelMenu.d.ts b/src/components/panelmenu/PanelMenu.d.ts
@@ -7,6 +7,7 @@ interface PanelMenuProps {
     style?: object;
     className?: string;
     multiple?: boolean;
+    transitionOptions?: object;
 }
 
 export class PanelMenu extends React.Component<PanelMenuProps, any> { }
diff --git a/src/components/panelmenu/PanelMenu.js b/src/components/panelmenu/PanelMenu.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
 import UniqueComponentId from '../utils/UniqueComponentId';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import ObjectUtils from '../utils/ObjectUtils';
 
 class PanelMenuSub extends Component {
@@ -190,15 +190,17 @@ export class PanelMenu extends Component {
         model: null,
         style: null,
         className: null,
-        multiple: false
+        multiple: false,
+        transitionOptions: null
     };
 
     static propTypes = {
         id: PropTypes.string,
         model: PropTypes.array,
         style: PropTypes.object,
         className: PropTypes.string,
-        multiple: PropTypes.bool
+        multiple: PropTypes.bool,
+        transitionOptions: PropTypes.object
     };
 
     constructor(props) {
@@ -320,7 +322,7 @@ export class PanelMenu extends Component {
                         <span className="p-menuitem-text">{item.label}</span>
                     </a>
                 </div>
-                <CSSTransition nodeRef={menuContentRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} in={active} unmountOnExit>
+                <CSSTransition nodeRef={menuContentRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} in={active} unmountOnExit options={this.props.transitionOptions}>
                     <div ref={menuContentRef} className={contentWrapperClassName} role="region" id={this.state.id + '_content'} aria-labelledby={this.state.id + '_header'}>
                         <div className="p-panelmenu-content">
                             <PanelMenuSub model={item.items} className="p-panelmenu-root-submenu" multiple={this.props.multiple} />

diff --git a/src/showcase/panelmenu/PanelMenuDoc.js b/src/showcase/panelmenu/PanelMenuDoc.js
@@ -612,6 +612,12 @@ const items = [
                                         <td>false</td>
                                         <td>Whether multiple tabs can be activated at the same time or not.</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>