piral-core 0.14.0-pre.3018 → 0.14.0-pre.3085

package/lib/hooks/onScreenVisible.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOnScreenVisible = void 0;
-var react_1 = require("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.
- */
-function useOnScreenVisible(ref, rootMargin) {
-    if (rootMargin === void 0) { rootMargin = '0px'; }
-    var _a = react_1.useState(false), isIntersecting = _a[0], setIntersecting = _a[1];
-    react_1.useEffect(function () {
-        var observer = new IntersectionObserver(function (_a) {
-            var entry = _a[0];
-            return setIntersecting(entry.isIntersecting);
-        }, {
-            rootMargin: rootMargin,
-        });
-        if (ref.current) {
-            observer.observe(ref.current);
-        }
-        return function () { return observer.unobserve(ref.current); };
-    }, []);
-    return isIntersecting;
-}
-exports.useOnScreenVisible = useOnScreenVisible;
-//# sourceMappingURL=onScreenVisible.js.map

package/lib/hooks/onScreenVisible.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"onScreenVisible.js","sourceRoot":"","sources":["../../src/hooks/onScreenVisible.ts"],"names":[],"mappings":";;;AAAA,+BAAuD;AAEvD;;;;;;;;GAQG;AACH,SAAgB,kBAAkB,CAAwB,GAAiB,EAAE,UAAkB;IAAlB,2BAAA,EAAA,kBAAkB;IACvF,IAAA,KAAoC,gBAAQ,CAAC,KAAK,CAAC,EAAlD,cAAc,QAAA,EAAE,eAAe,QAAmB,CAAC;IAE1D,iBAAS,CAAC;QACR,IAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,UAAC,EAAO;gBAAN,KAAK,QAAA;YAAM,OAAA,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC;QAArC,CAAqC,EAAE;YAC5F,UAAU,YAAA;SACX,CAAC,CAAC;QAEH,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,OAAO,cAAM,OAAA,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,EAA/B,CAA+B,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,cAAc,CAAC;AACxB,CAAC;AAhBD,gDAgBC"}

package/lib/hooks/promise.d.ts

@@ -1,13 +0,0 @@
-/**
- * The currently captured Promise state.
- */
-export interface UsePromiseResult<T> {
-    loading: boolean;
-    data: T;
-    error: any;
-}
-/**
- * Hook for introducing a complete local loading state for a promise.
- * @param promise The callback for the promise to wait for.
- */
-export declare function usePromise<T>(promise: () => Promise<T>): UsePromiseResult<T>;

package/lib/hooks/promise.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePromise = void 0;
-var react_1 = require("react");
-/**
- * Hook for introducing a complete local loading state for a promise.
- * @param promise The callback for the promise to wait for.
- */
-function usePromise(promise) {
-    var _a = react_1.useState({
-        loading: true,
-        data: undefined,
-        error: undefined,
-    }), result = _a[0], setResult = _a[1];
-    react_1.useEffect(function () {
-        var cancelled = false;
-        promise().then(function (data) { return !cancelled && setResult({ data: data, error: undefined, loading: false }); }, function (error) { return !cancelled && setResult({ data: undefined, error: error, loading: false }); });
-        return function () {
-            cancelled = true;
-        };
-    }, []);
-    return result;
-}
-exports.usePromise = usePromise;
-//# sourceMappingURL=promise.js.map

package/lib/hooks/promise.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"promise.js","sourceRoot":"","sources":["../../src/hooks/promise.ts"],"names":[],"mappings":";;;AAAA,+BAA4C;AAW5C;;;GAGG;AACH,SAAgB,UAAU,CAAI,OAAyB;IAC/C,IAAA,KAAsB,gBAAQ,CAAsB;QACxD,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;KACjB,CAAC,EAJK,MAAM,QAAA,EAAE,SAAS,QAItB,CAAC;IACH,iBAAS,CAAC;QACR,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,OAAO,EAAE,CAAC,IAAI,CACZ,UAAC,IAAI,IAAK,OAAA,CAAC,SAAS,IAAI,SAAS,CAAC,EAAE,IAAI,MAAA,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAnE,CAAmE,EAC7E,UAAC,KAAK,IAAK,OAAA,CAAC,SAAS,IAAI,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,OAAA,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAnE,CAAmE,CAC/E,CAAC;QAEF,OAAO;YACL,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,MAAM,CAAC;AAChB,CAAC;AAnBD,gCAmBC"}

