react-ui-animate 1.4.5 → 2.0.0-rc.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 (52) hide show
  1. package/.vscode/settings.json +3 -0
  2. package/LICENSE +21 -21
  3. package/README.md +115 -115
  4. package/dist/animation/animationType.d.ts +15 -0
  5. package/dist/animation/getInitialConfig.d.ts +3 -3
  6. package/dist/animation/index.d.ts +5 -4
  7. package/dist/animation/interpolation.d.ts +3 -11
  8. package/dist/animation/modules.d.ts +18 -10
  9. package/dist/animation/useAnimatedValue.d.ts +11 -23
  10. package/dist/animation/useMountedValue.d.ts +5 -14
  11. package/dist/gestures/controllers/DragGesture.d.ts +2 -2
  12. package/dist/index.d.ts +5 -4
  13. package/dist/index.js +102 -114
  14. package/dist/index.js.map +1 -1
  15. package/dist/utils/delay.d.ts +5 -0
  16. package/dist/utils/index.d.ts +2 -1
  17. package/package.json +49 -49
  18. package/rollup.config.js +18 -18
  19. package/src/animation/animationType.ts +17 -0
  20. package/src/animation/getInitialConfig.ts +61 -31
  21. package/src/animation/index.ts +9 -4
  22. package/src/animation/interpolation.ts +24 -57
  23. package/src/animation/modules.tsx +105 -105
  24. package/src/animation/useAnimatedValue.ts +62 -132
  25. package/src/animation/useMountedValue.ts +66 -82
  26. package/src/gestures/controllers/DragGesture.ts +177 -176
  27. package/src/gestures/controllers/Gesture.ts +54 -54
  28. package/src/gestures/controllers/MouseMoveGesture.ts +111 -111
  29. package/src/gestures/controllers/ScrollGesture.ts +107 -107
  30. package/src/gestures/controllers/WheelGesture.ts +123 -123
  31. package/src/gestures/controllers/index.ts +4 -4
  32. package/src/gestures/eventAttacher.ts +67 -67
  33. package/src/gestures/hooks/index.ts +5 -5
  34. package/src/gestures/hooks/useDrag.ts +14 -14
  35. package/src/gestures/hooks/useGesture.ts +38 -38
  36. package/src/gestures/hooks/useMouseMove.ts +11 -11
  37. package/src/gestures/hooks/useRecognizer.ts +59 -59
  38. package/src/gestures/hooks/useScroll.ts +11 -11
  39. package/src/gestures/hooks/useWheel.ts +11 -11
  40. package/src/gestures/index.ts +2 -2
  41. package/src/gestures/math.ts +120 -120
  42. package/src/gestures/types.ts +49 -49
  43. package/src/gestures/withDefault.ts +3 -3
  44. package/src/hooks/index.ts +3 -3
  45. package/src/hooks/useMeasure.ts +133 -133
  46. package/src/hooks/useOutsideClick.ts +36 -36
  47. package/src/hooks/useWindowDimension.ts +59 -59
  48. package/src/index.ts +5 -4
  49. package/src/utils/delay.ts +9 -0
  50. package/src/utils/index.ts +2 -1
  51. package/src/utils/isDefined.ts +4 -4
  52. package/tsconfig.json +25 -25
