react-ui-animate 1.2.1 → 1.4.1

package/dist/core/Interpolation.d.ts

@@ -1,38 +0,0 @@
-import { TransitionValue } from "./useTransition";
-declare type ExtrapolateType = "identity" | "extend" | "clamp";
-export interface ExtrapolateConfig {
-    extrapolate?: ExtrapolateType;
-    extrapolateRight?: ExtrapolateType;
-    extrapolateLeft?: ExtrapolateType;
-}
-/**
- * interpolateNumbers to interpolate the numeric value
- * @param value - number
- * @param inputRange
- * @param outputRange
- * @param extrapolateConfig
- * @returns - number | string
- */
-export declare function interpolateNumbers(value: number, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
-/**
- * interpolateTransitionValue to interpolating TransitionValue type value
- * @param value
- * @param inputRange
- * @param outputRange
- * @param extrapolateConfig
- * @returns TransitionValue
- */
-export declare const interpolateTransitionValue: (value: TransitionValue, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig | undefined) => {
-    isInterpolation: boolean;
-    interpolationConfig: {
-        inputRange: number[];
-        outputRange: (string | number)[];
-        extrapolateConfig: ExtrapolateConfig | undefined;
-    };
-    _subscribe: (onUpdate: import("./useTransition").SubscriptionValue) => void;
-    _value: string | number;
-    _currentValue: import("react").MutableRefObject<string | number>;
-    get: () => string | number;
-    _config?: import("./useTransition").UseTransitionConfig | undefined;
-};
-export {};

package/dist/core/RequestAnimationFrame.d.ts

@@ -1,8 +0,0 @@
-export declare const RequestAnimationFrame: {
-    current: (cb: any) => number;
-    inject(injected: any): void;
-};
-export declare const CancelAnimationFrame: {
-    current: (id: any) => void;
-    inject(injected: any): void;
-};

package/dist/core/SpringAnimation.d.ts

@@ -1,39 +0,0 @@
-import { Animation, ResultType } from "./Animation";
-import { UseTransitionConfig } from "./useTransition";
-/**
- * SpringAnimation class implements physics based spring animation
- */
-export declare class SpringAnimation extends Animation {
-    _overshootClamping: boolean;
-    _restDisplacementThreshold: number;
-    _restSpeedThreshold: number;
-    _initialVelocity?: number;
-    _lastVelocity: number;
-    _startPosition: number;
-    _lastPosition: number;
-    _fromValue: number;
-    _toValue: any;
-    _mass: number;
-    _tension: number;
-    _friction: number;
-    _lastTime: number;
-    _onFrame: (value: number) => void;
-    _animationFrame: any;
-    _immediate: boolean;
-    _delay: number;
-    _onRest?: (value: ResultType) => void;
-    constructor({ initialPosition, config, }: {
-        initialPosition: number;
-        config?: Omit<UseTransitionConfig, "duration" | "easing">;
-    });
-    onUpdate(): void;
-    stop(): void;
-    set(toValue: number): void;
-    start({ toValue, onFrame, previousAnimation, onEnd, immediate, }: {
-        toValue: number;
-        onFrame: (value: number) => void;
-        previousAnimation?: SpringAnimation;
-        onEnd?: (result: ResultType) => void;
-        immediate?: boolean;
-    }): void;
-}

package/dist/core/Tags.d.ts

@@ -1,2 +0,0 @@
-export declare const tags: string[];
-export declare const unitlessStyleProps: string[];

package/dist/core/TimingAnimation.d.ts

@@ -1,34 +0,0 @@
-import { Animation, ResultType } from "./Animation";
-import { UseTransitionConfig } from "./useTransition";
-/**
- * TimingAnimation class implements duration based spring animation
- */
-export declare class TimingAnimation extends Animation {
-    _startTime: number;
-    _fromValue: number;
-    _toValue: any;
-    _duration: number;
-    _easing: (value: number) => number;
-    _onFrame: (value: number) => void;
-    _animationFrame: any;
-    _timeout: any;
-    _position: number;
-    _immediate: boolean;
-    _delay: number;
-    _tempDuration: number;
-    _onRest?: (value: ResultType) => void;
-    constructor({ initialPosition, config, }: {
-        initialPosition: number;
-        config: Omit<UseTransitionConfig, "mass" | "friction" | "tension">;
-    });
-    onUpdate(): void;
-    stop(): void;
-    set(toValue: number): void;
-    start({ toValue, onFrame, onEnd, immediate, duration, }: {
-        toValue: number;
-        onFrame: (value: number) => void;
-        onEnd?: (result: ResultType) => void;
-        immediate?: boolean;
-        duration?: number;
-    }): void;
-}

package/dist/core/TransformStyles.d.ts

@@ -1,8 +0,0 @@
-/**
- * style keys which can be accepted by animated component
- */
-export declare const styleTrasformKeys: string[];
-/**
- * getTransform function returns transform string from style object
- */
-export declare function getTransform(style: any): any;

package/dist/core/animated.d.ts

@@ -1,9 +0,0 @@
-import * as React from "react";
-/**
- * isSubscriber to check the value is TransitionValue or not
- * @param value - any
- * @returns - boolean
- */
-export declare const isSubscriber: (value: any) => any;
-export declare function makeAnimatedComponent(WrapperComponent: React.ComponentType | keyof JSX.IntrinsicElements): React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-export declare const animated: any;

package/dist/core/index.d.ts

@@ -1,7 +0,0 @@
-export * from "./animated";
-export * from "./useTransition";
-export * from "./Easing";
-export * from "./Animation";
-export * from "./Colors";
-export * from "./Bezier";
-export * from "./Interpolation";

package/dist/core/useTransition.d.ts

@@ -1,46 +0,0 @@
-import * as React from "react";
-import { ResultType } from "./Animation";
-/**
- * UseTransitionConfig for useTransition config
- */
-export interface UseTransitionConfig {
-    mass?: number;
-    tension?: number;
-    friction?: number;
-    duration?: number;
-    easing?: (t: number) => number;
-    immediate?: boolean;
-    delay?: number;
-    onChange?: (value: number) => void;
-    onRest?: (value: any) => void;
-}
-export declare type SubscriptionValue = (updatedValue: AssignValue, callback?: (result: ResultType) => void) => void;
-/**
- * useTransition returns TransitionValue object
- */
-export declare type TransitionValue = {
-    _subscribe: (onUpdate: SubscriptionValue) => void;
-    _value: number | string;
-    _currentValue: React.MutableRefObject<number | string>;
-    get: () => number | string;
-    _config?: UseTransitionConfig;
-};
-/**
- * Assign value object to set animation
- */
-export declare type AssignValue = {
-    toValue: number | string;
-    immediate?: boolean;
-    duration?: number;
-};
-/**
- * useTransition return type
- */
-export declare type UseTransitionReturn = [TransitionValue, SubscriptionValue];
-/**
- * useTransition() hook for time and spring based animations
- * @param initialValue numbers are animatable and strings are non-animatable
- * @param config
- * @returns [value, setValue]
- */
-export declare const useTransition: (initialValue: number | string, config?: UseTransitionConfig | undefined) => UseTransitionReturn;

package/dist/getInitialConfig.d.ts

@@ -1,3 +0,0 @@
-import { GenericAnimationConfig } from "./useAnimatedValue";
-export declare type InitialConfigType = "ease" | "elastic" | "stiff" | "wooble" | "bounce" | undefined;
-export declare const getInitialConfig: (animationType: InitialConfigType) => GenericAnimationConfig;

package/dist/hooks/useDrag.d.ts

@@ -1,5 +0,0 @@
-import * as React from "react";
-import { DragEventType, UseDragConfig } from "../Types";
-export declare function useDrag(callback: (event: DragEventType) => void, config?: UseDragConfig, deps?: React.DependencyList): (index?: number | undefined) => {
-    ref: any;
-};

package/dist/hooks/useMouseMove.d.ts

@@ -1,5 +0,0 @@
-import * as React from "react";
-import { MouseMoveEventType } from "../Types";
-export declare function useMouseMove(callback: (event: MouseMoveEventType) => void, deps?: React.DependencyList): () => {
-    ref: React.MutableRefObject<any>;
-};

package/dist/hooks/useScroll.d.ts

@@ -1,5 +0,0 @@
-import * as React from "react";
-import { ScrollEventType } from "../Types";
-export declare function useScroll(callback: (event: ScrollEventType) => void, deps?: React.DependencyList): () => {
-    ref: React.MutableRefObject<any>;
-};

package/dist/hooks/useWheel.d.ts

@@ -1,5 +0,0 @@
-import * as React from "react";
-import { WheelEventType } from "../Types";
-export declare function useWheel(callback: (event: WheelEventType) => void, deps?: React.DependencyList): () => {
-    ref: React.MutableRefObject<any>;
-};

package/dist/isDefined.d.ts

@@ -1 +0,0 @@
-export declare const isDefined: <T>(value: T) => boolean;

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()
-}