feat(hooks): allow to pass dependency array

garthenweb · garthenweb · commit 83460103a6f8 · 2019-09-08T16:40:34.000+02:00
Fixes #12
diff --git a/docs/api/ObserveViewport_connectViewport_useViewport.md b/docs/api/ObserveViewport_connectViewport_useViewport.md
@@ -134,6 +134,7 @@ Hook effects allow to trigger side effects on change without updating the compon
 | options.deferUpdateUntilIdle | boolean |  | Defers to trigger updates until the collector is idle. See [Defer Events](../concepts/defer_events.md) |
 | options.priority | `'low'`, `'normal'`, `'high'`, `'highest'` |  | Allows to set a priority of the update. See [Defer Events](../concepts/scheduler.md) |
 | options.recalculateLayoutBeforeUpdate | function |  | Enables a way to calculate layout information for all components as a badge before the effect call. Contains `IViewport`, `IScroll` or `IDimensions` as the first argument, dependent of the used hook. See [recalculateLayoutBeforeUpdate](../concepts/recalculateLayoutBeforeUpdate.md) |
+| deps | array |  | Array with dependencies. In case a value inside the array changes, this will force an update to the effect function |
 
 ### Example
 
diff --git a/lib/__tests__/ObserveViewport.client.test.tsx b/lib/__tests__/ObserveViewport.client.test.tsx
@@ -56,6 +56,8 @@ describe('ObserveViewport', () => {
     cleanup();
     (window.addEventListener as jest.Mock).mockRestore();
     jest.clearAllTimers();
+    (window as any).scrollX = 0;
+    (window as any).scrollY = 0;
   });
 
   it('should trigger initial scroll value', () => {
diff --git a/lib/__tests__/hooks.client.test.tsx b/lib/__tests__/hooks.client.test.tsx
@@ -2,10 +2,10 @@
 delete window.requestAnimationFrame;
 jest.useFakeTimers();
 
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { act } from 'react-dom/test-utils';
 import { render, cleanup, fireEvent } from '@testing-library/react';
-import { ViewportProvider, useViewport } from '../index';
+import { ViewportProvider, useViewport, useLayoutSnapshot } from '../index';
 
 const scrollTo = (x: number, y: number) => {
   window.scrollTo(x, y);
@@ -35,6 +35,8 @@ describe('hooks', () => {
   afterEach(() => {
     cleanup();
     jest.clearAllTimers();
+    (window as any).scrollX = 0;
+    (window as any).scrollY = 0;
   });
 
   describe('useViewport', () => {
@@ -124,4 +126,71 @@ describe('hooks', () => {
       expect(getByText('scroll: 0,3000')).toBeDefined();
     });
   });
+
+  describe('useLayoutSnapshot', () => {
+    it('should update snapshot on scroll', () => {
+      const App = () => {
+        const ref = useRef<HTMLDivElement>(null);
+        const snapshot = useLayoutSnapshot(({ scroll }) => {
+          if (ref.current) {
+            return `${ref.current.dataset.info},${scroll.y}`;
+          }
+          return null;
+        });
+        return (
+          <div ref={ref} data-info="pony">
+            {snapshot}
+          </div>
+        );
+      };
+      const { getByText } = render(
+        <ViewportProvider>
+          <App />
+        </ViewportProvider>,
+      );
+      scrollTo(0, 1000);
+      act(() => {
+        jest.advanceTimersByTime(20);
+      });
+      expect(getByText('pony,1000')).toBeDefined();
+    });
+
+    it('should update snapshot on dependency change', () => {
+      const App = ({ info }: { info: string }) => {
+        const ref = useRef<HTMLDivElement>(null);
+        const snapshot = useLayoutSnapshot(
+          ({ scroll }) => {
+            if (ref.current) {
+              return `${ref.current.dataset.info},${scroll.y}`;
+            }
+            return null;
+          },
+          [info],
+        );
+        return (
+          <div ref={ref} data-info={info}>
+            {snapshot}
+          </div>
+        );
+      };
+      const { getByText, rerender } = render(
+        <ViewportProvider>
+          <App info="pony" />
+        </ViewportProvider>,
+      );
+      act(() => {
+        jest.advanceTimersByTime(20);
+      });
+      expect(getByText('pony,0')).toBeDefined();
+      rerender(
+        <ViewportProvider>
+          <App info="foo" />
+        </ViewportProvider>,
+      );
+      act(() => {
+        jest.advanceTimersByTime(20);
+      });
+      expect(getByText('foo,0')).toBeDefined();
+    });
+  });
 });
diff --git a/lib/hooks.ts b/lib/hooks.ts
@@ -1,4 +1,11 @@
-import { useContext, useEffect, useState, RefObject, useRef } from 'react';
+import {
+  useContext,
+  useEffect,
+  useState,
+  RefObject,
+  useRef,
+  DependencyList,
+} from 'react';
 
 import { ViewportContext } from './ViewportProvider';
 import { IViewport, IScroll, IDimensions, PriorityType, IRect } from './types';
@@ -22,25 +29,28 @@ interface IEffectOptions<T> extends IOptions {
   recalculateLayoutBeforeUpdate?: (viewport: IViewport) => T;
 }
 
-const useOptions = <T>(o: IViewPortEffectOptions<T>) => {
-  const optionsRef = useRef<IViewPortEffectOptions<T>>(Object.create(null));
-  for (const key of Object.keys(optionsRef.current)) {
-    delete optionsRef.current[key];
-  }
-  Object.assign(optionsRef.current, o);
+export function useViewportEffect<T = unknown>(
+  handleViewportChange: (viewport: IViewport, snapshot: T) => void,
+  deps?: DependencyList,
+): void;
 
-  return optionsRef.current;
-};
+export function useViewportEffect<T = unknown>(
+  handleViewportChange: (viewport: IViewport, snapshot: T) => void,
+  options?: IViewPortEffectOptions<T>,
+  deps?: DependencyList,
+): void;
 
-export const useViewportEffect = <T>(
+export function useViewportEffect<T>(
   handleViewportChange: (viewport: IViewport, snapshot: T) => void,
-  options: IViewPortEffectOptions<T> = {},
-) => {
+  second?: any,
+  third?: any,
+) {
   const {
     addViewportChangeListener,
     removeViewportChangeListener,
     hasRootProviderAsParent,
   } = useContext(ViewportContext);
+  const { options, deps } = sortArgs(second, third);
   const memoOptions = useOptions(options);
 
   useEffect(() => {
@@ -56,8 +66,12 @@ export const useViewportEffect = <T>(
       recalculateLayoutBeforeUpdate: memoOptions.recalculateLayoutBeforeUpdate,
     });
     return () => removeViewportChangeListener(handleViewportChange);
-  }, [addViewportChangeListener || null, removeViewportChangeListener || null]);
-};
+  }, [
+    addViewportChangeListener || null,
+    removeViewportChangeListener || null,
+    ...deps,
+  ]);
+}
 
 export const useViewport = (options: IFullOptions = {}): IViewport => {
   const { getCurrentViewport } = useContext(ViewportContext);
@@ -67,18 +81,32 @@ export const useViewport = (options: IFullOptions = {}): IViewport => {
   return state;
 };
 
-export const useScrollEffect = <T = unknown>(
+export function useScrollEffect<T = unknown>(
   effect: (scroll: IScroll, snapshot: T) => void,
-  options: IEffectOptions<T> = {},
-) => {
+  deps?: DependencyList,
+): void;
+
+export function useScrollEffect<T = unknown>(
+  effect: (scroll: IScroll, snapshot: T) => void,
+  options: IEffectOptions<T>,
+  deps?: DependencyList,
+): void;
+
+export function useScrollEffect<T = unknown>(
+  effect: (scroll: IScroll, snapshot: T) => void,
+  second?: any,
+  third?: any,
+) {
+  const { options, deps } = sortArgs(second, third);
   useViewportEffect(
     (viewport, snapshot: T) => effect(viewport.scroll, snapshot),
     {
       disableDimensionsUpdates: true,
       ...options,
     },
+    deps,
   );
-};
+}
 
 export const useScroll = (options: IOptions = {}): IScroll => {
   const { scroll } = useViewport({
@@ -89,18 +117,32 @@ export const useScroll = (options: IOptions = {}): IScroll => {
   return scroll;
 };
 
-export const useDimensionsEffect = <T = unknown>(
-  effect: (scroll: IDimensions, snapshot: T) => void,
-  options: IEffectOptions<T> = {},
-) => {
+export function useDimensionsEffect<T = unknown>(
+  effect: (dimensions: IDimensions, snapshot: T) => void,
+  deps?: DependencyList,
+): void;
+
+export function useDimensionsEffect<T = unknown>(
+  effect: (dimensions: IDimensions, snapshot: T) => void,
+  options: IEffectOptions<T>,
+  deps?: DependencyList,
+): void;
+
+export function useDimensionsEffect<T = unknown>(
+  effect: (dimensions: IDimensions, snapshot: T) => void,
+  second: any,
+  third?: any,
+) {
+  const { options, deps } = sortArgs(second, third);
   useViewportEffect(
     (viewport, snapshot: T) => effect(viewport.dimensions, snapshot),
     {
       disableScrollUpdates: true,
       ...options,
     },
+    deps,
   );
-};
+}
 
 export const useDimensions = (options: IOptions = {}): IDimensions => {
   const { dimensions } = useViewport({
@@ -116,11 +158,15 @@ export const useRectEffect = (
   ref: RefObject<HTMLElement>,
   options?: IFullOptions,
 ) => {
-  useViewportEffect((_, snapshot) => effect(snapshot), {
-    ...options,
-    recalculateLayoutBeforeUpdate: () =>
-      ref.current ? ref.current.getBoundingClientRect() : null,
-  });
+  useViewportEffect(
+    (_, snapshot) => effect(snapshot),
+    {
+      ...options,
+      recalculateLayoutBeforeUpdate: () =>
+        ref.current ? ref.current.getBoundingClientRect() : null,
+    },
+    [ref.current],
+  );
 };
 
 export const useRect = (
@@ -130,18 +176,61 @@ export const useRect = (
   return useLayoutSnapshot(
     () => (ref.current ? ref.current.getBoundingClientRect() : null),
     options,
+    [ref.current],
   );
 };
 
-export const useLayoutSnapshot = <T = unknown>(
+export function useLayoutSnapshot<T = unknown>(
+  recalculateLayoutBeforeUpdate: (viewport: IViewport) => T,
+  deps?: DependencyList,
+): null | T;
+
+export function useLayoutSnapshot<T = unknown>(
   recalculateLayoutBeforeUpdate: (viewport: IViewport) => T,
-  options: IFullOptions = {},
-): null | T => {
+  options?: IFullOptions,
+  deps?: DependencyList,
+): null | T;
+
+export function useLayoutSnapshot<T = unknown>(
+  recalculateLayoutBeforeUpdate: (viewport: IViewport) => T,
+  second?: any,
+  third?: any,
+): null | T {
+  const { options, deps } = sortArgs(second, third);
   const [state, setSnapshot] = useState<null | T>(null);
-  useViewportEffect((_, snapshot: T) => setSnapshot(snapshot), {
-    ...options,
-    recalculateLayoutBeforeUpdate,
-  });
+  useViewportEffect(
+    (_, snapshot: T) => setSnapshot(snapshot),
+    {
+      ...options,
+      recalculateLayoutBeforeUpdate,
+    },
+    deps,
+  );
 
   return state;
+}
+
+const useOptions = <T>(o: IViewPortEffectOptions<T>) => {
+  const optionsRef = useRef<IViewPortEffectOptions<T>>(Object.create(null));
+  for (const key of Object.keys(optionsRef.current)) {
+    delete optionsRef.current[key];
+  }
+  Object.assign(optionsRef.current, o);
+
+  return optionsRef.current;
+};
+
+const sortArgs = (
+  first: DependencyList | IOptions,
+  second?: DependencyList,
+) => {
+  let options = {};
+  if (first && !Array.isArray(first)) {
+    options = first;
+  }
+  let deps = second || [];
+  if (first && Array.isArray(first)) {
+    deps = first;
+  }
+  return { deps, options };
 };
