Refactor #1917 - For Fieldset

primefaces · Apr 12, 2021 · 14486c5 · 14486c5
1 parent f30e86f
commit 14486c5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/fieldset/Fieldset.d.ts b/src/components/fieldset/Fieldset.d.ts
@@ -12,6 +12,7 @@ interface FieldsetProps {
     style?: object;
     toggleable?: boolean;
     collapsed?: boolean;
+    transitionOptions?: object;
     onExpand?(event: React.MouseEvent<HTMLElement>): void;
     onCollapse?(event: React.MouseEvent<HTMLElement>): void;
     onToggle?(e: ToggleParams): void;

diff --git a/src/components/fieldset/Fieldset.js b/src/components/fieldset/Fieldset.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 { Ripple } from '../ripple/Ripple';
 
 export class Fieldset extends Component {
@@ -14,6 +14,7 @@ export class Fieldset extends Component {
         style: null,
         toggleable: null,
         collapsed: null,
+        transitionOptions: null,
         onExpand: null,
         onCollapse: null,
         onToggle: null,
@@ -27,6 +28,7 @@ export class Fieldset extends Component {
         style: PropTypes.object,
         toggleable: PropTypes.bool,
         collapsed: PropTypes.bool,
+        transitionOptions: PropTypes.object,
         onExpand: PropTypes.func,
         onCollapse: PropTypes.func,
         onToggle: PropTypes.func,
@@ -106,7 +108,7 @@ export class Fieldset 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} id={id} className="p-toggleable-content" aria-hidden={collapsed} role="region" aria-labelledby={this.state.id + '_header'}>
                     <div className="p-fieldset-content">
                         {this.props.children}

diff --git a/src/showcase/fieldset/FieldsetDoc.js b/src/showcase/fieldset/FieldsetDoc.js
@@ -217,6 +217,12 @@ import { Fieldset } from 'primereact/fieldset';
                                         <td>false</td>
                                         <td>Defines the default visibility state of the content.</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>