react-ui-animate 1.2.2 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/dist/Interpolation.d.ts +20 -0
  2. package/dist/Math.d.ts +34 -0
  3. package/dist/Modules.d.ts +32 -0
  4. package/dist/Types.d.ts +64 -0
  5. package/dist/animation/getInitialConfig.d.ts +3 -0
  6. package/dist/animation/index.d.ts +4 -0
  7. package/dist/animation/interpolation.d.ts +20 -0
  8. package/dist/animation/modules/AnimatedBlock.d.ts +5 -0
  9. package/dist/animation/modules/AnimatedImage.d.ts +5 -0
  10. package/dist/animation/modules/AnimatedInline.d.ts +5 -0
  11. package/dist/animation/modules/MountedBlock.d.ts +17 -0
  12. package/dist/animation/modules/ScrollableBlock.d.ts +16 -0
  13. package/dist/animation/modules/index.d.ts +6 -0
  14. package/dist/animation/modules/makeAnimatedComponent.d.ts +4 -0
  15. package/dist/animation/modules.d.ts +47 -0
  16. package/dist/animation/useAnimatedValue.d.ts +30 -0
  17. package/dist/animation/useMountedValue.d.ts +22 -0
  18. package/dist/controllers/EventAttacher.d.ts +8 -0
  19. package/dist/controllers/index.d.ts +1 -0
  20. package/dist/gestures/controllers/DragGesture.d.ts +17 -0
  21. package/dist/gestures/controllers/Gesture.d.ts +20 -0
  22. package/dist/gestures/controllers/MouseMoveGesture.d.ts +13 -0
  23. package/dist/gestures/controllers/ScrollGesture.d.ts +14 -0
  24. package/dist/gestures/controllers/WheelGesture.d.ts +15 -0
  25. package/dist/gestures/controllers/index.d.ts +4 -0
  26. package/dist/gestures/eventAttacher.d.ts +11 -0
  27. package/dist/gestures/hooks/index.d.ts +5 -0
  28. package/dist/gestures/hooks/useDrag.d.ts +4 -0
  29. package/dist/gestures/hooks/useGesture.d.ts +9 -0
  30. package/dist/gestures/hooks/useMouseMove.d.ts +4 -0
  31. package/dist/gestures/hooks/useRecognizer.d.ts +10 -0
  32. package/dist/gestures/hooks/useScroll.d.ts +4 -0
  33. package/dist/gestures/hooks/useWheel.d.ts +4 -0
  34. package/dist/gestures/index.d.ts +2 -0
  35. package/dist/gestures/math.d.ts +34 -0
  36. package/dist/gestures/types.d.ts +51 -0
  37. package/dist/gestures/withDefault.d.ts +4 -0
  38. package/dist/getInitialConfig.d.ts +3 -0
  39. package/dist/hooks/index.d.ts +3 -0
  40. package/dist/hooks/useDrag.d.ts +5 -0
  41. package/dist/hooks/useMeasure.d.ts +14 -0
  42. package/dist/hooks/useMouseMove.d.ts +5 -0
  43. package/dist/hooks/useOutsideClick.d.ts +2 -0
  44. package/dist/hooks/useScroll.d.ts +5 -0
  45. package/dist/hooks/useWheel.d.ts +5 -0
  46. package/dist/hooks/useWindowDimension.d.ts +9 -0
  47. package/dist/index.d.ts +4 -0
  48. package/dist/index.js +1189 -0
  49. package/dist/index.js.map +1 -0
  50. package/dist/useAnimatedValue.d.ts +30 -0
  51. package/dist/useMountedValue.d.ts +22 -0
  52. package/dist/utils/index.d.ts +1 -0
  53. package/dist/utils/isDefined.d.ts +1 -0
  54. package/package.json +6 -3
  55. package/src/{getInitialConfig.ts → animation/getInitialConfig.ts} +0 -0
  56. package/src/animation/index.ts +4 -0
  57. package/src/{Interpolation.ts → animation/interpolation.ts} +0 -0
  58. package/src/{Modules.tsx → animation/modules.tsx} +26 -1
  59. package/src/{useAnimatedValue.ts → animation/useAnimatedValue.ts} +8 -9
  60. package/src/{useMountedValue.ts → animation/useMountedValue.ts} +8 -9
  61. package/src/gestures/controllers/DragGesture.ts +176 -0
  62. package/src/gestures/controllers/Gesture.ts +54 -0
  63. package/src/gestures/controllers/MouseMoveGesture.ts +111 -0
  64. package/src/gestures/controllers/ScrollGesture.ts +107 -0
  65. package/src/gestures/controllers/WheelGesture.ts +123 -0
  66. package/src/gestures/controllers/index.ts +4 -0
  67. package/src/gestures/eventAttacher.ts +67 -0
  68. package/src/gestures/hooks/index.ts +5 -0
  69. package/src/gestures/hooks/useDrag.ts +14 -0
  70. package/src/gestures/hooks/useGesture.ts +38 -0
  71. package/src/gestures/hooks/useMouseMove.ts +11 -0
  72. package/src/gestures/hooks/useRecognizer.ts +59 -0
  73. package/src/gestures/hooks/useScroll.ts +11 -0
  74. package/src/gestures/hooks/useWheel.ts +11 -0
  75. package/src/gestures/index.ts +2 -0
  76. package/src/{Math.ts → gestures/math.ts} +0 -0
  77. package/src/{Types.ts → gestures/types.ts} +19 -36
  78. package/src/gestures/withDefault.ts +3 -0
  79. package/src/hooks/index.ts +0 -4
  80. package/src/hooks/useMeasure.ts +11 -1
  81. package/src/hooks/useOutsideClick.ts +3 -2
  82. package/src/hooks/useWindowDimension.ts +7 -1
  83. package/src/index.ts +2 -5
  84. package/src/utils/index.ts +1 -0
  85. package/src/{isDefined.ts → utils/isDefined.ts} +0 -0
  86. package/tsconfig.json +1 -0
  87. package/src/controllers/EventAttacher.ts +0 -35
  88. package/src/controllers/index.ts +0 -1
  89. package/src/hooks/useDrag.ts +0 -231
  90. package/src/hooks/useMouseMove.ts +0 -123
  91. package/src/hooks/useScroll.ts +0 -124
  92. package/src/hooks/useWheel.ts +0 -144
