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

package/.vscode/settings.json

@@ -1,3 +1,3 @@
-{
-  "compile-hero.disable-compile-files-on-did-save-code": false
-}
+{
+  "compile-hero.disable-compile-files-on-did-save-code": false
+}

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/animationType.d.ts

@@ -1,15 +1,15 @@
-export declare const AnimationConfigUtils: {
-    ELASTIC: import("@raidipesh78/re-motion").TransitionValueConfig;
-    BOUNCE: import("@raidipesh78/re-motion").TransitionValueConfig;
-    EASE: import("@raidipesh78/re-motion").TransitionValueConfig;
-    STIFF: import("@raidipesh78/re-motion").TransitionValueConfig;
-    WOOBLE: import("@raidipesh78/re-motion").TransitionValueConfig;
-    EASE_IN: import("@raidipesh78/re-motion").TransitionValueConfig;
-    EASE_OUT: import("@raidipesh78/re-motion").TransitionValueConfig;
-    EASE_IN_OUT: import("@raidipesh78/re-motion").TransitionValueConfig;
-    POWER1: import("@raidipesh78/re-motion").TransitionValueConfig;
-    POWER2: import("@raidipesh78/re-motion").TransitionValueConfig;
-    POWER3: import("@raidipesh78/re-motion").TransitionValueConfig;
-    POWER4: import("@raidipesh78/re-motion").TransitionValueConfig;
-    LINEAR: import("@raidipesh78/re-motion").TransitionValueConfig;
-};
+export declare const AnimationConfigUtils: {
+    ELASTIC: import("./core").FluidValueConfig;
+    BOUNCE: import("./core").FluidValueConfig;
+    EASE: import("./core").FluidValueConfig;
+    STIFF: import("./core").FluidValueConfig;
+    WOOBLE: import("./core").FluidValueConfig;
+    EASE_IN: import("./core").FluidValueConfig;
+    EASE_OUT: import("./core").FluidValueConfig;
+    EASE_IN_OUT: import("./core").FluidValueConfig;
+    POWER1: import("./core").FluidValueConfig;
+    POWER2: import("./core").FluidValueConfig;
+    POWER3: import("./core").FluidValueConfig;
+    POWER4: import("./core").FluidValueConfig;
+    LINEAR: import("./core").FluidValueConfig;
+};

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

@@ -0,0 +1,16 @@
+import { 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/animation/FluidValue.d.ts

@@ -0,0 +1,21 @@
+import type { Length, ResultType, SubscribeFn, FluidValueConfig, OnUpdateFn, AssignValue } from '../types/animation';
+import { Fn } from '../types/common';
+export declare class FluidValue {
+    _subscribe: SubscribeFn;
+    _value: Length;
+    _config?: FluidValueConfig;
+    _currentValue: {
+        current: Length;
+    };
+    _subscriptions: Map<{
+        uuid: number;
+        property: string;
+    }, OnUpdateFn>;
+    get: () => Length;
+    constructor(initialValue: Length, config?: FluidValueConfig);
+    /**
+     * Animates from initial value to updated value, determines the transition type `multistage`
+     * or `singlestage` according to updatedValue
+     */
+    setValue(updatedValue: AssignValue, config?: FluidValueConfig, callback?: Fn<ResultType, void>): void;
+}

package/dist/animation/core/animation/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/animation/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/animation/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/animation/TransitionValue.d.ts

@@ -0,0 +1,21 @@
+import type { Length, ResultType, SubscribeFn, TransitionValueConfig, OnUpdateFn, AssignValue } from '../types/animation';
+import { Fn } from '../types/common';
+export declare class TransitionValue {
+    _subscribe: SubscribeFn;
+    _value: Length;
+    _config?: TransitionValueConfig;
+    _currentValue: {
+        current: Length;
+    };
+    _subscriptions: Map<{
+        uuid: number;
+        property: string;
+    }, OnUpdateFn>;
+    get: () => Length;
+    constructor(initialValue: Length, config?: TransitionValueConfig);
+    /**
+     * Animates from initial value to updated value, determines the transition type `multistage`
+     * or `singlestage` according to updatedValue
+     */
+    setValue(updatedValue: AssignValue, config?: TransitionValueConfig, callback?: Fn<ResultType, void>): void;
+}

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;