piral-hooks-utils 0.15.0-alpha.3537

package/src/hooks/onScreenVisible.test.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { useOnScreenVisible } from './onScreenVisible';
+
+jest.mock('react');
+
+(React as any).useState = (result) => [result, jest.fn()];
+
+function mockIntersectionObserver() {
+  const instances = [];
+  (window as any).IntersectionObserver = class {
+    constructor(cb, margin) {
+      instances.push(this);
+      this.init(cb, margin);
+    }
+    init = jest.fn();
+    observe = jest.fn();
+    unobserve = jest.fn();
+  };
+  return instances;
+}
+
+describe('OnScreenVisible Module', () => {
+  it('is not intersecting by default', () => {
+    const result = useOnScreenVisible({ current: undefined });
+    expect(result).toBeFalsy();
+  });
+
+  it('creates one intersection observer with effect', () => {
+    const usedEffect = jest.fn();
+    (React as any).useEffect = usedEffect;
+    const instances = mockIntersectionObserver();
+    useOnScreenVisible({ current: undefined });
+    const cleanup = usedEffect.mock.calls[0][0]();
+    expect(instances.length).toBe(1);
+    cleanup();
+  });
+
+  it('does not observe if no ref given', () => {
+    const usedEffect = jest.fn();
+    (React as any).useEffect = usedEffect;
+    const instances = mockIntersectionObserver();
+    useOnScreenVisible({ current: undefined });
+    const cleanup = usedEffect.mock.calls[0][0]();
+    expect(instances[0].observe).toHaveBeenCalledTimes(0);
+    cleanup();
+  });
+
+  it('does observe if valid ref given', () => {
+    const usedEffect = jest.fn();
+    (React as any).useEffect = usedEffect;
+    const instances = mockIntersectionObserver();
+    useOnScreenVisible({ current: {} as any });
+    const cleanup = usedEffect.mock.calls[0][0]();
+    expect(instances[0].observe).toHaveBeenCalledTimes(1);
+    cleanup();
+  });
+
+  it('calls setIntersecting if something changes', () => {
+    const usedEffect = jest.fn();
+    (React as any).useEffect = usedEffect;
+    const instances = mockIntersectionObserver();
+    useOnScreenVisible({ current: {} as any });
+    const cleanup = usedEffect.mock.calls[0][0]();
+    instances[0].init.mock.calls[0][0]([{ isIntersecting: true }]);
+    cleanup();
+    expect(instances[0].unobserve).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/onScreenVisible.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect, RefObject } from 'react';
+
+/**
+ * Hook that detects if a reference element within the main document is
+ * visible.
+ * Useful for performing some animation or triggering certain actions (e.g.,
+ * loading data for infinity scrolling) when an element appears or is close
+ * to appear on screen.
+ * @param ref The reference element to be visible.
+ * @param rootMargin The tolerance level to the reference element.
+ */
+export function useOnScreenVisible<T extends HTMLElement>(ref: RefObject<T>, rootMargin = '0px') {
+  const [isIntersecting, setIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting), {
+      rootMargin,
+    });
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => observer.unobserve(ref.current);
+  }, []);
+
+  return isIntersecting;
+}

package/src/hooks/piletApi.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { PiletApiProvider } from '../contexts';
+
+/**
+ * Retrieves the Pilet API stored in the provider.
+ * The component must be somewhat wrapped in the
+ * PiletApiProvider, e.g., via withPiletApi wrapper.
+ * @returns The Pilet API for this component.
+ */
+export function usePiletApi<TPiletApi = any>(): TPiletApi {
+  return useContext(PiletApiProvider);
+}

package/src/hooks/prompt.ts

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import type { History, Location } from 'history';
+
+/**
+ * Hook to notify the user in case of potential data loss when
+ * performing a page transition (internal or external).
+ * @param active True if the prompt should be shown, otherwise false.
+ * @param history The history of the currently used router.
+ * @param message The message to display when the prompt is shown.
+ */
+ export function usePrompt(
+  active: boolean,
+  history: History,
+  message: string,
+  onTransition?: (location: Location) => void
+) {
+  useEffect(() => {
+    if (active) {
+      const beforeUnload = (ev: BeforeUnloadEvent) => {
+        ev.returnValue = message;
+        return message;
+      };
+      const unlisten = onTransition && history.listen(onTransition);
+      const unblock = message && history.block(message);
+      window.addEventListener('beforeunload', beforeUnload);
+      return () => {
+        unlisten && unlisten();
+        unblock && unblock();
+        window.removeEventListener('beforeunload', beforeUnload);
+      };
+    }
+
+    return () => {};
+  }, [active, message]);
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './contexts';
+export * from './hooks';
+export * from './hocs';