Refactor #1917 - For Accordion

primefaces · Apr 12, 2021 · 8cd2d24 · 8cd2d24
1 parent e9ba42f
commit 8cd2d24
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/src/components/accordion/Accordion.d.ts b/src/components/accordion/Accordion.d.ts
@@ -29,6 +29,7 @@ interface AccordionProps {
     multiple?: boolean;
     expandIcon?: string;
     collapseIcon?: string;
+    transitionOptions?: object;
     onTabOpen?(e: EventParams): void;
     onTabClose?(e: EventParams): void;
     onTabChange?(e: EventParams): void;

diff --git a/src/components/accordion/Accordion.js b/src/components/accordion/Accordion.js
@@ -1,9 +1,9 @@
-import React, {Component} from 'react';
+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 ObjectUtils from '../utils/ObjectUtils';
+import { CSSTransition } from '../transition/CSSTransition';
 
 export class AccordionTab extends Component {
 
@@ -38,6 +38,7 @@ export class Accordion extends Component {
         multiple: false,
         expandIcon: 'pi pi-chevron-right',
         collapseIcon: 'pi pi-chevron-down',
+        transitionOptions: null,
         onTabOpen: null,
         onTabClose: null,
         onTabChange: null
@@ -51,6 +52,7 @@ export class Accordion extends Component {
         multiple: PropTypes.bool,
         expandIcon: PropTypes.string,
         collapseIcon: PropTypes.string,
+        transitionOptions: PropTypes.object,
         onTabOpen: PropTypes.func,
         onTabClose: PropTypes.func,
         onTabChange: PropTypes.func
@@ -78,9 +80,9 @@ export class Accordion extends Component {
             const selected = this.isSelected(index);
             let newActiveIndex = null;
 
-            if(this.props.multiple) {
+            if (this.props.multiple) {
                 let indexes = (this.props.onTabChange ? this.props.activeIndex : this.state.activeIndex) || [];
-                if(selected)
+                if (selected)
                     indexes = indexes.filter(i => i !== index);
                 else
                     indexes = [...indexes, index];
@@ -92,8 +94,8 @@ export class Accordion extends Component {
             }
 
             let callback = selected ? this.props.onTabClose : this.props.onTabOpen;
-            if(callback) {
-                callback({originalEvent: event, index: index});
+            if (callback) {
+                callback({ originalEvent: event, index: index });
             }
 
             if (this.props.onTabChange) {
@@ -125,7 +127,7 @@ export class Accordion extends Component {
     }
 
     renderTabHeader(tab, selected, index) {
-        const tabHeaderClass = classNames('p-accordion-header', {'p-highlight': selected, 'p-disabled': tab.props.disabled}, tab.props.headerClassName);
+        const tabHeaderClass = classNames('p-accordion-header', { 'p-highlight': selected, 'p-disabled': tab.props.disabled }, tab.props.headerClassName);
         const iconClassName = classNames('p-accordion-toggle-icon', { [`${this.props.expandIcon}`]: !selected, [`${this.props.collapseIcon}`]: selected });
         const id = this.state.id + '_header_' + index;
         const ariaControls = this.state.id + '_content_' + index;
@@ -148,8 +150,8 @@ export class Accordion extends Component {
         const toggleableContentRef = React.createRef();
 
         return (
-            <CSSTransition nodeRef={toggleableContentRef} classNames="p-toggleable-content" timeout={{enter: 1000, exit: 450}} in={selected} unmountOnExit>
-                <div ref={toggleableContentRef} id={id} className={className} style={tab.props.contentStyle} role="region" aria-labelledby={this.state.id + '_header_' +index}>
+            <CSSTransition nodeRef={toggleableContentRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} in={selected} unmountOnExit options={this.props.transitionOptions}>
+                <div ref={toggleableContentRef} id={id} className={className} style={tab.props.contentStyle} role="region" aria-labelledby={this.state.id + '_header_' + index}>
                     <div className="p-accordion-content">
                         {tab.props.children}
                     </div>

diff --git a/src/showcase/accordion/AccordionDoc.js b/src/showcase/accordion/AccordionDoc.js
@@ -595,6 +595,12 @@ import { Accordion, AccordionTab } from 'primereact/accordion';
                                         <td>pi pi-chevron-down</td>
                                         <td>Icon of an expanded tab.</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>
@@ -613,22 +619,22 @@ import { Accordion, AccordionTab } from 'primereact/accordion';
                                     <tr>
                                         <td>onTabOpen</td>
                                         <td>event.originalEvent: browser event  <br />
-                                event.index: Index or indexes of the tab (number or array of numbers).
-                            </td>
+                                            event.index: Index or indexes of the tab (number or array of numbers).
+                                        </td>
                                         <td>Callback to invoke when a tab gets expanded.</td>
                                     </tr>
                                     <tr>
                                         <td>onTabClose</td>
                                         <td>event.originalEvent: browser event  <br />
-                                event.index: Index of the tab
-                            </td>
+                                            event.index: Index of the tab
+                                        </td>
                                         <td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
                                     </tr>
                                     <tr>
                                         <td>onTabChange</td>
                                         <td>event.originalEvent: browser event  <br />
-                                event.index: Index of the tab
-                            </td>
+                                            event.index: Index of the tab
+                                        </td>
                                         <td>Callback to invoke when state of the accordion changes.</td>
                                     </tr>
                                 </tbody>