@@ -0,0 +1,20 @@
1
+ import { ExtrapolateConfig } from "@raidipesh78/re-motion";
2
+ /**
3
+ * interpolate function maps input range to output range
4
+ * @param value - number | TransitionValue
5
+ * @param inputRange - Array<number>
6
+ * @param outputRange - Array<string | number>
7
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
8
+ * @returns - number | TransitionValue
9
+ */
10
+ export declare function interpolate(value: any, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
11
+ /**
12
+ * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
13
+ * sorthand function to interpolate input range [0, 1]
14
+ * @param value - number | TransitionValue
15
+ * @param minOutput - number | string
16
+ * @param maxOutput - number | string
17
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
18
+ * @returns - number | TransitionValue
19
+ */
20
+ export declare function bInterpolate(value: any, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): any;
package/dist/Math.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * bin(booleanValue)
3
+ * returns 1 if booleanValue == true and 0 if booleanValue == false
4
+ */
5
+ export declare function bin(bool: boolean): 1 | 0;
6
+ /**
7
+ * mix(progress, a, b)
8
+ * linear interpolation between a and b
9
+ */
10
+ export declare function mix(perc: number, val1: number, val2: number): number;
11
+ /**
12
+ * clamp(value, min, max)
13
+ * clamps value for min and max bounds
14
+ */
15
+ export declare function clamp(value: number, lowerbound: number, upperbound: number): number;
16
+ /**
17
+ * rubberClamp(value, min, max, constant?)
18
+ * constant is optional : default 0.15
19
+ * clamps the value for min and max value and
20
+ * extends beyond min and max values with constant
21
+ * factor to create elastic rubber band effect
22
+ */
23
+ export declare function rubberClamp(value: number, lowerbound: number, upperbound: number, constant?: number): number;
24
+ /**
25
+ * snapTo(value, velocity, snapPoints[])
26
+ * Calculates the final snapPoint according to given current value,
27
+ * velocity and snapPoints array
28
+ */
29
+ export declare function snapTo(value: number, velocity: number, snapPoints: Array<number>): number;
30
+ /**
31
+ * move(array, moveIndex, toIndex)
32
+ * move array item from moveIndex to toIndex without array modification
33
+ */
34
+ export declare function move(array: Array<any>, moveIndex: number, toIndex: number): any[];
@@ -0,0 +1,32 @@
1
+ import * as React from "react";
2
+ import { UseAnimatedValueConfig } from "./useAnimatedValue";
3
+ /**
4
+ * Make any component animatable
5
+ */
6
+ export declare function makeAnimatedComponent(WrappedComponent: React.ElementType<any>): React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
7
+ /**
8
+ * AnimatedBlock : Animated Div
9
+ */
10
+ export declare const AnimatedBlock: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
11
+ /**
12
+ * AnimatedInline : Animated Span
13
+ */
14
+ export declare const AnimatedInline: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
15
+ /**
16
+ * AnimatedImage : Animated Image
17
+ */
18
+ export declare const AnimatedImage: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
19
+ interface ScrollableBlockProps {
20
+ children?: (animation: any) => React.ReactNode;
21
+ direction?: "single" | "both";
22
+ threshold?: number;
23
+ animationConfig?: UseAnimatedValueConfig;
24
+ }
25
+ /**
26
+ * ScrollableBlock
27
+ * Used to animate element when enter into viewport
28
+ * Render props pattern with children accepts animation node
29
+ * animated value goes from 0 to 1 when appear on viewport & vice versa.
30
+ */
31
+ export declare const ScrollableBlock: React.FC<ScrollableBlockProps>;
32
+ export {};
@@ -0,0 +1,64 @@
1
+ export declare type MeasurementValue = number | Array<number>;
2
+ export declare type MeasurementType = {
3
+ left: MeasurementValue;
4
+ top: MeasurementValue;
5
+ width: MeasurementValue;
6
+ height: MeasurementValue;
7
+ vLeft: MeasurementValue;
8
+ vTop: MeasurementValue;
9
+ };
10
+ export declare type WindowDimensionType = {
11
+ width: number;
12
+ height: number;
13
+ innerWidth: number;
14
+ innerHeight: number;
15
+ };
16
+ declare type GenericEventType = {
17
+ velocityX: number;
18
+ velocityY: number;
19
+ directionX: number;
20
+ directionY: number;
21
+ };
22
+ export declare type ScrollEventType = {
23
+ isScrolling: boolean;
24
+ scrollX: number;
25
+ scrollY: number;
26
+ } & GenericEventType;
27
+ export declare type WheelEventType = {
28
+ target: HTMLElement | undefined | null;
29
+ isWheeling: boolean;
30
+ movementX: number;
31
+ movementY: number;
32
+ offsetX: number;
33
+ offsetY: number;
34
+ deltaX: number;
35
+ deltaY: number;
36
+ } & GenericEventType;
37
+ export declare type DragEventType = {
38
+ args: Array<number | undefined>;
39
+ down: boolean;
40
+ movementX: number;
41
+ movementY: number;
42
+ offsetX: number;
43
+ offsetY: number;
44
+ distanceX: number;
45
+ distanceY: number;
46
+ cancel: () => void;
47
+ } & GenericEventType;
48
+ export declare type MouseMoveEventType = {
49
+ target: EventTarget | undefined | null;
50
+ isMoving: boolean;
51
+ mouseX: number;
52
+ mouseY: number;
53
+ } & GenericEventType;
54
+ export declare type UseDragConfig = {
55
+ initial?: () => {
56
+ movementX: number;
57
+ movementY: number;
58
+ };
59
+ };
60
+ export declare type Vector2 = {
61
+ x: number;
62
+ y: number;
63
+ };
64
+ export {};
@@ -0,0 +1,3 @@
1
+ import { GenericAnimationConfig } from "./useAnimatedValue";
2
+ export declare type InitialConfigType = "ease" | "elastic" | "stiff" | "wooble" | "bounce" | undefined;
3
+ export declare const getInitialConfig: (animationType: InitialConfigType) => GenericAnimationConfig;
@@ -0,0 +1,4 @@
1
+ export * from "./interpolation";
2
+ export * from "./modules";
3
+ export { useAnimatedValue } from "./useAnimatedValue";
4
+ export { useMountedValue } from "./useMountedValue";
@@ -0,0 +1,20 @@
1
+ import { ExtrapolateConfig } from "@raidipesh78/re-motion";
2
+ /**
3
+ * interpolate function maps input range to output range
4
+ * @param value - number | TransitionValue
5
+ * @param inputRange - Array<number>
6
+ * @param outputRange - Array<string | number>
7
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
8
+ * @returns - number | TransitionValue
9
+ */
10
+ export declare function interpolate(value: any, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
11
+ /**
12
+ * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
13
+ * sorthand function to interpolate input range [0, 1]
14
+ * @param value - number | TransitionValue
15
+ * @param minOutput - number | string
16
+ * @param maxOutput - number | string
17
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
18
+ * @returns - number | TransitionValue
19
+ */
20
+ export declare function bInterpolate(value: any, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): any;
@@ -0,0 +1,5 @@
1
+ /**
2
+ * AnimatedBlock
3
+ * <div /> element which can accept animation values
4
+ */
5
+ export declare const AnimatedBlock: any;
@@ -0,0 +1,5 @@
1
+ /**
2
+ * AnimatedImage
3
+ * <img /> element which can accept animation values
4
+ */
5
+ export declare const AnimatedImage: any;
@@ -0,0 +1,5 @@
1
+ /**
2
+ * AnimatedInline
3
+ * <span /> element which can accept animation values
4
+ */
5
+ export declare const AnimatedInline: any;
@@ -0,0 +1,17 @@
1
+ import * as React from "react";
2
+ import { TransitionValue } from "@raidipesh78/re-motion";
3
+ import { InnerUseMountedValueConfig } from "../useMountedValue";
4
+ interface MountedBlockProps {
5
+ state: boolean;
6
+ children: (animation: {
7
+ value: TransitionValue;
8
+ }) => React.ReactNode;
9
+ config?: InnerUseMountedValueConfig;
10
+ }
11
+ /**
12
+ * MountedBlock handles mounting and unmounting of a component
13
+ * @props - state: boolean, config: InnerUseMountedValueConfig
14
+ * @children - (animation: { value: TransitionValue }) => React.ReactNode
15
+ */
16
+ export declare const MountedBlock: ({ state, children, config, }: MountedBlockProps) => JSX.Element;
17
+ export {};
@@ -0,0 +1,16 @@
1
+ import * as React from "react";
2
+ import { UseAnimatedValueConfig } from "../useAnimatedValue";
3
+ interface ScrollableBlockProps {
4
+ children?: (animation: any) => React.ReactNode;
5
+ direction?: "single" | "both";
6
+ threshold?: number;
7
+ animationConfig?: UseAnimatedValueConfig;
8
+ }
9
+ /**
10
+ * ScrollableBlock
11
+ * Used to animate element when enter into viewport
12
+ * Render props pattern with children accepts animation node
13
+ * animated value goes from 0 to 1 when appear on viewport & vice versa.
14
+ */
15
+ export declare const ScrollableBlock: React.FC<ScrollableBlockProps>;
16
+ export {};
@@ -0,0 +1,6 @@
1
+ export * from "./makeAnimatedComponent";
2
+ export * from "./AnimatedBlock";
3
+ export * from "./AnimatedInline";
4
+ export * from "./AnimatedImage";
5
+ export * from "./ScrollableBlock";
6
+ export * from "./MountedBlock";
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Make any component animatable
3
+ */
4
+ export declare function makeAnimatedComponent(WrappedComponent: React.ElementType<any>): import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>>;
@@ -0,0 +1,47 @@
1
+ import * as React from "react";
2
+ import { TransitionValue } from "@raidipesh78/re-motion";
3
+ import { UseAnimatedValueConfig } from "./useAnimatedValue";
4
+ import { InnerUseMountedValueConfig } from "./useMountedValue";
5
+ /**
6
+ * Make any component animatable
7
+ */
8
+ export declare function makeAnimatedComponent(WrappedComponent: React.ElementType<any>): React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
9
+ /**
10
+ * AnimatedBlock : Animated Div
11
+ */
12
+ export declare const AnimatedBlock: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
13
+ /**
14
+ * AnimatedInline : Animated Span
15
+ */
16
+ export declare const AnimatedInline: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
17
+ /**
18
+ * AnimatedImage : Animated Image
19
+ */
20
+ export declare const AnimatedImage: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
21
+ interface ScrollableBlockProps {
22
+ children?: (animation: any) => React.ReactNode;
23
+ direction?: "single" | "both";
24
+ threshold?: number;
25
+ animationConfig?: UseAnimatedValueConfig;
26
+ }
27
+ /**
28
+ * ScrollableBlock
29
+ * Used to animate element when enter into viewport
30
+ * Render props pattern with children accepts animation node
31
+ * animated value goes from 0 to 1 when appear on viewport & vice versa.
32
+ */
33
+ export declare const ScrollableBlock: React.FC<ScrollableBlockProps>;
34
+ interface MountedBlockProps {
35
+ state: boolean;
36
+ children: (animation: {
37
+ value: TransitionValue;
38
+ }) => React.ReactNode;
39
+ config?: InnerUseMountedValueConfig;
40
+ }
41
+ /**
42
+ * MountedBlock handles mounting and unmounting of a component
43
+ * @props - state: boolean, config: InnerUseMountedValueConfig
44
+ * @children - (animation: { value: TransitionValue }) => React.ReactNode
45
+ */
46
+ export declare const MountedBlock: ({ state, children, config, }: MountedBlockProps) => JSX.Element;
47
+ export {};
@@ -0,0 +1,30 @@
1
+ import { TransitionValue, ResultType } from "@raidipesh78/re-motion";
2
+ import { InitialConfigType } from "./getInitialConfig";
3
+ declare type AnimatedValueType = number | string;
4
+ export interface GenericAnimationConfig {
5
+ duration?: number;
6
+ mass?: number;
7
+ friction?: number;
8
+ tension?: number;
9
+ easing?: (t: number) => number;
10
+ delay?: number;
11
+ }
12
+ export interface UseAnimatedValueConfig extends GenericAnimationConfig {
13
+ animationType?: InitialConfigType;
14
+ onAnimationEnd?: (value: ResultType) => void;
15
+ listener?: (value: number) => void;
16
+ immediate?: boolean;
17
+ }
18
+ export declare type ValueReturnType = TransitionValue | number | string | {
19
+ toValue: number | string;
20
+ immediate?: boolean;
21
+ };
22
+ interface UseAnimatedValueReturn {
23
+ value: ValueReturnType;
24
+ currentValue: number | string;
25
+ }
26
+ /**
27
+ * useAnimatedValue for animated transitions
28
+ */
29
+ export declare function useAnimatedValue(initialValue: AnimatedValueType, config?: UseAnimatedValueConfig): UseAnimatedValueReturn;
30
+ export {};
@@ -0,0 +1,22 @@
1
+ import * as React from "react";
2
+ import { TransitionValue, UseTransitionConfig } from "@raidipesh78/re-motion";
3
+ export interface InnerUseMountedValueConfig extends UseTransitionConfig {
4
+ enterDuration?: number;
5
+ exitDuration?: number;
6
+ }
7
+ interface UseMountedValueConfig {
8
+ from: number;
9
+ enter: number;
10
+ exit: number;
11
+ config?: InnerUseMountedValueConfig;
12
+ }
13
+ /**
14
+ * useMountedValue handles mounting and unmounting of a component
15
+ * @param state - boolean
16
+ * @param config - useTransitionConfig
17
+ * @returns mountedValueFunction with a callback with argument ( animationNode, mounted )
18
+ */
19
+ export declare function useMountedValue(state: boolean, config: UseMountedValueConfig): (callback: ({ value }: {
20
+ value: TransitionValue;
21
+ }, mounted: boolean) => React.ReactNode) => React.ReactNode;
22
+ export {};
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Attach single document / window event / HTMLElement
3
+ */
4
+ export declare function attachEvent(domTarget: Window | Document | HTMLElement, event: string, callback: (e: any) => void, capture?: any): () => void;
5
+ /**
6
+ * Attach multiple document / window event / HTMLElement
7
+ */
8
+ export declare function attachEvents(domTarget: Window | Document | HTMLElement, events: Array<[event: string, callback: (e: any) => void, capture?: any]>): () => void;
@@ -0,0 +1 @@
1
+ export * from "./EventAttacher";
@@ -0,0 +1,17 @@
1
+ import { Vector2 } from "../types";
2
+ import { Gesture } from "./Gesture";
3
+ export declare class DragGesture extends Gesture {
4
+ movementStart: Vector2;
5
+ initialMovement: Vector2;
6
+ movement: Vector2;
7
+ previousMovement: Vector2;
8
+ translation: Vector2;
9
+ offset: Vector2;
10
+ velocity: Vector2;
11
+ _initEvents(): void;
12
+ _cancelEvents(): void;
13
+ _handleCallback(): void;
14
+ pointerDown(e: any): void;
15
+ pointerMove(e: any): void;
16
+ pointerUp(): void;
17
+ }
@@ -0,0 +1,20 @@
1
+ export declare class Gesture {
2
+ currentIndex?: number;
3
+ lastTimeStamp: number;
4
+ isActive: boolean;
5
+ targetElement?: HTMLElement;
6
+ targetElements: Array<HTMLElement>;
7
+ config?: any;
8
+ callback?: <T>(event: T) => void;
9
+ _subscribe?: (eventKeys?: Array<string>) => void;
10
+ static _VELOCITY_LIMIT: number;
11
+ _initEvents(): void;
12
+ _cancelEvents(): void;
13
+ applyCallback(callback: <T>(event: T) => void): void;
14
+ applyGesture({ targetElement, targetElements, callback, config, }: {
15
+ targetElement?: any;
16
+ targetElements?: any;
17
+ callback: <T>(event: T) => void;
18
+ config?: any;
19
+ }): () => void | undefined;
20
+ }
@@ -0,0 +1,13 @@
1
+ import { Vector2 } from "../types";
2
+ import { Gesture } from "./Gesture";
3
+ export declare class MouseMoveGesture extends Gesture {
4
+ event?: MouseEvent;
5
+ isActiveID?: any;
6
+ movement: Vector2;
7
+ previousMovement: Vector2;
8
+ velocity: Vector2;
9
+ direction: Vector2;
10
+ _initEvents(): void;
11
+ _handleCallback(): void;
12
+ onMouseMove(e: MouseEvent): void;
13
+ }
@@ -0,0 +1,14 @@
1
+ import { Vector2 } from "../types";
2
+ import { Gesture } from "./Gesture";
3
+ export declare class ScrollGesture extends Gesture {
4
+ isActiveID?: any;
5
+ movement: Vector2;
6
+ previousMovement: Vector2;
7
+ direction: Vector2;
8
+ velocity: Vector2;
9
+ _initEvents(): void;
10
+ _handleCallback(): void;
11
+ onScroll({ x, y }: Vector2): void;
12
+ scrollListener(): void;
13
+ scrollElementListener(): void;
14
+ }
@@ -0,0 +1,15 @@
1
+ import { Vector2 } from "../types";
2
+ import { Gesture } from "./Gesture";
3
+ export declare class WheelGesture extends Gesture {
4
+ isActiveID?: any;
5
+ movement: Vector2;
6
+ previousMovement: Vector2;
7
+ direction: Vector2;
8
+ velocity: Vector2;
9
+ delta: Vector2;
10
+ offset: Vector2;
11
+ translation: Vector2;
12
+ _initEvents(): void;
13
+ _handleCallback(): void;
14
+ onWheel(event: WheelEvent): void;
15
+ }
@@ -0,0 +1,4 @@
1
+ export * from "./DragGesture";
2
+ export * from "./MouseMoveGesture";
3
+ export * from "./ScrollGesture";
4
+ export * from "./WheelGesture";
@@ -0,0 +1,11 @@
1
+ declare type MouseEventType = "click" | "dblclick" | "mousedown" | "mousemove" | "mouseup" | "touchstart" | "touchmove" | "touchend" | "mouseenter" | "mouseleave" | "mouseout" | "mouseover" | "scroll" | "wheel" | "contextmenu";
2
+ declare type DomTargetTypes = Array<Window | Document | HTMLElement>;
3
+ /**
4
+ * Attach multiple document / window event / HTMLElement
5
+ */
6
+ export declare function attachEvents(domTargets: DomTargetTypes, events: Array<[
7
+ event: MouseEventType,
8
+ callback: (e: any) => void,
9
+ capture?: any
10
+ ]>): (eventKeys?: string[] | undefined) => void;
11
+ export {};
@@ -0,0 +1,5 @@
1
+ export * from "./useDrag";
2
+ export * from "./useMouseMove";
3
+ export * from "./useScroll";
4
+ export * from "./useWheel";
5
+ export * from "./useGesture";
@@ -0,0 +1,4 @@
1
+ import { DragEventType, UseDragConfig } from "../types";
2
+ export declare function useDrag(callback: (event: DragEventType) => void, config?: UseDragConfig): (index?: number | undefined) => {
3
+ ref: any;
4
+ };
@@ -0,0 +1,9 @@
1
+ import { DragEventType, WheelEventType, ScrollEventType, MouseMoveEventType } from "../types";
2
+ export declare function useGesture({ onDrag, onWheel, onScroll, onMouseMove, }: {
3
+ onDrag?: (event: DragEventType) => void;
4
+ onWheel?: (event: WheelEventType) => void;
5
+ onScroll?: (event: ScrollEventType) => void;
6
+ onMouseMove?: (event: MouseMoveEventType) => void;
7
+ }): (index?: number | undefined) => {
8
+ ref: any;
9
+ };
@@ -0,0 +1,4 @@
1
+ import { MouseMoveEventType } from "../types";
2
+ export declare function useMouseMove(callback: (event: MouseMoveEventType) => void): (index?: number | undefined) => {
3
+ ref: any;
4
+ };
@@ -0,0 +1,10 @@
1
+ declare type UseRecognizerHandlerType = Array<[
2
+ key: "drag" | "wheel" | "move" | "scroll",
3
+ gesture: any,
4
+ callback: any,
5
+ config?: any
6
+ ]>;
7
+ export declare const useRecognizer: (handlers: UseRecognizerHandlerType) => (index?: number | undefined) => {
8
+ ref: any;
9
+ };
10
+ export {};
@@ -0,0 +1,4 @@
1
+ import { ScrollEventType } from "../types";
2
+ export declare function useScroll(callback: (event: ScrollEventType) => void): (index?: number | undefined) => {
3
+ ref: any;
4
+ };
@@ -0,0 +1,4 @@
1
+ import { WheelEventType } from "../types";
2
+ export declare function useWheel(callback: (event: WheelEventType) => void): (index?: number | undefined) => {
3
+ ref: any;
4
+ };
@@ -0,0 +1,2 @@
1
+ export * from "./hooks";
2
+ export * from "./math";
@@ -0,0 +1,34 @@
1
+ /**
2
+ * bin(booleanValue)
3
+ * returns 1 if booleanValue == true and 0 if booleanValue == false
4
+ */
5
+ export declare function bin(bool: boolean): 1 | 0;
6
+ /**
7
+ * mix(progress, a, b)
8
+ * linear interpolation between a and b
9
+ */
10
+ export declare function mix(perc: number, val1: number, val2: number): number;
11
+ /**
12
+ * clamp(value, min, max)
13
+ * clamps value for min and max bounds
14
+ */
15
+ export declare function clamp(value: number, lowerbound: number, upperbound: number): number;
16
+ /**
17
+ * rubberClamp(value, min, max, constant?)
18
+ * constant is optional : default 0.15
19
+ * clamps the value for min and max value and
20
+ * extends beyond min and max values with constant
21
+ * factor to create elastic rubber band effect
22
+ */
23
+ export declare function rubberClamp(value: number, lowerbound: number, upperbound: number, constant?: number): number;
24
+ /**
25
+ * snapTo(value, velocity, snapPoints[])
26
+ * Calculates the final snapPoint according to given current value,
27
+ * velocity and snapPoints array
28
+ */
29
+ export declare function snapTo(value: number, velocity: number, snapPoints: Array<number>): number;
30
+ /**
31
+ * move(array, moveIndex, toIndex)
32
+ * move array item from moveIndex to toIndex without array modification
33
+ */
34
+ export declare function move(array: Array<any>, moveIndex: number, toIndex: number): any[];
@@ -0,0 +1,51 @@
1
+ declare type GenericEventType = {
2
+ velocityX: number;
3
+ velocityY: number;
4
+ directionX: number;
5
+ directionY: number;
6
+ };
7
+ export declare type DragEventType = {
8
+ args: Array<number | undefined>;
9
+ down: boolean;
10
+ movementX: number;
11
+ movementY: number;
12
+ offsetX: number;
13
+ offsetY: number;
14
+ distanceX: number;
15
+ distanceY: number;
16
+ cancel: () => void;
17
+ } & GenericEventType;
18
+ export declare type MouseMoveEventType = {
19
+ args: Array<number | undefined>;
20
+ event: MouseEvent;
21
+ target: EventTarget | undefined | null;
22
+ isMoving: boolean;
23
+ mouseX: number;
24
+ mouseY: number;
25
+ } & GenericEventType;
26
+ export declare type ScrollEventType = {
27
+ isScrolling: boolean;
28
+ scrollX: number;
29
+ scrollY: number;
30
+ } & GenericEventType;
31
+ export declare type WheelEventType = {
32
+ target: HTMLElement | undefined | null;
33
+ isWheeling: boolean;
34
+ movementX: number;
35
+ movementY: number;
36
+ offsetX: number;
37
+ offsetY: number;
38
+ deltaX: number;
39
+ deltaY: number;
40
+ } & GenericEventType;
41
+ export declare type UseDragConfig = {
42
+ initial?: () => {
43
+ movementX: number;
44
+ movementY: number;
45
+ };
46
+ };
47
+ export declare type Vector2 = {
48
+ x: number;
49
+ y: number;
50
+ };
51
+ export {};
@@ -0,0 +1,4 @@
1
+ export declare const withDefault: (x: number, y: number) => {
2
+ x: number;
3
+ y: number;
4
+ };
@@ -0,0 +1,3 @@
1
+ import { GenericAnimationConfig } from "./useAnimatedValue";
2
+ export declare type InitialConfigType = "ease" | "elastic" | "stiff" | "wooble" | "bounce" | undefined;
3
+ export declare const getInitialConfig: (animationType: InitialConfigType) => GenericAnimationConfig;
@@ -0,0 +1,3 @@
1
+ export * from "./useOutsideClick";
2
+ export * from "./useMeasure";
3
+ export * from "./useWindowDimension";
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ import { DragEventType, UseDragConfig } from "../Types";
3
+ export declare function useDrag(callback: (event: DragEventType) => void, config?: UseDragConfig, deps?: React.DependencyList): (index?: number | undefined) => {
4
+ ref: any;
5
+ };