react-ui-animate 2.0.0-rc.1 → 2.0.0-rc.2

package/src/animation/index.ts

@@ -1,9 +1,9 @@
-export * from './interpolation';
-export * from './modules';
-export {
-  useAnimatedValue,
-  ValueType,
-  UseAnimatedValueConfig,
-} from './useAnimatedValue';
-export { useMountedValue } from './useMountedValue';
-export * from './animationType';
+export * from './interpolation';
+export * from './modules';
+export {
+  useAnimatedValue,
+  ValueType,
+  UseAnimatedValueConfig,
+} from './useAnimatedValue';
+export { useMountedValue } from './useMountedValue';
+export * from './animationType';

package/src/animation/interpolation.ts

@@ -1,24 +1,24 @@
-import {
-  interpolate,
-  ExtrapolateConfig,
-  TransitionValue,
-} from '@raidipesh78/re-motion';
-export { interpolate } from '@raidipesh78/re-motion';
-
-/**
- * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
- * sorthand function to interpolate input range [0, 1]
- * @param value - number | TransitionValue
- * @param minOutput - number | string
- * @param maxOutput - number | string
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
- */
-export function bInterpolate(
-  value: number | TransitionValue,
-  minOutput: number | string,
-  maxOutput: number | string,
-  extrapolateConfig?: ExtrapolateConfig
-) {
-  return interpolate(value, [0, 1], [minOutput, maxOutput], extrapolateConfig);
-}
+import {
+  interpolate,
+  ExtrapolateConfig,
+  TransitionValue,
+} from '@raidipesh78/re-motion';
+export { interpolate } from '@raidipesh78/re-motion';
+
+/**
+ * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
+ * sorthand function to interpolate input range [0, 1]
+ * @param value - number | TransitionValue
+ * @param minOutput - number | string
+ * @param maxOutput - number | string
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
+ * @returns - number | TransitionValue
+ */
+export function bInterpolate(
+  value: number | TransitionValue,
+  minOutput: number | string,
+  maxOutput: number | string,
+  extrapolateConfig?: ExtrapolateConfig
+) {
+  return interpolate(value, [0, 1], [minOutput, maxOutput], extrapolateConfig);
+}

package/src/animation/modules.tsx

@@ -1,105 +1,105 @@
-import * as React from 'react';
-import {
-  makeAnimatedComponent as animated,
-  TransitionValue,
-} from '@raidipesh78/re-motion';
-import { useAnimatedValue, UseAnimatedValueConfig } from './useAnimatedValue';
-import { useMountedValue, UseMountedValueConfig } 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: UseMountedValueConfig;
-}
-
-/**
- * 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, config);
-
-  return <>{open((animation, mounted) => mounted && children(animation))}</>;
-};
+import * as React from 'react';
+import {
+  makeAnimatedComponent as animated,
+  TransitionValue,
+} from '@raidipesh78/re-motion';
+import { useAnimatedValue, UseAnimatedValueConfig } from './useAnimatedValue';
+import { useMountedValue, UseMountedValueConfig } 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: UseMountedValueConfig;
+}
+
+/**
+ * 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, config);
+
+  return <>{open((animation, mounted) => mounted && children(animation))}</>;
+};

package/src/animation/useAnimatedValue.ts

@@ -1,62 +1,62 @@
-import { useTransition, UseTransitionConfig } from '@raidipesh78/re-motion';
-
-// useAnimatedValue value type
-type AnimatedValueType = number | string;
-export interface UseAnimatedValueConfig extends UseTransitionConfig {}
-
-type Length = number | string;
-type AssignValue = {
-  toValue: Length;
-  config?: UseAnimatedValueConfig;
-};
-export type ValueType =
-  | Length
-  | AssignValue
-  | ((update: (next: AssignValue) => Promise<any>) => void);
-
-/**
- * useAnimatedValue for animated transitions
- */
-export function useAnimatedValue(
-  initialValue: AnimatedValueType,
-  config?: UseAnimatedValueConfig
-) {
-  const [animation, setAnimation] = useTransition(initialValue, config);
-
-  const targetObject: {
-    value: any;
-    currentValue: number | string;
-  } = {
-    value: animation,
-    currentValue: animation.get(),
-  };
-
-  return new Proxy(targetObject, {
-    set: function (_, key, value: ValueType) {
-      if (key === 'value') {
-        if (typeof value === 'number' || typeof value === 'string') {
-          setAnimation({ toValue: value });
-        } else if (typeof value === 'object' || typeof value === 'function') {
-          setAnimation(value);
-        }
-
-        return true;
-      }
-
-      throw new Error('You cannot set any other property to animation node.');
-    },
-    get: function (_, key) {
-      if (key === 'value') {
-        return animation;
-      }
-
-      if (key === 'currentValue') {
-        return animation.get();
-      }
-
-      throw new Error(
-        'You cannot access any other property from animation node.'
-      );
-    },
-  });
-}
+import { useTransition, UseTransitionConfig } from '@raidipesh78/re-motion';
+
+// useAnimatedValue value type
+type AnimatedValueType = number | string;
+export interface UseAnimatedValueConfig extends UseTransitionConfig {}
+
+type Length = number | string;
+type AssignValue = {
+  toValue: Length;
+  config?: UseAnimatedValueConfig;
+};
+export type ValueType =
+  | Length
+  | AssignValue
+  | ((update: (next: AssignValue) => Promise<any>) => void);
+
+/**
+ * useAnimatedValue for animated transitions
+ */
+export function useAnimatedValue(
+  initialValue: AnimatedValueType,
+  config?: UseAnimatedValueConfig
+) {
+  const [animation, setAnimation] = useTransition(initialValue, config);
+
+  const targetObject: {
+    value: any;
+    currentValue: number | string;
+  } = {
+    value: animation,
+    currentValue: animation.get(),
+  };
+
+  return new Proxy(targetObject, {
+    set: function (_, key, value: ValueType) {
+      if (key === 'value') {
+        if (typeof value === 'number' || typeof value === 'string') {
+          setAnimation({ toValue: value });
+        } else if (typeof value === 'object' || typeof value === 'function') {
+          setAnimation(value);
+        }
+
+        return true;
+      }
+
+      throw new Error('You cannot set any other property to animation node.');
+    },
+    get: function (_, key) {
+      if (key === 'value') {
+        return animation;
+      }
+
+      if (key === 'currentValue') {
+        return animation.get();
+      }
+
+      throw new Error(
+        'You cannot access any other property from animation node.'
+      );
+    },
+  });
+}

