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

package/src/animation/getInitialConfig.ts

@@ -1,61 +1,61 @@
-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 };
-  }
-};
+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: 34, tension: 290 };
+  }
+};

package/src/animation/index.ts

@@ -1,9 +1,10 @@
-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';
+export * from './modules';

package/src/animation/interpolation.ts

@@ -1,24 +1,48 @@
-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 { ExtrapolateConfig, TransitionValue } from '@raidipesh78/re-motion';
+import { ValueType } from './useAnimatedValue';
+import { interpolate as internalInterpolate } from '@raidipesh78/re-motion';
+
+/**
+ * interpolate functions maps input range to given output range
+ * @param value - number | TransitionValue
+ * @param inputRange - Array<number>
+ * @param outputRange - Array<number | string>
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
+ * @returns - number | TransitionValue
+ */
+export function interpolate(
+  value: number | TransitionValue | ValueType,
+  inputRange: Array<number>,
+  outputRange: Array<number | string>,
+  extrapolateConfig?: ExtrapolateConfig
+) {
+  return internalInterpolate(
+    value as any,
+    inputRange,
+    outputRange,
+    extrapolateConfig
+  );
+}
+
+/**
+ * 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 | ValueType,
+  minOutput: number | string,
+  maxOutput: number | string,
+  extrapolateConfig?: ExtrapolateConfig
+) {
+  return internalInterpolate(
+    value as any,
+    [0, 1],
+    [minOutput, maxOutput],
+    extrapolateConfig
+  );
+}

package/src/animation/modules/AnimatedBlock.ts

@@ -0,0 +1,8 @@
+import { makeAnimatedComponent } from '@raidipesh78/re-motion';
+
+/**
+ * AnimatedBlock - A higher order component built upon `div` element
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
+ */
+export const AnimatedBlock = makeAnimatedComponent('div');

package/src/animation/modules/AnimatedImage.ts

@@ -0,0 +1,8 @@
+import { makeAnimatedComponent } from '@raidipesh78/re-motion';
+
+/**
+ * AnimatedImage - A higher order component built upon `img` element
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
+ */
+export const AnimatedImage = makeAnimatedComponent('img');

package/src/animation/modules/AnimatedInline.ts

@@ -0,0 +1,8 @@
+import { makeAnimatedComponent } from '@raidipesh78/re-motion';
+
+/**
+ * AnimatedInline - A higher order component built upon `span` element
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
+ */
+export const AnimatedInline = makeAnimatedComponent('span');

package/src/animation/modules/MountedBlock.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TransitionValue } from '@raidipesh78/re-motion';
+import { useMountedValue, UseMountedValueConfig } from '../useMountedValue';
+
+interface MountedBlockProps {
+  state: boolean;
+  children: (animation: { value: TransitionValue }) => React.ReactNode;
+  config: UseMountedValueConfig;
+}
+
+/**
+ * MountedBlock - Higher order component which handles mounting and unmounting of a component.
+ * @prop { boolean } state - Boolean indicating the component should mount or unmount.
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
+ * @prop { UseMountedValueConfig } config - Animation configuration.
+ */
+export const MountedBlock = ({
+  state,
+  children,
+  config,
+}: MountedBlockProps) => {
+  const open = useMountedValue(state, config);
+
+  return <>{open((animation, mounted) => mounted && children(animation))}</>;
+};

package/src/animation/modules/ScrollableBlock.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import {
+  useAnimatedValue,
+  UseAnimatedValueConfig,
+  ValueType,
+} from '../useAnimatedValue';
+
+interface ScrollableBlockProps {
+  children?: (animation: { value: ValueType }) => React.ReactNode;
+  direction?: 'single' | 'both';
+  threshold?: number;
+  animationConfig?: UseAnimatedValueConfig;
+}
+
+/**
+ * ScrollableBlock - Higher order component to handle the entrance or exit animation
+ * of a component when it enters or exit the viewport. Accepts child as a function with
+ * `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
+ * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
+ * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
+ * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
+ * @prop { UseAnimatedValueConfig } animationConfig - Animation config
+ */
+export const ScrollableBlock = (props: ScrollableBlockProps) => {
+  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({ value: animation.value })}
+    </div>
+  );
+};

package/src/animation/modules/TransitionBlock.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { bin } from '../../gestures/math';
+import {
+  useAnimatedValue,
+  UseAnimatedValueConfig,
+  ValueType,
+} from '../useAnimatedValue';
+
+interface TransitionBlockProps {
+  state: boolean;
+  children: (animation: { value: ValueType }) => React.ReactNode;
+  config?: UseAnimatedValueConfig;
+}
+
+/**
+ * TransitionBlock - Higher order component which animates on state change.
+ * @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
+ * @prop { UseAnimatedValueConfig } config - Animation configuration.
+ */
+export const TransitionBlock = ({
+  state,
+  children,
+  config,
+}: TransitionBlockProps) => {
+  const amv = useAnimatedValue(bin(state), config);
+
+  return <>{children({ value: amv.value })}</>;
+};

package/src/animation/modules/index.ts

@@ -0,0 +1,6 @@
+export * from './AnimatedBlock';
+export * from './AnimatedInline';
+export * from './AnimatedImage';
+export * from './MountedBlock';
+export * from './ScrollableBlock';
+export * from './TransitionBlock';

package/src/animation/useAnimatedValue.ts

@@ -1,62 +1,71 @@
-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';
+import { AnimationConfigUtils } from './animationType';
+
+// useAnimatedValue value type
+type Length = number | string;
+type AnimatedValueType = Length;
+
+export interface UseAnimatedValueConfig extends UseTransitionConfig {}
+
+type AssignValue = {
+  toValue: Length;
+  config?: UseAnimatedValueConfig;
+};
+export type ValueType =
+  | Length
+  | AssignValue
+  | ((update: (next: AssignValue) => Promise<any>) => void);
+
+/**
+ * `useAnimatedValue` returns an animation value with `.value` and `.currentValue` property which is
+ * initialized when passed to argument (`initialValue`). The retured value persist until the lifetime of
+ * a component. It doesnot cast any re-renders which can is very good for performance optimization.
+ * @param { string | number } initialValue - Initial value
+ * @param { UseAnimatedValueConfig } config - Animation configuration object.
+ */
+export function useAnimatedValue(
+  initialValue: AnimatedValueType,
+  config?: UseAnimatedValueConfig
+) {
+  const [animation, setAnimation] = useTransition(initialValue, {
+    ...AnimationConfigUtils.EASE,
+    ...config,
+  });
+
+  const targetObject: {
+    value: ValueType;
+    currentValue: number | string;
+  } = {
+    value: animation as any,
+    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,67 @@
-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 which captures current state
+ * passed as an arugment (`state`) and exposes the shadow state which handles the mount and unmount
+ * of a component.
+ * @param { boolean } state - Boolean indicating the component should mount or unmount.
+ * @param { UseMountedValueConfig } config - Animation configuration.
+ */
+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);
+  };
+}