Refactor #1917 - For Panel

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

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/panel/Panel.d.ts b/src/components/panel/Panel.d.ts
@@ -35,6 +35,7 @@ interface PanelProps {
     expandIcon?: string;
     collapseIcon?: string;
     icons?: IconsTemplateType;
+    transitionOptions?: object;
     onExpand?(event: React.SyntheticEvent): void;
     onCollapse?(event: React.SyntheticEvent): void;
     onToggle?(e: ToggleParams): void;

diff --git a/src/components/panel/Panel.js b/src/components/panel/Panel.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import { classNames } from '../utils/ClassNames';
 import UniqueComponentId from '../utils/UniqueComponentId';
 import ObjectUtils from '../utils/ObjectUtils';
@@ -19,6 +19,7 @@ export class Panel extends Component {
         expandIcon: 'pi pi-plus',
         collapseIcon: 'pi pi-minus',
         icons: null,
+        transitionOptions: null,
         onExpand: null,
         onCollapse: null,
         onToggle: null
@@ -35,6 +36,7 @@ export class Panel extends Component {
         expandIcon: PropTypes.string,
         collapseIcon: PropTypes.string,
         icons: PropTypes.any,
+        transitionOptions: PropTypes.object,
         onExpand: PropTypes.func,
         onCollapse: PropTypes.func,
         onToggle: PropTypes.func
@@ -174,7 +176,7 @@ export class Panel extends Component {
         const id = this.state.id + '_content';
 
         return (
-            <CSSTransition nodeRef={this.contentRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} in={!collapsed} unmountOnExit>
+            <CSSTransition nodeRef={this.contentRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} in={!collapsed} unmountOnExit options={this.props.transitionOptions}>
                 <div ref={this.contentRef} className="p-toggleable-content" aria-hidden={collapsed} role="region" id={id} aria-labelledby={this.state.id + '_header'}>
                     <div className="p-panel-content">
                         {this.props.children}

diff --git a/src/showcase/panel/PanelDoc.js b/src/showcase/panel/PanelDoc.js
@@ -343,6 +343,12 @@ template: (options) => {
                             <td>false</td>
                             <td>Defines the initial state of panel content, supports one or two-way binding as well.</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>