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

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020 Dipesh Rai
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020 Dipesh Rai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,115 +1,115 @@
-# React UI Animate
-
-[![npm version](https://badge.fury.io/js/react-ui-animate.svg)](https://badge.fury.io/js/react-ui-animate)
-
-> React library for gestures and animation
-
-### Install
-
-Install with npm:
-
-```sh
-npm i react-ui-animate
-```
-
-or
-Install with yarn:
-
-```sh
-yarn add react-ui-animate
-```
-
-### Getting Started
-
-`react-ui-animate` provides lots of easy to use APIs to create smooth animations and gestures.
-
-```javascript
-import { AnimatedBlock, useAnimatedValue } from "react-ui-animate";
-
-export default function () {
-  const opacity = useAnimatedValue(0); // It initializes opacity object with value 0.
-
-  return (
-    <div>
-      {/* AnimatedBlock component can read useAnimatedValue() */}
-      <AnimatedBlock
-        style={{
-          opacity: opacity.value, // using opacity with value property
-          width: 100,
-          padding: 20,
-          background: "#39F",
-        }}
-      >
-        ANIMATED
-      </AnimatedBlock>
-
-      {/* Assigning value to 1 auto animates from initialized value 0 to 1 smoothly */}
-      <button onClick={() => (opacity.value = 1)}>Animate Me</button>
-    </div>
-  );
-}
-```
-
-Animates opacity from 0 to 1.
-
-#### `useAnimatedValue()`
-
-`useAnimatedValue()` is very flexible and powerful hook that lets you define animated values. It accepts a value and returns a node with same value on `value` property. Whenever `value` property is assigned to another value, it auto animates from one value to another.
-
-```javascript
-const opacity = useAnimatedValue(0); // initialize with 0 opacity
-
-...
-style={{
-    opacity: opacity.value // access with `.value`
-}}
-...
-
-...
-onClick={() => opacity.value = 1} // Assignment
-...
-```
-
-#### `AnimatedBlock`
-
-`AnimatedBlock` is a `div` component which can accept the animation node from `useAnimatedValue()` hook.
-
-```javascript
-const width = useAnimatedValue(100);
-
-<AnimatedBlock
-  style={{
-    width: width.value,
-    height: 100,
-    backgroundColor: "#39f",
-  }}
-/>;
-```
-
-#### `interpolate`
-
-The `interpolate()` function allows animated node value to map from input ranges to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
-
-```javascript
-import { useAnimatedValue, AnimatedBlock, interpolate } from "react-ui-animate";
-
-const width = useAnimatedValue(100);
-
-<AnimatedBlock
-  style={{
-    width: width.value,
-    height: 100,
-    backgroundColor: interpolate(width.value, [100, 200], ["red", "blue"]),
-  }}
-/>;
-```
-
-`backgroundColor` is interpolated from input range `[100, 200]` to output range `["red", "blue"]`. So, when the width changes from 100 to 200, `backgroundColor` will change from `red` to `blue`.
-
-## Documentation
-
-The official documentation are now published at http://react-ui-animate.js.org/
-
-## License
-
-MIT
+# React UI Animate
+
+[![npm version](https://badge.fury.io/js/react-ui-animate.svg)](https://badge.fury.io/js/react-ui-animate)
+
+> React library for gestures and animation
+
+### Install
+
+Install with npm:
+
+```sh
+npm i react-ui-animate
+```
+
+or
+Install with yarn:
+
+```sh
+yarn add react-ui-animate
+```
+
+### Getting Started
+
+`react-ui-animate` provides lots of easy to use APIs to create smooth animations and gestures.
+
+```javascript
+import { AnimatedBlock, useAnimatedValue } from "react-ui-animate";
+
+export default function () {
+  const opacity = useAnimatedValue(0); // It initializes opacity object with value 0.
+
+  return (
+    <div>
+      {/* AnimatedBlock component can read useAnimatedValue() */}
+      <AnimatedBlock
+        style={{
+          opacity: opacity.value, // using opacity with value property
+          width: 100,
+          padding: 20,
+          background: "#39F",
+        }}
+      >
+        ANIMATED
+      </AnimatedBlock>
+
+      {/* Assigning value to 1 auto animates from initialized value 0 to 1 smoothly */}
+      <button onClick={() => (opacity.value = 1)}>Animate Me</button>
+    </div>
+  );
+}
+```
+
+Animates opacity from 0 to 1.
+
+#### `useAnimatedValue()`
+
+`useAnimatedValue()` is very flexible and powerful hook that lets you define animated values. It accepts a value and returns a node with same value on `value` property. Whenever `value` property is assigned to another value, it auto animates from one value to another.
+
+```javascript
+const opacity = useAnimatedValue(0); // initialize with 0 opacity
+
+...
+style={{
+    opacity: opacity.value // access with `.value`
+}}
+...
+
+...
+onClick={() => opacity.value = 1} // Assignment
+...
+```
+
+#### `AnimatedBlock`
+
+`AnimatedBlock` is a `div` component which can accept the animation node from `useAnimatedValue()` hook.
+
+```javascript
+const width = useAnimatedValue(100);
+
+<AnimatedBlock
+  style={{
+    width: width.value,
+    height: 100,
+    backgroundColor: "#39f",
+  }}
+/>;
+```
+
+#### `interpolate`
+
+The `interpolate()` function allows animated node value to map from input ranges to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
+
+```javascript
+import { useAnimatedValue, AnimatedBlock, interpolate } from "react-ui-animate";
+
+const width = useAnimatedValue(100);
+
+<AnimatedBlock
+  style={{
+    width: width.value,
+    height: 100,
+    backgroundColor: interpolate(width.value, [100, 200], ["red", "blue"]),
+  }}
+/>;
+```
+
+`backgroundColor` is interpolated from input range `[100, 200]` to output range `["red", "blue"]`. So, when the width changes from 100 to 200, `backgroundColor` will change from `red` to `blue`.
+
+## Documentation
+
+The official documentation are now published at http://react-ui-animate.js.org/
+
+## License
+
+MIT

package/dist/animation/core/controllers/Animation.d.ts

@@ -0,0 +1,16 @@
+import type { ResultType } from '../types/animation';
+/**
+ * Base Animation class
+ */
+export declare class Animation {
+    _active: boolean;
+    _onEnd: any;
+    /**
+     * it is necessary to add _onRest function as well
+     * because _onEnd is always re-assigned with onUpdate callback
+     * so that _onRest function is not fired, so we have to duplicate it
+     */
+    _onRest?: any;
+    _debounceOnEnd(result: ResultType): void;
+    stop(): void;
+}

package/dist/animation/core/controllers/FluidValue.d.ts

@@ -0,0 +1,32 @@
+import type { Length, ResultType, SubscribeFn, FluidValueConfig, OnUpdateFn, AssignValue } from '../types/animation';
+import type { Fn } from '../types/common';
+/**
+ * Represents a fluid value that can animate between states.
+ */
+export declare class FluidValue {
+    _subscribe: SubscribeFn;
+    _value: Length;
+    _config?: FluidValueConfig;
+    _currentValue: {
+        current: Length;
+    };
+    _subscriptions: Map<{
+        uuid: number;
+        property: string;
+    }, OnUpdateFn>;
+    get: () => Length;
+    /**
+     * Creates a new FluidValue instance.
+     * @param initialValue - The initial value of the fluid value.
+     * @param config - Optional configuration for the fluid value.
+     */
+    constructor(initialValue: Length, config?: FluidValueConfig);
+    /**
+     * Animates from the current value to the updated value.
+     * Determines whether to perform a multi-stage or single-stage transition.
+     * @param updatedValue - The value to animate to, or a function that defines a multi-stage transition.
+     * @param config - Optional configuration for the animation.
+     * @param callback - Optional callback to be called after the animation ends.
+     */
+    setValue(updatedValue: AssignValue, config?: FluidValueConfig, callback?: Fn<ResultType, void>): void;
+}

package/dist/animation/core/controllers/RequestAnimationFrame.d.ts

@@ -0,0 +1,8 @@
+export declare const RequestAnimationFrame: {
+    current: (cb: any) => number;
+    inject(injected: any): void;
+};
+export declare const CancelAnimationFrame: {
+    current: (id: any) => void;
+    inject(injected: any): void;
+};

package/dist/animation/core/controllers/SpringAnimation.d.ts

@@ -0,0 +1,41 @@
+import { Animation } from './Animation';
+import type { FluidValueConfig, ResultType } from '../types/animation';
+/**
+ * Class implementing spring based animation
+ */
+export declare class SpringAnimation extends Animation {
+    _overshootClamping: boolean;
+    _restDisplacementThreshold: number;
+    _restSpeedThreshold: number;
+    _initialVelocity?: number;
+    _lastVelocity: number;
+    _startPosition: number;
+    _lastPosition: number;
+    _position: number;
+    _fromValue: number;
+    _toValue: any;
+    _mass: number;
+    _tension: number;
+    _friction: number;
+    _lastTime: number;
+    _onFrame: (value: number) => void;
+    _animationFrame: any;
+    _timeout: any;
+    _delay: number;
+    _onRest?: (value: ResultType) => void;
+    _onChange?: (value: number) => void;
+    constructor({ initialPosition, config, }: {
+        initialPosition: number;
+        config?: Omit<FluidValueConfig, 'duration' | 'easing'>;
+    });
+    onChange(value: number): void;
+    onUpdate(): void;
+    stop(): void;
+    set(toValue: number): void;
+    start({ toValue, onFrame, previousAnimation, onEnd, }: {
+        toValue: number;
+        onFrame: (value: number) => void;
+        previousAnimation?: SpringAnimation;
+        onEnd?: (result: ResultType) => void;
+    }): void;
+}

package/dist/animation/core/controllers/TimingAnimation.d.ts

@@ -0,0 +1,35 @@
+import { Animation } from './Animation';
+import type { FluidValueConfig, ResultType } from '../types/animation';
+/**
+ * Class implementing timing based animation
+ */
+export declare 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;
+    _delay: number;
+    _tempDuration: number;
+    _onRest?: (value: ResultType) => void;
+    _onChange?: (value: number) => void;
+    constructor({ initialPosition, config, }: {
+        initialPosition: number;
+        config?: Omit<FluidValueConfig, 'mass' | 'friction' | 'tension'>;
+    });
+    onChange(value: number): void;
+    onUpdate(): void;
+    stop(): void;
+    set(toValue: number): void;
+    start({ toValue, onFrame, previousAnimation, onEnd, }: {
+        toValue: number;
+        onFrame: (value: number) => void;
+        previousAnimation?: TimingAnimation;
+        onEnd?: (result: ResultType) => void;
+    }): void;
+}

package/dist/animation/core/easing/Bezier.d.ts

@@ -0,0 +1,8 @@
+/**
+ * https://github.com/gre/bezier-easing
+ * BezierEasing - use bezier curve for transition easing function
+ * by Gaëtan Renaudeau 2014 - 2015 – MIT License
+ */
+declare function LinearEasing(x: number): number;
+declare function bezier(mX1: number, mY1: number, mX2: number, mY2: number): typeof LinearEasing;
+export { bezier };

package/dist/animation/core/easing/Easing.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 declare class Easing {
+    static step0(n: number): 0 | 1;
+    static step1(n: number): 0 | 1;
+    static linear(t: number): number;
+    static ease(t: number): number;
+    static quad(t: number): number;
+    static cubic(t: number): number;
+    static poly(n: number): (t: number) => number;
+    static sin(t: number): number;
+    static circle(t: number): number;
+    static exp(t: number): number;
+    /**
+     * 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): (t: number) => number;
+    static back(s: number): (t: number) => number;
+    static bounce(t: number): number;
+    static bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
+    static in(easing: (t: number) => number): (t: number) => number;
+    /**
+     * Runs an easing function backwards.
+     */
+    static out(easing: (t: number) => number): (t: number) => number;
+    /**
+     * Makes any easing function symmetrical.
+     */
+    static inOut(easing: (t: number) => number): (t: number) => number;
+}

package/dist/animation/core/helpers/camelCaseToKebabCase.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare function camelCaseToKebabCase(str: string): string;

package/dist/animation/core/helpers/getCleanProps.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 declare const getCleanProps: ({ style, ...props }: any) => any;

package/dist/animation/core/helpers/getCssValue.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare function getCssValue(property: string, value: number | string): string | number;

package/dist/animation/core/helpers/index.d.ts

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

package/dist/animation/core/helpers/isDefined.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 declare const isDefined: <T>(value: T) => value is T & {};

package/dist/animation/core/helpers/isFluidValue.d.ts

@@ -0,0 +1,6 @@
+/**
+ * isFluidValue to check the value is FluidValue or not
+ * @param value - any
+ * @returns - boolean
+ */
+export declare const isFluidValue: (value: any) => any;

package/dist/animation/core/index.d.ts

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

package/dist/animation/core/interpolation/Colors.d.ts

@@ -0,0 +1,25 @@
+export declare const COLOR_NUMBER_REGEX: RegExp;
+export declare const HEX_NAME_COLOR: RegExp;
+interface classNameType {
+    [name: string]: string;
+}
+export declare const colorNames: classNameType;
+export declare function hexToRgba(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare function rgbaToHex(rgba: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}): string;
+export declare function processColor(color: number | string): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export {};

package/dist/animation/core/interpolation/Interpolation.d.ts

@@ -0,0 +1,80 @@
+import { FluidValue } from '../controllers/FluidValue';
+type ExtrapolateType = 'identity' | 'extend' | 'clamp';
+export declare const _getTemplateString: (str: string) => string;
+/**
+ * Function returns if the template of two strings are matched
+ * i.e. they can be interpolated
+ * @param str1 - first string
+ * @param str2 - second string
+ * @returns boolean indicating two strings matched or not
+ */
+export declare const stringMatched: (str1: string, str2: string) => boolean;
+/**
+ * Function which proccess the
+ * hexadecimal colors to its proper formats
+ * @param str - string
+ * @returns hex color string
+ */
+export declare const getProcessedColor: (str: string) => string;
+export interface ExtrapolateConfig {
+    extrapolate?: ExtrapolateType;
+    extrapolateRight?: ExtrapolateType;
+    extrapolateLeft?: ExtrapolateType;
+}
+/**
+ * interpolateNumbers to interpolate the numeric value
+ * @param value - number
+ * @param inputRange
+ * @param outputRange
+ * @param extrapolateConfig
+ * @returns - number | string
+ */
+export declare function interpolateNumbers(value: number, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
+/**
+ * interpolateTransitionValue to interpolating TransitionValue type value
+ * @param value
+ * @param inputRange
+ * @param outputRange
+ * @param extrapolateConfig
+ * @returns TransitionValue
+ */
+export declare const interpolateTransitionValue: (value: FluidValue, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig) => {
+    isInterpolation: boolean;
+    interpolationConfig: {
+        inputRange: number[];
+        outputRange: (string | number)[];
+        extrapolateConfig: ExtrapolateConfig | undefined;
+    };
+    _subscribe: import("../types/animation").SubscribeFn;
+    _value: import("../types/animation").Length;
+    _config?: import("..").FluidValueConfig;
+    _currentValue: {
+        current: import("../types/animation").Length;
+    };
+    _subscriptions: Map<{
+        uuid: number;
+        property: string;
+    }, import("../types/animation").OnUpdateFn>;
+    get: () => import("../types/animation").Length;
+};
+/**
+ * interpolate function to interpolate both transition
+ * as well as numerical value
+ * @param value
+ * @param inputRange
+ * @param outputRange
+ * @param extrapolateConfig
+ */
+export declare const interpolate: (value: number | FluidValue, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig) => any;
+/**
+ * Determines if two values can be interpolated.
+ * This function checks if two values, either numbers or strings,
+ * can be interpolated by ensuring they are of the same type and, in the case of strings,
+ * that they are compatible for interpolation based on processed color values.
+ *
+ * @param previousValue - The previous value to compare. Can be a number or a string.
+ * @param newValue - The new value to compare. Can be a number or a string.
+ * @returns True if interpolation is possible, false otherwise.
+ */
+export declare function canInterpolate(previousValue: number | string, newValue: number | string): boolean;
+export {};

package/dist/animation/core/interpolation/__tests__/Colors.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/animation/core/react/fluid.d.ts

@@ -0,0 +1,6 @@
+import type { FluidProps } from '../types/fluid';
+type WithFluid = {
+    [k in keyof JSX.IntrinsicElements]: React.ComponentType<FluidProps<HTMLElement>>;
+};
+export declare const fluid: WithFluid;
+export {};