package/src/hooks/debounce.test.ts

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { useDebounce } from './debounce';
-
-jest.mock('react');
-
-describe('Debounce Hook Module', () => {
-  it('just returns initial value if nothing has been changed', () => {
-    const usedEffect = jest.fn();
-    const usedState = jest.fn((value) => [value]);
-    (React as any).useState = usedState;
-    (React as any).useEffect = usedEffect;
-    const result = useDebounce('foo');
-    expect(usedEffect).toHaveBeenCalled();
-    expect(usedState).toHaveBeenCalled();
-    expect(result).toBe('foo');
-  });
-
-  it('invokes useEffect immediately, but does not set value immediately', () => {
-    const usedEffect = jest.fn((fn) => fn());
-    const setValue = jest.fn();
-    const usedState = jest.fn((value) => [value, setValue]);
-    (React as any).useState = usedState;
-    (React as any).useEffect = usedEffect;
-    useDebounce('foo');
-    expect(setValue).not.toHaveBeenCalled();
-  });
-
-  it('invokes useEffect immediately, but sets value immediately if 0', () => {
-    jest.useFakeTimers();
-    const usedEffect = jest.fn((fn) => fn());
-    const setValue = jest.fn();
-    const usedState = jest.fn((value) => [value, setValue]);
-    (React as any).useState = usedState;
-    (React as any).useEffect = usedEffect;
-    useDebounce('foo', 0);
-    jest.advanceTimersByTime(0);
-    expect(setValue).toHaveBeenCalled();
-  });
-
-  it('invokes useEffect immediately, but sets value after wait time', () => {
-    jest.useFakeTimers();
-    const usedEffect = jest.fn((fn) => fn());
-    const setValue = jest.fn();
-    const usedState = jest.fn((value) => [value, setValue]);
-    (React as any).useState = usedState;
-    (React as any).useEffect = usedEffect;
-    expect(setValue).not.toHaveBeenCalled();
-    useDebounce('foo', 300);
-    jest.advanceTimersByTime(300);
-    expect(setValue).toHaveBeenCalled();
-  });
-
-  it('invokes useEffect immediately and resets timer if needed', () => {
-    jest.useFakeTimers();
-    const usedEffect = jest.fn((fn) => fn());
-    const setValue = jest.fn();
-    const usedState = jest.fn((value) => [value, setValue]);
-    (React as any).useState = usedState;
-    (React as any).useEffect = usedEffect;
-    expect(setValue).not.toHaveBeenCalled();
-    useDebounce('foo', 300);
-    jest.advanceTimersByTime(250);
-    usedEffect.mock.results[0].value();
-    jest.advanceTimersByTime(50);
-    expect(setValue).not.toHaveBeenCalled();
-  });
-});

package/src/hooks/debounce.ts

@@ -1,19 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * Hook that returns the debounced (i.e., delayed) value.
- * Useful when user input should not fire immediately, but rather
- * only after a certain timespan without any changes passed.
- * @param value The value to consider.
- * @param delay The timespan to pass before applying the value.
- */
-export function useDebounce<T>(value: T, delay = 300) {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => setDebouncedValue(value), delay);
-    return () => clearTimeout(handler);
-  }, [value, delay]);
-
-  return debouncedValue;
-}

package/src/hooks/lockBodyScroll.test.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { useLockBodyScroll } from './lockBodyScroll';
-
-jest.mock('react');
-
-describe('LockBodyScroll Hook Module', () => {
-  it('sets the body overflow to hidden on being initiated', () => {
-    const usedEffect = jest.fn();
-    (React as any).useLayoutEffect = usedEffect;
-    useLockBodyScroll();
-    expect(usedEffect).toHaveBeenCalled();
-    usedEffect.mock.calls[0][0]();
-    expect(document.body.style.overflow).toBe('hidden');
-  });
-
-  it('sets the body overflow to visible on cleanup', () => {
-    const usedEffect = jest.fn();
-    (React as any).useLayoutEffect = usedEffect;
-    useLockBodyScroll();
-    const cleanup = usedEffect.mock.calls[0][0]();
-    cleanup();
-    expect(document.body.style.overflow).toBe('visible');
-  });
-});

