Refactor #1917 - For MultiSelect

primefaces · Apr 12, 2021 · 618b270 · 618b270
1 parent 4614d05
commit 618b270
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
@@ -90,6 +90,7 @@ interface MultiSelectProps {
     selectedItemTemplate?: SelectedItemTemplateType;
     panelHeaderTemplate?: PanelHeaderTemplateType;
     panelFooterTemplate?: PanelFooterTemplateType;
+    transitionOptions?: object;
     onChange?(e: ChangeParams): void;
     onFocus?(event: React.FormEvent<HTMLInputElement>): void;
     onBlur?(event: React.FormEvent<HTMLInputElement>): void;

diff --git a/src/components/multiselect/MultiSelect.js b/src/components/multiselect/MultiSelect.js
@@ -58,6 +58,7 @@ export class MultiSelect extends Component {
         selectedItemTemplate: null,
         panelHeaderTemplate: null,
         panelFooterTemplate: null,
+        transitionOptions: null,
         onChange: null,
         onFocus: null,
         onBlur: null
@@ -107,6 +108,7 @@ export class MultiSelect extends Component {
         selectedItemTemplate: PropTypes.any,
         panelHeaderTemplate: PropTypes.any,
         panelFooterTemplate: PropTypes.any,
+        transitionOptions: PropTypes.object,
         onChange: PropTypes.func,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func
@@ -905,7 +907,7 @@ export class MultiSelect extends Component {
                     <span className="p-multiselect-trigger-icon pi pi-chevron-down p-c"></span>
                 </div>
                 <MultiSelectPanel ref={this.overlayRef} header={header} footer={footer} appendTo={this.props.appendTo} onClick={this.onPanelClick}
-                    scrollHeight={this.props.scrollHeight} panelClassName={panelClassName} panelStyle={this.props.panelStyle}
+                    scrollHeight={this.props.scrollHeight} panelClassName={panelClassName} panelStyle={this.props.panelStyle} transitionOptions={this.props.transitionOptions}
                     in={this.state.overlayVisible} onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}>
                     {items}
                 </MultiSelectPanel>

diff --git a/src/components/multiselect/MultiSelectPanel.js b/src/components/multiselect/MultiSelectPanel.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 MultiSelectPanelComponent extends Component {
@@ -13,7 +13,7 @@ class MultiSelectPanelComponent extends Component {
         onClick: null,
         scrollHeight: null,
         panelClassName: null,
-        panelStyle: null,
+        panelStyle: null
     };
 
     static propTypes = {
@@ -23,14 +23,14 @@ class MultiSelectPanelComponent extends Component {
         onClick: PropTypes.func,
         scrollHeight: PropTypes.string,
         panelClassName: PropTypes.string,
-        panelStyle: PropTypes.object,
+        panelStyle: PropTypes.object
     };
 
     renderElement() {
         const panelClassName = classNames('p-multiselect-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} onEntered={this.props.onEntered} onExit={this.props.onExit} onExited={this.props.onExited}>
                 <div ref={this.props.forwardRef} className={panelClassName} style={this.props.panelStyle} onClick={this.props.onClick}>
                     {this.props.header}

diff --git a/src/showcase/multiselect/MultiSelectDoc.js b/src/showcase/multiselect/MultiSelectDoc.js
@@ -921,6 +921,12 @@ const groupedCities = [
                             <td>comma</td>
                             <td>Used mode to display the selected item. Valid values are 'comma' and 'chip'.</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>