Refactor #1917 - For ScrollTop

primefaces · Apr 12, 2021 · 31472e7 · 31472e7
1 parent 9deb60e
commit 31472e7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/components/scrolltop/ScrollTop.d.ts b/src/components/scrolltop/ScrollTop.d.ts
@@ -11,6 +11,7 @@ interface ScrollTopProps {
     behavior?: ScrollBehavior;
     className?: string;
     style?: object;
+    transitionOptions?: object;
 }
 
 export class ScrollTop extends React.Component<ScrollTopProps, any> { }
diff --git a/src/components/scrolltop/ScrollTop.js b/src/components/scrolltop/ScrollTop.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 DomHandler from '../utils/DomHandler';
 import { Ripple } from '../ripple/Ripple';
 import { ZIndexUtils } from '../utils/ZIndexUtils';
@@ -14,7 +14,8 @@ export class ScrollTop extends Component {
         icon: 'pi pi-chevron-up',
         behavior: 'smooth',
         className: null,
-        style: null
+        style: null,
+        transitionOptions: null
     };
 
     static propTypes = {
@@ -23,7 +24,8 @@ export class ScrollTop extends Component {
         icon: PropTypes.string,
         behavior: PropTypes.string,
         className: PropTypes.string,
-        style: PropTypes.object
+        style: PropTypes.object,
+        transitionOptions: PropTypes.object
     };
 
     constructor(props) {
@@ -114,8 +116,8 @@ export class ScrollTop extends Component {
 
         return (
             <>
-                <CSSTransition nodeRef={this.scrollElementRef} classNames="p-scrolltop" in={this.state.visible} timeout={{ enter: 150, exit: 150 }} unmountOnExit
-                    onEnter={this.onEnter} onExited={this.onExited}>
+                <CSSTransition nodeRef={this.scrollElementRef} classNames="p-scrolltop" in={this.state.visible} timeout={{ enter: 150, exit: 150 }} options={this.props.transitionOptions}
+                    unmountOnExit onEnter={this.onEnter} onExited={this.onExited}>
                     <button ref={this.scrollElementRef} type="button" className={className} style={this.props.style} onClick={this.onClick}>
                         <span className={iconClassName}></span>
                         <Ripple />

diff --git a/src/showcase/scrolltop/ScrollTopDoc.js b/src/showcase/scrolltop/ScrollTopDoc.js
@@ -229,6 +229,12 @@ import { ScrollTop } from 'primereact/scrolltop';
                                         <td>smooth</td>
                                         <td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</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>