package/src/hooks/lockBodyScroll.ts

@@ -1,15 +0,0 @@
-import { useLayoutEffect } from 'react';
-
-/**
- * Hook that locks scrolling on the main document.
- * Useful for preventing the standard scrolling in context of
- * a modal dialog.
- */
-export function useLockBodyScroll() {
-  useLayoutEffect(() => {
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = 'visible';
-    };
-  }, []);
-}

package/src/hooks/onClickOutside.test.ts

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import { useOnClickOutside } from './onClickOutside';
-
-jest.mock('react');
-
-describe('OnClickOutside Module', () => {
-  it('is properly hooked on when initiating the effect', () => {
-    const usedEffect = jest.fn();
-    const originalAdd = document.addEventListener;
-    const originalRemove = document.addEventListener;
-    document.addEventListener = jest.fn();
-    document.removeEventListener = jest.fn();
-    (React as any).useEffect = usedEffect;
-    useOnClickOutside({ current: {} as any }, jest.fn());
-    expect(usedEffect).toHaveBeenCalled();
-    const cleanup = usedEffect.mock.calls[0][0]();
-    cleanup();
-    expect(document.addEventListener).toHaveBeenCalledTimes(2);
-    document.addEventListener = originalAdd;
-    document.removeEventListener = originalRemove;
-  });
-
-  it('is properly cleaned up when leaving the effect', () => {
-    const usedEffect = jest.fn();
-    const originalAdd = document.addEventListener;
-    const originalRemove = document.addEventListener;
-    document.addEventListener = jest.fn();
-    document.removeEventListener = jest.fn();
-    (React as any).useEffect = usedEffect;
-    useOnClickOutside({ current: {} as any }, jest.fn());
-    expect(usedEffect).toHaveBeenCalled();
-    const cleanup = usedEffect.mock.calls[0][0]();
-    cleanup();
-    expect(document.removeEventListener).toHaveBeenCalledTimes(2);
-    document.addEventListener = originalAdd;
-    document.removeEventListener = originalRemove;
-  });
-
-  it('not calling the handler on mousedown if no ref is available', () => {
-    const usedEffect = jest.fn();
-    const handler = jest.fn();
-    (React as any).useEffect = usedEffect;
-    useOnClickOutside({ current: undefined }, handler);
-    const cleanup = usedEffect.mock.calls[0][0]();
-    const event = new Event('mousedown', { bubbles: true });
-    document.body.dispatchEvent(event);
-    cleanup();
-    expect(handler).not.toHaveBeenCalled();
-  });
-
-  it('not calling the handler on mousedown if ref is available, but contains the node', () => {
-    const usedEffect = jest.fn();
-    const handler = jest.fn();
-    (React as any).useEffect = usedEffect;
-    useOnClickOutside(
-      {
-        current: {
-          contains() {
-            return true;
-          },
-        } as any,
-      },
-      handler,
-    );
-    const cleanup = usedEffect.mock.calls[0][0]();
-    const event = new Event('mousedown', { bubbles: true });
-    document.body.dispatchEvent(event);
-    cleanup();
-    expect(handler).not.toHaveBeenCalled();
-  });
-
-  it('called the handler on mousedown if ref is available and does not contain node', () => {
-    const usedEffect = jest.fn();
-    const handler = jest.fn();
-    (React as any).useEffect = usedEffect;
-    useOnClickOutside(
-      {
-        current: {
-          contains() {
-            return false;
-          },
-        } as any,
-      },
-      handler,
-    );
-    const cleanup = usedEffect.mock.calls[0][0]();
-    const event = new Event('mousedown', { bubbles: true });
-    document.body.dispatchEvent(event);
-    cleanup();
-    expect(handler).toHaveBeenCalledWith(event);
-  });
-
-  it('called the handler on touchstart if ref is available and does not contain node', () => {
-    const usedEffect = jest.fn();
-    const handler = jest.fn();
-    (React as any).useEffect = usedEffect;
-    useOnClickOutside(
-      {
-        current: {
-          contains() {
-            return false;
-          },
-        } as any,
-      },
-      handler,
-    );
-    const cleanup = usedEffect.mock.calls[0][0]();
-    const event = new Event('touchstart', { bubbles: true });
-    document.body.dispatchEvent(event);
-    cleanup();
-    expect(handler).toHaveBeenCalledWith(event);
-  });
-});

