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.
- package/.vscode/settings.json +3 -0
- package/LICENSE +21 -21
- package/README.md +115 -115
- package/dist/animation/animationType.d.ts +15 -0
- package/dist/animation/getInitialConfig.d.ts +3 -3
- package/dist/animation/index.d.ts +5 -4
- package/dist/animation/interpolation.d.ts +3 -11
- package/dist/animation/modules.d.ts +18 -10
- package/dist/animation/useAnimatedValue.d.ts +11 -23
- package/dist/animation/useMountedValue.d.ts +5 -14
- package/dist/gestures/controllers/DragGesture.d.ts +2 -2
- package/dist/index.d.ts +5 -4
- package/dist/index.js +102 -114
- package/dist/index.js.map +1 -1
- package/dist/utils/delay.d.ts +5 -0
- package/dist/utils/index.d.ts +2 -1
- package/package.json +49 -49
- package/rollup.config.js +18 -18
- package/src/animation/animationType.ts +17 -0
- package/src/animation/getInitialConfig.ts +61 -31
- package/src/animation/index.ts +9 -4
- package/src/animation/interpolation.ts +24 -57
- package/src/animation/modules.tsx +105 -105
- package/src/animation/useAnimatedValue.ts +62 -132
- package/src/animation/useMountedValue.ts +66 -82
- package/src/gestures/controllers/DragGesture.ts +177 -176
- 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 -4
- package/src/utils/delay.ts +9 -0
- package/src/utils/index.ts +2 -1
- package/src/utils/isDefined.ts +4 -4
- 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
|
|
2
|
-
export
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
1
|
+
export { Easing } from '@raidipesh78/re-motion';
|
|
2
|
+
export { delay } from './utils';
|
|
3
|
+
export * from './animation';
|
|
4
|
+
export * from './gestures';
|
|
5
|
+
export * from './hooks';
|
package/src/utils/index.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './isDefined';
|
|
2
|
+
export * from './delay';
|
package/src/utils/isDefined.ts
CHANGED
|
@@ -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
|
+
}
|