@@ -1,36 +1,36 @@
1
- import * as React from "react";
2
-
3
- import { attachEvents } from "../gestures/eventAttacher";
4
-
5
- export function useOutsideClick(
6
- elementRef: React.RefObject<HTMLElement>,
7
- callback: (event: MouseEvent) => void,
8
- deps?: React.DependencyList
9
- ) {
10
- const callbackRef = React.useRef<(event: MouseEvent) => void>();
11
-
12
- if (!callbackRef.current) {
13
- callbackRef.current = callback;
14
- }
15
-
16
- // Reinitiate callback when dependency change
17
- React.useEffect(() => {
18
- callbackRef.current = callback;
19
-
20
- return () => {
21
- callbackRef.current = () => false;
22
- };
23
- }, deps);
24
-
25
- React.useEffect(() => {
26
- const handleOutsideClick = (e: MouseEvent) => {
27
- if (!elementRef?.current?.contains(e.target as Element)) {
28
- callbackRef.current && callbackRef.current(e);
29
- }
30
- };
31
-
32
- const subscribe = attachEvents([document], [["click", handleOutsideClick]]);
33
-
34
- return () => subscribe && subscribe();
35
- }, []);
36
- }
1
+ import * as React from "react";
2
+
3
+ import { attachEvents } from "../gestures/eventAttacher";
4
+
5
+ export function useOutsideClick(
6
+ elementRef: React.RefObject<HTMLElement>,
7
+ callback: (event: MouseEvent) => void,
8
+ deps?: React.DependencyList
9
+ ) {
10
+ const callbackRef = React.useRef<(event: MouseEvent) => void>();
11
+
12
+ if (!callbackRef.current) {
13
+ callbackRef.current = callback;
14
+ }
15
+
16
+ // Reinitiate callback when dependency change
17
+ React.useEffect(() => {
18
+ callbackRef.current = callback;
19
+
20
+ return () => {
21
+ callbackRef.current = () => false;
22
+ };
23
+ }, deps);
24
+
25
+ React.useEffect(() => {
26
+ const handleOutsideClick = (e: MouseEvent) => {
27
+ if (!elementRef?.current?.contains(e.target as Element)) {
28
+ callbackRef.current && callbackRef.current(e);
29
+ }
30
+ };
31
+
32
+ const subscribe = attachEvents([document], [["click", handleOutsideClick]]);
33
+
34
+ return () => subscribe && subscribe();
35
+ }, []);
36
+ }
@@ -1,59 +1,59 @@
1
- import * as React from "react";
2
-
3
- type WindowDimensionType = {
4
- width: number;
5
- height: number;
6
- innerWidth: number;
7
- innerHeight: number;
8
- };
9
-
10
- export function useWindowDimension(
11
- callback: (event: WindowDimensionType) => void,
12
- deps?: React.DependencyList
13
- ) {
14
- const windowDimensionsRef = React.useRef<WindowDimensionType>({
15
- width: 0,
16
- height: 0,
17
- innerWidth: 0,
18
- innerHeight: 0,
19
- });
20
- const callbackRef =
21
- React.useRef<(event: WindowDimensionType) => void>(callback);
22
-
23
- const handleCallback: () => void = () => {
24
- if (callbackRef) {
25
- callbackRef.current({
26
- ...windowDimensionsRef.current,
27
- });
28
- }
29
- };
30
-
31
- // Reinitiate callback when dependency change
32
- React.useEffect(() => {
33
- callbackRef.current = callback;
34
-
35
- return () => {
36
- callbackRef.current = () => false;
37
- };
38
- }, deps);
39
-
40
- React.useEffect(() => {
41
- const resizeObserver = new ResizeObserver(([entry]) => {
42
- const { clientWidth, clientHeight } = entry.target;
43
- const { innerWidth, innerHeight } = window;
44
-
45
- windowDimensionsRef.current = {
46
- width: clientWidth,
47
- height: clientHeight,
48
- innerWidth,
49
- innerHeight,
50
- };
51
-
52
- handleCallback();
53
- });
54
-
55
- resizeObserver.observe(document.documentElement);
56
-
57
- return () => resizeObserver.unobserve(document.documentElement);
58
- }, []);
59
- }
1
+ import * as React from "react";
2
+
3
+ type WindowDimensionType = {
4
+ width: number;
5
+ height: number;
6
+ innerWidth: number;
7
+ innerHeight: number;
8
+ };
9
+
10
+ export function useWindowDimension(
11
+ callback: (event: WindowDimensionType) => void,
12
+ deps?: React.DependencyList
13
+ ) {
14
+ const windowDimensionsRef = React.useRef<WindowDimensionType>({
15
+ width: 0,
16
+ height: 0,
17
+ innerWidth: 0,
18
+ innerHeight: 0,
19
+ });
20
+ const callbackRef =
21
+ React.useRef<(event: WindowDimensionType) => void>(callback);
22
+
23
+ const handleCallback: () => void = () => {
24
+ if (callbackRef) {
25
+ callbackRef.current({
26
+ ...windowDimensionsRef.current,
27
+ });
28
+ }
29
+ };
30
+
31
+ // Reinitiate callback when dependency change
32
+ React.useEffect(() => {
33
+ callbackRef.current = callback;
34
+
35
+ return () => {
36
+ callbackRef.current = () => false;
37
+ };
38
+ }, deps);
39
+
40
+ React.useEffect(() => {
41
+ const resizeObserver = new ResizeObserver(([entry]) => {
42
+ const { clientWidth, clientHeight } = entry.target;
43
+ const { innerWidth, innerHeight } = window;
44
+
45
+ windowDimensionsRef.current = {
46
+ width: clientWidth,
47
+ height: clientHeight,
48
+ innerWidth,
49
+ innerHeight,
50
+ };
51
+
52
+ handleCallback();
53
+ });
54
+
55
+ resizeObserver.observe(document.documentElement);
56
+
57
+ return () => resizeObserver.unobserve(document.documentElement);
58
+ }, []);
59
+ }
package/src/index.ts CHANGED
@@ -1,4 +1,5 @@
1
- export { Easing } from "@raidipesh78/re-motion";
2
- export * from "./animation";
3
- export * from "./gestures";
4
- export * from "./hooks";
1
+ export { Easing } from '@raidipesh78/re-motion';
2
+ export { delay } from './utils';
3
+ export * from './animation';
4
+ export * from './gestures';
5
+ export * from './hooks';
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @param { number } ms - number of milliseconds to delay code execution
3
+ * @returns Promise
4
+ */
5
+ export function delay(ms: number) {
6
+ return new Promise((resolve) => {
7
+ setTimeout(() => resolve(null), ms);
8
+ });
9
+ }
@@ -1 +1,2 @@
1
- export * from "./isDefined";
1
+ export * from './isDefined';
2
+ export * from './delay';
@@ -1,4 +1,4 @@
1
- // check undefined or null
2
- export const isDefined = <T>(value: T): boolean => {
3
- return value !== undefined && value !== null;
4
- };
1
+ // check undefined or null
2
+ export const isDefined = <T>(value: T): boolean => {
3
+ return value !== undefined && value !== null;
4
+ };
package/tsconfig.json CHANGED
@@ -1,25 +1,25 @@
1
- {
2
- "compilerOptions": {
3
- "outDir": "dist",
4
- "module": "esnext",
5
- "target": "es5",
6
- "lib": ["es6", "dom", "es2016", "es2017", "es2019"],
7
- "downlevelIteration": true,
8
- "sourceMap": true,
9
- "allowJs": false,
10
- "jsx": "react",
11
- "declaration": true,
12
- "moduleResolution": "node",
13
- "forceConsistentCasingInFileNames": true,
14
- "noImplicitReturns": true,
15
- "noImplicitThis": true,
16
- "noImplicitAny": true,
17
- "strictNullChecks": true,
18
- "suppressImplicitAnyIndexErrors": true,
19
- "noUnusedLocals": true,
20
- "noUnusedParameters": true,
21
- "types": ["resize-observer-browser", "node"]
22
- },
23
- "include": ["src"],
24
- "exclude": ["node_modules", "dist", "example", "rollup.config.js"]
25
- }
1
+ {
2
+ "compilerOptions": {
3
+ "outDir": "dist",
4
+ "module": "esnext",
5
+ "target": "es5",
6
+ "lib": ["es6", "dom", "es2016", "es2017", "es2019"],
7
+ "downlevelIteration": true,
8
+ "sourceMap": true,
9
+ "allowJs": false,
10
+ "jsx": "react",
11
+ "declaration": true,
12
+ "moduleResolution": "node",
13
+ "forceConsistentCasingInFileNames": true,
14
+ "noImplicitReturns": true,
15
+ "noImplicitThis": true,
16
+ "noImplicitAny": true,
17
+ "strictNullChecks": true,
18
+ "suppressImplicitAnyIndexErrors": true,
19
+ "noUnusedLocals": true,
20
+ "noUnusedParameters": true,
21
+ "types": ["resize-observer-browser", "node"]
22
+ },
23
+ "include": ["src"],
24
+ "exclude": ["node_modules", "dist", "example", "rollup.config.js"]
25
+ }