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
@@ -1,144 +0,0 @@
1
- import * as React from "react";
2
- import { WheelEventType, Vector2 } from "../Types";
3
- import { clamp } from "../Math";
4
- import { attachEvents } from "../controllers";
5
-
6
- const LINE_HEIGHT = 40;
7
- const PAGE_HEIGHT = 800;
8
-
9
- export function useWheel(
10
- callback: (event: WheelEventType) => void,
11
- deps?: React.DependencyList
12
- ) {
13
- const ref = React.useRef<any>(null);
14
-
15
- const isWheeling = React.useRef<boolean>(false);
16
- const isWheelingID = React.useRef<any>(-1);
17
- const movementXY = React.useRef<Vector2>({
18
- x: 0,
19
- y: 0,
20
- });
21
- const previousMovementXY = React.useRef<Vector2>({
22
- x: 0,
23
- y: 0,
24
- });
25
- const deltaXY = React.useRef<Vector2>({
26
- x: 0,
27
- y: 0,
28
- });
29
- const direction = React.useRef<Vector2>({ x: 0, y: 0 });
30
-
31
- const lastTimeStamp = React.useRef<number>(0);
32
- const velocity = React.useRef<Vector2>({ x: 0, y: 0 });
33
-
34
- // Holds offsets
35
- const offset = React.useRef<Vector2>({ x: 0, y: 0 });
36
- const translation = React.useRef<Vector2>({ x: 0, y: 0 });
37
-
38
- const callbackRef = React.useRef<(event: WheelEventType) => void>(callback);
39
-
40
- const handleCallback: () => void = () => {
41
- if (callbackRef) {
42
- callbackRef.current({
43
- target: ref.current,
44
- isWheeling: isWheeling.current,
45
- deltaX: deltaXY.current.x,
46
- deltaY: deltaXY.current.y,
47
- directionX: direction.current.x,
48
- directionY: direction.current.y,
49
- movementX: movementXY.current.x,
50
- movementY: movementXY.current.y,
51
- offsetX: offset.current.x,
52
- offsetY: offset.current.y,
53
- velocityX: velocity.current.x,
54
- velocityY: velocity.current.y,
55
- });
56
- }
57
- };
58
-
59
- // Reinitiate callback when dependency change
60
- React.useEffect(() => {
61
- callbackRef.current = callback;
62
-
63
- return () => {
64
- callbackRef.current = () => false;
65
- };
66
- }, deps);
67
-
68
- React.useEffect(() => {
69
- const _refElement = ref.current;
70
-
71
- const wheelListener = (event: React.WheelEvent) => {
72
- let { deltaX, deltaY, deltaMode } = event;
73
-
74
- const now: number = Date.now();
75
- const deltaTime = Math.min(now - lastTimeStamp.current, 64);
76
- lastTimeStamp.current = now;
77
- const t = deltaTime / 1000; // seconds
78
-
79
- isWheeling.current = true;
80
-
81
- if (isWheelingID.current !== -1) {
82
- isWheeling.current = true;
83
- clearTimeout(isWheelingID.current);
84
- }
85
-
86
- isWheelingID.current = setTimeout(() => {
87
- isWheeling.current = false;
88
- translation.current = { x: offset.current.x, y: offset.current.y };
89
- handleCallback();
90
-
91
- velocity.current = { x: 0, y: 0 }; // Reset Velocity
92
- movementXY.current = { x: 0, y: 0 };
93
- }, 200);
94
-
95
- // normalize wheel values, especially for Firefox
96
- if (deltaMode === 1) {
97
- deltaX *= LINE_HEIGHT;
98
- deltaY *= LINE_HEIGHT;
99
- } else if (deltaMode === 2) {
100
- deltaX *= PAGE_HEIGHT;
101
- deltaY *= PAGE_HEIGHT;
102
- }
103
-
104
- deltaXY.current = { x: deltaX, y: deltaY };
105
- movementXY.current = {
106
- x: movementXY.current.x + deltaX,
107
- y: movementXY.current.y + deltaY,
108
- };
109
- offset.current = {
110
- x: translation.current.x + movementXY.current.x,
111
- y: translation.current.y + movementXY.current.y,
112
- };
113
-
114
- const diffX = movementXY.current.x - previousMovementXY.current.x;
115
- const diffY = movementXY.current.y - previousMovementXY.current.y;
116
-
117
- direction.current = {
118
- x: Math.sign(diffX),
119
- y: Math.sign(diffY),
120
- };
121
-
122
- velocity.current = {
123
- x: clamp(diffX / t / 1000, -20, 20),
124
- y: clamp(diffY / t / 1000, -20, 20),
125
- };
126
-
127
- previousMovementXY.current = {
128
- x: movementXY.current.x,
129
- y: movementXY.current.y,
130
- };
131
-
132
- handleCallback();
133
- };
134
-
135
- var subscribe: any;
136
- if (_refElement) {
137
- subscribe = attachEvents(_refElement, [["wheel", wheelListener]]);
138
- }
139
-
140
- return () => subscribe && subscribe();
141
- }, []);
142
-
143
- return () => ({ ref }); // ...bind()
144
- }