fix(*): fix disabled updates caused by latest version of react-viewport-utils

Author: garthenweb

examples/index.tsx

@@ -1,14 +1,22 @@
 import * as React from 'react';
 import { render } from 'react-dom';
-import { ObserveViewport } from 'react-viewport-utils';
+import { ObserveViewport, useRect } from 'react-viewport-utils';
 
 import { Sticky, StickyScrollUp, StickyProvider } from '../lib/index';
 
 import './styles.css';
 
 const Placeholder = () => <div className="placeholder" />;
-
-class Example extends React.PureComponent<{}, { disableHeader: boolean }> {
+const Test = () => {
+  const div = React.useRef(null);
+  const rect = useRect(div);
+  return <div ref={div} />;
+};
+
+class Example extends React.PureComponent<
+  {},
+  { disableHeader: boolean; disableAll: boolean }
+> {
   private container1: React.RefObject<any>;
   private container2: React.RefObject<any>;
   private container3: React.RefObject<any>;
@@ -26,6 +34,7 @@ class Example extends React.PureComponent<{}, { disableHeader: boolean }> {
     this.container6 = React.createRef();
     this.state = {
       disableHeader: false,
+      disableAll: false,
     };
   }
 
@@ -35,9 +44,20 @@ class Example extends React.PureComponent<{}, { disableHeader: boolean }> {
     });
   }
 
+  toggleAll() {
+    this.setState({
+      disableAll: !this.state.disableAll,
+    });
+  }
+
   render() {
+    if (this.state.disableAll) {
+      return <button onClick={() => this.toggleAll()}>Toggle All</button>;
+    }
     return (
       <>
+        <button onClick={() => this.toggleAll()}>Toggle All</button>
+        <Test />
         <ObserveViewport disableDimensionsUpdates priority="low">
           {({ scroll }) => (
             <div className="scrollPosition">

lib/Sticky.tsx

@@ -344,8 +344,8 @@ class Sticky extends React.PureComponent<IProps, IState> {
   }
 
   recalculateLayoutBeforeUpdate = (): ILayoutSnapshot => {
-    const stickyRect = this.stickyRef.current.getBoundingClientRect();
     const containerRect = this.container.current.getBoundingClientRect();
+    const stickyRect = this.stickyRef.current.getBoundingClientRect();
     return {
       stickyRect,
       containerRect,
@@ -356,6 +356,9 @@ class Sticky extends React.PureComponent<IProps, IState> {
     { scroll, dimensions }: { scroll: IScroll; dimensions: IDimensions },
     { stickyRect, containerRect }: ILayoutSnapshot,
   ) => {
+    if (this.props.disabled) {
+      return;
+    }
     // in case children is not a function renderArgs will never be used
     const willRenderAsAFunction = typeof this.props.children === 'function';
     const appliedOverflowScroll = this.getOverflowScrollType(

lib/StickyScrollUp.tsx

@@ -170,6 +170,9 @@ class StickyScrollUp extends React.PureComponent<IProps, IState> {
       placeholderRect,
     }: { stickyRect: IRect; placeholderRect: IRect },
   ) => {
+    if (this.props.disabled) {
+      return;
+    }
     // in case children is not a function renderArgs will never be used
     const willRenderAsAFunction = typeof this.props.children === 'function';