react-ui-animate 1.4.6 → 2.0.0-rc.3

package/src/gestures/index.ts

@@ -1,2 +1,2 @@
-export * from "./hooks";
-export * from "./math";
+export * from './hooks';
+export * from './math';

package/src/index.ts

@@ -1,4 +1,5 @@
-export { Easing } from "@raidipesh78/re-motion";
-export * from "./animation";
-export * from "./gestures";
-export * from "./hooks";
+export { Easing, makeAnimatedComponent } from '@raidipesh78/re-motion';
+export { delay } from './utils';
+export * from './animation';
+export * from './gestures';
+export * from './hooks';

package/src/utils/delay.ts

@@ -0,0 +1,9 @@
+/**
+ * @param { number } ms - number of milliseconds to delay code execution
+ * @returns Promise
+ */
+export function delay(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(null), ms);
+  });
+}

package/src/utils/index.ts

@@ -1 +1,2 @@
-export * from "./isDefined";
+export * from './isDefined';
+export * from './delay';

package/dist/animation/modules.d.ts

@@ -1,47 +0,0 @@
-import * as React from "react";
-import { TransitionValue } from "@raidipesh78/re-motion";
-import { UseAnimatedValueConfig } from "./useAnimatedValue";
-import { InnerUseMountedValueConfig } from "./useMountedValue";
-/**
- * Make any component animatable
- */
-export declare function makeAnimatedComponent(WrappedComponent: React.ElementType<any>): React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-/**
- * AnimatedBlock : Animated Div
- */
-export declare const AnimatedBlock: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-/**
- * AnimatedInline : Animated Span
- */
-export declare const AnimatedInline: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-/**
- * AnimatedImage : Animated Image
- */
-export declare const AnimatedImage: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-interface ScrollableBlockProps {
-    children?: (animation: any) => React.ReactNode;
-    direction?: "single" | "both";
-    threshold?: number;
-    animationConfig?: UseAnimatedValueConfig;
-}
-/**
- * ScrollableBlock
- * Used to animate element when enter into viewport
- * Render props pattern with children accepts animation node
- * animated value goes from 0 to 1 when appear on viewport & vice versa.
- */
-export declare const ScrollableBlock: React.FC<ScrollableBlockProps>;
-interface MountedBlockProps {
-    state: boolean;
-    children: (animation: {
-        value: TransitionValue;
-    }) => React.ReactNode;
-    config?: InnerUseMountedValueConfig;
-}
-/**
- * MountedBlock handles mounting and unmounting of a component
- * @props - state: boolean, config: InnerUseMountedValueConfig
- * @children -  (animation: { value: TransitionValue }) => React.ReactNode
- */
-export declare const MountedBlock: ({ state, children, config, }: MountedBlockProps) => JSX.Element;
-export {};

package/src/animation/modules.tsx

@@ -1,105 +0,0 @@
-import * as React from "react";
-import {
-  makeAnimatedComponent as animated,
-  TransitionValue,
-} from "@raidipesh78/re-motion";
-import { useAnimatedValue, UseAnimatedValueConfig } from "./useAnimatedValue";
-import { useMountedValue, InnerUseMountedValueConfig } from "./useMountedValue";
-
-/**
- * Make any component animatable
- */
-export function makeAnimatedComponent(
-  WrappedComponent: React.ElementType<any>
-) {
-  return animated(WrappedComponent);
-}
-
-/**
- * AnimatedBlock : Animated Div
- */
-export const AnimatedBlock = animated("div");
-/**
- * AnimatedInline : Animated Span
- */
-export const AnimatedInline = animated("span");
-/**
- * AnimatedImage : Animated Image
- */
-export const AnimatedImage = animated("img");
-interface ScrollableBlockProps {
-  children?: (animation: any) => React.ReactNode;
-  direction?: "single" | "both";
-  threshold?: number;
-  animationConfig?: UseAnimatedValueConfig;
-}
-
-/**
- * ScrollableBlock
- * Used to animate element when enter into viewport
- * Render props pattern with children accepts animation node
- * animated value goes from 0 to 1 when appear on viewport & vice versa.
- */
-export const ScrollableBlock: React.FC<ScrollableBlockProps> = (props) => {
-  const {
-    children,
-    direction = "single",
-    animationConfig,
-    threshold = 0.2,
-  } = props;
-  const scrollableBlockRef = React.useRef<HTMLDivElement>(null);
-  const animation = useAnimatedValue(0, animationConfig); // 0: not intersecting | 1: intersecting
-
-  React.useEffect(() => {
-    const _scrollableBlock = scrollableBlockRef.current;
-
-    const observer = new IntersectionObserver(
-      function ([entry]) {
-        const { isIntersecting } = entry;
-
-        if (isIntersecting) {
-          animation.value = 1;
-        } else {
-          if (direction === "both") animation.value = 0;
-        }
-      },
-      {
-        root: null, // FOR VIEWPORT ONLY
-        threshold,
-      }
-    );
-
-    if (_scrollableBlock) {
-      observer.observe(_scrollableBlock);
-    }
-
-    return () => {
-      if (_scrollableBlock) {
-        observer.unobserve(_scrollableBlock);
-      }
-    };
-  }, []);
-
-  return <div ref={scrollableBlockRef}>{children && children(animation)}</div>;
-};
-
-interface MountedBlockProps {
-  state: boolean;
-  children: (animation: { value: TransitionValue }) => React.ReactNode;
-  config?: InnerUseMountedValueConfig;
-}
-
-/**
- * MountedBlock handles mounting and unmounting of a component
- * @props - state: boolean, config: InnerUseMountedValueConfig
- * @children -  (animation: { value: TransitionValue }) => React.ReactNode
- */
-export const MountedBlock = ({
-  state,
-  children,
-  config,
-}: MountedBlockProps) => {
-  const open = useMountedValue(state, { from: 0, enter: 1, exit: 0, config });
-
-  return <>{open((animation, mounted) => mounted && children(animation))}</>;
-};