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

package/src/animation/core/controllers/TimingAnimation.ts

@@ -1,152 +0,0 @@
-import { Animation } from './Animation';
-import {
-  RequestAnimationFrame,
-  CancelAnimationFrame,
-} from './RequestAnimationFrame';
-import { Easing } from '../easing/Easing';
-
-import type { FluidValueConfig, ResultType } from '../types/animation';
-
-/**
- * Class implementing timing based animation
- */
-export class TimingAnimation extends Animation {
-  _startTime: number;
-  _fromValue: number;
-  _toValue: any;
-  _duration: number;
-  _easing: (value: number) => number;
-  _onFrame: (value: number) => void;
-  _animationFrame: any;
-  _timeout: any;
-  _lastPosition: number;
-  _position: number;
-
-  // Modifiers
-  _delay: number;
-  _tempDuration: number;
-  _onRest?: (value: ResultType) => void;
-  _onChange?: (value: number) => void;
-
-  constructor({
-    initialPosition,
-    config,
-  }: {
-    initialPosition: number;
-    config?: Omit<FluidValueConfig, 'mass' | 'friction' | 'tension'>;
-  }) {
-    super();
-
-    this._fromValue = initialPosition;
-    this._position = this._fromValue;
-    this._easing = config?.easing ?? Easing.linear;
-    this._duration = config?.duration ?? 500;
-    this._tempDuration = this._duration;
-
-    // Modifiers
-    // here immediate acts like duration: 0
-    if (config?.immediate) {
-      this._duration = 0;
-    }
-
-    this._delay = config?.delay ?? 0;
-    this._onRest = config?.onRest;
-    this._onChange = config?.onChange;
-  }
-
-  onChange(value: number) {
-    this._onFrame(value);
-
-    if (this._lastPosition !== value) {
-      if (this._onChange) {
-        this._onChange(value);
-      }
-    }
-
-    this._lastPosition = value;
-  }
-
-  onUpdate() {
-    const now = Date.now();
-
-    const runTime = now - this._startTime;
-
-    if (runTime >= this._duration) {
-      this._startTime = 0;
-      this._position = this._toValue;
-
-      this.onChange(this._position);
-
-      this._debounceOnEnd({ finished: true, value: this._position });
-      return;
-    }
-
-    const progress = this._easing(runTime / this._duration);
-
-    this._position =
-      this._fromValue + (this._toValue - this._fromValue) * progress;
-
-    this.onChange(this._position);
-
-    this._animationFrame = RequestAnimationFrame.current(
-      this.onUpdate.bind(this)
-    );
-  }
-
-  stop() {
-    this._active = false;
-    clearTimeout(this._timeout);
-    CancelAnimationFrame.current(this._animationFrame);
-    this._debounceOnEnd({ finished: false, value: this._position });
-  }
-
-  // Set value
-  set(toValue: number) {
-    this.stop();
-    this._position = toValue;
-    this.onChange(toValue);
-  }
-
-  start({
-    toValue,
-    onFrame,
-    previousAnimation,
-    onEnd,
-  }: {
-    toValue: number;
-    onFrame: (value: number) => void;
-    previousAnimation?: TimingAnimation;
-    onEnd?: (result: ResultType) => void;
-  }) {
-    const onStart: any = () => {
-      this._onFrame = onFrame;
-      this._active = true;
-      this._onEnd = onEnd;
-      this._toValue = toValue;
-
-      if (
-        previousAnimation &&
-        previousAnimation instanceof TimingAnimation &&
-        previousAnimation._toValue === toValue &&
-        previousAnimation._startTime
-      ) {
-        this._startTime = previousAnimation._startTime;
-        this._fromValue = previousAnimation._fromValue;
-      } else {
-        const now = Date.now();
-        this._startTime = now;
-        this._fromValue = this._position;
-      }
-
-      this._animationFrame = RequestAnimationFrame.current(
-        this.onUpdate.bind(this)
-      );
-    };
-
-    if (this._delay !== 0) {
-      this._timeout = setTimeout(() => onStart(), this._delay);
-    } else {
-      onStart();
-    }
-  }
-}

package/src/animation/core/easing/Bezier.ts