package/src/animation/useMountedValue.ts

@@ -1,66 +1,66 @@
-import * as React from 'react';
-import {
-  useTransition,
-  TransitionValue,
-  UseMountConfig,
-} from '@raidipesh78/re-motion';
-
-export interface UseMountedValueConfig extends UseMountConfig {}
-
-/**
- * useMountedValue handles mounting and unmounting of a component
- * @param state - boolean
- * @param config - useTransitionConfig
- * @returns mountedValueFunction with a callback with argument ( { value: animationNode }, mounted )
- */
-export function useMountedValue(state: boolean, config: UseMountedValueConfig) {
-  const initial = React.useRef(true);
-  const [mounted, setMounted] = React.useState(state);
-  const {
-    from,
-    enter,
-    exit,
-    config: innerConfig,
-    enterConfig,
-    exitConfig,
-  } = React.useRef(config).current;
-  const [animation, setAnimation] = useTransition(from, innerConfig);
-
-  React.useEffect(() => {
-    if (state) {
-      initial.current = true;
-      setMounted(true);
-    } else {
-      initial.current = false;
-      setAnimation(
-        {
-          toValue: exit,
-          config: exitConfig,
-        },
-        function ({ finished }) {
-          if (finished) {
-            setMounted(false);
-          }
-        }
-      );
-    }
-  }, [state]);
-
-  React.useEffect(() => {
-    if (mounted && initial.current) {
-      setAnimation({
-        toValue: enter,
-        config: enterConfig,
-      });
-    }
-  }, [mounted, initial.current]);
-
-  return function (
-    callback: (
-      { value: animation }: { value: TransitionValue },
-      mounted: boolean
-    ) => React.ReactNode
-  ) {
-    return callback({ value: animation }, mounted);
-  };
-}
+import * as React from 'react';
+import {
+  useTransition,
+  TransitionValue,
+  UseMountConfig,
+} from '@raidipesh78/re-motion';
+
+export interface UseMountedValueConfig extends UseMountConfig {}
+
+/**
+ * useMountedValue handles mounting and unmounting of a component
+ * @param state - boolean
+ * @param config - useTransitionConfig
+ * @returns mountedValueFunction with a callback with argument ( { value: animationNode }, mounted )
+ */
+export function useMountedValue(state: boolean, config: UseMountedValueConfig) {
+  const initial = React.useRef(true);
+  const [mounted, setMounted] = React.useState(state);
+  const {
+    from,
+    enter,
+    exit,
+    config: innerConfig,
+    enterConfig,
+    exitConfig,
+  } = React.useRef(config).current;
+  const [animation, setAnimation] = useTransition(from, innerConfig);
+
+  React.useEffect(() => {
+    if (state) {
+      initial.current = true;
+      setMounted(true);
+    } else {
+      initial.current = false;
+      setAnimation(
+        {
+          toValue: exit,
+          config: exitConfig,
+        },
+        function ({ finished }) {
+          if (finished) {
+            setMounted(false);
+          }
+        }
+      );
+    }
+  }, [state]);
+
+  React.useEffect(() => {
+    if (mounted && initial.current) {
+      setAnimation({
+        toValue: enter,
+        config: enterConfig,
+      });
+    }
+  }, [mounted, initial.current]);
+
+  return function (
+    callback: (
+      { value: animation }: { value: TransitionValue },
+      mounted: boolean
+    ) => React.ReactNode
+  ) {
+    return callback({ value: animation }, mounted);
+  };
+}