react-ui-animate 1.4.5 → 2.0.0-rc.2

package/dist/index.js

@@ -4,24 +4,15 @@ var reMotion = require('@raidipesh78/re-motion');
 var React = require('react');
 
 /**
- * interpolate function maps input range to output range
- * @param value - number | TransitionValue
- * @param inputRange - Array<number>
- * @param outputRange - Array<string | number>
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
+ * @param { number } ms - number of milliseconds to delay code execution
+ * @returns Promise
  */
-function interpolate(value, inputRange, outputRange, extrapolateConfig) {
-    if (typeof value === "object" && reMotion.isSubscriber(value)) {
-        return reMotion.interpolateTransitionValue(value, inputRange, outputRange, extrapolateConfig);
-    }
-    else if (typeof value === "number") {
-        return reMotion.interpolateNumbers(value, inputRange, outputRange, extrapolateConfig);
-    }
-    else {
-        throw new Error("Error! " + typeof value + " cannot be interpolated");
-    }
-}
+function delay(ms) {
+    return new Promise(function (resolve) {
+        setTimeout(function () { return resolve(null); }, ms);
+    });
+}
+
 /**
  * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
  * sorthand function to interpolate input range [0, 1]
@@ -32,7 +23,7 @@ function interpolate(value, inputRange, outputRange, extrapolateConfig) {
  * @returns - number | TransitionValue
  */
 function bInterpolate(value, minOutput, maxOutput, extrapolateConfig) {
-    return interpolate(value, [0, 1], [minOutput, maxOutput], extrapolateConfig);
+    return reMotion.interpolate(value, [0, 1], [minOutput, maxOutput], extrapolateConfig);
 }
 
 /*! *****************************************************************************
@@ -110,86 +101,36 @@ function __spread() {
     return ar;
 }
 
-var getInitialConfig = function (animationType) {
-    switch (animationType) {
-        case "elastic":
-            return { mass: 1, friction: 18, tension: 250 };
-        case "stiff":
-            return { mass: 1, friction: 18, tension: 350 };
-        case "wooble":
-            return { mass: 1, friction: 8, tension: 250 };
-        case "bounce":
-            return { duration: 500, easing: reMotion.Easing.bounce };
-        case "ease":
-        default:
-            return { mass: 1, friction: 26, tension: 170 };
-    }
-};
-
-/**
- * getValue checks for type of initialValue and throws error
- * for type other than AnimatedValueType
- */
-var getValue = function (value) {
-    if (typeof value === "number" || typeof value === "string") {
-        return value;
-    }
-    else {
-        throw new Error("Invalid Value! Animated value only accepts string or number.");
-    }
-};
 /**
  * useAnimatedValue for animated transitions
  */
 function useAnimatedValue(initialValue, config) {
-    var _a;
-    var _isInitial = React.useRef(true);
-    var _initialValue = getValue(initialValue);
-    var animationType = (_a = config === null || config === void 0 ? void 0 : config.animationType) !== null && _a !== void 0 ? _a : "ease"; // Defines default animation
-    var onAnimationEnd = config === null || config === void 0 ? void 0 : config.onAnimationEnd;
-    var listener = config === null || config === void 0 ? void 0 : config.listener;
-    var _b = __read(reMotion.useTransition(_initialValue, __assign(__assign(__assign({}, getInitialConfig(animationType)), config), { onRest: function (result) {
-            if (result.finished) {
-                onAnimationEnd && onAnimationEnd(result.value);
-            }
-        }, onChange: function (value) {
-            listener && listener(value);
-        } })), 2), animation = _b[0], setAnimation = _b[1];
-    // doesn't fire on initial render
-    React.useEffect(function () {
-        if (!_isInitial.current) {
-            setAnimation({ toValue: _initialValue });
-        }
-        _isInitial.current = false;
-    }, [_initialValue]);
+    var _a = __read(reMotion.useTransition(initialValue, config), 2), animation = _a[0], setAnimation = _a[1];
     var targetObject = {
         value: animation,
         currentValue: animation.get(),
     };
     return new Proxy(targetObject, {
         set: function (_, key, value) {
-            if (key === "value") {
-                if (typeof value === "number" || typeof value === "string") {
+            if (key === 'value') {
+                if (typeof value === 'number' || typeof value === 'string') {
                     setAnimation({ toValue: value });
                 }
-                else if (typeof value === "object") {
-                    setAnimation({
-                        toValue: value.toValue,
-                        config: { immediate: value.immediate },
-                    });
+                else if (typeof value === 'object' || typeof value === 'function') {
+                    setAnimation(value);
                 }
                 return true;
             }
-            throw new Error("You cannot set any other property to animation node.");
+            throw new Error('You cannot set any other property to animation node.');
         },
         get: function (_, key) {
-            if (key === "value") {
+            if (key === 'value') {
                 return animation;
             }
-            if (key === "currentValue") {
+            if (key === 'currentValue') {
                 return animation.get();
             }
-            throw new Error("You cannot access any other property from animation node.");
+            throw new Error('You cannot access any other property from animation node.');
         },
     });
 }
@@ -198,28 +139,23 @@ function useAnimatedValue(initialValue, config) {
  * useMountedValue handles mounting and unmounting of a component
  * @param state - boolean
  * @param config - useTransitionConfig
- * @returns mountedValueFunction with a callback with argument ( animationNode, mounted )
+ * @returns mountedValueFunction with a callback with argument ( { value: animationNode }, mounted )
  */
 function useMountedValue(state, config) {
-    var _a, _b, _c, _d, _e, _f;
-    var _g = __read(React.useState(true), 2), initial = _g[0], setInitial = _g[1];
-    var _h = __read(React.useState(state), 2), mounted = _h[0], setMounted = _h[1];
-    var _j = React.useRef(config).current, from = _j.from, enter = _j.enter, exit = _j.exit, _config = _j.config;
-    var _k = __read(reMotion.useTransition(from, _config), 2), animation = _k[0], setAnimation = _k[1];
-    var enterDuration = (_b = (_a = config.config) === null || _a === void 0 ? void 0 : _a.enterDuration) !== null && _b !== void 0 ? _b : (_c = config.config) === null || _c === void 0 ? void 0 : _c.duration;
-    var exitDuration = (_e = (_d = config.config) === null || _d === void 0 ? void 0 : _d.exitDuration) !== null && _e !== void 0 ? _e : (_f = config.config) === null || _f === void 0 ? void 0 : _f.exitDuration;
+    var initial = React.useRef(true);
+    var _a = __read(React.useState(state), 2), mounted = _a[0], setMounted = _a[1];
+    var _b = React.useRef(config).current, from = _b.from, enter = _b.enter, exit = _b.exit, innerConfig = _b.config, enterConfig = _b.enterConfig, exitConfig = _b.exitConfig;
+    var _c = __read(reMotion.useTransition(from, innerConfig), 2), animation = _c[0], setAnimation = _c[1];
     React.useEffect(function () {
         if (state) {
-            setInitial(true);
+            initial.current = true;
             setMounted(true);
         }
         else {
-            setInitial(false);
+            initial.current = false;
             setAnimation({
                 toValue: exit,
-                config: {
-                    duration: exitDuration,
-                },
+                config: exitConfig,
             }, function (_a) {
                 var finished = _a.finished;
                 if (finished) {
@@ -229,17 +165,13 @@ function useMountedValue(state, config) {
         }
     }, [state]);
     React.useEffect(function () {
-        if (mounted && initial) {
+        if (mounted && initial.current) {
             setAnimation({
                 toValue: enter,
-                config: {
-                    duration: enterDuration,
-                },
-            }, function () {
-                return;
+                config: enterConfig,
             });
         }
-    }, [mounted, initial]);
+    }, [mounted, initial.current]);
     return function (callback) {
         return callback({ value: animation }, mounted);
     };
@@ -254,15 +186,15 @@ function makeAnimatedComponent(WrappedComponent) {
 /**
  * AnimatedBlock : Animated Div
  */
-var AnimatedBlock = reMotion.makeAnimatedComponent("div");
+var AnimatedBlock = reMotion.makeAnimatedComponent('div');
 /**
  * AnimatedInline : Animated Span
  */
-var AnimatedInline = reMotion.makeAnimatedComponent("span");
+var AnimatedInline = reMotion.makeAnimatedComponent('span');
 /**
  * AnimatedImage : Animated Image
  */
-var AnimatedImage = reMotion.makeAnimatedComponent("img");
+var AnimatedImage = reMotion.makeAnimatedComponent('img');
 /**
  * ScrollableBlock
  * Used to animate element when enter into viewport
@@ -270,7 +202,7 @@ var AnimatedImage = reMotion.makeAnimatedComponent("img");
  * animated value goes from 0 to 1 when appear on viewport & vice versa.
  */
 var ScrollableBlock = function (props) {
-    var children = props.children, _a = props.direction, direction = _a === void 0 ? "single" : _a, animationConfig = props.animationConfig, _b = props.threshold, threshold = _b === void 0 ? 0.2 : _b;
+    var children = props.children, _a = props.direction, direction = _a === void 0 ? 'single' : _a, animationConfig = props.animationConfig, _b = props.threshold, threshold = _b === void 0 ? 0.2 : _b;
     var scrollableBlockRef = React.useRef(null);
     var animation = useAnimatedValue(0, animationConfig); // 0: not intersecting | 1: intersecting
     React.useEffect(function () {
@@ -282,7 +214,7 @@ var ScrollableBlock = function (props) {
                 animation.value = 1;
             }
             else {
-                if (direction === "both")
+                if (direction === 'both')
                     animation.value = 0;
             }
         }, {
@@ -307,10 +239,58 @@ var ScrollableBlock = function (props) {
  */
 var MountedBlock = function (_a) {
     var state = _a.state, children = _a.children, config = _a.config;
-    var open = useMountedValue(state, { from: 0, enter: 1, exit: 0, config: config });
+    var open = useMountedValue(state, config);
     return React.createElement(React.Fragment, null, open(function (animation, mounted) { return mounted && children(animation); }));
 };
 
+var getInitialConfig = function (animationType) {
+    switch (animationType) {
+        case 'elastic':
+            return { mass: 1, friction: 18, tension: 250 };
+        case 'stiff':
+            return { mass: 1, friction: 18, tension: 350 };
+        case 'wooble':
+            return { mass: 1, friction: 8, tension: 250 };
+        case 'bounce':
+            return { duration: 500, easing: reMotion.Easing.bounce };
+        case 'power1':
+            return { duration: 500, easing: reMotion.Easing.bezier(0.17, 0.42, 0.51, 0.97) };
+        case 'power2':
+            return { duration: 500, easing: reMotion.Easing.bezier(0.07, 0.11, 0.13, 1) };
+        case 'power3':
+            return { duration: 500, easing: reMotion.Easing.bezier(0.09, 0.7, 0.16, 1.04) };
+        case 'power4':
+            return { duration: 500, easing: reMotion.Easing.bezier(0.05, 0.54, 0, 1.03) };
+        case 'linear':
+            return { duration: 500, easing: reMotion.Easing.linear };
+        case 'easein':
+            return { duration: 500, easing: reMotion.Easing.in(reMotion.Easing.ease) };
+        case 'easeout':
+            return { duration: 500, easing: reMotion.Easing.out(reMotion.Easing.ease) };
+        case 'easeinout':
+            return { duration: 500, easing: reMotion.Easing.inOut(reMotion.Easing.ease) };
+        case 'ease':
+        default:
+            return { mass: 1, friction: 26, tension: 170 };
+    }
+};
+
+var 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'),
+};
+
 /**
  * Attach single document / window event / HTMLElement
  */
@@ -509,12 +489,12 @@ var DragGesture = /** @class */ (function (_super) {
     DragGesture.prototype._initEvents = function () {
         if (this.targetElement || this.targetElements.length > 0) {
             this._subscribe = attachEvents([window], [
-                ["mousedown", this.pointerDown.bind(this)],
-                ["mousemove", this.pointerMove.bind(this)],
-                ["mouseup", this.pointerUp.bind(this)],
-                ["touchstart", this.pointerDown.bind(this), { passive: false }],
-                ["touchmove", this.pointerMove.bind(this), { passive: false }],
-                ["touchend", this.pointerUp.bind(this)],
+                ['mousedown', this.pointerDown.bind(this)],
+                ['mousemove', this.pointerMove.bind(this)],
+                ['mouseup', this.pointerUp.bind(this)],
+                ['touchstart', this.pointerDown.bind(this), { passive: false }],
+                ['touchmove', this.pointerMove.bind(this), { passive: false }],
+                ['touchend', this.pointerUp.bind(this)],
             ]);
         }
     };
@@ -523,7 +503,7 @@ var DragGesture = /** @class */ (function (_super) {
     // will not be triggered
     DragGesture.prototype._cancelEvents = function () {
         if (this._subscribe) {
-            this._subscribe(["mousedown", "mousemove", "touchstart", "touchmove"]);
+            this._subscribe(['mousedown', 'mousemove', 'touchstart', 'touchmove']);
         }
     };
     DragGesture.prototype._handleCallback = function () {
@@ -550,7 +530,7 @@ var DragGesture = /** @class */ (function (_super) {
     };
     DragGesture.prototype.pointerDown = function (e) {
         var _a;
-        if (e.type === "touchstart") {
+        if (e.type === 'touchstart') {
             this.movementStart = {
                 x: e.touches[0].clientX,
                 y: e.touches[0].clientY,
@@ -596,10 +576,10 @@ var DragGesture = /** @class */ (function (_super) {
         if (this.isActive) {
             e.preventDefault();
             var now = Date.now();
-            var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+            var deltaTime = clamp(now - this.lastTimeStamp, 0.1, 64);
             this.lastTimeStamp = now;
             var t = deltaTime / 1000;
-            if (e.type === "touchmove") {
+            if (e.type === 'touchmove') {
                 this.movement = {
                     x: this.initialMovement.x +
                         (e.touches[0].clientX - this.movementStart.x),
@@ -632,6 +612,7 @@ var DragGesture = /** @class */ (function (_super) {
         if (this.isActive) {
             this.isActive = false;
             this._handleCallback();
+            this._cancelEvents();
             this._initEvents();
         }
     };
@@ -1169,15 +1150,22 @@ Object.defineProperty(exports, 'Easing', {
     return reMotion.Easing;
   }
 });
+Object.defineProperty(exports, 'interpolate', {
+  enumerable: true,
+  get: function () {
+    return reMotion.interpolate;
+  }
+});
 exports.AnimatedBlock = AnimatedBlock;
 exports.AnimatedImage = AnimatedImage;
 exports.AnimatedInline = AnimatedInline;
+exports.AnimationConfigUtils = AnimationConfigUtils;
 exports.MountedBlock = MountedBlock;
 exports.ScrollableBlock = ScrollableBlock;
 exports.bInterpolate = bInterpolate;
 exports.bin = bin;
 exports.clamp = clamp;
-exports.interpolate = interpolate;
+exports.delay = delay;
 exports.makeAnimatedComponent = makeAnimatedComponent;
 exports.mix = mix;
 exports.move = move;