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

package/src/animation/{getInitialConfig.ts → lib/getInitialConfig.ts}

@@ -1,61 +1,61 @@
-import { Easing, TransitionValueConfig } 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
-): TransitionValueConfig => {
-  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 };
-  }
-};
+import { Easing, FluidValueConfig } from '../core';
+export type InitialConfigType =
+  | 'linear'
+  | 'easein'
+  | 'easeout'
+  | 'easeinout'
+  | 'ease'
+  | 'power1'
+  | 'power2'
+  | 'power3'
+  | 'power4'
+  | 'elastic'
+  | 'stiff'
+  | 'wooble'
+  | 'bounce';
+
+export const getInitialConfig = (
+  animationType?: InitialConfigType
+): FluidValueConfig => {
+  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/lib/index.ts

@@ -0,0 +1,12 @@
+export { interpolate, bInterpolate } from './interpolation';
+export {
+  AnimatedBlock,
+  AnimatedImage,
+  AnimatedInline,
+  MountedBlock,
+  ScrollableBlock,
+  TransitionBlock,
+} from './modules';
+export { useAnimatedValue, UseAnimatedValueConfig } from './useAnimatedValue';
+export { useMountedValue } from './useMountedValue';
+export { AnimationConfigUtils } from './animationType';

package/src/animation/{interpolation.ts → lib/interpolation.ts}

@@ -1,48 +1,47 @@
-import { ExtrapolateConfig, FluidValue } 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 | FluidValue | 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 | FluidValue | ValueType,
-  minOutput: number | string,
-  maxOutput: number | string,
-  extrapolateConfig?: ExtrapolateConfig
-) {
-  return internalInterpolate(
-    value as any,
-    [0, 1],
-    [minOutput, maxOutput],
-    extrapolateConfig
-  );
-}
+import { ExtrapolateConfig, FluidValue } from '../core';
+import { interpolate as internalInterpolate } from '../core';
+
+/**
+ * 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 | FluidValue,
+  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 | FluidValue,
+  minOutput: number | string,
+  maxOutput: number | string,
+  extrapolateConfig?: ExtrapolateConfig
+) {
+  return internalInterpolate(
+    value as any,
+    [0, 1],
+    [minOutput, maxOutput],
+    extrapolateConfig
+  );
+}

package/src/animation/{modules → lib/modules}/AnimatedBlock.ts

@@ -1,8 +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');
+import { makeFluid } from '../../core';
+
+/**
+ * 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 = makeFluid('div');

package/src/animation/{modules → lib/modules}/AnimatedImage.ts

@@ -1,8 +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');
+import { makeFluid } from '../../core';
+
+/**
+ * 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 = makeFluid('img');

package/src/animation/{modules → lib/modules}/AnimatedInline.ts

@@ -1,8 +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');
+import { makeFluid } from '../../core';
+
+/**
+ * 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 = makeFluid('span');

package/src/animation/lib/modules/MountedBlock.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { FluidValue, FluidValueConfig } from '../../core';
+import { useMountedValue } from '../useMountedValue';
+
+interface MountedValueConfig extends FluidValueConfig {}
+
+interface MountedBlockProps {
+  state: boolean;
+  children: (animation: { value: FluidValue }) => React.ReactNode;
+  from?: number;
+  enter?: number;
+  exit?: number;
+  config?: MountedValueConfig;
+  enterConfig?: MountedValueConfig;
+  exitConfig?: MountedValueConfig;
+}
+
+/**
+ * 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 { number } from - Number that dictates the beginning state for animation.
+ * @prop { number } enter - Number that dictates the entry state for animation.
+ * @prop { number } exit - Number that dictates the exit state for animation.
+ * @prop { MountedValueConfig } config - Animation configuration for overall animation.
+ * @prop { MountedValueConfig } enterConfig - Animation configuration for the entering state of animation.
+ * @prop { MountedValueConfig } exitConfig - Animation configuration for the entering state of animation.
+ */
+export const MountedBlock = ({
+  state,
+  children,
+  from = 0,
+  enter = 1,
+  exit = 0,
+  config,
+  enterConfig,
+  exitConfig,
+}: MountedBlockProps) => {
+  const open = useMountedValue(state, {
+    from,
+    enter,
+    exit,
+    config,
+    enterConfig,
+    exitConfig,
+  });
+
+  return (
+    <>{open((animation, mounted) => mounted && children(animation as any))}</>
+  );
+};

package/src/animation/{modules → lib/modules}/ScrollableBlock.tsx

@@ -1,69 +1,68 @@
-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>
-  );
-};
+import * as React from 'react';
+import { useAnimatedValue, UseAnimatedValueConfig } from '../useAnimatedValue';
+import { FluidValue } from '../../core';
+
+interface ScrollableBlockProps {
+  children?: (animation: {
+    value?: FluidValue | string | number;
+  }) => 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 → lib/modules}/TransitionBlock.tsx

@@ -1,29 +1,28 @@
-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 })}</>;
-};
+import * as React from 'react';
+import { bin } from '../../../gestures/helpers/math';
+import { useAnimatedValue, UseAnimatedValueConfig } from '../useAnimatedValue';
+import { FluidValue } from '../../core';
+
+interface TransitionBlockProps {
+  state: boolean;
+  children: (animation: {
+    value?: FluidValue | string | number;
+  }) => 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 → lib/modules}/index.ts

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