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

package/src/animation/core/react/makeFluid.ts

@@ -0,0 +1,294 @@
+import {
+  useRef,
+  useMemo,
+  useLayoutEffect,
+  createElement,
+  forwardRef,
+  RefObject,
+} from 'react';
+
+import { SpringAnimation } from '../controllers/SpringAnimation';
+import { TimingAnimation } from '../controllers/TimingAnimation';
+import {
+  ExtrapolateConfig,
+  canInterpolate,
+  interpolateNumbers,
+} from '../interpolation/Interpolation';
+import { getTransform, isTransformKey } from './transforms';
+import {
+  isDefined,
+  getCleanProps,
+  getCssValue,
+  camelCaseToKebabCase,
+  isFluidValue,
+} from '../helpers';
+import { FluidValue } from '../controllers/FluidValue';
+
+import type { ResultType, FluidValueConfig, Length } from '../types/animation';
+import type { FluidProps, WrappedComponentOrTag } from '../types/fluid';
+
+/**
+ * Higher-order component to make any component animatable.
+ *
+ * This function takes a React component or an HTML tag and returns a new component
+ * that can smoothly transition between states using fluid animations. It enhances
+ * the user experience by adding dynamic and engaging animations to the wrapped component.
+ *
+ * @param WrapperComponent - The React component or HTML tag to be wrapped with animation functionality.
+ * @returns - A new component with added animation capabilities.
+ *
+ * The returned component uses fluid animations to smoothly transition between different
+ * states. It supports both style and prop animations, handling transforms and other
+ * properties seamlessly. The component ensures that animations are efficiently applied
+ * and updated based on the current state and configuration of fluid values.
+ *
+ * @example
+ * const AnimatedDiv = makeFluid('div');
+ *
+ * const MyComponent = () => {
+ *  const opacity = useAnimatedValue(1)
+ *  return (
+ *   <AnimatedDiv style={{ opacity: opacity.value }}>
+ *     Hello, world!
+ *   </AnimatedDiv>
+ * )};
+ */
+export function makeFluid<C extends WrappedComponentOrTag>(
+  WrapperComponent: C
+) {
+  return forwardRef((givenProps: FluidProps<C>, givenRef: any) => {
+    const instanceRef = useRef<any>(null);
+
+    const transformStyleRef = useRef<Record<string, Length>>({});
+
+    const { fluids, nonFluids } = useMemo(() => {
+      const { style, ...props } = givenProps;
+      const fluidStyle = getFluids('style', style);
+      const fluidProps = getFluids('props', props);
+
+      return {
+        fluids: [...fluidStyle.fluids, ...fluidProps.fluids],
+        nonFluids: [...fluidStyle.nonFluids, ...fluidProps.nonFluids],
+      };
+    }, [givenProps]);
+
+    const applyAnimationValues = ({
+      isTransform,
+      propertyType,
+      property,
+      value,
+    }: {
+      isTransform: boolean;
+      propertyType: 'style' | 'props';
+      property: string;
+      value: Length;
+    }) => {
+      if (!instanceRef.current) return;
+
+      if (propertyType === 'style') {
+        if (isTransform) {
+          transformStyleRef.current[property] = value;
+          instanceRef.current.style.transform = getTransform(
+            transformStyleRef.current
+          );
+        } else {
+          instanceRef.current.style[property] = getCssValue(property, value);
+        }
+      } else if (propertyType === 'props') {
+        instanceRef.current.setAttribute(camelCaseToKebabCase(property), value);
+      }
+    };
+
+    useLayoutEffect(() => {
+      nonFluids.forEach(({ isTransform, property, propertyType, value }) =>
+        applyAnimationValues({
+          isTransform,
+          property,
+          propertyType,
+          value: value as number,
+        })
+      );
+    }, [nonFluids]);
+
+    useLayoutEffect(() => {
+      const subscribers: any = [];
+
+      fluids.forEach((f) => {
+        const { value: fluidValue, propertyType, property, isTransform } = f;
+        const { _subscribe, _value, _currentValue, _config } = fluidValue;
+
+        const interpolationOutputRange: string[] = [];
+        const generateAnimation = animationObjectGenerator(_config);
+        let animation: any = null;
+
+        const onFrame = (value: number) => {
+          _currentValue.current = value;
+
+          const updatedValue: number = fluidValue.isInterpolation
+            ? interpolateNumbers(
+                value,
+                fluidValue.interpolationConfig.inputRange,
+                fluidValue.interpolationConfig.outputRange,
+                fluidValue.interpolationConfig.extrapolateConfig
+              )
+            : value;
+
+          applyAnimationValues({
+            isTransform,
+            propertyType,
+            property,
+            value: updatedValue,
+          });
+        };
+
+        const onUpdate = (
+          value: Length,
+          config?: FluidValueConfig,
+          callback?: (value: ResultType) => void
+        ) => {
+          if (canInterpolate(_value, value)) {
+            const previousAnimation = animation;
+
+            if (previousAnimation._value !== value) {
+              animation.stop();
+
+              animation = generateAnimation(
+                previousAnimation._position,
+                config
+              );
+              config?.onStart && config.onStart(previousAnimation._position);
+
+              if (typeof value === 'string') {
+                if (!interpolationOutputRange.includes(_value as string)) {
+                  interpolationOutputRange.push(_value as string);
+                }
+
+                if (!interpolationOutputRange.includes(value)) {
+                  interpolationOutputRange.push(value);
+                }
+
+                fluidValue.isInterpolation = true;
+                fluidValue.interpolationConfig = {
+                  inputRange: interpolationOutputRange.map((_, i) => i),
+                  outputRange: interpolationOutputRange,
+                };
+              }
+
+              animation.start({
+                toValue:
+                  typeof value === 'string'
+                    ? interpolationOutputRange.indexOf(value)
+                    : value,
+                onFrame,
+                previousAnimation,
+                onEnd: callback,
+              });
+            }
+          } else {
+            if (typeof value !== typeof _value) {
+              throw new Error(
+                `Cannot assign ${typeof value} to animated ${typeof _value}`
+              );
+            }
+
+            applyAnimationValues({
+              isTransform,
+              propertyType,
+              property,
+              value,
+            });
+          }
+        };
+
+        animation = generateAnimation(typeof _value === 'string' ? 0 : _value);
+        applyAnimationValues({
+          isTransform,
+          propertyType,
+          property,
+          value: _value,
+        });
+
+        const subscribe = _subscribe(onUpdate, property, Date.now());
+        subscribers.push(subscribe);
+      });
+
+      return () => {
+        subscribers.forEach((subscriber: () => void) => subscriber());
+      };
+    }, []);
+
+    return createElement(WrapperComponent, {
+      ...getCleanProps(givenProps),
+      ref: combineRefs(instanceRef, givenRef),
+    });
+  });
+}
+
+function combineRefs(
+  ...refs: Array<RefObject<any> | ((element: HTMLElement) => void)>
+) {
+  return function applyRef(element: HTMLElement) {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === 'function') {
+        ref(element);
+        return;
+      }
+      if ('current' in ref) (ref.current as HTMLElement) = element;
+    });
+  };
+}
+
+function animationObjectGenerator(defaultConfig?: FluidValueConfig) {
+  return (value: number, config?: FluidValueConfig) => {
+    const animationConfig = { ...defaultConfig, ...config };
+
+    const Animation =
+      isDefined(animationConfig?.duration) || animationConfig?.immediate
+        ? TimingAnimation
+        : SpringAnimation;
+
+    return new Animation({
+      initialPosition: value,
+      config: animationConfig,
+    });
+  };
+}
+
+type InterpolationValue = {
+  isInterpolation: boolean;
+  interpolationConfig: {
+    inputRange: Array<number>;
+    outputRange: Array<number | string>;
+    extrapolateConfig?: ExtrapolateConfig;
+  };
+};
+
+type Fluid = {
+  isTransform: boolean;
+  property: string;
+  propertyType: 'style' | 'props';
+  value: FluidValue & InterpolationValue;
+};
+
+type NonFluid = Omit<Fluid, 'value'> & { value: unknown };
+
+function getFluids(
+  propertyType: Fluid['propertyType'],
+  props: Record<string, any> = {}
+) {
+  return Object.entries(props).reduce(
+    (res, [property, value]) => {
+      const isTransform = propertyType === 'style' && isTransformKey(property);
+
+      if (isFluidValue(value)) {
+        res.fluids.push({ isTransform, property, propertyType, value });
+      } else {
+        res.nonFluids.push({ isTransform, property, propertyType, value });
+      }
+
+      return res;
+    },
+    { fluids: [], nonFluids: [] } as { fluids: Fluid[]; nonFluids: NonFluid[] }
+  );
+}

