react-ui-animate 1.2.1 → 1.4.1

package/src/gestures/hooks/useMouseMove.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+import { MouseMoveEventType } from "../types";
+import { MouseMoveGesture } from "../controllers";
+import { useRecognizer } from "./useRecognizer";
+
+export function useMouseMove(callback: (event: MouseMoveEventType) => void) {
+  const gesture = React.useRef(new MouseMoveGesture()).current;
+
+  return useRecognizer([["move", gesture, callback]]);
+}

package/src/gestures/hooks/useRecognizer.ts

@@ -0,0 +1,59 @@
+/* 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

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

@@ -0,0 +1,11 @@
+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/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export * from "./math";

package/src/{Types.ts → gestures/types.ts}

@@ -1,21 +1,3 @@
-export type MeasurementValue = number | Array<number>;
-
-export type MeasurementType = {
-  left: MeasurementValue;
-  top: MeasurementValue;
-  width: MeasurementValue;
-  height: MeasurementValue;
-  vLeft: MeasurementValue;
-  vTop: MeasurementValue;
-};
-
-export type WindowDimensionType = {
-  width: number;
-  height: number;
-  innerWidth: number;
-  innerHeight: number;
-};
-
 type GenericEventType = {
   velocityX: number;
   velocityY: number;
@@ -23,23 +5,6 @@ type GenericEventType = {
   directionY: number;
 };
 
-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 DragEventType = {
   args: Array<number | undefined>;
   down: boolean;
@@ -53,14 +18,32 @@ export type DragEventType = {
 } & 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/gestures/withDefault.ts

@@ -0,0 +1,3 @@
+export const withDefault = (x: number, y: number) => {
+  return { x, y };
+};

package/src/hooks/index.ts

@@ -1,7 +1,3 @@
 export * from "./useOutsideClick";
 export * from "./useMeasure";
 export * from "./useWindowDimension";
-export * from "./useScroll";
-export * from "./useDrag";
-export * from "./useMouseMove";
-export * from "./useWheel";

package/src/hooks/useMeasure.ts

@@ -1,5 +1,15 @@
 import * as React from "react";
-import { MeasurementType } from "../Types";
+
+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,

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/dist/Types.d.ts

@@ -1,64 +0,0 @@
-export declare type MeasurementValue = number | Array<number>;
-export declare type MeasurementType = {
-    left: MeasurementValue;
-    top: MeasurementValue;
-    width: MeasurementValue;
-    height: MeasurementValue;
-    vLeft: MeasurementValue;
-    vTop: MeasurementValue;
-};
-export declare type WindowDimensionType = {
-    width: number;
-    height: number;
-    innerWidth: number;
-    innerHeight: number;
-};
-declare type GenericEventType = {
-    velocityX: number;
-    velocityY: number;
-    directionX: number;
-    directionY: number;
-};
-export declare type ScrollEventType = {
-    isScrolling: boolean;
-    scrollX: number;
-    scrollY: number;
-} & GenericEventType;
-export declare type WheelEventType = {
-    target: HTMLElement | undefined | null;
-    isWheeling: boolean;
-    movementX: number;
-    movementY: number;
-    offsetX: number;
-    offsetY: number;
-    deltaX: number;
-    deltaY: number;
-} & GenericEventType;
-export declare type DragEventType = {
-    args: Array<number | undefined>;
-    down: boolean;
-    movementX: number;
-    movementY: number;
-    offsetX: number;
-    offsetY: number;
-    distanceX: number;
-    distanceY: number;
-    cancel: () => void;
-} & GenericEventType;
-export declare type MouseMoveEventType = {
-    target: EventTarget | undefined | null;
-    isMoving: boolean;
-    mouseX: number;
-    mouseY: number;
-} & GenericEventType;
-export declare type UseDragConfig = {
-    initial?: () => {
-        movementX: number;
-        movementY: number;
-    };
-};
-export declare type Vector2 = {
-    x: number;
-    y: number;
-};
-export {};

package/dist/animate/Interpolation.d.ts

@@ -1,20 +0,0 @@
-import { ExtrapolateConfig } from "../core";
-/**
- * interpolate function maps input range to output range
- * @param value - number | TransitionValue
- * @param inputRange - Array<number>
- * @param outputRange - Array<string | number>
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
- */
-export declare function interpolate(value: any, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
-/**
- * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
- * sorthand function to interpolate input range [0, 1]
- * @param value - number | TransitionValue
- * @param minOutput - number | string
- * @param maxOutput - number | string
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
- */
-export declare function bInterpolate(value: any, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): any;

package/dist/animate/Math.d.ts

@@ -1,34 +0,0 @@
-/**
- * bin(booleanValue)
- * returns 1 if booleanValue == true and 0 if booleanValue == false
- */
-export declare function bin(bool: boolean): 1 | 0;
-/**
- * mix(progress, a, b)
- * linear interpolation between a and b
- */
-export declare function mix(perc: number, val1: number, val2: number): number;
-/**
- * clamp(value, min, max)
- * clamps value for min and max bounds
- */
-export declare function clamp(value: number, lowerbound: number, upperbound: number): number;
-/**
- * rubberClamp(value, min, max, constant?)
- * constant is optional : default 0.15
- * clamps the value for min and max value and
- * extends beyond min and max values with constant
- * factor to create elastic rubber band effect
- */
-export declare function rubberClamp(value: number, lowerbound: number, upperbound: number, constant?: number): number;
-/**
- * snapTo(value, velocity, snapPoints[])
- * Calculates the final snapPoint according to given current value,
- * velocity and snapPoints array
- */
-export declare function snapTo(value: number, velocity: number, snapPoints: Array<number>): number;
-/**
- * move(array, moveIndex, toIndex)
- * move array item from moveIndex to toIndex without array modification
- */
-export declare function move(array: Array<any>, moveIndex: number, toIndex: number): any[];

package/dist/animate/Modules.d.ts

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { UseAnimatedValueConfig } from "./useAnimatedValue";
-/**
- * Make any component animatable
- */
-export declare function makeAnimatedComponent(WrappedComponent: React.ElementType<any>): React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-/**
- * AnimatedBlock : Animated Div
- */
-export declare const AnimatedBlock: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-/**
- * AnimatedInline : Animated Span
- */
-export declare const AnimatedInline: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-/**
- * AnimatedImage : Animated Image
- */
-export declare const AnimatedImage: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-interface ScrollableBlockProps {
-    children?: (animation: any) => React.ReactNode;
-    direction?: "single" | "both";
-    threshold?: number;
-    animationConfig?: UseAnimatedValueConfig;
-}
-/**
- * ScrollableBlock
- * Used to animate element when enter into viewport
- * Render props pattern with children accepts animation node
- * animated value goes from 0 to 1 when appear on viewport & vice versa.
- */
-export declare const ScrollableBlock: React.FC<ScrollableBlockProps>;
-export {};

package/dist/animate/controllers/EventAttacher.d.ts

@@ -1,8 +0,0 @@
-/**
- * Attach single document / window event / HTMLElement
- */
-export declare function attachEvent(domTarget: Window | Document | HTMLElement, event: string, callback: (e: any) => void, capture?: any): () => void;
-/**
- * Attach multiple document / window event / HTMLElement
- */
-export declare function attachEvents(domTarget: Window | Document | HTMLElement, events: Array<[event: string, callback: (e: any) => void, capture?: any]>): () => void;

package/dist/animate/controllers/index.d.ts

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

package/dist/animate/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/animate/hooks/useMeasure.d.ts

@@ -1,5 +0,0 @@
-import * as React from "react";
-import { MeasurementType } from "../Types";
-export declare function useMeasure(callback: (event: MeasurementType) => void, deps?: React.DependencyList): (index?: number | undefined) => {
-    ref: React.MutableRefObject<null>;
-};

package/dist/animate/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/animate/hooks/useOutsideClick.d.ts

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare function useOutsideClick(elementRef: React.RefObject<HTMLElement>, callback: (event: MouseEvent) => void, deps?: React.DependencyList): void;

package/dist/animate/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/animate/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/animate/hooks/useWindowDimension.d.ts

@@ -1,3 +0,0 @@
-import * as React from "react";
-import { WindowDimensionType } from "../Types";
-export declare function useWindowDimension(callback: (event: WindowDimensionType) => void, deps?: React.DependencyList): void;

package/dist/animate/index.d.ts

@@ -1,8 +0,0 @@
-export * as Core from "../core";
-export { useAnimatedValue } from "./useAnimatedValue";
-export * from "./useMountedValue";
-export * from "./Interpolation";
-export * from "./Modules";
-export * from "./Math";
-export * from "../core/Easing";
-export * from "./hooks";

package/dist/animate/useAnimatedValue.d.ts

@@ -1,30 +0,0 @@
-import { TransitionValue, ResultType } from "../core";
-import { InitialConfigType } from "./getInitialConfig";
-declare type AnimatedValueType = number | boolean | string;
-export interface GenericAnimationConfig {
-    duration?: number;
-    mass?: number;
-    friction?: number;
-    tension?: number;
-    easing?: (t: number) => number;
-    delay?: number;
-}
-export interface UseAnimatedValueConfig extends GenericAnimationConfig {
-    animationType?: InitialConfigType;
-    onAnimationEnd?: (value: ResultType) => void;
-    listener?: (value: number) => void;
-    immediate?: boolean;
-}
-export declare type ValueReturnType = TransitionValue | number | string | {
-    toValue: number | string;
-    immediate?: boolean;
-};
-interface UseAnimatedValueReturn {
-    value: ValueReturnType;
-    currentValue: number | string;
-}
-/**
- * useAnimatedValue for animated transitions
- */
-export declare const useAnimatedValue: (initialValue: AnimatedValueType, config?: UseAnimatedValueConfig | undefined) => UseAnimatedValueReturn;
-export {};

package/dist/animate/useMountedValue.d.ts

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { TransitionValue, UseTransitionConfig } from "../core";
-interface InternalUseMountedValueConfig extends UseTransitionConfig {
-    enterDuration?: number;
-    exitDuration?: number;
-}
-interface UseMountedValueConfig {
-    from: number;
-    enter: number;
-    exit: number;
-    config?: InternalUseMountedValueConfig;
-}
-/**
- * useMountedValue handles mounting and unmounting of a component
- * @param state - boolean
- * @param config - useTransitionConfig
- * @returns mountedValueFunction with a callback with argument ( animationNode, mounted )
- */
-export declare const useMountedValue: (state: boolean, config: UseMountedValueConfig) => (callback: ({ value }: {
-    value: TransitionValue;
-}, mounted: boolean) => React.ReactNode) => React.ReactNode;
-export {};

package/dist/controllers/EventAttacher.d.ts

@@ -1,8 +0,0 @@
-/**
- * Attach single document / window event / HTMLElement
- */
-export declare function attachEvent(domTarget: Window | Document | HTMLElement, event: string, callback: (e: any) => void, capture?: any): () => void;
-/**
- * Attach multiple document / window event / HTMLElement
- */
-export declare function attachEvents(domTarget: Window | Document | HTMLElement, events: Array<[event: string, callback: (e: any) => void, capture?: any]>): () => void;

package/dist/controllers/index.d.ts

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

package/dist/core/Animation.d.ts

@@ -1,13 +0,0 @@
-/**
- * Base Animation class
- */
-export declare type ResultType = {
-    finished: boolean;
-    value: number;
-};
-export declare class Animation {
-    _active: boolean;
-    _onEnd: any;
-    _debounceOnEnd(result: ResultType): void;
-    stop(): void;
-}

package/dist/core/Bezier.d.ts

@@ -1,8 +0,0 @@
-/**
- * https://github.com/gre/bezier-easing
- * BezierEasing - use bezier curve for transition easing function
- * by Gaëtan Renaudeau 2014 - 2015 – MIT License
- */
-declare function LinearEasing(x: number): number;
-declare function bezier(mX1: number, mY1: number, mX2: number, mY2: number): typeof LinearEasing;
-export { bezier };

package/dist/core/Colors.d.ts

@@ -1,25 +0,0 @@
-export declare const COLOR_NUMBER_REGEX: RegExp;
-export declare const HEX_NAME_COLOR: RegExp;
-interface classNameType {
-    [name: string]: string;
-}
-export declare const colorNames: classNameType;
-export declare function hexToRgba(hex: string): {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-};
-export declare function rgbaToHex(rgba: {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-}): string;
-export declare function processColor(color: number | string): {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-};
-export {};

package/dist/core/Easing.d.ts

@@ -1,40 +0,0 @@
-/**
- * This class implements common easing functions. The math is pretty obscure,
- * but this cool website has nice visual illustrations of what they represent:
- * http://xaedes.de/dev/transitions/
- */
-export declare class Easing {
-    static step0(n: number): 0 | 1;
-    static step1(n: number): 0 | 1;
-    static linear(t: number): number;
-    static ease(t: number): number;
-    static quad(t: number): number;
-    static cubic(t: number): number;
-    static poly(n: number): (t: number) => number;
-    static sin(t: number): number;
-    static circle(t: number): number;
-    static exp(t: number): number;
-    /**
-     * A simple elastic interaction, similar to a spring.  Default bounciness
-     * is 1, which overshoots a little bit once.  0 bounciness doesn't overshoot
-     * at all, and bounciness of N > 1 will overshoot about N times.
-     *
-     * Wolfram Plots:
-     *
-     *   http://tiny.cc/elastic_b_1 (default bounciness = 1)
-     *   http://tiny.cc/elastic_b_3 (bounciness = 3)
-     */
-    static elastic(bounciness?: number): (t: number) => number;
-    static back(s: number): (t: number) => number;
-    static bounce(t: number): number;
-    static bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
-    static in(easing: (t: number) => number): (t: number) => number;
-    /**
-     * Runs an easing function backwards.
-     */
-    static out(easing: (t: number) => number): (t: number) => number;
-    /**
-     * Makes any easing function symmetrical.
-     */
-    static inOut(easing: (t: number) => number): (t: number) => number;
-}