package/src/hooks/onClickOutside.ts

@@ -1,25 +0,0 @@
-import { useEffect, RefObject } from 'react';
-
-/**
- * Hook that detects if a click outside the given reference
- * has been performed.
- * @param ref The reference to the element.
- * @param handler The callback to invoke when an outside click happened.
- */
-export function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T>, handler: (event: MouseEvent) => void) {
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        handler(event);
-      }
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [handler]);
-}

package/src/hooks/onScreenVisible.test.ts

@@ -1,68 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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/promise.test.ts

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { usePromise } from './promise';
-
-jest.mock('react');
-
-describe('Promise Module', () => {
-  it('directly reports loading', () => {
-    const usedEffect = jest.fn();
-    const setState = jest.fn();
-    (React as any).useEffect = usedEffect;
-    (React as any).useState = (current) => [current, setState];
-    const result = usePromise(() => Promise.resolve());
-    expect(result).toEqual({
-      loading: true,
-      data: undefined,
-      error: undefined,
-    });
-  });
-
-  it('reports loading after the effect is done', () => {
-    const usedEffect = jest.fn((fn) => fn());
-    const setState = jest.fn();
-    (React as any).useEffect = usedEffect;
-    (React as any).useState = (current) => [current, setState];
-    const result = usePromise(() => Promise.resolve());
-    expect(result).toEqual({
-      loading: true,
-      data: undefined,
-      error: undefined,
-    });
-  });
-
-  it('reports done when the loading finished', async () => {
-    const usedEffect = jest.fn((fn) => fn());
-    const setState = jest.fn();
-    (React as any).useEffect = usedEffect;
-    (React as any).useState = (current) => [current, setState];
-    usePromise(() => Promise.resolve('123'));
-    await Promise.resolve();
-    expect(setState.mock.calls.length).toBe(1);
-    expect(setState.mock.calls[0]).toEqual([
-      {
-        loading: false,
-        data: '123',
-        error: undefined,
-      },
-    ]);
-  });
-
-  it('reports error when the loading finished', async () => {
-    const usedEffect = jest.fn((fn) => fn());
-    const setState = jest.fn();
-    (React as any).useEffect = usedEffect;
-    (React as any).useState = (current) => [current, setState];
-    usePromise(() => Promise.reject('123'));
-    await Promise.resolve();
-    expect(setState.mock.calls.length).toBe(1);
-    expect(setState.mock.calls[0]).toEqual([
-      {
-        loading: false,
-        data: undefined,
-        error: '123',
-      },
-    ]);
-  });
-
-  it('does not set the state on cancel', async () => {
-    const usedEffect = jest.fn((fn) => fn()());
-    const setState = jest.fn();
-    (React as any).useEffect = usedEffect;
-    (React as any).useState = (current) => [current, setState];
-    usePromise(() => Promise.reject('123'));
-    await Promise.resolve();
-    expect(setState.mock.calls.length).toBe(0);
-  });
-});

package/src/hooks/promise.ts

@@ -1,35 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * The currently captured Promise state.
- */
-export interface UsePromiseResult<T> {
-  loading: boolean;
-  data: T;
-  error: any;
-}
-
-/**
- * Hook for introducing a complete local loading state for a promise.
- * @param promise The callback for the promise to wait for.
- */
-export function usePromise<T>(promise: () => Promise<T>) {
-  const [result, setResult] = useState<UsePromiseResult<T>>({
-    loading: true,
-    data: undefined,
-    error: undefined,
-  });
-  useEffect(() => {
-    let cancelled = false;
-
-    promise().then(
-      (data) => !cancelled && setResult({ data, error: undefined, loading: false }),
-      (error) => !cancelled && setResult({ data: undefined, error, loading: false }),
-    );
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-  return result;
-}