package/src/animation/core/react/transforms.ts

@@ -0,0 +1,90 @@
+export const styleTrasformKeys = [
+  'translate',
+  'translateX',
+  'translateY',
+  'translateZ',
+  'scale',
+  'scaleX',
+  'scaleY',
+  'scaleZ',
+  'rotate',
+  'rotateX',
+  'rotateY',
+  'rotateZ',
+  'skew',
+  'skewX',
+  'skewY',
+] as const;
+
+function splitCSSValueAndUnit(value: string) {
+  const valueMatch = value.match(/(-)?(\d+.)?\d+/g);
+  const unitMatch = value.match(
+    /px|rem|em|ex|%|cm|mm|in|pt|pc|ch|vh|vw|vmin|vmax/
+  );
+
+  return {
+    value: Number(valueMatch),
+    unit: unitMatch && unitMatch[0],
+  };
+}
+
+// get unit of transform style property
+function getValueUnit(property: string, value: string) {
+  let unit;
+
+  const splitValue = splitCSSValueAndUnit(String(value)).value;
+  const splitUnit = splitCSSValueAndUnit(String(value)).unit;
+
+  // if string value is passed with unit then split it
+  if (splitUnit) {
+    return { value: splitValue, unit: splitUnit };
+  }
+
+  if (property.includes('translate') || property.includes('perspective')) {
+    unit = 'px';
+  } else if (property.includes('scale')) {
+    unit = '';
+  } else if (property.includes('rotate') || property.includes('skew')) {
+    unit = 'deg';
+  }
+
+  return { value, unit };
+}
+
+function getTransformValueWithUnits(property: string, value: string) {
+  const valueUnit = getValueUnit(property, value);
+
+  if (
+    property.includes('X') ||
+    property.includes('Y') ||
+    property.includes('Z') ||
+    property.includes('perspective') ||
+    property.includes('rotate') ||
+    property.includes('skew')
+  ) {
+    // axis value
+    return `${property}(${valueUnit.value}${valueUnit.unit})`;
+  } else if (property.includes('translate') || property.indexOf('scale')) {
+    // two parameter value
+    return `${property}(${valueUnit.value}${valueUnit.unit}, ${valueUnit.value}${valueUnit.unit})`;
+  } else {
+    throw new Error(`Error! Property '${property}' cannot be transformed`);
+  }
+}
+
+/**
+ * getTransform function returns transform string from style object
+ */
+export function getTransform(style: Record<string, any>) {
+  return Object.entries(style)
+    .map(([prop, value]) => getTransformValueWithUnits(prop, value))
+    .reduce(
+      (transform: string, value: string) => (transform += ` ${value}`),
+      ''
+    )
+    .trim();
+}
+
+export function isTransformKey(key: string) {
+  return (styleTrasformKeys as readonly string[]).includes(key);
+}

