react-ui-animate 2.0.0-rc.7 → 3.0.0-rc.0

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 (222) hide show
  1. package/.vscode/settings.json +3 -3
  2. package/LICENSE +21 -21
  3. package/README.md +115 -115
  4. package/dist/animation/animationType.d.ts +15 -15
  5. package/dist/animation/core/animation/Animation.d.ts +16 -0
  6. package/dist/animation/core/animation/FluidValue.d.ts +21 -0
  7. package/dist/animation/core/animation/RequestAnimationFrame.d.ts +8 -0
  8. package/dist/animation/core/animation/SpringAnimation.d.ts +41 -0
  9. package/dist/animation/core/animation/TimingAnimation.d.ts +35 -0
  10. package/dist/animation/core/animation/TransitionValue.d.ts +21 -0
  11. package/dist/animation/core/controllers/Animation.d.ts +16 -0
  12. package/dist/animation/core/controllers/FluidValue.d.ts +32 -0
  13. package/dist/animation/core/controllers/RequestAnimationFrame.d.ts +8 -0
  14. package/dist/animation/core/controllers/SpringAnimation.d.ts +41 -0
  15. package/dist/animation/core/controllers/TimingAnimation.d.ts +35 -0
  16. package/dist/animation/core/easing/Bezier.d.ts +8 -0
  17. package/dist/animation/core/easing/Easing.d.ts +40 -0
  18. package/dist/animation/core/helpers/camelCaseToKebabCase.d.ts +8 -0
  19. package/dist/animation/core/helpers/camelToDash.d.ts +7 -0
  20. package/dist/animation/core/helpers/canInterpolate.d.ts +11 -0
  21. package/dist/animation/core/helpers/getAnimatableObject.d.ts +22 -0
  22. package/dist/animation/core/helpers/getCleanProps.d.ts +10 -0
  23. package/dist/animation/core/helpers/getCssValue.d.ts +8 -0
  24. package/dist/animation/core/helpers/getNonAnimatableStyle.d.ts +6 -0
  25. package/dist/animation/core/helpers/index.d.ts +5 -0
  26. package/dist/animation/core/helpers/isDefined.d.ts +12 -0
  27. package/dist/animation/core/helpers/isFluidValue.d.ts +6 -0
  28. package/dist/animation/core/index.d.ts +11 -0
  29. package/dist/animation/core/interpolation/Colors.d.ts +25 -0
  30. package/dist/animation/core/interpolation/Interpolation.d.ts +80 -0
  31. package/dist/animation/core/interpolation/__tests__/Colors.test.d.ts +1 -0
  32. package/dist/animation/core/react/Tags.d.ts +3 -0
  33. package/dist/animation/core/react/TransformStyles.d.ts +8 -0
  34. package/dist/animation/core/react/animated.d.ts +29 -0
  35. package/dist/animation/core/react/combineRefs.d.ts +2 -0
  36. package/dist/animation/core/react/fluid.d.ts +6 -0
  37. package/dist/animation/core/react/functions/camelToDash.d.ts +7 -0
  38. package/dist/animation/core/react/functions/getAnimatableObject.d.ts +22 -0
  39. package/dist/animation/core/react/functions/getCleanProps.d.ts +4 -0
  40. package/dist/animation/core/react/functions/getCssValue.d.ts +8 -0
  41. package/dist/animation/core/react/functions/getNonAnimatableStyle.d.ts +6 -0
  42. package/dist/animation/core/react/functions/index.d.ts +7 -0
  43. package/dist/animation/core/react/functions/isDefined.d.ts +6 -0
  44. package/dist/animation/core/react/functions/isTransitionValue.d.ts +6 -0
  45. package/dist/animation/core/react/helpers/camelToDash.d.ts +7 -0
  46. package/dist/animation/core/react/helpers/canInterpolate.d.ts +7 -0
  47. package/dist/animation/core/react/helpers/getAnimatableObject.d.ts +22 -0
  48. package/dist/animation/core/react/helpers/getCleanProps.d.ts +4 -0
  49. package/dist/animation/core/react/helpers/getCssValue.d.ts +8 -0
  50. package/dist/animation/core/react/helpers/getNonAnimatableStyle.d.ts +6 -0
  51. package/dist/animation/core/react/helpers/index.d.ts +7 -0
  52. package/dist/animation/core/react/helpers/isDefined.d.ts +6 -0
  53. package/dist/animation/core/react/helpers/isFluidValue.d.ts +6 -0
  54. package/dist/animation/core/react/helpers/isTransitionValue.d.ts +6 -0
  55. package/dist/animation/core/react/makeFluid.d.ts +30 -0
  56. package/dist/animation/core/react/transforms.d.ts +6 -0
  57. package/dist/animation/core/react/useFluidValue.d.ts +9 -0
  58. package/dist/animation/core/react/useMount.d.ts +20 -0
  59. package/dist/animation/core/react/useMounts.d.ts +26 -0
  60. package/dist/animation/core/react/useTransition.d.ts +9 -0
  61. package/dist/animation/core/react/useTransitions.d.ts +11 -0
  62. package/dist/animation/core/types/animation.d.ts +54 -0
  63. package/dist/animation/core/types/common.d.ts +4 -0
  64. package/dist/animation/core/types/fluid.d.ts +19 -0
  65. package/dist/animation/core/types/index.d.ts +2 -0
  66. package/dist/animation/getInitialConfig.d.ts +3 -3
  67. package/dist/animation/index.d.ts +6 -6
  68. package/dist/animation/interpolation.d.ts +21 -21
  69. package/dist/animation/lib/animationType.d.ts +15 -0
  70. package/dist/animation/lib/getInitialConfig.d.ts +3 -0
  71. package/dist/animation/lib/index.d.ts +5 -0
  72. package/dist/animation/lib/interpolation.d.ts +20 -0
  73. package/dist/animation/lib/modules/AnimatedBlock.d.ts +8 -0
  74. package/dist/animation/lib/modules/AnimatedImage.d.ts +8 -0
  75. package/dist/animation/lib/modules/AnimatedInline.d.ts +8 -0
  76. package/dist/animation/lib/modules/MountedBlock.d.ts +29 -0
  77. package/dist/animation/lib/modules/ScrollableBlock.d.ts +22 -0
  78. package/dist/animation/lib/modules/TransitionBlock.d.ts +18 -0
  79. package/dist/animation/lib/modules/index.d.ts +6 -0
  80. package/dist/animation/lib/useAnimatedValue.d.ts +17 -0
  81. package/dist/animation/lib/useMountedValue.d.ts +14 -0
  82. package/dist/animation/modules/AnimatedBlock.d.ts +8 -8
  83. package/dist/animation/modules/AnimatedImage.d.ts +8 -8
  84. package/dist/animation/modules/AnimatedInline.d.ts +8 -8
  85. package/dist/animation/modules/MountedBlock.d.ts +29 -18
  86. package/dist/animation/modules/ScrollableBlock.d.ts +21 -21
  87. package/dist/animation/modules/TransitionBlock.d.ts +17 -17
  88. package/dist/animation/modules/index.d.ts +6 -6
  89. package/dist/animation/useAnimatedValue.d.ts +22 -22
  90. package/dist/animation/useMountedValue.d.ts +15 -15
  91. package/dist/gestures/controllers/DragGesture.d.ts +17 -17
  92. package/dist/gestures/controllers/Gesture.d.ts +20 -20
  93. package/dist/gestures/controllers/MouseMoveGesture.d.ts +13 -13
  94. package/dist/gestures/controllers/ScrollGesture.d.ts +14 -14
  95. package/dist/gestures/controllers/WheelGesture.d.ts +15 -15
  96. package/dist/gestures/controllers/index.d.ts +4 -4
  97. package/dist/gestures/eventAttacher.d.ts +11 -11
  98. package/dist/gestures/helpers/eventAttacher.d.ts +11 -0
  99. package/dist/gestures/helpers/index.d.ts +1 -0
  100. package/dist/gestures/helpers/math.d.ts +34 -0
  101. package/dist/gestures/helpers/withDefault.d.ts +4 -0
  102. package/dist/gestures/hooks/index.d.ts +5 -5
  103. package/dist/gestures/hooks/useDrag.d.ts +4 -4
  104. package/dist/gestures/hooks/useGesture.d.ts +9 -9
  105. package/dist/gestures/hooks/useMouseMove.d.ts +4 -4
  106. package/dist/gestures/hooks/useRecognizer.d.ts +10 -10
  107. package/dist/gestures/hooks/useScroll.d.ts +4 -4
  108. package/dist/gestures/hooks/useWheel.d.ts +4 -4
  109. package/dist/gestures/index.d.ts +2 -2
  110. package/dist/gestures/math.d.ts +34 -34
  111. package/dist/gestures/types.d.ts +51 -51
  112. package/dist/gestures/withDefault.d.ts +4 -4
  113. package/dist/hooks/index.d.ts +3 -3
  114. package/dist/hooks/useMeasure.d.ts +14 -14
  115. package/dist/hooks/useOutsideClick.d.ts +2 -2
  116. package/dist/hooks/useWindowDimension.d.ts +9 -9
  117. package/dist/index.d.ts +9 -5
  118. package/dist/index.js +2758 -1052
  119. package/dist/index.js.map +1 -1
  120. package/dist/utils/delay.d.ts +5 -5
  121. package/dist/utils/index.d.ts +1 -2
  122. package/dist/utils/isDefined.d.ts +1 -1
  123. package/ecosystem.config.js +12 -0
  124. package/example/README.md +46 -0
  125. package/example/package-lock.json +19597 -0
  126. package/example/package.json +45 -0
  127. package/example/public/favicon.ico +0 -0
  128. package/example/public/index.html +20 -0
  129. package/example/public/logo192.png +0 -0
  130. package/example/public/logo512.png +0 -0
  131. package/example/public/manifest.json +25 -0
  132. package/example/public/robots.txt +3 -0
  133. package/example/src/App.tsx +41 -0
  134. package/example/src/components/Draggable.tsx +46 -0
  135. package/example/src/components/Gestures.tsx +151 -0
  136. package/example/src/components/Interpolation.tsx +21 -0
  137. package/example/src/components/Loop.tsx +48 -0
  138. package/example/src/components/MountedBlock.tsx +25 -0
  139. package/example/src/components/MouseMove.tsx +59 -0
  140. package/example/src/components/MultistageTransition.tsx +34 -0
  141. package/example/src/components/Scroll.tsx +39 -0
  142. package/example/src/components/ScrollableBlock.tsx +27 -0
  143. package/example/src/components/SnapTo.tsx +55 -0
  144. package/example/src/components/TransitionBlock.tsx +37 -0
  145. package/example/src/components/Wheel.tsx +39 -0
  146. package/example/src/components/index.ts +18 -0
  147. package/example/src/components/svgLine.tsx +48 -0
  148. package/example/src/components/useAnimatedValue.tsx +57 -0
  149. package/example/src/components/useMountedValue.tsx +62 -0
  150. package/example/src/index.css +8 -0
  151. package/example/src/index.tsx +16 -0
  152. package/example/tsconfig.json +26 -0
  153. package/package.json +48 -48
  154. package/{rollup.config.js → rollup.config.mjs} +18 -18
  155. package/src/animation/core/controllers/Animation.ts +27 -0
  156. package/src/animation/core/controllers/FluidValue.ts +97 -0
  157. package/src/animation/core/controllers/RequestAnimationFrame.ts +13 -0
  158. package/src/animation/core/controllers/SpringAnimation.ts +218 -0
  159. package/src/animation/core/controllers/TimingAnimation.ts +152 -0
  160. package/src/animation/core/easing/Bezier.ts +146 -0
  161. package/src/animation/core/easing/Easing.ts +132 -0
  162. package/src/animation/core/helpers/camelCaseToKebabCase.ts +10 -0
  163. package/src/animation/core/helpers/getCleanProps.ts +16 -0
  164. package/src/animation/core/helpers/getCssValue.ts +60 -0
  165. package/src/animation/core/helpers/index.ts +5 -0
  166. package/src/animation/core/helpers/isDefined.ts +14 -0
  167. package/src/animation/core/helpers/isFluidValue.ts +11 -0
  168. package/src/animation/core/index.ts +16 -0
  169. package/src/animation/core/interpolation/Colors.ts +232 -0
  170. package/src/animation/core/interpolation/Interpolation.ts +395 -0
  171. package/src/animation/core/interpolation/__tests__/Colors.test.tsx +35 -0
  172. package/src/animation/core/react/fluid.ts +197 -0
  173. package/src/animation/core/react/makeFluid.ts +294 -0
  174. package/src/animation/core/react/transforms.ts +90 -0
  175. package/src/animation/core/react/useFluidValue.ts +43 -0
  176. package/src/animation/core/react/useMount.ts +58 -0
  177. package/src/animation/core/types/animation.d.ts +56 -0
  178. package/src/animation/core/types/common.d.ts +4 -0
  179. package/src/animation/core/types/fluid.d.ts +38 -0
  180. package/src/animation/{animationType.ts → lib/animationType.ts} +17 -17
  181. package/src/animation/{getInitialConfig.ts → lib/getInitialConfig.ts} +61 -61
  182. package/src/animation/lib/index.ts +12 -0
  183. package/src/animation/{interpolation.ts → lib/interpolation.ts} +47 -48
  184. package/src/animation/{modules → lib/modules}/AnimatedBlock.ts +8 -8
  185. package/src/animation/{modules → lib/modules}/AnimatedImage.ts +8 -8
  186. package/src/animation/{modules → lib/modules}/AnimatedInline.ts +8 -8
  187. package/src/animation/lib/modules/MountedBlock.tsx +51 -0
  188. package/src/animation/{modules → lib/modules}/ScrollableBlock.tsx +68 -69
  189. package/src/animation/{modules → lib/modules}/TransitionBlock.tsx +28 -29
  190. package/src/animation/{modules → lib/modules}/index.ts +6 -6
  191. package/src/animation/{useAnimatedValue.ts → lib/useAnimatedValue.ts} +60 -71
  192. package/src/animation/{useMountedValue.ts → lib/useMountedValue.ts} +18 -19
  193. package/src/gestures/controllers/DragGesture.ts +178 -177
  194. package/src/gestures/controllers/Gesture.ts +54 -54
  195. package/src/gestures/controllers/MouseMoveGesture.ts +111 -111
  196. package/src/gestures/controllers/ScrollGesture.ts +107 -107
  197. package/src/gestures/controllers/WheelGesture.ts +123 -123
  198. package/src/gestures/controllers/index.ts +4 -4
  199. package/src/gestures/{eventAttacher.ts → helpers/eventAttacher.ts} +67 -67
  200. package/src/gestures/helpers/index.ts +1 -0
  201. package/src/gestures/{math.ts → helpers/math.ts} +120 -120
  202. package/src/gestures/{withDefault.ts → helpers/withDefault.ts} +3 -3
  203. package/src/gestures/hooks/index.ts +5 -5
  204. package/src/gestures/hooks/useDrag.ts +14 -14
  205. package/src/gestures/hooks/useGesture.ts +38 -38
  206. package/src/gestures/hooks/useMouseMove.ts +11 -11
  207. package/src/gestures/hooks/useRecognizer.ts +59 -59
  208. package/src/gestures/hooks/useScroll.ts +11 -11
  209. package/src/gestures/hooks/useWheel.ts +11 -11
  210. package/src/gestures/{types.ts → types/index.d.ts} +49 -49
  211. package/src/hooks/index.ts +3 -3
  212. package/src/hooks/useMeasure.ts +132 -133
  213. package/src/hooks/useOutsideClick.ts +36 -36
  214. package/src/hooks/useWindowDimension.ts +58 -59
  215. package/src/index.ts +42 -5
  216. package/src/utils/delay.ts +9 -9
  217. package/src/utils/index.ts +1 -2
  218. package/tsconfig.json +24 -25
  219. package/src/animation/index.ts +0 -10
  220. package/src/animation/modules/MountedBlock.tsx +0 -25
  221. package/src/gestures/index.ts +0 -2
  222. package/src/utils/isDefined.ts +0 -4
