fix(ConnectViewport): allow prop changes at runtime

garthenweb · Sep 23, 2018 · 50791dc · 50791dc
1 parent d826c95
commit 50791dc
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 42 deletions.
diff --git a/lib/ObserveViewport.tsx b/lib/ObserveViewport.tsx
@@ -34,10 +34,7 @@ interface IContext {
     handler: TViewportChangeHandler,
     options: IViewportChangeOptions,
   ) => void;
-  removeViewportChangeListener: (
-    handler: TViewportChangeHandler,
-    options: IViewportChangeOptions,
-  ) => void;
+  removeViewportChangeListener: (handler: TViewportChangeHandler) => void;
 }
 
 export default class ObserveViewport extends React.Component<IProps, IState> {
@@ -48,10 +45,7 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
       ) => void)
     | null;
   private removeViewportChangeListener:
-    | ((
-        handler: TViewportChangeHandler,
-        options: IViewportChangeOptions,
-      ) => void)
+    | ((handler: TViewportChangeHandler) => void)
     | null;
 
   private tickId: NodeJS.Timer;
@@ -75,10 +69,7 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
 
   componentWillUnmount() {
     if (this.removeViewportChangeListener) {
-      this.removeViewportChangeListener(this.handleViewportUpdate, {
-        notifyScroll: !this.props.disableScrollUpdates,
-        notifyDimensions: !this.props.disableDimensionsUpdates,
-      });
+      this.removeViewportChangeListener(this.handleViewportUpdate);
     }
     this.removeViewportChangeListener = null;
     this.addViewportChangeListener = null;
@@ -104,10 +95,18 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
     });
   };
 
+  get optionNotifyScroll(): boolean {
+    return !this.props.disableScrollUpdates;
+  }
+
+  get optionNotifyDimensions(): boolean {
+    return !this.props.disableDimensionsUpdates;
+  }
+
   registerViewportListeners = ({
     addViewportChangeListener,
     removeViewportChangeListener,
-  }: IContext): null => {
+  }: IContext): React.ReactNode => {
     const shouldRegister =
       this.removeViewportChangeListener !== removeViewportChangeListener &&
       this.addViewportChangeListener !== addViewportChangeListener;
@@ -117,18 +116,21 @@ export default class ObserveViewport extends React.Component<IProps, IState> {
     }
 
     if (this.removeViewportChangeListener) {
-      this.removeViewportChangeListener(this.handleViewportUpdate, {
-        notifyScroll: !this.props.disableScrollUpdates,
-        notifyDimensions: !this.props.disableDimensionsUpdates,
-        recalculateLayoutBeforeUpdate: this.props.recalculateLayoutBeforeUpdate,
-      });
+      this.removeViewportChangeListener(this.handleViewportUpdate);
     }
+
     this.removeViewportChangeListener = removeViewportChangeListener;
     addViewportChangeListener(this.handleViewportUpdate, {
-      notifyScroll: !this.props.disableScrollUpdates,
-      notifyDimensions: !this.props.disableDimensionsUpdates,
-      recalculateLayoutBeforeUpdate: this.props.recalculateLayoutBeforeUpdate,
+      notifyScroll: () => !this.props.disableScrollUpdates,
+      notifyDimensions: () => !this.props.disableDimensionsUpdates,
+      recalculateLayoutBeforeUpdate: (viewport: IViewport) => {
+        if (this.props.recalculateLayoutBeforeUpdate) {
+          return this.props.recalculateLayoutBeforeUpdate(viewport);
+        }
+        return null;
+      },
     });
+
     return null;
   };
 

diff --git a/lib/ViewportProvider.tsx b/lib/ViewportProvider.tsx
@@ -27,10 +27,7 @@ export const SCROLL_DIR_LEFT = Symbol('SCROLL_DIR_LEFT');
 export const SCROLL_DIR_RIGHT = Symbol('SCROLL_DIR_RIGHT');
 
 const ViewportContext = React.createContext({
-  removeViewportChangeListener: (
-    handler: TViewportChangeHandler,
-    options: IViewportChangeOptions,
-  ) => {},
+  removeViewportChangeListener: (handler: TViewportChangeHandler) => {},
   addViewportChangeListener: (
     handler: TViewportChangeHandler,
     options: IViewportChangeOptions,
@@ -240,8 +237,8 @@ export default class ViewportProvider extends React.PureComponent {
       const publicState = this.getPropsFromState();
       const updatableListeners = this.listeners.filter(
         ({ notifyScroll, notifyDimensions }) =>
-          (notifyScroll && scrollDidUpdate) ||
-          (notifyDimensions && dimensionsDidUpdate),
+          (notifyScroll() && scrollDidUpdate) ||
+          (notifyDimensions() && dimensionsDidUpdate),
       );
       const layouts = updatableListeners.map(
         ({ recalculateLayoutBeforeUpdate }) => {
@@ -277,19 +274,8 @@ export default class ViewportProvider extends React.PureComponent {
     this.listeners.push({ handler, ...options });
   };
 
-  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;
-      },
-    );
+  removeViewportChangeListener = (h: TViewportChangeHandler) => {
+    this.listeners = this.listeners.filter(({ handler }) => handler !== h);
   };
 
   render() {

diff --git a/lib/types.ts b/lib/types.ts
@@ -54,7 +54,7 @@ export type TViewportChangeHandler = (
 ) => void;
 
 export interface IViewportChangeOptions {
-  notifyScroll: boolean;
-  notifyDimensions: boolean;
+  notifyScroll: () => boolean;
+  notifyDimensions: () => boolean;
   recalculateLayoutBeforeUpdate?: (viewport: IViewport) => any;
 }