Merge pull request #236 from seatgeek/window-as-scroll

Start listening to window scroll events when useWindowAsScrollContain…
seatgeek · Aug 7, 2017 · d837000 · d837000
2 parents ef8d2d2 + 919459f
commit d837000
Show file tree

Hide file tree

Showing 3 changed files with 240 additions and 0 deletions.
diff --git a/__tests__/__snapshots__/infinite_test.js.snap b/__tests__/__snapshots__/infinite_test.js.snap
@@ -383,6 +383,199 @@ exports[`React Infinite when the window is used as the Container hides DOM eleme
 </Infinite>
 `;
 
+exports[`React Infinite when the window is used as the Container reacts to window scroll events when useWindowAsScrollContainer is enabled after the initial render 1`] = `
+<Infinite
+  className="correct-class-name"
+  containerHeight={700}
+  displayBottomUpwards={false}
+  elementHeight={200}
+  handleScroll={[Function]}
+  isInfiniteLoading={false}
+  loadingSpinnerDelegate={<div />}
+  onInfiniteLoad={[Function]}
+  styles={Object {}}
+  timeScrollStateLastsForAfterUserScrolls={10000}
+  useWindowAsScrollContainer={false}
+>
+  <div
+    className="correct-class-name"
+    onScroll={[Function]}
+    style={
+      Object {
+        "WebkitOverflowScrolling": "touch",
+        "height": 700,
+        "overflowX": "hidden",
+        "overflowY": "scroll",
+      }
+    }
+  >
+    <div
+      style={Object {}}
+    >
+      <div
+        style={
+          Object {
+            "height": 0,
+            "width": "100%",
+          }
+        }
+      />
+      <div
+        className="test-div-0"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        className="test-div-1"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        className="test-div-2"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        className="test-div-3"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        className="test-div-4"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        className="test-div-5"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        style={
+          Object {
+            "height": 2800,
+            "width": "100%",
+          }
+        }
+      />
+    </div>
+  </div>
+</Infinite>
+`;
+
+exports[`React Infinite when the window is used as the Container reacts to window scroll events when useWindowAsScrollContainer is enabled after the initial render 2`] = `
+<Infinite
+  className="correct-class-name"
+  containerHeight={700}
+  displayBottomUpwards={false}
+  elementHeight={200}
+  handleScroll={[Function]}
+  isInfiniteLoading={false}
+  loadingSpinnerDelegate={<div />}
+  onInfiniteLoad={[Function]}
+  styles={Object {}}
+  timeScrollStateLastsForAfterUserScrolls={10000}
+  useWindowAsScrollContainer={true}
+>
+  <div
+    className="correct-class-name"
+    onScroll={[Function]}
+    style={Object {}}
+  >
+    <div
+      style={
+        Object {
+          "pointerEvents": "none",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "height": 0,
+            "width": "100%",
+          }
+        }
+      />
+      <div
+        className="test-div-0"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        className="test-div-1"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        className="test-div-2"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        className="test-div-3"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        className="test-div-4"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        className="test-div-5"
+        style={
+          Object {
+            "height": 200,
+          }
+        }
+      />
+      <div
+        style={
+          Object {
+            "height": 2800,
+            "width": "100%",
+          }
+        }
+      />
+    </div>
+  </div>
+</Infinite>
+`;
+
 exports[`Rendering the React Infinite Component Wrapper applies the provided class name to the root node 1`] = `
 <div
   className="correct-class-name"

diff --git a/__tests__/infinite_test.js b/__tests__/infinite_test.js
@@ -685,6 +685,46 @@ describe('React Infinite when the window is used as the Container', function() {
       window.addEventListener = oldAdd;
     });
   });
+
+  it('reacts to window scroll events when useWindowAsScrollContainer is enabled after the initial render', function() {
+    const infiniteSpy = jest.fn();
+    const elementHeight = 200;
+
+    const oldAdd = window.addEventListener;
+
+    const listenerTriggered = new Promise((resolve, reject) => {
+      window.addEventListener = function(event, f) {
+        if (event === 'scroll') {
+          resolve(f);
+        }
+      };
+    });
+
+    const rootNode = mount(
+      <Infinite
+        elementHeight={elementHeight}
+        handleScroll={infiniteSpy}
+        timeScrollStateLastsForAfterUserScrolls={10000}
+        className={'correct-class-name'}
+        containerHeight={700}
+      >
+        {renderHelpers.divGenerator(20, elementHeight)}
+      </Infinite>
+    );
+
+    expect(mountToJson(rootNode)).toMatchSnapshot();
+
+    rootNode.setProps({
+      useWindowAsScrollContainer: true
+    });
+
+    return listenerTriggered.then(listener => {
+      window.pageYOffset = 200;
+      listener();
+      expect(mountToJson(rootNode)).toMatchSnapshot();
+      window.addEventListener = oldAdd;
+    });
+  });
 });
 
 describe("Specifying React Infinite's preload amounts", function() {

diff --git a/src/react-infinite.jsx b/src/react-infinite.jsx
@@ -257,6 +257,13 @@ class Infinite extends React.Component<
   ) {
     this.loadingSpinnerHeight = this.utils.getLoadingSpinnerHeight();
 
+    if (
+      !prevProps.useWindowAsScrollContainer &&
+      this.props.useWindowAsScrollContainer
+    ) {
+      this.utils.subscribeToScrollListener();
+    }
+
     if (this.props.displayBottomUpwards) {
       var lowestScrollTop = this.getLowestPossibleScrollTop();
       if (