react-ui-animate 1.4.6 → 2.0.0-rc.3

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,9 +23,30 @@ 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);
 }
 
+/**
+ * AnimatedBlock - A higher order component built upon `div` element
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
+ */
+var AnimatedBlock = reMotion.makeAnimatedComponent('div');
+
+/**
+ * AnimatedInline - A higher order component built upon `span` element
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
+ */
+var AnimatedInline = reMotion.makeAnimatedComponent('span');
+
+/**
+ * AnimatedImage - A higher order component built upon `img` element
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
+ */
+var AnimatedImage = reMotion.makeAnimatedComponent('img');
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -110,167 +122,158 @@ function __spread() {
     return ar;
 }
 
+/**
+ * `useMountedValue` handles mounting and unmounting of a component which captures current state
+ * passed as an arugment (`state`) and exposes the shadow state which handles the mount and unmount
+ * of a component.
+ * @param { boolean } state - Boolean indicating the component should mount or unmount.
+ * @param { UseMountedValueConfig } config - Animation configuration.
+ */
+function useMountedValue(state, config) {
+    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) {
+            initial.current = true;
+            setMounted(true);
+        }
+        else {
+            initial.current = false;
+            setAnimation({
+                toValue: exit,
+                config: exitConfig,
+            }, function (_a) {
+                var finished = _a.finished;
+                if (finished) {
+                    setMounted(false);
+                }
+            });
+        }
+    }, [state]);
+    React.useEffect(function () {
+        if (mounted && initial.current) {
+            setAnimation({
+                toValue: enter,
+                config: enterConfig,
+            });
+        }
+    }, [mounted, initial.current]);
+    return function (callback) {
+        return callback({ value: animation }, mounted);
+    };
+}
+
+/**
+ * MountedBlock - Higher order component which handles mounting and unmounting of a component.
+ * @prop { boolean } state - Boolean indicating the component should mount or unmount.
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
+ * @prop { UseMountedValueConfig } config - Animation configuration.
+ */
+var MountedBlock = function (_a) {
+    var state = _a.state, children = _a.children, config = _a.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":
+        case 'elastic':
             return { mass: 1, friction: 18, tension: 250 };
-        case "stiff":
+        case 'stiff':
             return { mass: 1, friction: 18, tension: 350 };
-        case "wooble":
+        case 'wooble':
             return { mass: 1, friction: 8, tension: 250 };
-        case "bounce":
+        case 'bounce':
             return { duration: 500, easing: reMotion.Easing.bounce };
-        case "ease":
+        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 };
+            return { mass: 1, friction: 34, tension: 290 };
     }
 };
 
+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'),
+};
+
 /**
- * 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
+ * `useAnimatedValue` returns an animation value with `.value` and `.currentValue` property which is
+ * initialized when passed to argument (`initialValue`). The retured value persist until the lifetime of
+ * a component. It doesnot cast any re-renders which can is very good for performance optimization.
+ * @param { string | number } initialValue - Initial value
+ * @param { UseAnimatedValueConfig } config - Animation configuration object.
  */
 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, __assign(__assign({}, AnimationConfigUtils.EASE), 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.');
         },
     });
 }
 
 /**
- * useMountedValue handles mounting and unmounting of a component
- * @param state - boolean
- * @param config - useTransitionConfig
- * @returns mountedValueFunction with a callback with argument ( 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;
-    React.useEffect(function () {
-        if (state) {
-            setInitial(true);
-            setMounted(true);
-        }
-        else {
-            setInitial(false);
-            setAnimation({
-                toValue: exit,
-                config: {
-                    duration: exitDuration,
-                },
-            }, function (_a) {
-                var finished = _a.finished;
-                if (finished) {
-                    setMounted(false);
-                }
-            });
-        }
-    }, [state]);
-    React.useEffect(function () {
-        if (mounted && initial) {
-            setAnimation({
-                toValue: enter,
-                config: {
-                    duration: enterDuration,
-                },
-            }, function () {
-                return;
-            });
-        }
-    }, [mounted, initial]);
-    return function (callback) {
-        return callback({ value: animation }, mounted);
-    };
-}
-
-/**
- * Make any component animatable
- */
-function makeAnimatedComponent(WrappedComponent) {
-    return reMotion.makeAnimatedComponent(WrappedComponent);
-}
-/**
- * AnimatedBlock : Animated Div
- */
-var AnimatedBlock = reMotion.makeAnimatedComponent("div");
-/**
- * AnimatedInline : Animated Span
- */
-var AnimatedInline = reMotion.makeAnimatedComponent("span");
-/**
- * AnimatedImage : Animated Image
- */
-var AnimatedImage = reMotion.makeAnimatedComponent("img");
-/**
- * ScrollableBlock
- * Used to animate element when enter into viewport
- * Render props pattern with children accepts animation node
- * animated value goes from 0 to 1 when appear on viewport & vice versa.
+ * ScrollableBlock - Higher order component to handle the entrance or exit animation
+ * of a component when it enters or exit the viewport. Accepts child as a function with
+ * `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
+ * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
+ * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
+ * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
+ * @prop { UseAnimatedValueConfig } animationConfig - Animation config
  */
 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 +285,7 @@ var ScrollableBlock = function (props) {
                 animation.value = 1;
             }
             else {
-                if (direction === "both")
+                if (direction === 'both')
                     animation.value = 0;
             }
         }, {
@@ -299,65 +302,8 @@ var ScrollableBlock = function (props) {
         };
     }, []);
     return React.createElement("div", { ref: scrollableBlockRef }, children && children(animation));
