piral-core 1.0.0-pre.2296 → 1.0.1-beta.5640

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,13 +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;
-}

package/src/utils/events.test.ts

@@ -1,65 +0,0 @@
-import { createListener } from './events';
-
-describe('Events Module', () => {
-  it('add and emit event', (done) => {
-    const events = createListener(undefined);
-    const mockCallback = jest.fn();
-    events.on('init', mockCallback);
-    events.emit('init', undefined);
-
-    setTimeout(() => {
-      expect(mockCallback).toHaveBeenCalledTimes(1);
-      done();
-    }, 1);
-  });
-
-  it('does only react to self events when different states', (done) => {
-    const events1 = createListener({});
-    const events2 = createListener({});
-    const mockCallback = jest.fn();
-    events1.on('init', mockCallback);
-    events2.emit('init', undefined);
-
-    setTimeout(() => {
-      expect(mockCallback).toHaveBeenCalledTimes(0);
-      done();
-    }, 1);
-  });
-
-  it('does only react to self events when same state', (done) => {
-    const events1 = createListener(undefined);
-    const events2 = createListener(undefined);
-    const mockCallback = jest.fn();
-    events1.on('init', mockCallback);
-    events2.emit('init', undefined);
-
-    setTimeout(() => {
-      expect(mockCallback).toHaveBeenCalledTimes(1);
-      done();
-    }, 1);
-  });
-
-  it('emit on empty event should be fine', () => {
-    const events = createListener(undefined);
-    events.emit('init', undefined);
-  });
-
-  it('should not try to remove non-existing listener', () => {
-    const events = createListener(undefined);
-    events.off('init', jest.fn());
-  });
-
-  it('should not be possible to emit after event removed', (done) => {
-    const events = createListener(undefined);
-    const mockCallback = jest.fn();
-    events.on('init', mockCallback);
-    events.emit('init', undefined);
-    events.off('init', mockCallback);
-    events.emit('init', undefined);
-
-    setTimeout(() => {
-      expect(mockCallback).toHaveBeenCalledTimes(1);
-      done();
-    }, 1);
-  });
-});

package/src/utils/events.ts

@@ -1,39 +0,0 @@
-import { EventEmitter } from '../types';
-
-export type EventListeners = Array<[any, any]>;
-
-function nameOf(type: string | number) {
-  return `piral-${type}`;
-}
-
-export function createListener(state: any): EventEmitter {
-  const eventListeners: EventListeners = [];
-
-  return {
-    on(type, callback) {
-      const listener = ({ detail }: CustomEvent) => detail && detail.state === state && callback(detail.arg);
-      document.body.addEventListener(nameOf(type), listener);
-      eventListeners.push([callback, listener]);
-      return this;
-    },
-    off(type, callback) {
-      const [listener] = eventListeners.filter((m) => m[0] === callback);
-
-      if (listener) {
-        document.body.removeEventListener(nameOf(type), listener[1]);
-        eventListeners.splice(eventListeners.indexOf(listener), 1);
-      }
-
-      return this;
-    },
-    emit(type, arg) {
-      const ce = document.createEvent('CustomEvent');
-      ce.initCustomEvent(nameOf(type), false, false, {
-        arg,
-        state,
-      });
-      document.body.dispatchEvent(ce);
-      return this;
-    },
-  };
-}

package/src/{components → defaults}/DefaultLayout.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { LayoutProps } from '../types';
 import { defaultRender } from '../utils';
+import { LayoutProps } from '../types';
 
 /**
  * The default layout only rendering the provided children.