package/src/animation/core/react/useFluidValue.ts

@@ -0,0 +1,43 @@
+import { useMemo, useCallback } from 'react';
+
+import { FluidValue } from '../controllers/FluidValue';
+
+import type {
+  FluidValueConfig,
+  Length,
+  AssignValue,
+  OnUpdateCallback,
+} from '../types/animation';
+
+/**
+ * useFluidValue
+ *
+ * @param value - initial value
+ * @param config - the config object for `FluidValue`
+ */
+export const useFluidValue = (
+  value: Length,
+  config?: FluidValueConfig
+): [
+  FluidValue,
+  (
+    updateValue: AssignValue,
+    config?: FluidValueConfig,
+    callback?: OnUpdateCallback
+  ) => void
+] => {
+  const fluid = useMemo(() => new FluidValue(value, config), []);
+
+  const setFluid = useCallback(
+    (
+      updateValue: AssignValue,
+      config?: FluidValueConfig,
+      callback?: OnUpdateCallback
+    ) => {
+      fluid.setValue(updateValue, config, callback);
+    },
+    []
+  );
+
+  return [fluid, setFluid];
+};

package/src/animation/core/react/useMount.ts

@@ -0,0 +1,58 @@
+import { useState, useRef, useLayoutEffect } from 'react';
+
+import { useFluidValue } from './useFluidValue';
+import { FluidValue } from '../controllers/FluidValue';
+
+import type { AssignValue, FluidValueConfig } from '../types/animation';
+
+export interface UseMountConfig {
+  from: number;
+  enter: number | AssignValue;
+  exit: number | AssignValue;
+  enterConfig?: FluidValueConfig;
+  exitConfig?: FluidValueConfig;
+  config?: FluidValueConfig;
+}
+
+/**
+ * `useMount`
+ *
+ * applies mounting and unmounting of a component according to state change
+ * applying transitions
+ *
+ * @param state - boolean indicating mount state of a component
+ * @param config - the config object `UseMountConfig`
+ */
+export const useMount = (state: boolean, config: UseMountConfig) => {
+  const [mounted, setMounted] = useState(false);
+  const {
+    from,
+    enter,
+    exit,
+    config: innerConfig,
+    enterConfig,
+    exitConfig,
+  } = useRef(config).current;
+  const [animation, setAnimation] = useFluidValue(from, innerConfig);
+
+  useLayoutEffect(() => {
+    if (state) {
+      setMounted(true);
+      queueMicrotask(() => setAnimation(enter, enterConfig));
+    } else {
+      setAnimation(
+        exit,
+        exitConfig,
+        function ({ finished }: { finished: boolean }) {
+          if (finished) {
+            setMounted(false);
+          }
+        }
+      );
+    }
+  }, [state]);
+
+  return (
+    callback: (animation: FluidValue, mounted: boolean) => React.ReactNode
+  ) => callback(animation, mounted);
+};

