react-ui-animate 3.0.0-rc.0 → 3.0.0-rc.1

package/src/gestures/hooks/useRecognizer.ts

@@ -1,59 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import * as React from 'react';
-
-type UseRecognizerHandlerType = Array<
-  [
-    key: 'drag' | 'wheel' | 'move' | 'scroll',
-    gesture: any,
-    callback: any,
-    config?: any
-  ]
->;
-
-export const useRecognizer = (handlers: UseRecognizerHandlerType) => {
-  const ref = React.useRef<any>();
-  const elementRefs = React.useRef<Array<any>>([]);
-  const subscribers = React.useRef<
-    Map<string, { keyIndex: number; gesture: any; unsubscribe: any }>
-  >(new Map()).current;
-
-  // re-initiate callback on change
-  React.useEffect(() => {
-    for (let [, { keyIndex, gesture }] of subscribers.entries()) {
-      const [, , callback] = handlers[keyIndex];
-      gesture.applyCallback(callback);
-    }
-  }, [handlers]);
-
-  React.useEffect(() => {
-    handlers.forEach(([key, gesture, callback, config], keyIndex) => {
-      subscribers.set(key, {
-        keyIndex,
-        gesture,
-        unsubscribe: gesture.applyGesture({
-          targetElement: ref.current,
-          targetElements: elementRefs.current,
-          callback,
-          config,
-        }),
-      });
-    });
-
-    return () => {
-      for (let [, { unsubscribe }] of subscribers.entries()) {
-        unsubscribe && unsubscribe();
-      }
-    };
-  }, []);
-
-  return (index?: number) => {
-    if (index === null || index === undefined) {
-      return { ref };
-    } else {
-      elementRefs.current[index] =
-        elementRefs.current[index] || React.createRef();
-
-      return { ref: elementRefs.current[index] };
-    }
-  };
-};

package/src/gestures/hooks/useScroll.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { ScrollEventType } from '../types';
-import { ScrollGesture } from '../controllers';
-import { useRecognizer } from './useRecognizer';
-
-export function useScroll(callback: (event: ScrollEventType) => void) {
-  const gesture = React.useRef(new ScrollGesture()).current;
-
-  return useRecognizer([['scroll', gesture, callback]]);
-}

package/src/gestures/hooks/useWheel.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { WheelEventType } from '../types';
-import { WheelGesture } from '../controllers';
-import { useRecognizer } from './useRecognizer';
-
-export function useWheel(callback: (event: WheelEventType) => void) {
-  const gesture = React.useRef(new WheelGesture()).current;
-
-  return useRecognizer([['wheel', gesture, callback]]);
-}

package/src/gestures/types/index.d.ts

@@ -1,49 +0,0 @@
-type GenericEventType = {
-  velocityX: number;
-  velocityY: number;
-  directionX: number;
-  directionY: number;
-};
-
-export type DragEventType = {
-  args: Array<number | undefined>;
-  down: boolean;
-  movementX: number;
-  movementY: number;
-  offsetX: number;
-  offsetY: number;
-  distanceX: number;
-  distanceY: number;
-  cancel: () => void;
-} & GenericEventType;
-
-export type MouseMoveEventType = {
-  args: Array<number | undefined>;
-  event: MouseEvent;
-  target: EventTarget | undefined | null;
-  isMoving: boolean;
-  mouseX: number;
-  mouseY: number;
-} & GenericEventType;
-
-export type ScrollEventType = {
-  isScrolling: boolean;
-  scrollX: number;
-  scrollY: number;
-} & GenericEventType;
-
-export type WheelEventType = {
-  target: HTMLElement | undefined | null;
-  isWheeling: boolean;
-  movementX: number;
-  movementY: number;
-  offsetX: number;
-  offsetY: number;
-  deltaX: number;
-  deltaY: number;
-} & GenericEventType;
-
-export type UseDragConfig = {
-  initial?: () => { movementX: number; movementY: number };
-};
-export type Vector2 = { x: number; y: number };

package/src/hooks/index.ts

@@ -1,3 +0,0 @@
-export * from "./useOutsideClick";
-export * from "./useMeasure";
-export * from "./useWindowDimension";

package/src/hooks/useMeasure.ts