-};
-/**
- * MountedBlock handles mounting and unmounting of a component
- * @props - state: boolean, config: InnerUseMountedValueConfig
- * @children -  (animation: { value: TransitionValue }) => React.ReactNode
- */
-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 });
-    return React.createElement(React.Fragment, null, open(function (animation, mounted) { return mounted && children(animation); }));
 };
 
-/**
- * Attach single document / window event / HTMLElement
- */
-function attachEvent(domTargets, event, callback, capture) {
-    if (capture === void 0) { capture = false; }
-    domTargets.forEach(function (target) {
-        target.addEventListener(event, callback, capture);
-    });
-    return function () {
-        domTargets.forEach(function (target) {
-            target.removeEventListener(event, callback, capture);
-        });
-    };
-}
-/**
- * Attach multiple document / window event / HTMLElement
- */
-function attachEvents(domTargets, events) {
-    var subscribers = new Map();
-    events.forEach(function (_a) {
-        var _b = __read(_a, 3), event = _b[0], callback = _b[1], _c = _b[2], capture = _c === void 0 ? false : _c;
-        subscribers.set(event, attachEvent(domTargets, event, callback, capture));
-    });
-    return function (eventKeys) {
-        var e_1, _a;
-        try {
-            for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), eventKey = _d[0], subscriber = _d[1];
-                if (!eventKeys) {
-                    subscriber();
-                    return;
-                }
-                if (eventKeys.indexOf(eventKey) !== -1) {
-                    subscriber();
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-    };
-}
-
 /**
  * bin(booleanValue)
  * returns 1 if booleanValue == true and 0 if booleanValue == false
@@ -450,6 +396,65 @@ function move(array, moveIndex, toIndex) {
     return array;
 }
 
+/**
+ * TransitionBlock - Higher order component which animates on state change.
+ * @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
+ * @prop { UseAnimatedValueConfig } config - Animation configuration.
+ */
+var TransitionBlock = function (_a) {
+    var state = _a.state, children = _a.children, config = _a.config;
+    var amv = useAnimatedValue(bin(state), config);
+    return React.createElement(React.Fragment, null, children(amv));
+};
+
+/**
+ * Attach single document / window event / HTMLElement
+ */
+function attachEvent(domTargets, event, callback, capture) {
+    if (capture === void 0) { capture = false; }
+    domTargets.forEach(function (target) {
+        target.addEventListener(event, callback, capture);
+    });
+    return function () {
+        domTargets.forEach(function (target) {
+            target.removeEventListener(event, callback, capture);
+        });
+    };
+}
+/**
+ * Attach multiple document / window event / HTMLElement
+ */
+function attachEvents(domTargets, events) {
+    var subscribers = new Map();
+    events.forEach(function (_a) {
+        var _b = __read(_a, 3), event = _b[0], callback = _b[1], _c = _b[2], capture = _c === void 0 ? false : _c;
+        subscribers.set(event, attachEvent(domTargets, event, callback, capture));
+    });
+    return function (eventKeys) {
+        var e_1, _a;
+        try {
+            for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), eventKey = _d[0], subscriber = _d[1];
+                if (!eventKeys) {
+                    subscriber();
+                    return;
+                }
+                if (eventKeys.indexOf(eventKey) !== -1) {
+                    subscriber();
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    };
+}
+
 var withDefault = function (x, y) {
     return { x: x, y: y };
 };
@@ -653,15 +658,15 @@ var MouseMoveGesture = /** @class */ (function (_super) {
     // initialize the events
     MouseMoveGesture.prototype._initEvents = function () {
         if (this.targetElement) {
-            this._subscribe = attachEvents([this.targetElement], [["mousemove", this.onMouseMove.bind(this)]]);
+            this._subscribe = attachEvents([this.targetElement], [['mousemove', this.onMouseMove.bind(this)]]);
         }
         else if (this.targetElements.length > 0) {
             this._subscribe = attachEvents(this.targetElements, [
-                ["mousemove", this.onMouseMove.bind(this)],
+                ['mousemove', this.onMouseMove.bind(this)],
             ]);
         }
         else {
-            this._subscribe = attachEvents([window], [["mousemove", this.onMouseMove.bind(this)]]);
+            this._subscribe = attachEvents([window], [['mousemove', this.onMouseMove.bind(this)]]);
         }
     };
     MouseMoveGesture.prototype._handleCallback = function () {
@@ -737,10 +742,10 @@ var ScrollGesture = /** @class */ (function (_super) {
     // initialize the events
     ScrollGesture.prototype._initEvents = function () {
         if (this.targetElement) {
-            this._subscribe = attachEvents([this.targetElement], [["scroll", this.scrollElementListener.bind(this)]]);
+            this._subscribe = attachEvents([this.targetElement], [['scroll', this.scrollElementListener.bind(this)]]);
         }
         else {
-            this._subscribe = attachEvents([window], [["scroll", this.scrollListener.bind(this)]]);
+            this._subscribe = attachEvents([window], [['scroll', this.scrollListener.bind(this)]]);
         }
     };
     ScrollGesture.prototype._handleCallback = function () {
@@ -825,7 +830,7 @@ var WheelGesture = /** @class */ (function (_super) {
     // initialize the events
     WheelGesture.prototype._initEvents = function () {
         if (this.targetElement) {
-            this._subscribe = attachEvents([this.targetElement], [["wheel", this.onWheel.bind(this)]]);
+            this._subscribe = attachEvents([this.targetElement], [['wheel', this.onWheel.bind(this)]]);
         }
     };
     WheelGesture.prototype._handleCallback = function () {
@@ -969,22 +974,22 @@ var useRecognizer = function (handlers) {
 
 function useDrag(callback, config) {
     var gesture = React.useRef(new DragGesture()).current;
-    return useRecognizer([["drag", gesture, callback, config]]);
+    return useRecognizer([['drag', gesture, callback, config]]);
 }
 
 function useMouseMove(callback) {
     var gesture = React.useRef(new MouseMoveGesture()).current;
-    return useRecognizer([["move", gesture, callback]]);
+    return useRecognizer([['move', gesture, callback]]);
 }
 
 function useScroll(callback) {
     var gesture = React.useRef(new ScrollGesture()).current;
-    return useRecognizer([["scroll", gesture, callback]]);
+    return useRecognizer([['scroll', gesture, callback]]);
 }
 
 function useWheel(callback) {
     var gesture = React.useRef(new WheelGesture()).current;
-    return useRecognizer([["wheel", gesture, callback]]);
+    return useRecognizer([['wheel', gesture, callback]]);
 }
 
 function useGesture(_a) {
@@ -994,10 +999,10 @@ function useGesture(_a) {
     var scrollGesture = React.useRef(new ScrollGesture()).current;
     var mouseMoveGesture = React.useRef(new MouseMoveGesture()).current;
     return useRecognizer([
-        ["drag", dragGesture, onDrag],
-        ["wheel", wheelGesture, onWheel],
-        ["scroll", scrollGesture, onScroll],
-        ["move", mouseMoveGesture, onMouseMove],
+        ['drag', dragGesture, onDrag],
+        ['wheel', wheelGesture, onWheel],
+        ['scroll', scrollGesture, onScroll],
+        ['move', mouseMoveGesture, onMouseMove],
     ]);
 }
 
@@ -1170,16 +1175,29 @@ Object.defineProperty(exports, 'Easing', {
     return reMotion.Easing;
   }
 });
+Object.defineProperty(exports, 'interpolate', {
+  enumerable: true,
+  get: function () {
+    return reMotion.interpolate;
+  }
+});
+Object.defineProperty(exports, 'makeAnimatedComponent', {
+  enumerable: true,
+  get: function () {
+    return reMotion.makeAnimatedComponent;
+  }
+});
 exports.AnimatedBlock = AnimatedBlock;
 exports.AnimatedImage = AnimatedImage;
 exports.AnimatedInline = AnimatedInline;
+exports.AnimationConfigUtils = AnimationConfigUtils;
 exports.MountedBlock = MountedBlock;
 exports.ScrollableBlock = ScrollableBlock;
+exports.TransitionBlock = TransitionBlock;
 exports.bInterpolate = bInterpolate;
 exports.bin = bin;
 exports.clamp = clamp;
-exports.interpolate = interpolate;
-exports.makeAnimatedComponent = makeAnimatedComponent;
+exports.delay = delay;
 exports.mix = mix;
 exports.move = move;
 exports.rubberClamp = rubberClamp;