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

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

@@ -1,197 +0,0 @@
-import { makeFluid } from './makeFluid';
-
-import type { FluidProps } from '../types/fluid';
-
-type HTMLTags = keyof JSX.IntrinsicElements;
-
-const tags: HTMLTags[] = [
-  'a',
-  'abbr',
-  'address',
-  'area',
-  'article',
-  'aside',
-  'audio',
-  'b',
-  'base',
-  'bdi',
-  'bdo',
-  'big',
-  'blockquote',
-  'body',
-  'br',
-  'button',
-  'canvas',
-  'caption',
-  'center',
-  'cite',
-  'code',
-  'col',
-  'colgroup',
-  'data',
-  'datalist',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'dialog',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'embed',
-  'fieldset',
-  'figcaption',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'head',
-  'header',
-  'hgroup',
-  'hr',
-  'html',
-  'i',
-  'iframe',
-  'img',
-  'input',
-  'ins',
-  'kbd',
-  'keygen',
-  'label',
-  'legend',
-  'li',
-  'link',
-  'main',
-  'map',
-  'mark',
-  'menu',
-  'menuitem',
-  'meta',
-  'meter',
-  'nav',
-  'noindex',
-  'noscript',
-  'object',
-  'ol',
-  'optgroup',
-  'option',
-  'output',
-  'p',
-  'param',
-  'picture',
-  'pre',
-  'progress',
-  'q',
-  'rp',
-  'rt',
-  'ruby',
-  's',
-  'samp',
-  'search',
-  'section',
-  'select',
-  'small',
-  'source',
-  'span',
-  'strong',
-  'style',
-  'sub',
-  'summary',
-  'sup',
-  'table',
-  'template',
-  'tbody',
-  'td',
-  'textarea',
-  'tfoot',
-  'th',
-  'thead',
-  'time',
-  'title',
-  'tr',
-  'track',
-  'u',
-  'ul',
-  'var',
-  'video',
-  'wbr',
-
-  // SVG Tags
-  'svg',
-  'animate',
-  'animateMotion',
-  'animateTransform',
-  'circle',
-  'clipPath',
-  'defs',
-  'desc',
-  'ellipse',
-  'feBlend',
-  'feColorMatrix',
-  'feComponentTransfer',
-  'feComposite',
-  'feConvolveMatrix',
-  'feDiffuseLighting',
-  'feDisplacementMap',
-  'feDistantLight',
-  'feDropShadow',
-  'feFlood',
-  'feFuncA',
-  'feFuncB',
-  'feFuncG',
-  'feFuncR',
-  'feGaussianBlur',
-  'feImage',
-  'feMerge',
-  'feMergeNode',
-  'feMorphology',
-  'feOffset',
-  'fePointLight',
-  'feSpecularLighting',
-  'feSpotLight',
-  'feTile',
-  'feTurbulence',
-  'filter',
-  'foreignObject',
-  'g',
-  'image',
-  'line',
-  'linearGradient',
-  'marker',
-  'mask',
-  'metadata',
-  'mpath',
-  'path',
-  'pattern',
-  'polygon',
-  'polyline',
-  'radialGradient',
-  'rect',
-  'set',
-  'stop',
-  'switch',
-  'symbol',
-  'text',
-  'textPath',
-  'tspan',
-  'use',
-  'view',
-];
-
-type WithFluid = {
-  [k in keyof JSX.IntrinsicElements]: React.ComponentType<
-    FluidProps<HTMLElement>
-  >;
-};
-
-export const fluid: WithFluid = {} as WithFluid;
-
-tags.forEach((tag) => {
-  (fluid as any)[tag] = makeFluid(tag);
-});

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

@@ -1,294 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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);
-};