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.
- package/dist/Interpolation.d.ts +20 -0
- package/dist/Math.d.ts +34 -0
- package/dist/Modules.d.ts +32 -0
- package/dist/Types.d.ts +64 -0
- package/dist/animation/getInitialConfig.d.ts +3 -0
- package/dist/animation/index.d.ts +4 -0
- package/dist/animation/interpolation.d.ts +20 -0
- package/dist/animation/modules/AnimatedBlock.d.ts +5 -0
- package/dist/animation/modules/AnimatedImage.d.ts +5 -0
- package/dist/animation/modules/AnimatedInline.d.ts +5 -0
- package/dist/animation/modules/MountedBlock.d.ts +17 -0
- package/dist/animation/modules/ScrollableBlock.d.ts +16 -0
- package/dist/animation/modules/index.d.ts +6 -0
- package/dist/animation/modules/makeAnimatedComponent.d.ts +4 -0
- package/dist/animation/modules.d.ts +47 -0
- package/dist/animation/useAnimatedValue.d.ts +30 -0
- package/dist/animation/useMountedValue.d.ts +22 -0
- package/dist/controllers/EventAttacher.d.ts +8 -0
- package/dist/controllers/index.d.ts +1 -0
- package/dist/gestures/controllers/DragGesture.d.ts +17 -0
- package/dist/gestures/controllers/Gesture.d.ts +20 -0
- package/dist/gestures/controllers/MouseMoveGesture.d.ts +13 -0
- package/dist/gestures/controllers/ScrollGesture.d.ts +14 -0
- package/dist/gestures/controllers/WheelGesture.d.ts +15 -0
- package/dist/gestures/controllers/index.d.ts +4 -0
- package/dist/gestures/eventAttacher.d.ts +11 -0
- package/dist/gestures/hooks/index.d.ts +5 -0
- package/dist/gestures/hooks/useDrag.d.ts +4 -0
- package/dist/gestures/hooks/useGesture.d.ts +9 -0
- package/dist/gestures/hooks/useMouseMove.d.ts +4 -0
- package/dist/gestures/hooks/useRecognizer.d.ts +10 -0
- package/dist/gestures/hooks/useScroll.d.ts +4 -0
- package/dist/gestures/hooks/useWheel.d.ts +4 -0
- package/dist/gestures/index.d.ts +2 -0
- package/dist/gestures/math.d.ts +34 -0
- package/dist/gestures/types.d.ts +51 -0
- package/dist/gestures/withDefault.d.ts +4 -0
- package/dist/getInitialConfig.d.ts +3 -0
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/useDrag.d.ts +5 -0
- package/dist/hooks/useMeasure.d.ts +14 -0
- package/dist/hooks/useMouseMove.d.ts +5 -0
- package/dist/hooks/useOutsideClick.d.ts +2 -0
- package/dist/hooks/useScroll.d.ts +5 -0
- package/dist/hooks/useWheel.d.ts +5 -0
- package/dist/hooks/useWindowDimension.d.ts +9 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +1189 -0
- package/dist/index.js.map +1 -0
- package/dist/useAnimatedValue.d.ts +30 -0
- package/dist/useMountedValue.d.ts +22 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/isDefined.d.ts +1 -0
- package/package.json +6 -3
- package/src/{getInitialConfig.ts → animation/getInitialConfig.ts} +0 -0
- package/src/animation/index.ts +4 -0
- package/src/{Interpolation.ts → animation/interpolation.ts} +0 -0
- package/src/{Modules.tsx → animation/modules.tsx} +26 -1
- package/src/{useAnimatedValue.ts → animation/useAnimatedValue.ts} +8 -9
- package/src/{useMountedValue.ts → animation/useMountedValue.ts} +8 -9
- package/src/gestures/controllers/DragGesture.ts +176 -0
- package/src/gestures/controllers/Gesture.ts +54 -0
- package/src/gestures/controllers/MouseMoveGesture.ts +111 -0
- package/src/gestures/controllers/ScrollGesture.ts +107 -0
- package/src/gestures/controllers/WheelGesture.ts +123 -0
- package/src/gestures/controllers/index.ts +4 -0
- package/src/gestures/eventAttacher.ts +67 -0
- package/src/gestures/hooks/index.ts +5 -0
- package/src/gestures/hooks/useDrag.ts +14 -0
- package/src/gestures/hooks/useGesture.ts +38 -0
- package/src/gestures/hooks/useMouseMove.ts +11 -0
- package/src/gestures/hooks/useRecognizer.ts +59 -0
- package/src/gestures/hooks/useScroll.ts +11 -0
- package/src/gestures/hooks/useWheel.ts +11 -0
- package/src/gestures/index.ts +2 -0
- package/src/{Math.ts → gestures/math.ts} +0 -0
- package/src/{Types.ts → gestures/types.ts} +19 -36
- package/src/gestures/withDefault.ts +3 -0
- package/src/hooks/index.ts +0 -4
- package/src/hooks/useMeasure.ts +11 -1
- package/src/hooks/useOutsideClick.ts +3 -2
- package/src/hooks/useWindowDimension.ts +7 -1
- package/src/index.ts +2 -5
- package/src/utils/index.ts +1 -0
- package/src/{isDefined.ts → utils/isDefined.ts} +0 -0
- package/tsconfig.json +1 -0
- package/src/controllers/EventAttacher.ts +0 -35
- package/src/controllers/index.ts +0 -1
- package/src/hooks/useDrag.ts +0 -231
- package/src/hooks/useMouseMove.ts +0 -123
- package/src/hooks/useScroll.ts +0 -124
- 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 {};
|
package/dist/Types.d.ts
ADDED
|
@@ -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,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,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,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,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,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,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,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 {};
|