package/src/animation/core/types/animation.d.ts

@@ -0,0 +1,56 @@
+import type { Fn } from './common';
+
+/**
+ * Base unit which is accepted by `FluidValue`
+ */
+export type Length = number | string;
+
+/**
+ * Object passed as an argument on `onRest` function
+ */
+export type ResultType = { finished: boolean; value: number };
+
+/**
+ * Function read by `animated` hoc to determine whether it
+ * can be animated or not
+ */
+export type SubscribeFn = (
+  onUpdate: OnUpdateFn,
+  property: string,
+  uuid: number
+) => void;
+
+/**
+ * Configuration object for `FluidValue`
+ */
+export interface FluidValueConfig {
+  mass?: number;
+  tension?: number;
+  friction?: number;
+  duration?: number;
+  easing?: Fn<number, number>;
+  immediate?: boolean;
+  delay?: number;
+  restDistance?: number;
+  onChange?: Fn<number, void>;
+  onRest?: Fn<ResultType, void>;
+  onStart?: Fn<number, void>;
+}
+
+/**
+ * Object which can be assigned to animate
+ */
+export type AssignValue =
+  | Length
+  | Fn<(next: Length, config?: FluidValueConfig) => Promise<any>, void>;
+
+export type OnUpdateCallback = Fn<ResultType, void>;
+
+/**
+ * Function to start the animation (it starts the already subscribed animation)
+ */
+export type OnUpdateFn = (
+  updatedValue: AssignValue,
+  config?: FluidValueConfig,
+  callback?: OnUpdateCallback
+) => void;

package/src/animation/core/types/common.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generic function type argument of type T returns type U
+ */
+export type Fn<T, U> = (value: T) => U;

package/src/animation/core/types/fluid.d.ts

@@ -0,0 +1,38 @@
+import {
+  CSSProperties,
+  HTMLAttributes,
+  SVGAttributes,
+  ComponentType,
+} from 'react';
+
+import { FluidValue } from '../controllers/FluidValue';
+import { styleTrasformKeys } from '../react/transforms';
+
+export type FluidTypes = 'spring' | 'timing';
+
+export type FluidCSSProperties = {
+  [key in keyof CSSProperties]: CSSProperties[key];
+} & {
+  [key in (typeof styleTrasformKeys)[number]]?: number | string | FluidValue;
+};
+
+export type FluidHTMLAttributes<T> = {
+  [property in keyof HTMLAttributes<T>]:
+    | HTMLAttributes<T>[property]
+    | FluidValue;
+};
+
+export type FluidSVGAttributes<T> = {
+  [property in keyof SVGAttributes<T>]: SVGAttributes<T>[property] | FluidValue;
+};
+
+export type FluidProps<T> = Omit<
+  FluidHTMLAttributes<T> & FluidSVGAttributes<T>,
+  'style'
+> & {
+  style?: FluidCSSProperties;
+};
+
+export type WrappedComponentOrTag =
+  | ComponentType<HTMLAttributes<HTMLElement>>
+  | keyof JSX.IntrinsicElements;

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

@@ -1,17 +1,17 @@
-import { getInitialConfig } from './getInitialConfig';
-
-export const AnimationConfigUtils = {
-  ELASTIC: getInitialConfig('elastic'),
-  BOUNCE: getInitialConfig('bounce'),
-  EASE: getInitialConfig('ease'),
-  STIFF: getInitialConfig('stiff'),
-  WOOBLE: getInitialConfig('wooble'),
-  EASE_IN: getInitialConfig('easein'),
-  EASE_OUT: getInitialConfig('easeout'),
-  EASE_IN_OUT: getInitialConfig('easeinout'),
-  POWER1: getInitialConfig('power1'),
-  POWER2: getInitialConfig('power2'),
-  POWER3: getInitialConfig('power3'),
-  POWER4: getInitialConfig('power4'),
-  LINEAR: getInitialConfig('linear'),
-};
+import { getInitialConfig } from './getInitialConfig';
+
+export const AnimationConfigUtils = {
+  ELASTIC: getInitialConfig('elastic'),
+  BOUNCE: getInitialConfig('bounce'),
+  EASE: getInitialConfig('ease'),
+  STIFF: getInitialConfig('stiff'),
+  WOOBLE: getInitialConfig('wooble'),
+  EASE_IN: getInitialConfig('easein'),
+  EASE_OUT: getInitialConfig('easeout'),
+  EASE_IN_OUT: getInitialConfig('easeinout'),
+  POWER1: getInitialConfig('power1'),
+  POWER2: getInitialConfig('power2'),
+  POWER3: getInitialConfig('power3'),
+  POWER4: getInitialConfig('power4'),
+  LINEAR: getInitialConfig('linear'),
+};