@@ -1,146 +0,0 @@
-/**
- * https://github.com/gre/bezier-easing
- * BezierEasing - use bezier curve for transition easing function
- * by Gaëtan Renaudeau 2014 - 2015 – MIT License
- */
-
-// These values are established by empiricism with tests (tradeoff: performance VS precision)
-var NEWTON_ITERATIONS = 4;
-var NEWTON_MIN_SLOPE = 0.001;
-var SUBDIVISION_PRECISION = 0.0000001;
-var SUBDIVISION_MAX_ITERATIONS = 10;
-
-var kSplineTableSize = 11;
-var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
-
-var float32ArraySupported = typeof Float32Array === "function";
-
-function A(aA1: number, aA2: number) {
-  return 1.0 - 3.0 * aA2 + 3.0 * aA1;
-}
-function B(aA1: number, aA2: number) {
-  return 3.0 * aA2 - 6.0 * aA1;
-}
-function C(aA1: number) {
-  return 3.0 * aA1;
-}
-
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-function calcBezier(aT: number, aA1: number, aA2: number) {
-  return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
-}
-
-// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
-function getSlope(aT: number, aA1: number, aA2: number) {
-  return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
-}
-
-function binarySubdivide(
-  aX: number,
-  aA: number,
-  aB: number,
-  mX1: number,
-  mX2: number
-) {
-  var currentX,
-    currentT,
-    i = 0;
-  do {
-    currentT = aA + (aB - aA) / 2.0;
-    currentX = calcBezier(currentT, mX1, mX2) - aX;
-    if (currentX > 0.0) {
-      aB = currentT;
-    } else {
-      aA = currentT;
-    }
-  } while (
-    Math.abs(currentX) > SUBDIVISION_PRECISION &&
-    ++i < SUBDIVISION_MAX_ITERATIONS
-  );
-  return currentT;
-}
-
-function newtonRaphsonIterate(
-  aX: number,
-  aGuessT: number,
-  mX1: number,
-  mX2: number
-) {
-  for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
-    var currentSlope = getSlope(aGuessT, mX1, mX2);
-    if (currentSlope === 0.0) {
-      return aGuessT;
-    }
-    var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
-    aGuessT -= currentX / currentSlope;
-  }
-  return aGuessT;
-}
-
-function LinearEasing(x: number) {
-  return x;
-}
-
-function bezier(mX1: number, mY1: number, mX2: number, mY2: number) {
-  if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
-    throw new Error("bezier x values must be in [0, 1] range");
-  }
-
-  if (mX1 === mY1 && mX2 === mY2) {
-    return LinearEasing;
-  }
-
-  // Precompute samples table
-  var sampleValues = float32ArraySupported
-    ? new Float32Array(kSplineTableSize)
-    : new Array(kSplineTableSize);
-  for (var i = 0; i < kSplineTableSize; ++i) {
-    sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
-  }
-
-  function getTForX(aX: number) {
-    var intervalStart = 0.0;
-    var currentSample = 1;
-    var lastSample = kSplineTableSize - 1;
-
-    for (
-      ;
-      currentSample !== lastSample && sampleValues[currentSample] <= aX;
-      ++currentSample
-    ) {
-      intervalStart += kSampleStepSize;
-    }
-    --currentSample;
-
-    // Interpolate to provide an initial guess for t
-    var dist =
-      (aX - sampleValues[currentSample]) /
-      (sampleValues[currentSample + 1] - sampleValues[currentSample]);
-    var guessForT = intervalStart + dist * kSampleStepSize;
-
-    var initialSlope = getSlope(guessForT, mX1, mX2);
-    if (initialSlope >= NEWTON_MIN_SLOPE) {
-      return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
-    } else if (initialSlope === 0.0) {
-      return guessForT;
-    } else {
-      return binarySubdivide(
-        aX,
-        intervalStart,
-        intervalStart + kSampleStepSize,
-        mX1,
-        mX2
-      );
-    }
-  }
-
-  return function BezierEasing(x: number) {
-    // Because JavaScript number are imprecise, we should guarantee the extremes are right.
-    if (x === 0 || x === 1) {
-      return x;
-    }
-    return calcBezier(getTForX(x), mY1, mY2);
-  };
-}
-
-export { bezier };

