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

package/src/animation/getInitialConfig.ts

@@ -1,31 +1,61 @@
-import { Easing } from "@raidipesh78/re-motion";
-import { GenericAnimationConfig } from "./useAnimatedValue";
-export type InitialConfigType =
-  | "ease"
-  | "elastic"
-  | "stiff"
-  | "wooble"
-  | "bounce"
-  | undefined;
-
-export const getInitialConfig = (
-  animationType: InitialConfigType
-): GenericAnimationConfig => {
-  switch (animationType) {
-    case "elastic":
-      return { mass: 1, friction: 18, tension: 250 };
-
-    case "stiff":
-      return { mass: 1, friction: 18, tension: 350 };
-
-    case "wooble":
-      return { mass: 1, friction: 8, tension: 250 };
-
-    case "bounce":
-      return { duration: 500, easing: Easing.bounce };
-
-    case "ease":
-    default:
-      return { mass: 1, friction: 26, tension: 170 };
-  }
-};
+import { Easing, UseTransitionConfig } from '@raidipesh78/re-motion';
+export type InitialConfigType =
+  | 'linear'
+  | 'easein'
+  | 'easeout'
+  | 'easeinout'
+  | 'ease'
+  | 'power1'
+  | 'power2'
+  | 'power3'
+  | 'power4'
+  | 'elastic'
+  | 'stiff'
+  | 'wooble'
+  | 'bounce';
+
+export const getInitialConfig = (
+  animationType?: InitialConfigType
+): UseTransitionConfig => {
+  switch (animationType) {
+    case 'elastic':
+      return { mass: 1, friction: 18, tension: 250 };
+
+    case 'stiff':
+      return { mass: 1, friction: 18, tension: 350 };
+
+    case 'wooble':
+      return { mass: 1, friction: 8, tension: 250 };
+
+    case 'bounce':
+      return { duration: 500, easing: Easing.bounce };
+
+    case 'power1':
+      return { duration: 500, easing: Easing.bezier(0.17, 0.42, 0.51, 0.97) };
+
+    case 'power2':
+      return { duration: 500, easing: Easing.bezier(0.07, 0.11, 0.13, 1) };
+
+    case 'power3':
+      return { duration: 500, easing: Easing.bezier(0.09, 0.7, 0.16, 1.04) };
+
+    case 'power4':
+      return { duration: 500, easing: Easing.bezier(0.05, 0.54, 0, 1.03) };
+
+    case 'linear':
+      return { duration: 500, easing: Easing.linear };
+
+    case 'easein':
+      return { duration: 500, easing: Easing.in(Easing.ease) };
+
+    case 'easeout':
+      return { duration: 500, easing: Easing.out(Easing.ease) };
+
+    case 'easeinout':
+      return { duration: 500, easing: Easing.inOut(Easing.ease) };
+
+    case 'ease':
+    default:
+      return { mass: 1, friction: 26, tension: 170 };
+  }
+};

package/src/animation/index.ts

@@ -1,4 +1,9 @@
-export * from "./interpolation";
-export * from "./modules";
-export { useAnimatedValue } from "./useAnimatedValue";
-export { useMountedValue } from "./useMountedValue";
+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,57 +1,24 @@
-import {
-  interpolateNumbers,
-  interpolateTransitionValue,
-  ExtrapolateConfig,
-  isSubscriber,
-} from "@raidipesh78/re-motion";
-
-/**
- * interpolate function maps input range to output range
- * @param value - number | TransitionValue
- * @param inputRange - Array<number>
- * @param outputRange - Array<string | number>
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
- */
-export function interpolate(
-  value: any,
-  inputRange: Array<number>,
-  outputRange: Array<number | string>,
-  extrapolateConfig?: ExtrapolateConfig
-) {
-  if (typeof value === "object" && isSubscriber(value)) {
-    return interpolateTransitionValue(
-      value,
-      inputRange,
-      outputRange,
-      extrapolateConfig
-    );
-  } else if (typeof value === "number") {
-    return interpolateNumbers(
-      value,
-      inputRange,
-      outputRange,
-      extrapolateConfig
-    );
-  } else {
-    throw new Error(`Error! ${typeof value} cannot be interpolated`);
-  }
-}
-
-/**
- * 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: any,
-  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, 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))}</>;
-};
+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,132 +1,62 @@
-import * as React from "react";
-import {
-  useTransition,
-  TransitionValue,
-  ResultType,
-} from "@raidipesh78/re-motion";
-import { InitialConfigType, getInitialConfig } from "./getInitialConfig";
-
-// useAnimatedValue value type
-type AnimatedValueType = number | string;
-
-/**
- * getValue checks for type of initialValue and throws error
- * for type other than AnimatedValueType
- */
-const getValue = (value: AnimatedValueType) => {
-  if (typeof value === "number" || typeof value === "string") {
-    return value;
-  } else {
-    throw new Error(
-      "Invalid Value! Animated value only accepts string or number."
-    );
-  }
-};
-
-// General config type
-export interface GenericAnimationConfig {
-  duration?: number;
-  mass?: number;
-  friction?: number;
-  tension?: number;
-  easing?: (t: number) => number;
-  delay?: number;
-}
-
-export interface UseAnimatedValueConfig extends GenericAnimationConfig {
-  animationType?: InitialConfigType;
-  onAnimationEnd?: (value: ResultType) => void;
-  listener?: (value: number) => void;
-  immediate?: boolean;
-}
-
-export type ValueReturnType =
-  | TransitionValue
-  | number
-  | string
-  | { toValue: number | string; immediate?: boolean };
-
-interface UseAnimatedValueReturn {
-  value: ValueReturnType;
-  currentValue: number | string;
-}
-
-/**
- * useAnimatedValue for animated transitions
- */
-export function useAnimatedValue(
-  initialValue: AnimatedValueType,
-  config?: UseAnimatedValueConfig
-): UseAnimatedValueReturn {
-  const _isInitial = React.useRef(true);
-  const _initialValue: number | string = getValue(initialValue);
-
-  const animationType = config?.animationType ?? "ease"; // Defines default animation
-  const onAnimationEnd = config?.onAnimationEnd;
-  const listener = config?.listener;
-
-  const [animation, setAnimation] = useTransition(_initialValue, {
-    ...getInitialConfig(animationType),
-    ...config,
-    onRest: function (result: any) {
-      if (result.finished) {
-        onAnimationEnd && onAnimationEnd(result.value);
-      }
-    },
-    onChange: function (value: number) {
-      listener && listener(value);
-    },
-  });
-
-  // doesn't fire on initial render
-  React.useEffect(() => {
-    if (!_isInitial.current) {
-      setAnimation({ toValue: _initialValue });
-    }
-    _isInitial.current = false;
-  }, [_initialValue]);
-
-  const targetObject: {
-    value: any;
-    currentValue: string | number;
-  } = {
-    value: animation,
-    currentValue: animation.get(),
-  };
-
-  return new Proxy(targetObject, {
-    set: function (
-      _,
-      key,
-      value: number | string | { toValue: number | string; immediate?: boolean }
-    ) {
-      if (key === "value") {
-        if (typeof value === "number" || typeof value === "string") {
-          setAnimation({ toValue: value });
-        } else if (typeof value === "object") {
-          setAnimation({
-            toValue: value.toValue,
-            config: { immediate: value.immediate },
-          });
-        }
-
-        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.'
+      );
+    },
+  });
+}