fix(ViewportProvider): only notify if requested properties change

Author: garthenweb

examples/index.tsx

@@ -72,7 +72,7 @@ class Example extends React.PureComponent<{}, { disabled: boolean }> {
         <ObserveViewport
           disableDimensionsUpdates
           onUpdate={props => {
-            console.log('update scroll', props.scroll);
+            console.log('update scroll only', props.scroll);
           }}
         />
         <ObserveViewport

lib/ObserveViewport.tsx

@@ -11,6 +11,7 @@ import {
   IDimensions,
   IViewport,
   TViewportChangeHandler,
+  IViewportChangeOptions,
 } from './types';
 
 export interface IChildProps {
@@ -28,16 +29,28 @@ interface IProps {
 }
 
 interface IContext {
-  addViewportChangeListener: (fn: TViewportChangeHandler) => void;
-  removeViewportChangeListener: (fn: TViewportChangeHandler) => void;
+  addViewportChangeListener: (
+    handler: TViewportChangeHandler,
+    options: IViewportChangeOptions,
+  ) => void;
+  removeViewportChangeListener: (
+    handler: TViewportChangeHandler,
+    options: IViewportChangeOptions,
+  ) => void;
 }
 
 export default class ObserveViewport extends React.Component<IProps, IState> {
   private addViewportChangeListener:
-    | ((fn: TViewportChangeHandler) => void)
+    | ((
+        handler: TViewportChangeHandler,
+        options: IViewportChangeOptions,
+      ) => void)
     | null;
   private removeViewportChangeListener:
-    | ((fn: TViewportChangeHandler) => void)
+    | ((
+        handler: TViewportChangeHandler,
+        options: IViewportChangeOptions,
+      ) => void)
     | null;
 
   private tickId: NodeJS.Timer;
@@ -61,7 +74,10 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
 
   componentWillUnmount() {
     if (this.removeViewportChangeListener) {
-      this.removeViewportChangeListener(this.handleViewportUpdate);
+      this.removeViewportChangeListener(this.handleViewportUpdate, {
+        notifyScroll: !this.props.disableScrollUpdates,
+        notifyDimensions: !this.props.disableDimensionsUpdates,
+      });
     }
     this.removeViewportChangeListener = null;
     this.addViewportChangeListener = null;
@@ -100,10 +116,16 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
     }
 
     if (this.removeViewportChangeListener) {
-      this.removeViewportChangeListener(this.handleViewportUpdate);
+      this.removeViewportChangeListener(this.handleViewportUpdate, {
+        notifyScroll: !this.props.disableScrollUpdates,
+        notifyDimensions: !this.props.disableDimensionsUpdates,
+      });
     }
     this.removeViewportChangeListener = removeViewportChangeListener;
-    addViewportChangeListener(this.handleViewportUpdate);
+    addViewportChangeListener(this.handleViewportUpdate, {
+      notifyScroll: !this.props.disableScrollUpdates,
+      notifyDimensions: !this.props.disableDimensionsUpdates,
+    });
     return null;
   };
 

lib/ViewportProvider.tsx

@@ -16,16 +16,27 @@ import {
   IPrivateScroll,
   IScroll,
   TViewportChangeHandler,
+  IViewportChangeOptions,
 } from './types';
 
+interface IListener extends IViewportChangeOptions {
+  handler: TViewportChangeHandler;
+}
+
 export const SCROLL_DIR_DOWN = Symbol('SCROLL_DIR_DOWN');
 export const SCROLL_DIR_UP = Symbol('SCROLL_DIR_UP');
 export const SCROLL_DIR_LEFT = Symbol('SCROLL_DIR_LEFT');
 export const SCROLL_DIR_RIGHT = Symbol('SCROLL_DIR_RIGHT');
 
 const ViewportContext = React.createContext({
-  removeViewportChangeListener: (props: TViewportChangeHandler) => {},
-  addViewportChangeListener: (props: TViewportChangeHandler) => {},
+  removeViewportChangeListener: (
+    handler: TViewportChangeHandler,
+    options: IViewportChangeOptions,
+  ) => {},
+  addViewportChangeListener: (
+    handler: TViewportChangeHandler,
+    options: IViewportChangeOptions,
+  ) => {},
 });
 
 const getNodeScroll = (elem = window) => {
@@ -121,7 +132,7 @@ export default class ViewportProvider extends React.PureComponent {
   private lastSyncedScrollState: IPrivateScroll;
   private lastSyncedDimensionsState: IDimensions;
   private tickId: NodeJS.Timer;
-  private listeners: TViewportChangeHandler[] = [];
+  private listeners: IListener[] = [];
 
   constructor(props: {}) {
     super(props);
@@ -222,8 +233,13 @@ export default class ViewportProvider extends React.PureComponent {
 
     if (scrollDidUpdate || dimensionsDidUpdate) {
       const publicState = this.getPropsFromState();
-      this.listeners.forEach(listener => {
-        listener(publicState);
+      this.listeners.forEach(({ handler, notifyScroll, notifyDimensions }) => {
+        if (
+          (notifyScroll && scrollDidUpdate) ||
+          (notifyDimensions && dimensionsDidUpdate)
+        ) {
+          handler(publicState);
+        }
       });
     }
   };
@@ -239,12 +255,26 @@ export default class ViewportProvider extends React.PureComponent {
     };
   }
 
-  addViewportChangeListener = (fn: TViewportChangeHandler) => {
-    this.listeners.push(fn);
+  addViewportChangeListener = (
+    handler: TViewportChangeHandler,
+    options: IViewportChangeOptions,
+  ) => {
+    this.listeners.push({ handler, ...options });
   };
 
-  removeViewportChangeListener = (fn: TViewportChangeHandler) => {
-    this.listeners = this.listeners.filter(listener => listener !== fn);
+  removeViewportChangeListener = (
+    h: TViewportChangeHandler,
+    options: IViewportChangeOptions,
+  ) => {
+    this.listeners = this.listeners.filter(
+      ({ handler, notifyScroll, notifyDimensions }) => {
+        const equals =
+          handler === h &&
+          notifyScroll === options.notifyScroll &&
+          notifyDimensions === options.notifyDimensions;
+        return !equals;
+      },
+    );
   };
 
   render() {

lib/types.ts

@@ -49,3 +49,8 @@ export interface IViewport {
 }
 
 export type TViewportChangeHandler = ({ scroll, dimensions }: IViewport) => void;
+
+export interface IViewportChangeOptions {
+  notifyScroll: boolean;
+  notifyDimensions: boolean;
+}