@@ -1,132 +0,0 @@
-import { useRef, useEffect, DependencyList, createRef } from 'react';
-
-type MeasurementValue = number | Array<number>;
-
-type MeasurementType = {
-  left: MeasurementValue;
-  top: MeasurementValue;
-  width: MeasurementValue;
-  height: MeasurementValue;
-  vLeft: MeasurementValue;
-  vTop: MeasurementValue;
-};
-
-export function useMeasure(
-  callback: (event: MeasurementType) => void,
-  deps?: DependencyList
-) {
-  const ref = useRef(null);
-  const elementRefs = useRef([]);
-  const callbackRef = useRef<(event: MeasurementType) => void>(callback);
-
-  // Reinitiate callback when dependency change
-  useEffect(() => {
-    callbackRef.current = callback;
-
-    return () => {
-      callbackRef.current = () => false;
-    };
-  }, deps);
-
-  useEffect(() => {
-    const _refElement = ref.current || document.documentElement;
-    const _refElementsMultiple = elementRefs.current;
-
-    const resizeObserver = new ResizeObserver(([entry]) => {
-      const { left, top, width, height } = entry.target.getBoundingClientRect();
-      const { pageXOffset, pageYOffset } = window;
-
-      if (callbackRef) {
-        if (_refElement === document.documentElement) {
-          return; // no-op for document
-        } else {
-          callbackRef.current({
-            left: left + pageXOffset,
-            top: top + pageYOffset,
-            width,
-            height,
-            vLeft: left,
-            vTop: top,
-          });
-        }
-      }
-    });
-
-    const resizeObserverMultiple = new ResizeObserver((entries) => {
-      const left: Array<number> = [];
-      const top: Array<number> = [];
-      const width: Array<number> = [];
-      const height: Array<number> = [];
-      const vLeft: Array<number> = [];
-      const vTop: Array<number> = [];
-
-      entries.forEach((entry) => {
-        const {
-          left: _left,
-          top: _top,
-          width: _width,
-          height: _height,
-        } = entry.target.getBoundingClientRect();
-        const { pageXOffset, pageYOffset } = window;
-        const _pageLeft = _left + pageXOffset;
-        const _pageTop = _top + pageYOffset;
-
-        left.push(_pageLeft);
-        top.push(_pageTop);
-        width.push(_width);
-        height.push(_height);
-        vLeft.push(_left);
-        vTop.push(_top);
-      });
-
-      if (callbackRef) {
-        callbackRef.current({
-          left,
-          top,
-          width,
-          height,
-          vLeft,
-          vTop,
-        });
-      }
-    });
-
-    if (_refElement) {
-      if (
-        _refElement === document.documentElement &&
-        _refElementsMultiple.length > 0
-      ) {
-        _refElementsMultiple.forEach((element: any) => {
-          resizeObserverMultiple.observe(element.current);
-        });
-      } else {
-        resizeObserver.observe(_refElement);
-      }
-    }
-
-    return () => {
-      if (_refElement) {
-        if (
-          _refElement === document.documentElement &&
-          _refElementsMultiple.length > 0
-        ) {
-          _refElementsMultiple.forEach((element: any) => {
-            resizeObserverMultiple.unobserve(element.current);
-          });
-        } else {
-          resizeObserver.unobserve(_refElement);
-        }
-      }
-    };
-  }, []);
-
-  return (index?: number) => {
-    if (index === null || index === undefined) {
-      return { ref };
-    } else {
-      elementRefs.current[index] = elementRefs.current[index] || createRef();
-
-      return { ref: elementRefs.current[index] };
-    }
-  }; // ...bind() or ...bind(index) for multiple
-}

package/src/hooks/useOutsideClick.ts

