react-ui-animate 2.0.0-rc.2 → 2.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/.vscode/settings.json +3 -3
- package/LICENSE +21 -21
- package/README.md +115 -115
- package/dist/animation/index.d.ts +1 -0
- package/dist/animation/modules/AnimatedBlock.d.ts +8 -0
- package/dist/animation/modules/AnimatedImage.d.ts +8 -0
- package/dist/animation/modules/AnimatedInline.d.ts +8 -0
- package/dist/animation/modules/MountedBlock.d.ts +18 -0
- package/dist/animation/modules/ScrollableBlock.d.ts +22 -0
- package/dist/animation/modules/TransitionBlock.d.ts +18 -0
- package/dist/animation/modules/index.d.ts +6 -0
- package/dist/animation/useAnimatedValue.d.ts +7 -3
- package/dist/animation/useMountedValue.d.ts +5 -4
- package/dist/gestures/controllers/MouseMoveGesture.d.ts +2 -2
- package/dist/gestures/controllers/ScrollGesture.d.ts +2 -2
- package/dist/gestures/controllers/WheelGesture.d.ts +2 -2
- package/dist/gestures/controllers/index.d.ts +4 -4
- package/dist/gestures/eventAttacher.d.ts +1 -1
- package/dist/gestures/hooks/index.d.ts +5 -5
- package/dist/gestures/hooks/useDrag.d.ts +1 -1
- package/dist/gestures/hooks/useGesture.d.ts +1 -1
- package/dist/gestures/hooks/useMouseMove.d.ts +1 -1
- package/dist/gestures/hooks/useRecognizer.d.ts +1 -1
- package/dist/gestures/hooks/useScroll.d.ts +1 -1
- package/dist/gestures/hooks/useWheel.d.ts +1 -1
- package/dist/gestures/index.d.ts +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +181 -150
- package/dist/index.js.map +1 -1
- package/package.json +49 -49
- package/rollup.config.js +18 -18
- package/src/animation/animationType.ts +17 -17
- package/src/animation/getInitialConfig.ts +61 -61
- package/src/animation/index.ts +10 -9
- package/src/animation/interpolation.ts +24 -24
- package/src/animation/modules/AnimatedBlock.ts +8 -0
- package/src/animation/modules/AnimatedImage.ts +8 -0
- package/src/animation/modules/AnimatedInline.ts +8 -0
- package/src/animation/modules/MountedBlock.tsx +25 -0
- package/src/animation/modules/ScrollableBlock.tsx +62 -0
- package/src/animation/modules/TransitionBlock.tsx +26 -0
- package/src/animation/modules/index.ts +6 -0
- package/src/animation/useAnimatedValue.ts +71 -62
- package/src/animation/useMountedValue.ts +67 -66
- package/src/gestures/controllers/DragGesture.ts +177 -177
- package/src/gestures/controllers/Gesture.ts +54 -54
- package/src/gestures/controllers/MouseMoveGesture.ts +111 -111
- package/src/gestures/controllers/ScrollGesture.ts +107 -107
- package/src/gestures/controllers/WheelGesture.ts +123 -123
- package/src/gestures/controllers/index.ts +4 -4
- package/src/gestures/eventAttacher.ts +67 -67
- package/src/gestures/hooks/index.ts +5 -5
- package/src/gestures/hooks/useDrag.ts +14 -14
- package/src/gestures/hooks/useGesture.ts +38 -38
- package/src/gestures/hooks/useMouseMove.ts +11 -11
- package/src/gestures/hooks/useRecognizer.ts +59 -59
- package/src/gestures/hooks/useScroll.ts +11 -11
- package/src/gestures/hooks/useWheel.ts +11 -11
- package/src/gestures/index.ts +2 -2
- package/src/gestures/math.ts +120 -120
- package/src/gestures/types.ts +49 -49
- package/src/gestures/withDefault.ts +3 -3
- package/src/hooks/index.ts +3 -3
- package/src/hooks/useMeasure.ts +133 -133
- package/src/hooks/useOutsideClick.ts +36 -36
- package/src/hooks/useWindowDimension.ts +59 -59
- package/src/index.ts +5 -5
- package/src/utils/delay.ts +9 -9
- package/src/utils/index.ts +2 -2
- package/src/utils/isDefined.ts +4 -4
- package/tsconfig.json +25 -25
- package/dist/animation/modules.d.ts +0 -55
- package/src/animation/modules.tsx +0 -105
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
1
|
+
export * from './DragGesture';
|
|
2
|
+
export * from './MouseMoveGesture';
|
|
3
|
+
export * from './ScrollGesture';
|
|
4
|
+
export * from './WheelGesture';
|
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
type MouseEventType =
|
|
2
|
-
|
|
|
3
|
-
|
|
|
4
|
-
|
|
|
5
|
-
|
|
|
6
|
-
|
|
|
7
|
-
|
|
|
8
|
-
|
|
|
9
|
-
|
|
|
10
|
-
|
|
|
11
|
-
|
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
18
|
-
type DomTargetTypes = Array<Window | Document | HTMLElement>;
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Attach single document / window event / HTMLElement
|
|
22
|
-
*/
|
|
23
|
-
function attachEvent(
|
|
24
|
-
domTargets: DomTargetTypes,
|
|
25
|
-
event: MouseEventType,
|
|
26
|
-
callback: (e: any) => void,
|
|
27
|
-
capture: any = false
|
|
28
|
-
) {
|
|
29
|
-
domTargets.forEach((target) => {
|
|
30
|
-
target.addEventListener(event, callback, capture);
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
return function () {
|
|
34
|
-
domTargets.forEach((target) => {
|
|
35
|
-
target.removeEventListener(event, callback, capture);
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Attach multiple document / window event / HTMLElement
|
|
42
|
-
*/
|
|
43
|
-
export function attachEvents(
|
|
44
|
-
domTargets: DomTargetTypes,
|
|
45
|
-
events: Array<
|
|
46
|
-
[event: MouseEventType, callback: (e: any) => void, capture?: any]
|
|
47
|
-
>
|
|
48
|
-
) {
|
|
49
|
-
const subscribers = new Map();
|
|
50
|
-
|
|
51
|
-
events.forEach(function ([event, callback, capture = false]) {
|
|
52
|
-
subscribers.set(event, attachEvent(domTargets, event, callback, capture));
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
return function (eventKeys?: Array<string>) {
|
|
56
|
-
for (const [eventKey, subscriber] of subscribers.entries()) {
|
|
57
|
-
if (!eventKeys) {
|
|
58
|
-
subscriber();
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
if (eventKeys.indexOf(eventKey) !== -1) {
|
|
63
|
-
subscriber();
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
}
|
|
1
|
+
type MouseEventType =
|
|
2
|
+
| 'click'
|
|
3
|
+
| 'dblclick'
|
|
4
|
+
| 'mousedown'
|
|
5
|
+
| 'mousemove'
|
|
6
|
+
| 'mouseup'
|
|
7
|
+
| 'touchstart'
|
|
8
|
+
| 'touchmove'
|
|
9
|
+
| 'touchend'
|
|
10
|
+
| 'mouseenter'
|
|
11
|
+
| 'mouseleave'
|
|
12
|
+
| 'mouseout'
|
|
13
|
+
| 'mouseover'
|
|
14
|
+
| 'scroll'
|
|
15
|
+
| 'wheel'
|
|
16
|
+
| 'contextmenu';
|
|
17
|
+
|
|
18
|
+
type DomTargetTypes = Array<Window | Document | HTMLElement>;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Attach single document / window event / HTMLElement
|
|
22
|
+
*/
|
|
23
|
+
function attachEvent(
|
|
24
|
+
domTargets: DomTargetTypes,
|
|
25
|
+
event: MouseEventType,
|
|
26
|
+
callback: (e: any) => void,
|
|
27
|
+
capture: any = false
|
|
28
|
+
) {
|
|
29
|
+
domTargets.forEach((target) => {
|
|
30
|
+
target.addEventListener(event, callback, capture);
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
return function () {
|
|
34
|
+
domTargets.forEach((target) => {
|
|
35
|
+
target.removeEventListener(event, callback, capture);
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Attach multiple document / window event / HTMLElement
|
|
42
|
+
*/
|
|
43
|
+
export function attachEvents(
|
|
44
|
+
domTargets: DomTargetTypes,
|
|
45
|
+
events: Array<
|
|
46
|
+
[event: MouseEventType, callback: (e: any) => void, capture?: any]
|
|
47
|
+
>
|
|
48
|
+
) {
|
|
49
|
+
const subscribers = new Map();
|
|
50
|
+
|
|
51
|
+
events.forEach(function ([event, callback, capture = false]) {
|
|
52
|
+
subscribers.set(event, attachEvent(domTargets, event, callback, capture));
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
return function (eventKeys?: Array<string>) {
|
|
56
|
+
for (const [eventKey, subscriber] of subscribers.entries()) {
|
|
57
|
+
if (!eventKeys) {
|
|
58
|
+
subscriber();
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
if (eventKeys.indexOf(eventKey) !== -1) {
|
|
63
|
+
subscriber();
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
1
|
+
export * from './useDrag';
|
|
2
|
+
export * from './useMouseMove';
|
|
3
|
+
export * from './useScroll';
|
|
4
|
+
export * from './useWheel';
|
|
5
|
+
export * from './useGesture';
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
|
|
3
|
-
import { DragEventType, UseDragConfig } from
|
|
4
|
-
import { DragGesture } from
|
|
5
|
-
import { useRecognizer } from
|
|
6
|
-
|
|
7
|
-
export function useDrag(
|
|
8
|
-
callback: (event: DragEventType) => void,
|
|
9
|
-
config?: UseDragConfig
|
|
10
|
-
) {
|
|
11
|
-
const gesture = React.useRef(new DragGesture()).current;
|
|
12
|
-
|
|
13
|
-
return useRecognizer([[
|
|
14
|
-
}
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import { DragEventType, UseDragConfig } from '../types';
|
|
4
|
+
import { DragGesture } from '../controllers';
|
|
5
|
+
import { useRecognizer } from './useRecognizer';
|
|
6
|
+
|
|
7
|
+
export function useDrag(
|
|
8
|
+
callback: (event: DragEventType) => void,
|
|
9
|
+
config?: UseDragConfig
|
|
10
|
+
) {
|
|
11
|
+
const gesture = React.useRef(new DragGesture()).current;
|
|
12
|
+
|
|
13
|
+
return useRecognizer([['drag', gesture, callback, config]]);
|
|
14
|
+
}
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import {
|
|
3
|
-
DragGesture,
|
|
4
|
-
MouseMoveGesture,
|
|
5
|
-
ScrollGesture,
|
|
6
|
-
WheelGesture,
|
|
7
|
-
} from
|
|
8
|
-
import {
|
|
9
|
-
DragEventType,
|
|
10
|
-
WheelEventType,
|
|
11
|
-
ScrollEventType,
|
|
12
|
-
MouseMoveEventType,
|
|
13
|
-
} from
|
|
14
|
-
import { useRecognizer } from
|
|
15
|
-
|
|
16
|
-
export function useGesture({
|
|
17
|
-
onDrag,
|
|
18
|
-
onWheel,
|
|
19
|
-
onScroll,
|
|
20
|
-
onMouseMove,
|
|
21
|
-
}: {
|
|
22
|
-
onDrag?: (event: DragEventType) => void;
|
|
23
|
-
onWheel?: (event: WheelEventType) => void;
|
|
24
|
-
onScroll?: (event: ScrollEventType) => void;
|
|
25
|
-
onMouseMove?: (event: MouseMoveEventType) => void;
|
|
26
|
-
}) {
|
|
27
|
-
const dragGesture = React.useRef(new DragGesture()).current;
|
|
28
|
-
const wheelGesture = React.useRef(new WheelGesture()).current;
|
|
29
|
-
const scrollGesture = React.useRef(new ScrollGesture()).current;
|
|
30
|
-
const mouseMoveGesture = React.useRef(new MouseMoveGesture()).current;
|
|
31
|
-
|
|
32
|
-
return useRecognizer([
|
|
33
|
-
[
|
|
34
|
-
[
|
|
35
|
-
[
|
|
36
|
-
[
|
|
37
|
-
]);
|
|
38
|
-
}
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
DragGesture,
|
|
4
|
+
MouseMoveGesture,
|
|
5
|
+
ScrollGesture,
|
|
6
|
+
WheelGesture,
|
|
7
|
+
} from '../controllers';
|
|
8
|
+
import {
|
|
9
|
+
DragEventType,
|
|
10
|
+
WheelEventType,
|
|
11
|
+
ScrollEventType,
|
|
12
|
+
MouseMoveEventType,
|
|
13
|
+
} from '../types';
|
|
14
|
+
import { useRecognizer } from './useRecognizer';
|
|
15
|
+
|
|
16
|
+
export function useGesture({
|
|
17
|
+
onDrag,
|
|
18
|
+
onWheel,
|
|
19
|
+
onScroll,
|
|
20
|
+
onMouseMove,
|
|
21
|
+
}: {
|
|
22
|
+
onDrag?: (event: DragEventType) => void;
|
|
23
|
+
onWheel?: (event: WheelEventType) => void;
|
|
24
|
+
onScroll?: (event: ScrollEventType) => void;
|
|
25
|
+
onMouseMove?: (event: MouseMoveEventType) => void;
|
|
26
|
+
}) {
|
|
27
|
+
const dragGesture = React.useRef(new DragGesture()).current;
|
|
28
|
+
const wheelGesture = React.useRef(new WheelGesture()).current;
|
|
29
|
+
const scrollGesture = React.useRef(new ScrollGesture()).current;
|
|
30
|
+
const mouseMoveGesture = React.useRef(new MouseMoveGesture()).current;
|
|
31
|
+
|
|
32
|
+
return useRecognizer([
|
|
33
|
+
['drag', dragGesture, onDrag],
|
|
34
|
+
['wheel', wheelGesture, onWheel],
|
|
35
|
+
['scroll', scrollGesture, onScroll],
|
|
36
|
+
['move', mouseMoveGesture, onMouseMove],
|
|
37
|
+
]);
|
|
38
|
+
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
|
|
3
|
-
import { MouseMoveEventType } from
|
|
4
|
-
import { MouseMoveGesture } from
|
|
5
|
-
import { useRecognizer } from
|
|
6
|
-
|
|
7
|
-
export function useMouseMove(callback: (event: MouseMoveEventType) => void) {
|
|
8
|
-
const gesture = React.useRef(new MouseMoveGesture()).current;
|
|
9
|
-
|
|
10
|
-
return useRecognizer([[
|
|
11
|
-
}
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import { MouseMoveEventType } from '../types';
|
|
4
|
+
import { MouseMoveGesture } from '../controllers';
|
|
5
|
+
import { useRecognizer } from './useRecognizer';
|
|
6
|
+
|
|
7
|
+
export function useMouseMove(callback: (event: MouseMoveEventType) => void) {
|
|
8
|
+
const gesture = React.useRef(new MouseMoveGesture()).current;
|
|
9
|
+
|
|
10
|
+
return useRecognizer([['move', gesture, callback]]);
|
|
11
|
+
}
|
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
-
import * as React from
|
|
3
|
-
|
|
4
|
-
type UseRecognizerHandlerType = Array<
|
|
5
|
-
[
|
|
6
|
-
key:
|
|
7
|
-
gesture: any,
|
|
8
|
-
callback: any,
|
|
9
|
-
config?: any
|
|
10
|
-
]
|
|
11
|
-
>;
|
|
12
|
-
|
|
13
|
-
export const useRecognizer = (handlers: UseRecognizerHandlerType) => {
|
|
14
|
-
const ref = React.useRef<any>();
|
|
15
|
-
const elementRefs = React.useRef<Array<any>>([]);
|
|
16
|
-
const subscribers = React.useRef<
|
|
17
|
-
Map<string, { keyIndex: number; gesture: any; unsubscribe: any }>
|
|
18
|
-
>(new Map()).current;
|
|
19
|
-
|
|
20
|
-
// re-initiate callback on change
|
|
21
|
-
React.useEffect(() => {
|
|
22
|
-
for (let [, { keyIndex, gesture }] of subscribers.entries()) {
|
|
23
|
-
const [, , callback] = handlers[keyIndex];
|
|
24
|
-
gesture.applyCallback(callback);
|
|
25
|
-
}
|
|
26
|
-
}, [handlers]);
|
|
27
|
-
|
|
28
|
-
React.useEffect(() => {
|
|
29
|
-
handlers.forEach(([key, gesture, callback, config], keyIndex) => {
|
|
30
|
-
subscribers.set(key, {
|
|
31
|
-
keyIndex,
|
|
32
|
-
gesture,
|
|
33
|
-
unsubscribe: gesture.applyGesture({
|
|
34
|
-
targetElement: ref.current,
|
|
35
|
-
targetElements: elementRefs.current,
|
|
36
|
-
callback,
|
|
37
|
-
config,
|
|
38
|
-
}),
|
|
39
|
-
});
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
return () => {
|
|
43
|
-
for (let [, { unsubscribe }] of subscribers.entries()) {
|
|
44
|
-
unsubscribe && unsubscribe();
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
}, []);
|
|
48
|
-
|
|
49
|
-
return (index?: number) => {
|
|
50
|
-
if (index === null || index === undefined) {
|
|
51
|
-
return { ref };
|
|
52
|
-
} else {
|
|
53
|
-
elementRefs.current[index] =
|
|
54
|
-
elementRefs.current[index] || React.createRef();
|
|
55
|
-
|
|
56
|
-
return { ref: elementRefs.current[index] };
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
};
|
|
1
|
+
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
|
|
4
|
+
type UseRecognizerHandlerType = Array<
|
|
5
|
+
[
|
|
6
|
+
key: 'drag' | 'wheel' | 'move' | 'scroll',
|
|
7
|
+
gesture: any,
|
|
8
|
+
callback: any,
|
|
9
|
+
config?: any
|
|
10
|
+
]
|
|
11
|
+
>;
|
|
12
|
+
|
|
13
|
+
export const useRecognizer = (handlers: UseRecognizerHandlerType) => {
|
|
14
|
+
const ref = React.useRef<any>();
|
|
15
|
+
const elementRefs = React.useRef<Array<any>>([]);
|
|
16
|
+
const subscribers = React.useRef<
|
|
17
|
+
Map<string, { keyIndex: number; gesture: any; unsubscribe: any }>
|
|
18
|
+
>(new Map()).current;
|
|
19
|
+
|
|
20
|
+
// re-initiate callback on change
|
|
21
|
+
React.useEffect(() => {
|
|
22
|
+
for (let [, { keyIndex, gesture }] of subscribers.entries()) {
|
|
23
|
+
const [, , callback] = handlers[keyIndex];
|
|
24
|
+
gesture.applyCallback(callback);
|
|
25
|
+
}
|
|
26
|
+
}, [handlers]);
|
|
27
|
+
|
|
28
|
+
React.useEffect(() => {
|
|
29
|
+
handlers.forEach(([key, gesture, callback, config], keyIndex) => {
|
|
30
|
+
subscribers.set(key, {
|
|
31
|
+
keyIndex,
|
|
32
|
+
gesture,
|
|
33
|
+
unsubscribe: gesture.applyGesture({
|
|
34
|
+
targetElement: ref.current,
|
|
35
|
+
targetElements: elementRefs.current,
|
|
36
|
+
callback,
|
|
37
|
+
config,
|
|
38
|
+
}),
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
return () => {
|
|
43
|
+
for (let [, { unsubscribe }] of subscribers.entries()) {
|
|
44
|
+
unsubscribe && unsubscribe();
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
}, []);
|
|
48
|
+
|
|
49
|
+
return (index?: number) => {
|
|
50
|
+
if (index === null || index === undefined) {
|
|
51
|
+
return { ref };
|
|
52
|
+
} else {
|
|
53
|
+
elementRefs.current[index] =
|
|
54
|
+
elementRefs.current[index] || React.createRef();
|
|
55
|
+
|
|
56
|
+
return { ref: elementRefs.current[index] };
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
|
|
3
|
-
import { ScrollEventType } from
|
|
4
|
-
import { ScrollGesture } from
|
|
5
|
-
import { useRecognizer } from
|
|
6
|
-
|
|
7
|
-
export function useScroll(callback: (event: ScrollEventType) => void) {
|
|
8
|
-
const gesture = React.useRef(new ScrollGesture()).current;
|
|
9
|
-
|
|
10
|
-
return useRecognizer([[
|
|
11
|
-
}
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import { ScrollEventType } from '../types';
|
|
4
|
+
import { ScrollGesture } from '../controllers';
|
|
5
|
+
import { useRecognizer } from './useRecognizer';
|
|
6
|
+
|
|
7
|
+
export function useScroll(callback: (event: ScrollEventType) => void) {
|
|
8
|
+
const gesture = React.useRef(new ScrollGesture()).current;
|
|
9
|
+
|
|
10
|
+
return useRecognizer([['scroll', gesture, callback]]);
|
|
11
|
+
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
|
|
3
|
-
import { WheelEventType } from
|
|
4
|
-
import { WheelGesture } from
|
|
5
|
-
import { useRecognizer } from
|
|
6
|
-
|
|
7
|
-
export function useWheel(callback: (event: WheelEventType) => void) {
|
|
8
|
-
const gesture = React.useRef(new WheelGesture()).current;
|
|
9
|
-
|
|
10
|
-
return useRecognizer([[
|
|
11
|
-
}
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import { WheelEventType } from '../types';
|
|
4
|
+
import { WheelGesture } from '../controllers';
|
|
5
|
+
import { useRecognizer } from './useRecognizer';
|
|
6
|
+
|
|
7
|
+
export function useWheel(callback: (event: WheelEventType) => void) {
|
|
8
|
+
const gesture = React.useRef(new WheelGesture()).current;
|
|
9
|
+
|
|
10
|
+
return useRecognizer([['wheel', gesture, callback]]);
|
|
11
|
+
}
|
package/src/gestures/index.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
1
|
+
export * from './hooks';
|
|
2
|
+
export * from './math';
|