@@ -1,9 +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
+ /**
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,2 +1 @@
1
- export * from './isDefined';
2
- export * from './delay';
1
+ export * from './delay';
package/tsconfig.json CHANGED
@@ -1,25 +1,24 @@
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-jsx",
11
+ "declaration": true,
12
+ "moduleResolution": "node",
13
+ "forceConsistentCasingInFileNames": true,
14
+ "noImplicitReturns": true,
15
+ "noImplicitThis": true,
16
+ "noImplicitAny": true,
17
+ "strictNullChecks": true,
18
+ "noUnusedLocals": true,
19
+ "noUnusedParameters": true,
20
+ "types": ["resize-observer-browser", "node", "@types/jest"]
21
+ },
22
+ "include": ["src"],
23
+ "exclude": ["node_modules", "dist", "example", "rollup.config.js"]
24
+ }
@@ -1,10 +0,0 @@
1
- export * from './interpolation';
2
- export * from './modules';
3
- export {
4
- useAnimatedValue,
5
- ValueType,
6
- UseAnimatedValueConfig,
7
- } from './useAnimatedValue';
8
- export { useMountedValue } from './useMountedValue';
9
- export * from './animationType';
10
- export * from './modules';
@@ -1,25 +0,0 @@
1
- import * as React from 'react';
2
- import { FluidValue } from '@raidipesh78/re-motion';
3
- import { useMountedValue, UseMountedValueConfig } from '../useMountedValue';
4
-
5
- interface MountedBlockProps {
6
- state: boolean;
7
- children: (animation: { value: FluidValue }) => React.ReactNode;
8
- config: UseMountedValueConfig;
9
- }
10
-
11
- /**
12
- * MountedBlock - Higher order component which handles mounting and unmounting of a component.
13
- * @prop { boolean } state - Boolean indicating the component should mount or unmount.
14
- * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
15
- * @prop { UseMountedValueConfig } config - Animation configuration.
16
- */
17
- export const MountedBlock = ({
18
- state,
19
- children,
20
- config,
21
- }: MountedBlockProps) => {
22
- const open = useMountedValue(state, config);
23
-
24
- return <>{open((animation, mounted) => mounted && children(animation))}</>;
25
- };
@@ -1,2 +0,0 @@
1
- export * from './hooks';
2
- export * from './math';
@@ -1,4 +0,0 @@
1
- // check undefined or null
2
- export const isDefined = <T>(value: T): boolean => {
3
- return value !== undefined && value !== null;
4
- };