workflow-designer-ui/src/main/frontend/src/shared/scroll/InfiniteScroll.js

   1 /*
   2 * Copyright © 2018 European Support Limited
   3 *
   4 * Licensed under the Apache License, Version 2.0 (the "License");
   5 * you may not use this file except in compliance with the License.
   6 * You may obtain a copy of the License at
   7 *
   8 *      http://www.apache.org/licenses/LICENSE-2.0
   9 *
  10 * Unless required by applicable law or agreed to in writing, software
  11 * distributed under the License is distributed on an "AS IS" BASIS,
  12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 * See the License for the specific language governing permissions and
  14 * limitations under the License.
  15 */
  16
  17 import React from 'react';
  18 import PropTypes from 'prop-types';
  19
  20 class InfiniteScroll extends React.Component {
  21     componentDidMount() {
  22         this.pageLoaded = this.props.pageStart;
  23         this.scrollEl = this.getScrollElement();
  24         this.attachScrollListener();
  25     }
  26
  27     componentDidUpdate() {
  28         this.attachScrollListener();
  29     }
  30
  31     componentWillUnmount() {
  32         this.detachScrollListener();
  33     }
  34
  35     getParentElement(el) {
  36         return el.parentNode;
  37     }
  38
  39     getScrollElement() {
  40         if (this.props.useWindow) {
  41             return window;
  42         }
  43
  44         return this.getParentElement(this.scrollComponent);
  45     }
  46
  47     detachScrollListener() {
  48         this.scrollEl.removeEventListener(
  49             'scroll',
  50             this.scrollListener,
  51             this.props.useCapture
  52         );
  53         window.removeEventListener(
  54             'resize',
  55             this.scrollListener,
  56             this.props.useCapture
  57         );
  58     }
  59
  60     attachScrollListener() {
  61         if (!this.props.hasMore || !this.scrollEl) {
  62             return;
  63         }
  64
  65         const options = {
  66             capture: this.props.useCapture,
  67             passive: true
  68         };
  69
  70         this.scrollEl.addEventListener('scroll', this.scrollListener, options);
  71         window.addEventListener('resize', this.scrollListener, options);
  72
  73         if (this.props.initialLoad) {
  74             this.scrollListener();
  75         }
  76     }
  77
  78     scrollListener = () => {
  79         const el = this.scrollComponent;
  80         const scrollEl = window;
  81         const parentNode = this.getParentElement(el);
  82
  83         let offset;
  84         if (this.props.useWindow) {
  85             const doc =
  86                 document.documentElement ||
  87                 document.body.parentNode ||
  88                 document.body;
  89             const scrollTop =
  90                 scrollEl.pageYOffset !== undefined
  91                     ? scrollEl.pageYOffset
  92                     : doc.scrollTop;
  93
  94             offset =
  95                 this.calculateTopPosition(el) +
  96                 (el.offsetHeight - scrollTop - window.innerHeight);
  97         } else {
  98             offset =
  99                 el.scrollHeight -
 100                 parentNode.scrollTop -
 101                 parentNode.clientHeight;
 102         }
 103
 104         // Here we make sure the element is visible as well as checking the offset
 105         if (offset < Number(this.props.threshold) && el.offsetParent !== null) {
 106             this.detachScrollListener();
 107             // Call loadMore after detachScrollListener to allow for non-async loadMore functions
 108             if (typeof this.props.loadMore === 'function') {
 109                 this.props.loadMore((this.pageLoaded += 1));
 110             }
 111         }
 112     };
 113
 114     calculateTopPosition(el) {
 115         if (!el) {
 116             return 0;
 117         }
 118         return el.offsetTop + this.calculateTopPosition(el.offsetParent);
 119     }
 120
 121     render() {
 122         const { children, element } = this.props;
 123
 124         const props = {
 125             ref: node => {
 126                 this.scrollComponent = node;
 127             }
 128         };
 129
 130         const childrenArray = [children];
 131
 132         return React.createElement(element, props, childrenArray);
 133     }
 134 }
 135
 136 InfiniteScroll.propTypes = {
 137     children: PropTypes.node.isRequired,
 138     element: PropTypes.node,
 139     hasMore: PropTypes.bool,
 140     initialLoad: PropTypes.bool,
 141     loadMore: PropTypes.func.isRequired,
 142     pageStart: PropTypes.number,
 143     threshold: PropTypes.number,
 144     useCapture: PropTypes.bool,
 145     useWindow: PropTypes.bool
 146 };
 147
 148 InfiniteScroll.defaultProps = {
 149     element: 'div',
 150     hasMore: false,
 151     initialLoad: true,
 152     pageStart: 0,
 153     threshold: 250,
 154     useWindow: true,
 155     useCapture: false
 156 };
 157
 158 export default InfiniteScroll;