Merge pull request #179 from k2snowman69/k2snowman69/scrollParentAsFu…

…nction Moved custom scroll parent to a function prop
danbovey · Oct 10, 2018 · 9c4d2e1 · 9c4d2e1
2 parents 253abf2 + d203514
commit 9c4d2e1
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -61,27 +61,20 @@ import InfiniteScroll from 'react-infinite-scroller';
 You can define a custom `parentNode` element to base the scroll calulations on.
 
 ```
-class InfiniteScrollOverride extends InfiniteScroll {
-
-    /**
-     * We are overriding the getParentElement function to use a custom element as the scrollable element
-     *
-     * @param {any} el the scroller domNode
-     * @returns {any} the parentNode to base the scroll calulations on
-     *
-     * @memberOf InfiniteScrollOverride
-     */
-    getParentElement(el) {
-        if (this.props.scrollParent) {
-            return this.props.scrollParent;
-        }
-        return super.getParentElement(el);
-    }
-
-    render() {
-        return super.render();
-    }
-}
+<div style="height:700px;overflow:auto;" ref={(ref) => this.scrollParentRef = ref}>
+    <div>
+        <InfiniteScroll
+            pageStart={0}
+            loadMore={loadFunc}
+            hasMore={true || false}
+            loader={<div className="loader" key={0}>Loading ...</div>}
+            useWindow={false}
+            getScrollParent={() => this.scrollParentRef}
+        >
+            {items}
+        </InfiniteScroll>
+    </div>
+</div>
 ```
 
 ## Props
@@ -95,6 +88,7 @@ class InfiniteScrollOverride extends InfiniteScroll {
 | `loadMore`       | `Function`    |            | A callback when more items are requested by the user. Receives a single parameter specifying the page to load e.g. `function handleLoadMore(page) { /* load more items here */ }` }|
 | `loader`         | `Component`   |            | A React component to render while more items are loading. The parent component must have a unique key prop. |
 | `pageStart`      | `Number`      | `0`        | The number of the first page to load, With the default of `0`, the first page is `1`.|
+| `getScrollParent`   | `Function`|           | Override method to return a different scroll listener if not the immediate parent. |
 | `threshold`      | `Number`     | `250`      | The distance in pixels before the end of the items that will trigger a call to `loadMore`.|
 | `useCapture`     | `Boolean`     | `false`     | Proxy to the `useCapture` option of the added event listeners.|
 | `useWindow`      | `Boolean`     | `true`     | Add scroll listeners to the window, or else, the component's `parentNode`.|
diff --git a/dist/InfiniteScroll.js b/dist/InfiniteScroll.js
@@ -166,6 +166,11 @@ var InfiniteScroll = (function(_Component) {
     {
       key: 'getParentElement',
       value: function getParentElement(el) {
+        var scrollParent =
+          this.props.getScrollParent && this.props.getScrollParent();
+        if (scrollParent != null) {
+          return scrollParent;
+        }
         return el && el.parentNode;
       },
     },
@@ -178,16 +183,15 @@ var InfiniteScroll = (function(_Component) {
     {
       key: 'attachScrollListener',
       value: function attachScrollListener() {
-        if (
-          !this.props.hasMore ||
-          !this.getParentElement(this.scrollComponent)
-        ) {
+        var parentElement = this.getParentElement(this.scrollComponent);
+
+        if (!this.props.hasMore || !parentElement) {
           return;
         }
 
         var scrollEl = window;
         if (this.props.useWindow === false) {
-          scrollEl = this.getParentElement(this.scrollComponent);
+          scrollEl = parentElement;
         }
 
         scrollEl.addEventListener(
@@ -305,6 +309,7 @@ var InfiniteScroll = (function(_Component) {
           threshold = renderProps.threshold,
           useCapture = renderProps.useCapture,
           useWindow = renderProps.useWindow,
+          getScrollParent = renderProps.getScrollParent,
           props = _objectWithoutProperties(renderProps, [
             'children',
             'element',
@@ -318,6 +323,7 @@ var InfiniteScroll = (function(_Component) {
             'threshold',
             'useCapture',
             'useWindow',
+            'getScrollParent',
           ]);
 
         props.ref = function(node) {
@@ -357,6 +363,7 @@ InfiniteScroll.propTypes = {
   loadMore: _propTypes2.default.func.isRequired,
   pageStart: _propTypes2.default.number,
   ref: _propTypes2.default.func,
+  getScrollParent: _propTypes2.default.func,
   threshold: _propTypes2.default.number,
   useCapture: _propTypes2.default.bool,
   useWindow: _propTypes2.default.bool,
@@ -372,6 +379,7 @@ InfiniteScroll.defaultProps = {
   isReverse: false,
   useCapture: false,
   loader: null,
+  getScrollParent: null,
 };
 exports.default = InfiniteScroll;
 module.exports = exports['default'];
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-infinite-scroller",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Infinite scroll component for React in ES6",
   "main": "index.js",
   "jsnext:main": "src/InfiniteScroll.js",
@@ -72,4 +72,4 @@
     "sinon": "^2.1.0",
     "webpack": "^2.5.1"
   }
-}
+}
diff --git a/src/InfiniteScroll.js b/src/InfiniteScroll.js
@@ -12,6 +12,7 @@ export default class InfiniteScroll extends Component {
     loadMore: PropTypes.func.isRequired,
     pageStart: PropTypes.number,
     ref: PropTypes.func,
+    getScrollParent: PropTypes.func,
     threshold: PropTypes.number,
     useCapture: PropTypes.bool,
     useWindow: PropTypes.bool,
@@ -28,6 +29,7 @@ export default class InfiniteScroll extends Component {
     isReverse: false,
     useCapture: false,
     loader: null,
+    getScrollParent: null,
   };
 
   constructor(props) {
@@ -87,6 +89,11 @@ export default class InfiniteScroll extends Component {
   }
 
   getParentElement(el) {
+    const scrollParent =
+      this.props.getScrollParent && this.props.getScrollParent();
+    if (scrollParent != null) {
+      return scrollParent;
+    }
     return el && el.parentNode;
   }
 
@@ -95,13 +102,15 @@ export default class InfiniteScroll extends Component {
   }
 
   attachScrollListener() {
-    if (!this.props.hasMore || !this.getParentElement(this.scrollComponent)) {
+    const parentElement = this.getParentElement(this.scrollComponent);
+
+    if (!this.props.hasMore || !parentElement) {
       return;
     }
 
     let scrollEl = window;
     if (this.props.useWindow === false) {
-      scrollEl = this.getParentElement(this.scrollComponent);
+      scrollEl = parentElement;
     }
 
     scrollEl.addEventListener(
@@ -203,6 +212,7 @@ export default class InfiniteScroll extends Component {
       threshold,
       useCapture,
       useWindow,
+      getScrollParent,
       ...props
     } = renderProps;