react-ui-animate 5.0.0-rc.2 → 5.0.0-rc.3
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/LICENSE +21 -21
- package/README.md +206 -206
- package/dist/animation/AnimationConfig.d.ts +8 -8
- package/dist/animation/descriptors.d.ts +7 -0
- package/dist/animation/drivers.d.ts +4 -0
- package/dist/animation/helpers.d.ts +3 -0
- package/dist/animation/index.d.ts +4 -3
- package/dist/animation/to.d.ts +9 -0
- package/dist/animation/types.d.ts +33 -26
- package/dist/animation/useMount.d.ts +17 -0
- package/dist/animation/useValue.d.ts +9 -0
- package/dist/gestures/controllers/DragGesture.d.ts +43 -15
- package/dist/gestures/controllers/Gesture.d.ts +11 -19
- package/dist/gestures/controllers/MoveGesture.d.ts +29 -0
- package/dist/gestures/controllers/ScrollGesture.d.ts +26 -12
- package/dist/gestures/controllers/WheelGesture.d.ts +24 -13
- package/dist/gestures/hooks/index.d.ts +4 -5
- package/dist/gestures/hooks/useDrag.d.ts +5 -4
- package/dist/gestures/hooks/useMove.d.ts +8 -0
- package/dist/gestures/hooks/useScroll.d.ts +8 -4
- package/dist/gestures/hooks/useWheel.d.ts +8 -4
- package/dist/gestures/index.d.ts +1 -0
- package/dist/hooks/index.d.ts +3 -3
- package/dist/hooks/useDimension.d.ts +9 -0
- package/dist/hooks/useMeasure.d.ts +5 -7
- package/dist/hooks/useOutsideClick.d.ts +1 -1
- package/dist/index.d.ts +5 -5
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/utils/index.d.ts +6 -0
- package/package.json +54 -54
- package/dist/animation/Value.d.ts +0 -12
- package/dist/animation/controllers.d.ts +0 -41
- package/dist/animation/hooks/index.d.ts +0 -3
- package/dist/animation/hooks/useAnimatedList.d.ts +0 -24
- package/dist/animation/hooks/useMount.d.ts +0 -12
- package/dist/animation/hooks/useValue.d.ts +0 -15
- package/dist/animation/interpolation/colors.d.ts +0 -25
- package/dist/animation/interpolation/index.d.ts +0 -1
- package/dist/animation/interpolation/interpolateNumbers.d.ts +0 -8
- package/dist/gestures/controllers/MouseMoveGesture.d.ts +0 -13
- package/dist/gestures/controllers/index.d.ts +0 -4
- package/dist/gestures/helpers/eventAttacher.d.ts +0 -11
- package/dist/gestures/helpers/index.d.ts +0 -1
- package/dist/gestures/helpers/math.d.ts +0 -34
- package/dist/gestures/helpers/withDefault.d.ts +0 -4
- package/dist/gestures/hooks/useGesture.d.ts +0 -9
- package/dist/gestures/hooks/useMouseMove.d.ts +0 -4
- package/dist/gestures/hooks/useRecognizer.d.ts +0 -10
- package/dist/gestures/types/index.d.ts +0 -51
- package/dist/hooks/useWindowDimension.d.ts +0 -9
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { MotionValue } from '@raidipesh78/re-motion';
|
|
2
|
-
import { ToValue } from './types';
|
|
3
|
-
export declare class Value<V extends number | string> {
|
|
4
|
-
private animation;
|
|
5
|
-
private unsubscribe?;
|
|
6
|
-
constructor(initial: V);
|
|
7
|
-
set(u: MotionValue<V> | ToValue<V>): void;
|
|
8
|
-
private buildDriver;
|
|
9
|
-
get value(): MotionValue<V>;
|
|
10
|
-
get current(): V;
|
|
11
|
-
destroy(): void;
|
|
12
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { DriverConfig, Primitive } from './types';
|
|
2
|
-
interface WithSpringOptions {
|
|
3
|
-
mass?: number;
|
|
4
|
-
tension?: number;
|
|
5
|
-
friction?: number;
|
|
6
|
-
onStart?: () => void;
|
|
7
|
-
onChange?: (v: number | string) => void;
|
|
8
|
-
onRest?: () => void;
|
|
9
|
-
}
|
|
10
|
-
export declare const withSpring: (to: Primitive, options?: WithSpringOptions) => DriverConfig;
|
|
11
|
-
export declare const withEase: (to: Primitive, options?: WithSpringOptions) => DriverConfig;
|
|
12
|
-
interface WithTimingOptions {
|
|
13
|
-
duration?: number;
|
|
14
|
-
easing?: (t: number) => number;
|
|
15
|
-
onStart?: () => void;
|
|
16
|
-
onChange?: (v: number | string) => void;
|
|
17
|
-
onRest?: () => void;
|
|
18
|
-
}
|
|
19
|
-
export declare const withTiming: (to: Primitive, options?: WithTimingOptions) => DriverConfig;
|
|
20
|
-
interface WithDecayOptions {
|
|
21
|
-
velocity: number;
|
|
22
|
-
onStart?: () => void;
|
|
23
|
-
onChange?: (v: number | string) => void;
|
|
24
|
-
onRest?: () => void;
|
|
25
|
-
clamp?: [number, number];
|
|
26
|
-
}
|
|
27
|
-
export declare const withDecay: (options: WithDecayOptions) => DriverConfig;
|
|
28
|
-
interface WithSequenceOptions {
|
|
29
|
-
onStart?: () => void;
|
|
30
|
-
onChange?: (v: number | string) => void;
|
|
31
|
-
onRest?: () => void;
|
|
32
|
-
}
|
|
33
|
-
export declare const withSequence: (steps: DriverConfig[], options?: WithSequenceOptions) => DriverConfig;
|
|
34
|
-
export declare const withDelay: (delay: number) => DriverConfig;
|
|
35
|
-
interface WithLoopOptions {
|
|
36
|
-
onStart?: () => void;
|
|
37
|
-
onChange?: (v: number | string) => void;
|
|
38
|
-
onRest?: () => void;
|
|
39
|
-
}
|
|
40
|
-
export declare const withLoop: (controller: DriverConfig, iterations: number, options?: WithLoopOptions) => DriverConfig;
|
|
41
|
-
export {};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { MotionValue } from '@raidipesh78/re-motion';
|
|
2
|
-
import type { ToValue } from '../types';
|
|
3
|
-
export declare function useAnimatedList<T>(items: T[], getKey: (item: T) => string, config?: {
|
|
4
|
-
from?: number;
|
|
5
|
-
enter?: ToValue<number>;
|
|
6
|
-
exit?: ToValue<number>;
|
|
7
|
-
}): Array<{
|
|
8
|
-
key: string;
|
|
9
|
-
item: T;
|
|
10
|
-
animation: MotionValue<number>;
|
|
11
|
-
}>;
|
|
12
|
-
export declare function useAnimatedList<T, I extends Record<string, number>>(items: T[], getKey: (item: T) => string, config: {
|
|
13
|
-
from: I;
|
|
14
|
-
enter?: Partial<{
|
|
15
|
-
[K in keyof I]: ToValue<I[K]>;
|
|
16
|
-
}>;
|
|
17
|
-
exit?: Partial<{
|
|
18
|
-
[K in keyof I]: ToValue<I[K]>;
|
|
19
|
-
}>;
|
|
20
|
-
}): Array<{
|
|
21
|
-
key: string;
|
|
22
|
-
item: T;
|
|
23
|
-
animation: Record<keyof I, MotionValue<number>>;
|
|
24
|
-
}>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { MotionValue } from '@raidipesh78/re-motion';
|
|
2
|
-
import type { ToValue } from '../types';
|
|
3
|
-
export declare function useMount(isOpen: boolean, config?: {
|
|
4
|
-
from?: number;
|
|
5
|
-
enter?: ToValue<number>;
|
|
6
|
-
exit?: ToValue<number>;
|
|
7
|
-
}): (fn: (value: MotionValue<number>, mounted: boolean) => React.ReactNode) => React.ReactNode;
|
|
8
|
-
export declare function useMount<I extends Record<string, number>>(isOpen: boolean, config: {
|
|
9
|
-
from: I;
|
|
10
|
-
enter?: Partial<Record<keyof I, ToValue<number>>>;
|
|
11
|
-
exit?: Partial<Record<keyof I, ToValue<number>>>;
|
|
12
|
-
}): (fn: (values: Record<keyof I, MotionValue<number>>, mounted: boolean) => React.ReactNode) => React.ReactNode;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { MotionValue } from '@raidipesh78/re-motion';
|
|
2
|
-
import { Primitive, ToValue } from '../types';
|
|
3
|
-
type Input<V extends Primitive> = V | V[] | Record<string, V>;
|
|
4
|
-
type Output<V extends Primitive, I extends Input<V>> = I extends V ? MotionValue<V> : I extends V[] ? {
|
|
5
|
-
[K in keyof I]: MotionValue<V>;
|
|
6
|
-
} : I extends Record<string, V> ? {
|
|
7
|
-
[K in keyof I]: MotionValue<V>;
|
|
8
|
-
} : never;
|
|
9
|
-
type SetterParam<V extends Primitive, I extends Input<V>> = I extends V ? MotionValue<V> | ToValue<V> : I extends V[] ? Partial<{
|
|
10
|
-
[K in keyof I]: MotionValue<V> | ToValue<V>;
|
|
11
|
-
}> : I extends Record<string, V> ? Partial<{
|
|
12
|
-
[K in keyof I]: MotionValue<V> | ToValue<V>;
|
|
13
|
-
}> : never;
|
|
14
|
-
export declare function useValue<V extends Primitive, I extends Input<V>>(initial: I): [Output<V, I>, (to: SetterParam<V, I>) => void];
|
|
15
|
-
export {};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
export declare const COLOR_NUMBER_REGEX: RegExp;
|
|
2
|
-
export declare const HEX_NAME_COLOR: RegExp;
|
|
3
|
-
interface classNameType {
|
|
4
|
-
[name: string]: string;
|
|
5
|
-
}
|
|
6
|
-
export declare const colorNames: classNameType;
|
|
7
|
-
export declare function hexToRgba(hex: string): {
|
|
8
|
-
r: number;
|
|
9
|
-
g: number;
|
|
10
|
-
b: number;
|
|
11
|
-
a: number;
|
|
12
|
-
};
|
|
13
|
-
export declare function rgbaToHex(rgba: {
|
|
14
|
-
r: number;
|
|
15
|
-
g: number;
|
|
16
|
-
b: number;
|
|
17
|
-
a: number;
|
|
18
|
-
}): string;
|
|
19
|
-
export declare function processColor(color: number | string): {
|
|
20
|
-
r: number;
|
|
21
|
-
g: number;
|
|
22
|
-
b: number;
|
|
23
|
-
a: number;
|
|
24
|
-
};
|
|
25
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { interpolateNumbers } from './interpolateNumbers';
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
type ExtrapolateType = 'identity' | 'extend' | 'clamp';
|
|
2
|
-
type ExtrapolateConfig = {
|
|
3
|
-
extrapolate?: ExtrapolateType;
|
|
4
|
-
extrapolateLeft?: ExtrapolateType;
|
|
5
|
-
extrapolateRight?: ExtrapolateType;
|
|
6
|
-
};
|
|
7
|
-
export declare function interpolateNumbers(value: number, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
|
|
8
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
type MouseEventType = 'click' | 'dblclick' | 'mousedown' | 'mousemove' | 'mouseup' | 'touchstart' | 'touchmove' | 'touchend' | 'mouseenter' | 'mouseleave' | 'mouseout' | 'mouseover' | 'scroll' | 'wheel' | 'contextmenu';
|
|
2
|
-
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?: Array<string>) => void;
|
|
11
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './math';
|
|
@@ -1,34 +0,0 @@
|
|
|
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[];
|
|
@@ -1,9 +0,0 @@
|
|
|
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) => {
|
|
8
|
-
ref: any;
|
|
9
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
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) => {
|
|
8
|
-
ref: any;
|
|
9
|
-
};
|
|
10
|
-
export {};
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
type GenericEventType = {
|
|
2
|
-
velocityX: number;
|
|
3
|
-
velocityY: number;
|
|
4
|
-
directionX: number;
|
|
5
|
-
directionY: number;
|
|
6
|
-
};
|
|
7
|
-
export 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 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 type ScrollEventType = {
|
|
27
|
-
isScrolling: boolean;
|
|
28
|
-
scrollX: number;
|
|
29
|
-
scrollY: number;
|
|
30
|
-
} & GenericEventType;
|
|
31
|
-
export 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 type UseDragConfig = {
|
|
42
|
-
initial?: () => {
|
|
43
|
-
movementX: number;
|
|
44
|
-
movementY: number;
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
export type Vector2 = {
|
|
48
|
-
x: number;
|
|
49
|
-
y: number;
|
|
50
|
-
};
|
|
51
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { DependencyList } from 'react';
|
|
2
|
-
type WindowDimensionType = {
|
|
3
|
-
width: number;
|
|
4
|
-
height: number;
|
|
5
|
-
innerWidth: number;
|
|
6
|
-
innerHeight: number;
|
|
7
|
-
};
|
|
8
|
-
export declare function useWindowDimension(callback: (event: WindowDimensionType) => void, deps?: DependencyList): void;
|
|
9
|
-
export {};
|