@@ -1,36 +0,0 @@
-import { useRef, useEffect, RefObject, DependencyList } from 'react';
-
-import { attachEvents } from '../gestures/helpers/eventAttacher';
-
-export function useOutsideClick(
-  elementRef: RefObject<HTMLElement>,
-  callback: (event: MouseEvent) => void,
-  deps?: DependencyList
-) {
-  const callbackRef = useRef<(event: MouseEvent) => void>();
-
-  if (!callbackRef.current) {
-    callbackRef.current = callback;
-  }
-
-  // Reinitiate callback when dependency change
-  useEffect(() => {
-    callbackRef.current = callback;
-
-    return () => {
-      callbackRef.current = () => false;
-    };
-  }, deps);
-
-  useEffect(() => {
-    const handleOutsideClick = (e: MouseEvent) => {
-      if (!elementRef?.current?.contains(e.target as Element)) {
-        callbackRef.current && callbackRef.current(e);
-      }
-    };
-
-    const subscribe = attachEvents([document], [['click', handleOutsideClick]]);
-
-    return () => subscribe && subscribe();
-  }, []);
-}

package/src/hooks/useWindowDimension.ts

@@ -1,58 +0,0 @@
-import { useRef, useEffect, DependencyList } from 'react';
-
-type WindowDimensionType = {
-  width: number;
-  height: number;
-  innerWidth: number;
-  innerHeight: number;
-};
-
-export function useWindowDimension(
-  callback: (event: WindowDimensionType) => void,
-  deps?: DependencyList
-) {
-  const windowDimensionsRef = useRef<WindowDimensionType>({
-    width: 0,
-    height: 0,
-    innerWidth: 0,
-    innerHeight: 0,
-  });
-  const callbackRef = useRef<(event: WindowDimensionType) => void>(callback);
-
-  const handleCallback: () => void = () => {
-    if (callbackRef) {
-      callbackRef.current({
-        ...windowDimensionsRef.current,
-      });
-    }
-  };
-
-  // Reinitiate callback when dependency change
-  useEffect(() => {
-    callbackRef.current = callback;
-
-    return () => {
-      callbackRef.current = () => false;
-    };
-  }, deps);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(([entry]) => {
-      const { clientWidth, clientHeight } = entry.target;
-      const { innerWidth, innerHeight } = window;
-
-      windowDimensionsRef.current = {
-        width: clientWidth,
-        height: clientHeight,
-        innerWidth,
-        innerHeight,
-      };
-
-      handleCallback();
-    });
-
-    resizeObserver.observe(document.documentElement);
-
-    return () => resizeObserver.unobserve(document.documentElement);
-  }, []);
-}

package/src/index.ts

@@ -1,42 +0,0 @@
-// Core
-export { Easing, makeFluid, fluid } from './animation/core';
-
-// react-ui-animate
-// Modules
-export {
-  AnimatedBlock,
-  AnimatedImage,
-  AnimatedInline,
-  AnimationConfigUtils,
-  MountedBlock,
-  ScrollableBlock,
-  TransitionBlock,
-} from './animation/lib';
-
-// Interpolation
-export { bInterpolate, interpolate } from './animation/lib';
-
-// Hooks
-
-export { useAnimatedValue, useMountedValue } from './animation/lib';
-
-// Helpers and Utilities
-export { delay } from './utils';
-
-// Hooks
-export { useMeasure, useOutsideClick, useWindowDimension } from './hooks';
-
-// gestures/hooks
-export {
-  useDrag,
-  useGesture,
-  useMouseMove,
-  useScroll,
-  useWheel,
-} from './gestures/hooks';
-
-// gestures/helpers
-export { bin, clamp, mix, rubberClamp, move, snapTo } from './gestures/helpers';
-
-// Types
-export type { UseAnimatedValueConfig } from './animation/lib';

package/src/utils/delay.ts

@@ -1,9 +0,0 @@
-/**
- * @param { number } ms - number of milliseconds to delay code execution
- * @returns Promise
- */
-export function delay(ms: number) {
-  return new Promise((resolve) => {
-    setTimeout(() => resolve(null), ms);
-  });
-}

package/src/utils/index.ts

@@ -1 +0,0 @@
-export * from './delay';

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "dist",
-    "module": "esnext",
-    "target": "es5",
-    "lib": ["es6", "dom", "es2016", "es2017", "es2019"],
-    "downlevelIteration": true,
-    "sourceMap": true,
-    "allowJs": false,
-    "jsx": "react-jsx",
-    "declaration": true,
-    "moduleResolution": "node",
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "types": ["resize-observer-browser", "node", "@types/jest"]
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "example", "rollup.config.js"]
-}