Refactor #1917 - For CascadeSelect

primefaces · Apr 12, 2021 · 77c5238 · 77c5238
1 parent f5cdda6
commit 77c5238
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/cascadeselect/CascadeSelect.d.ts b/src/components/cascadeselect/CascadeSelect.d.ts
@@ -29,6 +29,7 @@ interface CascadeSelectProps {
     tabIndex?: number;
     ariaLabelledBy?: string;
     appendTo?: HTMLElement;
+    transitionOptions?: object;
     onChange?(e: ChangeParams): void;
     onGroupChange?(e: GroupChangeParams): void;
     onBeforeShow?(): void;

diff --git a/src/components/cascadeselect/CascadeSelect.js b/src/components/cascadeselect/CascadeSelect.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
 import ObjectUtils from '../utils/ObjectUtils';
 import DomHandler from '../utils/DomHandler';
-import { CSSTransition } from "react-transition-group";
+import { CSSTransition } from '../transition/CSSTransition';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import { CascadeSelectSub } from "./CascadeSelectSub";
 import OverlayEventBus from '../overlayeventbus/OverlayEventBus';
@@ -32,6 +32,7 @@ export class CascadeSelect extends Component {
         tabIndex: null,
         ariaLabelledBy: null,
         appendTo: null,
+        transitionOptions: null,
         onChange: null,
         onGroupChange: null,
         onBeforeShow: null,
@@ -60,6 +61,7 @@ export class CascadeSelect extends Component {
         tabIndex: PropTypes.number,
         ariaLabelledBy: PropTypes.string,
         appendTo: PropTypes.any,
+        transitionOptions: PropTypes.object,
         onChange: PropTypes.func,
         onGroupChange: PropTypes.func,
         onBeforeShow: PropTypes.func,
@@ -407,7 +409,7 @@ export class CascadeSelect extends Component {
 
     renderOverlay() {
         const overlay = (
-            <CSSTransition nodeRef={this.overlayRef} classNames="p-connected-overlay" in={this.state.overlayVisible} timeout={{ enter: 120, exit: 100 }}
+            <CSSTransition nodeRef={this.overlayRef} classNames="p-connected-overlay" in={this.state.overlayVisible} timeout={{ enter: 120, exit: 100 }} options={this.props.transitionOptions}
                 unmountOnExit onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}>
                 <div ref={this.overlayRef} className="p-cascadeselect-panel p-component" onClick={this.onPanelClick}>
                     <div className="p-cascadeselect-items-wrapper">

diff --git a/src/showcase/cascadeselect/CascadeSelectDoc.js b/src/showcase/cascadeselect/CascadeSelectDoc.js
@@ -605,6 +605,12 @@ const countryOptionTemplate = (option) => {
                                         <td>null</td>
                                         <td>The template of items.</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>