Refactor #1917 - For SplitButton

primefaces · Apr 12, 2021 · 44ebc12 · 44ebc12
1 parent 57d69db
commit 44ebc12
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/src/components/splitbutton/SplitButton.d.ts b/src/components/splitbutton/SplitButton.d.ts
@@ -19,6 +19,7 @@ interface SplitButtonProps {
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     buttonTemplate?: ButtonTemplateType;
+    transitionOptions?: object;
     onClick?(event: React.MouseEvent<HTMLElement>): void;
 }
 

diff --git a/src/components/splitbutton/SplitButton.js b/src/components/splitbutton/SplitButton.js
@@ -29,6 +29,7 @@ export class SplitButton extends Component {
         tooltip: null,
         tooltipOptions: null,
         buttonTemplate: null,
+        transitionOptions: null,
         onClick: null
     }
 
@@ -47,6 +48,7 @@ export class SplitButton extends Component {
         tooltip: PropTypes.string,
         tooltipOptions: PropTypes.object,
         buttonTemplate: PropTypes.any,
+        transitionOptions: PropTypes.object,
         onClick: PropTypes.func
     }
 
@@ -247,7 +249,8 @@ export class SplitButton extends Component {
                     aria-expanded={this.state.overlayVisible} aria-haspopup aria-owns={this.state.id + '_overlay'} />
                 <SplitButtonPanel ref={this.overlayRef} appendTo={this.props.appendTo} id={this.state.id + '_overlay'}
                     menuStyle={this.props.menuStyle} menuClassName={this.props.menuClassName} onClick={this.onPanelClick}
-                    in={this.state.overlayVisible} onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}>
+                    in={this.state.overlayVisible} onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}
+                    transitionOptions={this.props.transitionOptions}>
                     {items}
                 </SplitButtonPanel>
             </div>

diff --git a/src/components/splitbutton/SplitButtonPanel.js b/src/components/splitbutton/SplitButtonPanel.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 SplitButtonPanelComponent extends Component {
@@ -26,7 +26,7 @@ class SplitButtonPanelComponent extends Component {
         let className = classNames('p-menu p-menu-overlay p-component', this.props.menuClassName);
 
         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={className} style={this.props.menuStyle} id={this.props.id} onClick={this.onClick}>
                     <ul className="p-menu-list p-reset" role="menu">

diff --git a/src/showcase/splitbutton/SplitButtonDoc.js b/src/showcase/splitbutton/SplitButtonDoc.js
@@ -403,6 +403,12 @@ export const SplitButtonDemo = () => {
                                         <td>null</td>
                                         <td>Template of the default button.</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>