Refactor #1917 - For Dropdown

primefaces · Apr 12, 2021 · f30e86f · f30e86f
1 parent 66fed03
commit f30e86f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
@@ -67,6 +67,7 @@ interface DropdownProps {
     tooltipOptions?: TooltipOptions;
     ariaLabel?: string;
     ariaLabelledBy?: string;
+    transitionOptions?: object;
     onChange?(e: ChangeParams): void;
     onFocus?(event: React.FormEvent<HTMLInputElement>): void;
     onBlur?(event: React.FormEvent<HTMLInputElement>): void;

diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
@@ -56,6 +56,7 @@ export class Dropdown extends Component {
         tooltipOptions: null,
         ariaLabel: null,
         ariaLabelledBy: null,
+        transitionOptions: null,
         onChange: null,
         onFocus: null,
         onBlur: null,
@@ -107,6 +108,7 @@ export class Dropdown extends Component {
         tooltipOptions: PropTypes.object,
         ariaLabel: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
+        transitionOptions: PropTypes.object,
         onChange: PropTypes.func,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
@@ -1025,7 +1027,7 @@ export class Dropdown extends Component {
                 {clearIcon}
                 {dropdownIcon}
                 <DropdownPanel ref={this.overlayRef} appendTo={this.props.appendTo} panelStyle={this.props.panelStyle} panelClassName={this.props.panelClassName}
-                    scrollHeight={this.props.scrollHeight} filter={filterElement} onClick={this.onPanelClick}
+                    scrollHeight={this.props.scrollHeight} filter={filterElement} onClick={this.onPanelClick} transitionOptions={this.props.transitionOptions}
                     in={this.state.overlayVisible} onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}>
                     {items}
                 </DropdownPanel>

diff --git a/src/components/dropdown/DropdownPanel.js b/src/components/dropdown/DropdownPanel.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import { Portal } from '../portal/Portal';
 
 class DropdownPanelComponent extends Component {
@@ -28,7 +28,7 @@ class DropdownPanelComponent extends Component {
         let className = classNames('p-dropdown-panel p-component', this.props.panelClassName);
 
         return (
-            <CSSTransition nodeRef={this.props.forwardRef} classNames="p-connected-overlay" in={this.props.in} timeout={{ enter: 120, exit: 100 }}
+            <CSSTransition nodeRef={this.props.forwardRef} classNames="p-connected-overlay" in={this.props.in} timeout={{ enter: 120, exit: 100 }} options={this.props.transitionOptions}
                 unmountOnExit onEnter={this.props.onEnter} onEntering={this.props.onEntering} onEntered={this.props.onEntered} onExit={this.props.onExit} onExited={this.props.onExited}>
                 <div ref={this.props.forwardRef} className={className} style={this.props.panelStyle} onClick={this.props.onClick}>
                     {this.props.filter}

diff --git a/src/showcase/dropdown/DropdownDoc.js b/src/showcase/dropdown/DropdownDoc.js
@@ -906,6 +906,12 @@ const groupedCities = [
                                         <td>null</td>
                                         <td>Contains the element IDs of labels.</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>