react-ui-animate 1.2.2 → 1.4.2

package/src/hooks/useOutsideClick.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { attachEvents } from "../controllers";
+
+import { attachEvents } from "../gestures/eventAttacher";
 
 export function useOutsideClick(
   elementRef: React.RefObject<HTMLElement>,
@@ -28,7 +29,7 @@ export function useOutsideClick(
       }
     };
 
-    const subscribe = attachEvents(document, [["click", handleOutsideClick]]);
+    const subscribe = attachEvents([document], [["click", handleOutsideClick]]);
 
     return () => subscribe && subscribe();
   }, []);

package/src/hooks/useWindowDimension.ts

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { WindowDimensionType } from "../Types";
+
+type WindowDimensionType = {
+  width: number;
+  height: number;
+  innerWidth: number;
+  innerHeight: number;
+};
 
 export function useWindowDimension(
   callback: (event: WindowDimensionType) => void,

package/src/index.ts

@@ -1,7 +1,4 @@
 export { Easing } from "@raidipesh78/re-motion";
-export { useAnimatedValue } from "./useAnimatedValue";
-export * from "./useMountedValue";
-export * from "./Interpolation";
-export * from "./Modules";
-export * from "./Math";
+export * from "./animation";
+export * from "./gestures";
 export * from "./hooks";

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./isDefined";

package/tsconfig.json

@@ -4,6 +4,7 @@
     "module": "esnext",
     "target": "es5",
     "lib": ["es6", "dom", "es2016", "es2017", "es2019"],
+    "downlevelIteration": true,
     "sourceMap": true,
     "allowJs": false,
     "jsx": "react",

package/src/controllers/EventAttacher.ts

@@ -1,35 +0,0 @@
-/**
- * Attach single document / window event / HTMLElement
- */
-export function attachEvent(
-  domTarget: Window | Document | HTMLElement,
-  event: string,
-  callback: (e: any) => void,
-  capture: any = false
-) {
-  domTarget.addEventListener(event, callback, capture);
-
-  return function () {
-    domTarget.removeEventListener(event, callback, capture);
-  };
-}
-
-/**
- * Attach multiple document / window event / HTMLElement
- */
-export function attachEvents(
-  domTarget: Window | Document | HTMLElement,
-  events: Array<[event: string, callback: (e: any) => void, capture?: any]>
-) {
-  const subscribers: Array<() => void> = [];
-
-  events.forEach(function ([event, callback, capture = false]) {
-    subscribers.push(attachEvent(domTarget, event, callback, capture));
-  });
-
-  return function () {
-    subscribers.forEach(function (subscriber) {
-      subscriber();
-    });
-  };
-}

package/src/controllers/index.ts

@@ -1 +0,0 @@
-export * from "./EventAttacher";

package/src/hooks/useDrag.ts

@@ -1,231 +0,0 @@
-import * as React from "react";
-import { DragEventType, Vector2, UseDragConfig } from "../Types";
-import { clamp } from "../Math";
-import { attachEvents } from "../controllers";
-
-export function useDrag(
-  callback: (event: DragEventType) => void,
-  config?: UseDragConfig,
-  deps?: React.DependencyList
-) {
-  const _VELOCITY_LIMIT = 20;
-
-  const currentIndex = React.useRef<number | undefined>(undefined);
-  const ref = React.useRef<any>(null);
-  const elementRefs = React.useRef<Array<any>>([]);
-
-  const callbackRef = React.useRef<(event: DragEventType) => void>(callback);
-
-  const cancelRef = React.useRef<() => void>();
-
-  const isGestureActive = React.useRef<boolean>(false);
-
-  // Holds only movement - always starts from 0
-  const movement = React.useRef<Vector2>({ x: 0, y: 0 });
-  const movementStart = React.useRef<Vector2>({ x: 0, y: 0 });
-  const previousMovement = React.useRef<Vector2>({ x: 0, y: 0 });
-  const initialMovement = React.useRef<Vector2>({ x: 0, y: 0 });
-
-  // Holds offsets
-  const translation = React.useRef<Vector2>({ x: 0, y: 0 });
-  const offset = React.useRef<Vector2>({ x: 0, y: 0 });
-
-  const lastTimeStamp = React.useRef<number>(0);
-  const velocity = React.useRef<Vector2>({ x: 0, y: 0 });
-
-  const handleCallback = () => {
-    if (callbackRef) {
-      callbackRef.current({
-        args: [currentIndex.current],
-        down: isGestureActive.current,
-        movementX: movement.current.x,
-        movementY: movement.current.y,
-        offsetX: translation.current.x,
-        offsetY: translation.current.y,
-        velocityX: velocity.current.x,
-        velocityY: velocity.current.y,
-        distanceX: Math.abs(movement.current.x),
-        distanceY: Math.abs(movement.current.y),
-        directionX: Math.sign(movement.current.x),
-        directionY: Math.sign(movement.current.y),
-        cancel: function () {
-          cancelRef.current && cancelRef.current();
-        },
-      });
-    }
-  };
-
-  // Reinitiate callback when dependency change
-  React.useEffect(() => {
-    callbackRef.current = callback;
-
-    return () => {
-      callbackRef.current = () => false;
-    };
-  }, deps);
-
-  React.useEffect(() => {
-    const _elemRef = ref.current;
-    const _refElementsMultiple = elementRefs.current;
-
-    var reSubscribe: any;
-    const _initEvents = () => {
-      if (_elemRef || _refElementsMultiple.length > 0) {
-        reSubscribe = attachEvents(window, [
-          ["mousedown", pointerDown],
-          ["mousemove", pointerMove],
-          ["touchstart", pointerDown, { passive: false }],
-          ["touchmove", pointerMove, { passive: false }],
-        ]);
-      }
-    };
-
-    const pointerDown = (e: any) => {
-      if (e.type === "touchstart") {
-        movementStart.current = {
-          x: e.touches[0].clientX,
-          y: e.touches[0].clientY,
-        };
-      } else {
-        movementStart.current = { x: e.clientX, y: e.clientY };
-      }
-
-      movement.current = { x: 0, y: 0 };
-      offset.current = { x: translation.current.x, y: translation.current.y };
-      previousMovement.current = { x: 0, y: 0 };
-      velocity.current = { x: 0, y: 0 };
-
-      // find current selected element
-      const currElem = _refElementsMultiple.find(
-        (elem) => elem.current === e.target
-      );
-
-      if (e.target === _elemRef || currElem) {
-        isGestureActive.current = true;
-        e.preventDefault();
-
-        // set args
-        if (currElem) {
-          currentIndex.current = _refElementsMultiple.indexOf(currElem);
-        }
-
-        // if initial function is defined then call it to get initial movementX and movementY
-        // if only select to bounded draggable element
-        const initial = config?.initial && config.initial();
-        const initialMovementX = initial?.movementX;
-        const initialMovementY = initial?.movementY;
-
-        initialMovement.current = {
-          x: initialMovementX ?? 0,
-          y: initialMovementY ?? 0,
-        };
-
-        movement.current = {
-          x: initialMovement.current.x,
-          y: initialMovement.current.y,
-        };
-
-        previousMovement.current = {
-          x: initialMovement.current.x,
-          y: initialMovement.current.y,
-        };
-
-        handleCallback();
-      }
-    };
-
-    const pointerMove = (e: any) => {
-      if (isGestureActive.current) {
-        e.preventDefault();
-        const now = Date.now();
-        const deltaTime = Math.min(now - lastTimeStamp.current, 64);
-        lastTimeStamp.current = now;
-
-        const t = deltaTime / 1000;
-
-        if (e.type === "touchmove") {
-          movement.current = {
-            x:
-              initialMovement.current.x +
-              (e.touches[0].clientX - movementStart.current.x),
-            y:
-              initialMovement.current.y +
-              (e.touches[0].clientY - movementStart.current.y),
-          };
-        } else {
-          movement.current = {
-            x:
-              initialMovement.current.x + (e.clientX - movementStart.current.x),
-            y:
-              initialMovement.current.y + (e.clientY - movementStart.current.y),
-          };
-        }
-
-        translation.current = {
-          x: offset.current.x + movement.current.x,
-          y: offset.current.y + movement.current.y,
-        };
-
-        velocity.current = {
-          x: clamp(
-            (movement.current.x - previousMovement.current.x) / t / 1000,
-            -_VELOCITY_LIMIT,
-            _VELOCITY_LIMIT
-          ),
-          y: clamp(
-            (movement.current.y - previousMovement.current.y) / t / 1000,
-            -_VELOCITY_LIMIT,
-            _VELOCITY_LIMIT
-          ),
-        };
-
-        previousMovement.current = {
-          x: movement.current.x,
-          y: movement.current.y,
-        };
-
-        handleCallback();
-      }
-    };
-
-    const pointerUp = () => {
-      if (isGestureActive.current) {
-        isGestureActive.current = false;
-        handleCallback();
-        _initEvents();
-      }
-    };
-
-    var subscribe: any;
-    if (_elemRef || _refElementsMultiple.length > 0) {
-      subscribe = attachEvents(window, [
-        ["mousedown", pointerDown],
-        ["mousemove", pointerMove],
-        ["mouseup", pointerUp],
-        ["touchstart", pointerDown, { passive: false }],
-        ["touchmove", pointerMove, { passive: false }],
-        ["touchend", pointerUp],
-      ]);
-    }
-
-    const _cancelEvents = () => {
-      _initEvents(); // When cancel is called for first time reSubscription is undefined, so initializing reSubscribe and calling it fixes the issue
-      reSubscribe && reSubscribe();
-    };
-
-    cancelRef.current = _cancelEvents;
-
-    return () => subscribe && subscribe();
-  }, []);
-
-  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/hooks/useMouseMove.ts

@@ -1,123 +0,0 @@
-import * as React from "react";
-import { MouseMoveEventType, Vector2 } from "../Types";
-import { clamp } from "../Math";
-import { attachEvents } from "../controllers";
-
-export function useMouseMove(
-  callback: (event: MouseMoveEventType) => void,
-  deps?: React.DependencyList
-) {
-  const _VELOCITY_LIMIT = 20;
-
-  const ref = React.useRef<any>(null);
-
-  const callbackRef =
-    React.useRef<(event: MouseMoveEventType) => void>(callback);
-  const isMoving = React.useRef<boolean>(false);
-  const _isMoving = React.useRef<any>(-1);
-  const mouseXY = React.useRef<Vector2>({ x: 0, y: 0 });
-  const prevMouseXY = React.useRef<Vector2>({ x: 0, y: 0 });
-  const directionXY = React.useRef<Vector2>({ x: 0, y: 0 });
-  const velocityXY = React.useRef<Vector2>({ x: 0, y: 0 });
-  const currentEvent = React.useRef<MouseEvent>();
-  const lastTimeStamp = React.useRef<number>(0);
-
-  const handleCallback = () => {
-    if (callbackRef) {
-      callbackRef.current({
-        target: currentEvent.current?.target,
-        isMoving: isMoving.current,
-        mouseX: mouseXY.current.x,
-        mouseY: mouseXY.current.y,
-        velocityX: velocityXY.current.x,
-        velocityY: velocityXY.current.y,
-        directionX: directionXY.current.x,
-        directionY: directionXY.current.y,
-      });
-    }
-  };
-
-  // Reinitiate callback when dependency change
-  React.useEffect(() => {
-    callbackRef.current = callback;
-
-    return () => {
-      callbackRef.current = () => false;
-    };
-  }, deps);
-
-  React.useEffect(() => {
-    const _refElement = ref.current;
-
-    const mouseMove = ({ e, x, y }: { e: MouseEvent } & Vector2) => {
-      const now: number = Date.now();
-      const deltaTime = Math.min(now - lastTimeStamp.current, 64);
-      lastTimeStamp.current = now;
-      const t = deltaTime / 1000; // seconds
-
-      mouseXY.current = { x, y };
-      currentEvent.current = e;
-
-      if (_isMoving.current !== -1) {
-        isMoving.current = true;
-        clearTimeout(_isMoving.current);
-      }
-
-      _isMoving.current = setTimeout(() => {
-        isMoving.current = false;
-        directionXY.current = { x: 0, y: 0 };
-        velocityXY.current = { x: 0, y: 0 };
-
-        handleCallback();
-      }, 250); // Debounce 250 milliseconds
-
-      const diffX = mouseXY.current.x - prevMouseXY.current.x;
-      const diffY = mouseXY.current.y - prevMouseXY.current.y;
-
-      directionXY.current = {
-        x: Math.sign(diffX),
-        y: Math.sign(diffY),
-      };
-
-      velocityXY.current = {
-        x: clamp(diffX / t / 1000, -_VELOCITY_LIMIT, _VELOCITY_LIMIT),
-        y: clamp(diffY / t / 1000, -_VELOCITY_LIMIT, _VELOCITY_LIMIT),
-      };
-
-      prevMouseXY.current = { x: mouseXY.current.x, y: mouseXY.current.y };
-
-      handleCallback();
-    };
-
-    const mouseMoveElementListener = (e: MouseEvent) => {
-      /** Is offsetLeft / offsetTop needed here ???
-       *  const elementOffsetLeft = _refElement?.offsetLeft || 0;
-       * const elementOffsetTop = _refElement?.offsetTop || 0;
-       */
-
-      mouseMove({
-        e,
-        x: e.clientX,
-        y: e.clientY,
-      });
-    };
-
-    const mouseMoveListener = (e: MouseEvent) => {
-      mouseMove({ e, x: e.clientX, y: e.clientY });
-    };
-
-    var subscribe: any;
-
-    if (_refElement) {
-      subscribe = attachEvents(_refElement, [
-        ["mousemove", mouseMoveElementListener],
-      ]);
-    } else {
-      subscribe = attachEvents(window, [["mousemove", mouseMoveListener]]);
-    }
-
-    return () => subscribe && subscribe();
-  }, []);
-
-  return () => ({ ref }); // ...bind()
-}

package/src/hooks/useScroll.ts

@@ -1,124 +0,0 @@
-import * as React from "react";
-import { ScrollEventType, Vector2 } from "../Types";
-import { clamp } from "../Math";
-import { attachEvents } from "../controllers";
-
-export function useScroll(
-  callback: (event: ScrollEventType) => void,
-  deps?: React.DependencyList
-) {
-  const ref = React.useRef<any>(null);
-
-  const scrollXY = React.useRef<Vector2>({
-    x: 0,
-    y: 0,
-  });
-  const previousScrollXY = React.useRef<Vector2>({
-    x: 0,
-    y: 0,
-  });
-  const isScrolling = React.useRef<boolean>(false);
-  const scrollDirection = React.useRef<Vector2>({ x: 0, y: 0 });
-  const _isScrolling = React.useRef<any>(-1); // For checking scrolling and add throttle
-
-  const lastTimeStamp = React.useRef<number>(0);
-  const velocity = React.useRef<Vector2>({ x: 0, y: 0 });
-
-  const callbackRef = React.useRef<(event: ScrollEventType) => void>(callback);
-
-  const handleCallback: () => void = () => {
-    if (callbackRef) {
-      callbackRef.current({
-        isScrolling: isScrolling.current,
-        scrollX: scrollXY.current.x,
-        scrollY: scrollXY.current.y,
-        velocityX: velocity.current.x,
-        velocityY: velocity.current.y,
-        directionX: scrollDirection.current.x,
-        directionY: scrollDirection.current.y,
-      });
-    }
-  };
-
-  // Reinitiate callback when dependency change
-  React.useEffect(() => {
-    callbackRef.current = callback;
-
-    return () => {
-      callbackRef.current = () => false;
-    };
-  }, deps);
-
-  React.useEffect(() => {
-    const _refElement = ref.current;
-
-    const scrollCallback = ({ x, y }: Vector2) => {
-      const now: number = Date.now();
-      const deltaTime = Math.min(now - lastTimeStamp.current, 64);
-      lastTimeStamp.current = now;
-      const t = deltaTime / 1000; // seconds
-
-      scrollXY.current = { x, y };
-
-      // Clear if scrolling
-      if (_isScrolling.current !== -1) {
-        isScrolling.current = true;
-        clearTimeout(_isScrolling.current);
-      }
-
-      _isScrolling.current = setTimeout(() => {
-        isScrolling.current = false;
-        scrollDirection.current = { x: 0, y: 0 };
-
-        // Reset Velocity
-        velocity.current = { x: 0, y: 0 };
-
-        handleCallback(); // Debounce 250milliseconds
-      }, 250);
-
-      const diffX = scrollXY.current.x - previousScrollXY.current.x;
-      const diffY = scrollXY.current.y - previousScrollXY.current.y;
-
-      scrollDirection.current = {
-        x: Math.sign(diffX),
-        y: Math.sign(diffY),
-      };
-
-      velocity.current = {
-        x: clamp(diffX / t / 1000, -5, 5),
-        y: clamp(diffY / t / 1000, -5, 5),
-      };
-
-      previousScrollXY.current = {
-        x: scrollXY.current.x,
-        y: scrollXY.current.y,
-      };
-
-      handleCallback();
-    };
-
-    const scrollListener: () => void = () => {
-      const { pageYOffset: y, pageXOffset: x } = window;
-      scrollCallback({ x, y });
-    };
-
-    const scrollElementListener: () => void = () => {
-      const x = _refElement?.scrollLeft || 0;
-      const y = _refElement?.scrollTop || 0;
-      scrollCallback({ x, y });
-    };
-
-    var subscribe: any;
-    if (_refElement) {
-      subscribe = attachEvents(_refElement, [
-        ["scroll", scrollElementListener],
-      ]);
-    } else {
-      subscribe = attachEvents(window, [["scroll", scrollListener]]);
-    }
-
-    return () => subscribe && subscribe();
-  }, []);
-
-  return () => ({ ref }); // ...bind()
-}