package/src/animation/core/easing/Easing.ts

@@ -1,132 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import { bezier as _bezier } from "./Bezier";
-
-/**
- * This class implements common easing functions. The math is pretty obscure,
- * but this cool website has nice visual illustrations of what they represent:
- * http://xaedes.de/dev/transitions/
- */
-export class Easing {
-  static step0(n: number) {
-    return n > 0 ? 1 : 0;
-  }
-
-  static step1(n: number) {
-    return n >= 1 ? 1 : 0;
-  }
-
-  static linear(t: number) {
-    return t;
-  }
-
-  static ease(t: number): number {
-    return ease(t);
-  }
-
-  static quad(t: number) {
-    return t * t;
-  }
-
-  static cubic(t: number) {
-    return t * t * t;
-  }
-
-  static poly(n: number) {
-    return (t: number) => Math.pow(t, n);
-  }
-
-  static sin(t: number) {
-    return 1 - Math.cos((t * Math.PI) / 2);
-  }
-
-  static circle(t: number) {
-    return 1 - Math.sqrt(1 - t * t);
-  }
-
-  static exp(t: number) {
-    return Math.pow(2, 10 * (t - 1));
-  }
-
-  /**
-   * A simple elastic interaction, similar to a spring.  Default bounciness
-   * is 1, which overshoots a little bit once.  0 bounciness doesn't overshoot
-   * at all, and bounciness of N > 1 will overshoot about N times.
-   *
-   * Wolfram Plots:
-   *
-   *   http://tiny.cc/elastic_b_1 (default bounciness = 1)
-   *   http://tiny.cc/elastic_b_3 (bounciness = 3)
-   */
-  static elastic(bounciness: number = 1): (t: number) => number {
-    var p = bounciness * Math.PI;
-    return (t) =>
-      1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);
-  }
-
-  static back(s: number): (t: number) => number {
-    if (s === undefined) {
-      s = 1.70158;
-    }
-    return (t) => t * t * ((s + 1) * t - s);
-  }
-
-  static bounce(t: number): number {
-    if (t < 1 / 2.75) {
-      return 7.5625 * t * t;
-    }
-
-    if (t < 2 / 2.75) {
-      t -= 1.5 / 2.75;
-      return 7.5625 * t * t + 0.75;
-    }
-
-    if (t < 2.5 / 2.75) {
-      t -= 2.25 / 2.75;
-      return 7.5625 * t * t + 0.9375;
-    }
-
-    t -= 2.625 / 2.75;
-    return 7.5625 * t * t + 0.984375;
-  }
-
-  static bezier(
-    x1: number,
-    y1: number,
-    x2: number,
-    y2: number
-  ): (t: number) => number {
-    return _bezier(x1, y1, x2, y2);
-  }
-
-  static in(easing: (t: number) => number): (t: number) => number {
-    return easing;
-  }
-
-  /**
-   * Runs an easing function backwards.
-   */
-  static out(easing: (t: number) => number): (t: number) => number {
-    return (t) => 1 - easing(1 - t);
-  }
-
-  /**
-   * Makes any easing function symmetrical.
-   */
-  static inOut(easing: (t: number) => number): (t: number) => number {
-    return (t) => {
-      if (t < 0.5) {
-        return easing(t * 2) / 2;
-      }
-      return 1 - easing((1 - t) * 2) / 2;
-    };
-  }
-}
-
-var ease = Easing.bezier(0.42, 0, 1, 1);

package/src/animation/core/helpers/camelCaseToKebabCase.ts

@@ -1,10 +0,0 @@
-/**
- * Converts a camelCase string to kebab-case.
- * e.g. backgroundColor -> background-color
- *
- * @param str - The camelCase string to convert.
- * @returns The converted kebab-case string.
- */
-export function camelCaseToKebabCase(str: string): string {
-  return str.replace(/([A-Z])/g, (match) => '-' + match.toLowerCase());
-}

package/src/animation/core/helpers/getCleanProps.ts

