react-ui-animate 1.2.1 → 1.4.1

package/dist/animation/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./interpolation";
+export * from "./modules";
+export { useAnimatedValue } from "./useAnimatedValue";
+export { useMountedValue } from "./useMountedValue";

package/dist/{Modules.d.ts → animation/modules.d.ts}

@@ -1,5 +1,7 @@
 import * as React from "react";
+import { TransitionValue } from "@raidipesh78/re-motion";
 import { UseAnimatedValueConfig } from "./useAnimatedValue";
+import { InnerUseMountedValueConfig } from "./useMountedValue";
 /**
  * Make any component animatable
  */
@@ -29,4 +31,17 @@ interface ScrollableBlockProps {
  * animated value goes from 0 to 1 when appear on viewport & vice versa.
  */
 export declare const ScrollableBlock: React.FC<ScrollableBlockProps>;
+interface MountedBlockProps {
+    state: boolean;
+    children: (animation: {
+        value: TransitionValue;
+    }) => React.ReactNode;
+    config?: InnerUseMountedValueConfig;
+}
+/**
+ * MountedBlock handles mounting and unmounting of a component
+ * @props - state: boolean, config: InnerUseMountedValueConfig
+ * @children -  (animation: { value: TransitionValue }) => React.ReactNode
+ */
+export declare const MountedBlock: ({ state, children, config, }: MountedBlockProps) => JSX.Element;
 export {};

package/dist/{useAnimatedValue.d.ts → animation/useAnimatedValue.d.ts}

@@ -1,6 +1,6 @@
 import { TransitionValue, ResultType } from "@raidipesh78/re-motion";
 import { InitialConfigType } from "./getInitialConfig";
-declare type AnimatedValueType = number | boolean | string;
+declare type AnimatedValueType = number | string;
 export interface GenericAnimationConfig {
     duration?: number;
     mass?: number;
@@ -26,5 +26,5 @@ interface UseAnimatedValueReturn {
 /**
  * useAnimatedValue for animated transitions
  */
-export declare const useAnimatedValue: (initialValue: AnimatedValueType, config?: UseAnimatedValueConfig | undefined) => UseAnimatedValueReturn;
+export declare function useAnimatedValue(initialValue: AnimatedValueType, config?: UseAnimatedValueConfig): UseAnimatedValueReturn;
 export {};

package/dist/{useMountedValue.d.ts → animation/useMountedValue.d.ts}

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

package/dist/gestures/controllers/DragGesture.d.ts

@@ -0,0 +1,17 @@
+import { Vector2 } from "../types";
+import { Gesture } from "./Gesture";
+export declare class DragGesture extends Gesture {
+    movementStart: Vector2;
+    initialMovement: Vector2;
+    movement: Vector2;
+    previousMovement: Vector2;
+    translation: Vector2;
+    offset: Vector2;
+    velocity: Vector2;
+    _initEvents(): void;
+    _cancelEvents(): void;
+    _handleCallback(): void;
+    pointerDown(e: any): void;
+    pointerMove(e: any): void;
+    pointerUp(): void;
+}

package/dist/gestures/controllers/Gesture.d.ts

@@ -0,0 +1,20 @@
+export declare class Gesture {
+    currentIndex?: number;
+    lastTimeStamp: number;
+    isActive: boolean;
+    targetElement?: HTMLElement;
+    targetElements: Array<HTMLElement>;
+    config?: any;
+    callback?: <T>(event: T) => void;
+    _subscribe?: (eventKeys?: Array<string>) => void;
+    static _VELOCITY_LIMIT: number;
+    _initEvents(): void;
+    _cancelEvents(): void;
+    applyCallback(callback: <T>(event: T) => void): void;
+    applyGesture({ targetElement, targetElements, callback, config, }: {
+        targetElement?: any;
+        targetElements?: any;
+        callback: <T>(event: T) => void;
+        config?: any;
+    }): () => void | undefined;
+}

package/dist/gestures/controllers/MouseMoveGesture.d.ts

@@ -0,0 +1,13 @@
+import { Vector2 } from "../types";
+import { Gesture } from "./Gesture";
+export declare class MouseMoveGesture extends Gesture {
+    event?: MouseEvent;
+    isActiveID?: any;
+    movement: Vector2;
+    previousMovement: Vector2;
+    velocity: Vector2;
+    direction: Vector2;
+    _initEvents(): void;
+    _handleCallback(): void;
+    onMouseMove(e: MouseEvent): void;
+}

package/dist/gestures/controllers/ScrollGesture.d.ts

@@ -0,0 +1,14 @@
+import { Vector2 } from "../types";
+import { Gesture } from "./Gesture";
+export declare class ScrollGesture extends Gesture {
+    isActiveID?: any;
+    movement: Vector2;
+    previousMovement: Vector2;
+    direction: Vector2;
+    velocity: Vector2;
+    _initEvents(): void;
+    _handleCallback(): void;
+    onScroll({ x, y }: Vector2): void;
+    scrollListener(): void;
+    scrollElementListener(): void;
+}

package/dist/gestures/controllers/WheelGesture.d.ts

@@ -0,0 +1,15 @@
+import { Vector2 } from "../types";
+import { Gesture } from "./Gesture";
+export declare class WheelGesture extends Gesture {
+    isActiveID?: any;
+    movement: Vector2;
+    previousMovement: Vector2;
+    direction: Vector2;
+    velocity: Vector2;
+    delta: Vector2;
+    offset: Vector2;
+    translation: Vector2;
+    _initEvents(): void;
+    _handleCallback(): void;
+    onWheel(event: WheelEvent): void;
+}

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

@@ -0,0 +1,4 @@
+export * from "./DragGesture";
+export * from "./MouseMoveGesture";
+export * from "./ScrollGesture";
+export * from "./WheelGesture";

package/dist/gestures/eventAttacher.d.ts

@@ -0,0 +1,11 @@
+declare type MouseEventType = "click" | "dblclick" | "mousedown" | "mousemove" | "mouseup" | "touchstart" | "touchmove" | "touchend" | "mouseenter" | "mouseleave" | "mouseout" | "mouseover" | "scroll" | "wheel" | "contextmenu";
+declare type DomTargetTypes = Array<Window | Document | HTMLElement>;
+/**
+ * Attach multiple document / window event / HTMLElement
+ */
+export declare function attachEvents(domTargets: DomTargetTypes, events: Array<[
+    event: MouseEventType,
+    callback: (e: any) => void,
+    capture?: any
+]>): (eventKeys?: string[] | undefined) => void;
+export {};

package/dist/{animate → gestures}/hooks/index.d.ts

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

package/dist/gestures/hooks/useDrag.d.ts

@@ -0,0 +1,4 @@
+import { DragEventType, UseDragConfig } from "../types";
+export declare function useDrag(callback: (event: DragEventType) => void, config?: UseDragConfig): (index?: number | undefined) => {
+    ref: any;
+};

package/dist/gestures/hooks/useGesture.d.ts

@@ -0,0 +1,9 @@
+import { DragEventType, WheelEventType, ScrollEventType, MouseMoveEventType } from "../types";
+export declare function useGesture({ onDrag, onWheel, onScroll, onMouseMove, }: {
+    onDrag?: (event: DragEventType) => void;
+    onWheel?: (event: WheelEventType) => void;
+    onScroll?: (event: ScrollEventType) => void;
+    onMouseMove?: (event: MouseMoveEventType) => void;
+}): (index?: number | undefined) => {
+    ref: any;
+};

package/dist/gestures/hooks/useMouseMove.d.ts

@@ -0,0 +1,4 @@
+import { MouseMoveEventType } from "../types";
+export declare function useMouseMove(callback: (event: MouseMoveEventType) => void): (index?: number | undefined) => {
+    ref: any;
+};

package/dist/gestures/hooks/useRecognizer.d.ts

@@ -0,0 +1,10 @@
+declare type UseRecognizerHandlerType = Array<[
+    key: "drag" | "wheel" | "move" | "scroll",
+    gesture: any,
+    callback: any,
+    config?: any
+]>;
+export declare const useRecognizer: (handlers: UseRecognizerHandlerType) => (index?: number | undefined) => {
+    ref: any;
+};
+export {};

package/dist/gestures/hooks/useScroll.d.ts

@@ -0,0 +1,4 @@
+import { ScrollEventType } from "../types";
+export declare function useScroll(callback: (event: ScrollEventType) => void): (index?: number | undefined) => {
+    ref: any;
+};

package/dist/gestures/hooks/useWheel.d.ts

@@ -0,0 +1,4 @@
+import { WheelEventType } from "../types";
+export declare function useWheel(callback: (event: WheelEventType) => void): (index?: number | undefined) => {
+    ref: any;
+};

package/dist/gestures/index.d.ts

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

package/dist/{animate/Types.d.ts → gestures/types.d.ts}

@@ -1,39 +1,9 @@
-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;
@@ -46,11 +16,28 @@ export declare type DragEventType = {
     cancel: () => void;
 } & GenericEventType;
 export declare type MouseMoveEventType = {
+    args: Array<number | undefined>;
+    event: MouseEvent;
     target: EventTarget | undefined | null;
     isMoving: boolean;
     mouseX: number;
     mouseY: number;
 } & GenericEventType;
+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 UseDragConfig = {
     initial?: () => {
         movementX: number;

package/dist/gestures/withDefault.d.ts

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

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

@@ -1,5 +1,14 @@
 import * as React from "react";
-import { MeasurementType } from "../Types";
+declare type MeasurementValue = number | Array<number>;
+declare type MeasurementType = {
+    left: MeasurementValue;
+    top: MeasurementValue;
+    width: MeasurementValue;
+    height: MeasurementValue;
+    vLeft: MeasurementValue;
+    vTop: MeasurementValue;
+};
 export declare function useMeasure(callback: (event: MeasurementType) => void, deps?: React.DependencyList): (index?: number | undefined) => {
     ref: React.MutableRefObject<null>;
 };
+export {};

package/dist/hooks/useWindowDimension.d.ts

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

package/dist/index.d.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";