Refactor #1951 - For ScrollTop

primefaces · Apr 12, 2021 · 87b109d · 87b109d
1 parent 533c11b
commit 87b109d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/src/components/scrolltop/ScrollTop.d.ts b/src/components/scrolltop/ScrollTop.d.ts
@@ -12,6 +12,8 @@ interface ScrollTopProps {
     className?: string;
     style?: object;
     transitionOptions?: object;
+    onShow?(): void;
+    onHide?(): void;
 }
 
 export class ScrollTop extends React.Component<ScrollTopProps, any> { }
diff --git a/src/components/scrolltop/ScrollTop.js b/src/components/scrolltop/ScrollTop.js
@@ -15,7 +15,9 @@ export class ScrollTop extends Component {
         behavior: 'smooth',
         className: null,
         style: null,
-        transitionOptions: null
+        transitionOptions: null,
+        onShow: null,
+        onHide: null
     };
 
     static propTypes = {
@@ -25,7 +27,9 @@ export class ScrollTop extends Component {
         behavior: PropTypes.string,
         className: PropTypes.string,
         style: PropTypes.object,
-        transitionOptions: PropTypes.object
+        transitionOptions: PropTypes.object,
+        onShow: PropTypes.func,
+        onHide: PropTypes.func
     };
 
     constructor(props) {
@@ -37,6 +41,7 @@ export class ScrollTop extends Component {
 
         this.onClick = this.onClick.bind(this);
         this.onEnter = this.onEnter.bind(this);
+        this.onEntered = this.onEntered.bind(this);
         this.onExited = this.onExited.bind(this);
         this.scrollElementRef = React.createRef();
     }
@@ -87,8 +92,14 @@ export class ScrollTop extends Component {
         ZIndexUtils.set('overlay', this.scrollElementRef.current);
     }
 
+    onEntered() {
+        this.props.onShow && this.props.onShow();
+    }
+
     onExited() {
         ZIndexUtils.clear(this.scrollElementRef.current);
+
+        this.props.onHide && this.props.onHide();
     }
 
     componentDidMount() {
@@ -117,7 +128,7 @@ export class ScrollTop extends Component {
         return (
             <>
                 <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}>
+                    unmountOnExit onEnter={this.onEnter} onEntered={this.onEntered} 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
@@ -239,6 +239,31 @@ import { ScrollTop } from 'primereact/scrolltop';
                             </table>
                         </div>
 
+                        <h5>Events</h5>
+                        <div className="doc-tablewrapper">
+                            <table className="doc-table">
+                                <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Parameters</th>
+                                    <th>Description</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>onShow</td>
+                                        <td>-</td>
+                                        <td>Callback to invoke when overlay becomes visible.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>onHide</td>
+                                        <td>-</td>
+                                        <td>Callback to invoke when overlay becomes hidden.</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
                         <h5>Styling</h5>
                         <p>Following is the list of structural style classes, for theming classes visit <NavLink to="/theming">theming</NavLink> page.</p>
                         <div className="doc-tablewrapper">