@@ -1,16 +0,0 @@
-import { isFluidValue } from './isFluidValue';
-
-/**
- * Filters out properties with fluid values from a given props object.
- * This function removes any properties that are considered fluid values,
- * typically those that subscribe to updates and therefore should not be
- * included in a static props object.
- *
- * @param props - The original props object, which may include fluid values.
- * @returns A new props object with fluid values removed.
- */
-export const getCleanProps = ({ style, ...props }: any) => {
-  return Object.fromEntries(
-    Object.entries(props).filter(([_, value]) => !isFluidValue(value))
-  ) as any;
-};

package/src/animation/core/helpers/getCssValue.ts

@@ -1,60 +0,0 @@
-const unitlessStyleProps = [
-  'borderImageOutset',
-  'borderImageSlice',
-  'borderImageWidth',
-  'fontWeight',
-  'lineHeight',
-  'opacity',
-  'orphans',
-  'tabSize',
-  'widows',
-  'zIndex',
-  'zoom',
-  // SVG-related properties
-  'fillOpacity',
-  'floodOpacity',
-  'stopOpacity',
-  'strokeDasharray',
-  'strokeDashoffset',
-  'strokeMiterlimit',
-  'strokeOpacity',
-  'strokeWidth',
-  // prefixed
-  'animationIterationCount',
-  'boxFlex',
-  'boxFlexGroup',
-  'boxOrdinalGroup',
-  'columnCount',
-  'flex',
-  'flexGrow',
-  'flexPositive',
-  'flexShrink',
-  'flexNegative',
-  'flexOrder',
-  'gridRow',
-  'gridColumn',
-  'order',
-  'lineClamp',
-];
-
-/**
- * getCssValue() function to get css value with unit or without unit
- * it is only for style property - it cannot be used with transform keys
- * @param property - style property
- * @param value - style value
- * @returns - value with unit or without unit
- */
-export function getCssValue(property: string, value: number | string) {
-  let cssValue;
-  if (typeof value === 'number') {
-    if (unitlessStyleProps.includes(property)) {
-      cssValue = value;
-    } else {
-      cssValue = value + 'px';
-    }
-  } else {
-    cssValue = value;
-  }
-
-  return cssValue;
-}

package/src/animation/core/helpers/index.ts

@@ -1,5 +0,0 @@
-export * from './getCleanProps';
-export * from './getCssValue';
-export * from './isDefined';
-export * from './isFluidValue';
-export * from './camelCaseToKebabCase';

package/src/animation/core/helpers/isDefined.ts

@@ -1,14 +0,0 @@
-/**
- * Checks if a value is defined (not null or undefined).
- *
- * This utility function helps in determining whether a given value is neither `null` nor `undefined`.
- * It can be useful for validation checks to ensure that a value is properly defined before proceeding
- * with further operations.
- *
- * @param {T} value - The value to check.
- * @returns {boolean} - Returns `true` if the value is neither `null` nor `undefined`, otherwise returns `false`.
- *
- */
-export const isDefined = <T>(value: T) => {
-  return value !== null && value !== undefined;
-};

package/src/animation/core/helpers/isFluidValue.ts

@@ -1,11 +0,0 @@
-/**
- * isFluidValue to check the value is FluidValue or not
- * @param value - any
- * @returns - boolean
- */
-export const isFluidValue = (value: any) => {
-  return (
-    typeof value === 'object' &&
-    Object.prototype.hasOwnProperty.call(value, '_subscribe')
-  );
-};

package/src/animation/core/index.ts

@@ -1,16 +0,0 @@
-// React
-export { fluid } from './react/fluid';
-export { makeFluid } from './react/makeFluid';
-export { useFluidValue } from './react/useFluidValue';
-export { useMount } from './react/useMount';
-
-// Helpers and Utilities
-export { isFluidValue } from './helpers/isFluidValue';
-export { Easing } from './easing/Easing';
-export { interpolate } from './interpolation/Interpolation';
-export { FluidValue } from './controllers/FluidValue';
-
-// Types
-export type { FluidValueConfig } from './types/animation';
-export type { UseMountConfig } from './react/useMount';
-export type { ExtrapolateConfig } from './interpolation/Interpolation';