Merge pull request #32 from ChromeQ/master

Add types for extra IntersectionObserverEntry props to reach the callback

Author: trurl-master

example/intersection-observer/global-observer/GlobalObserver.tsx

@@ -2,9 +2,15 @@ import * as React from 'react';
 import { useRef, ReactElement } from 'react';
 import useIntersection from './useIntersection';
 
-export const Section = ({ number }: { number: number }): ReactElement => {
+export const Section = ({
+  number,
+  callback,
+}: {
+  number: number;
+  callback?: IntersectionObserverCallback;
+}): ReactElement => {
   const ref = useRef(null);
-  const isIntersecting = useIntersection(ref);
+  const isIntersecting = useIntersection(ref, callback);
 
   return (
     <section

example/intersection-observer/global-observer/useIntersection.ts

@@ -25,7 +25,10 @@ function createObserver() {
   );
 }
 
-const useIntersection = (ref: MutableRefObject<HTMLElement | null>) => {
+const useIntersection = (
+  ref: MutableRefObject<HTMLElement | null>,
+  callback?: IntersectionObserverCallback
+) => {
   const [isIntersecting, setIsIntersecting] = useState(false);
 
   useEffect(() => {
@@ -39,6 +42,7 @@ const useIntersection = (ref: MutableRefObject<HTMLElement | null>) => {
 
     entryCallbacks[domId.toString()] = entry => {
       setIsIntersecting(entry.isIntersecting);
+      callback?.([entry], observer);
     };
 
     node.dataset._ioid = domId.toString();

package.json

@@ -91,6 +91,7 @@
     "ts-jest": "^26.5.4",
     "tsdx": "^0.14.1",
     "tslib": "^2.1.0",
+    "type-fest": "^2.12.0",
     "typescript": "^4.2.3"
   },
   "resolutions": {

src/mocks/intersection-observer.ts

@@ -1,6 +1,10 @@
-type IntersectionDescription = {
-  isIntersecting: boolean;
-  target?: HTMLElement;
+import { Mutable, PartialDeep } from 'type-fest';
+
+export type IntersectionDescription = Omit<
+  PartialDeep<Mutable<IntersectionObserverEntry>>,
+  'target'
+> & {
+  target?: Element;
 };
 
 type State = {

test/intersection-observer.test.tsx

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { render, act, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import { mockIntersectionObserver } from '../src/mocks/intersection-observer';
+import {
+  mockIntersectionObserver,
+  IntersectionDescription,
+} from '../src/mocks/intersection-observer';
 
 import App, {
   Section,
@@ -200,4 +203,37 @@ describe('Section is intersecting', () => {
       'A section 9 - not intersecting',
     ]);
   });
+
+  it('should receive intersection options to the callback', () => {
+    const cb = jest.fn();
+    const options: IntersectionDescription = {
+      intersectionRatio: 1,
+      rootBounds: {
+        x: 0,
+        y: 0,
+        height: 100,
+        width: 100,
+      },
+    };
+
+    render(<Section number={1} callback={cb} />);
+
+    expect(cb).not.toHaveBeenCalled();
+
+    act(() => {
+      intersectionObserver.enterNode(screen.getByText(/A section 1/), options);
+    });
+
+    const [entries, _observer] = cb.mock.calls[0];
+
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(entries).toHaveLength(1); // Number of entries
+    expect(entries[0]).toEqual(
+      expect.objectContaining({
+        ...options,
+        isIntersecting: true,
+      })
+    );
+    expect(entries[0].target instanceof HTMLElement).toBe(true);
+  });
 });

yarn.lock

@@ -8661,6 +8661,11 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
+type-fest@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.12.0.tgz#ce342f58cab9114912f54b493d60ab39c3fc82b6"
+  integrity sha512-Qe5GRT+n/4GoqCNGGVp5Snapg1Omq3V7irBJB3EaKsp7HWDo5Gv2d/67gfNyV+d5EXD+x/RF5l1h4yJ7qNkcGA==
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"