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

package/dist/index.js

@@ -3,6 +3,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reMotion = require('@raidipesh78/re-motion');
 var React = require('react');
 
+/**
+ * @param { number } ms - number of milliseconds to delay code execution
+ * @returns Promise
+ */
+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]
@@ -16,6 +26,27 @@ function bInterpolate(value, 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.
 
@@ -92,44 +123,11 @@ function __spread() {
 }
 
 /**
- * useAnimatedValue for animated transitions
- */
-function useAnimatedValue(initialValue, config) {
-    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') {
-                    setAnimation({ toValue: value });
-                }
-                else if (typeof value === 'object' || typeof value === 'function') {
-                    setAnimation(value);
-                }
-                return true;
-            }
-            throw new Error('You cannot set any other property to animation node.');
-        },
-        get: function (_, key) {
-            if (key === 'value') {
-                return animation;
-            }
-            if (key === 'currentValue') {
-                return animation.get();
-            }
-            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 ( { value: animationNode }, mounted )
+ * `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);
@@ -168,64 +166,10 @@ function useMountedValue(state, config) {
 }
 
 /**
- * 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.
- */
-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 scrollableBlockRef = React.useRef(null);
-    var animation = useAnimatedValue(0, animationConfig); // 0: not intersecting | 1: intersecting
-    React.useEffect(function () {
-        var _scrollableBlock = scrollableBlockRef.current;
-        var observer = new IntersectionObserver(function (_a) {
-            var _b = __read(_a, 1), entry = _b[0];
-            var isIntersecting = entry.isIntersecting;
-            if (isIntersecting) {
-                animation.value = 1;
-            }
-            else {
-                if (direction === 'both')
-                    animation.value = 0;
-            }
-        }, {
-            root: null,
-            threshold: threshold,
-        });
-        if (_scrollableBlock) {
-            observer.observe(_scrollableBlock);
-        }
-        return function () {
-            if (_scrollableBlock) {
-                observer.unobserve(_scrollableBlock);
-            }
-        };
-    }, []);
-    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
+ * 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;
@@ -243,9 +187,25 @@ var getInitialConfig = function (animationType) {
             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 };
+            return { mass: 1, friction: 34, tension: 290 };
     }
 };
 
@@ -255,55 +215,95 @@ var AnimationConfigUtils = {
     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
+ * `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 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);
-        });
+function useAnimatedValue(initialValue, config) {
+    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(),
     };
-}
-/**
- * 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;
+    return new Proxy(targetObject, {
+        set: function (_, key, value) {
+            if (key === 'value') {
+                if (typeof value === 'number' || typeof value === 'string') {
+                    setAnimation({ toValue: value });
                 }
-                if (eventKeys.indexOf(eventKey) !== -1) {
-                    subscriber();
+                else if (typeof value === 'object' || typeof value === 'function') {
+                    setAnimation(value);
                 }
+                return true;
             }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            throw new Error('You cannot set any other property to animation node.');
+        },
+        get: function (_, key) {
+            if (key === 'value') {
+                return animation;
             }
-            finally { if (e_1) throw e_1.error; }
-        }
-    };
+            if (key === 'currentValue') {
+                return animation.get();
+            }
+            throw new Error('You cannot access any other property from animation node.');
+        },
+    });
 }
 
+/**
+ * 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 scrollableBlockRef = React.useRef(null);
+    var animation = useAnimatedValue(0, animationConfig); // 0: not intersecting | 1: intersecting
+    React.useEffect(function () {
+        var _scrollableBlock = scrollableBlockRef.current;
+        var observer = new IntersectionObserver(function (_a) {
+            var _b = __read(_a, 1), entry = _b[0];
+            var isIntersecting = entry.isIntersecting;
+            if (isIntersecting) {
+                animation.value = 1;
+            }
+            else {
+                if (direction === 'both')
+                    animation.value = 0;
+            }
+        }, {
+            root: null,
+            threshold: threshold,
+        });
+        if (_scrollableBlock) {
+            observer.observe(_scrollableBlock);
+        }
+        return function () {
+            if (_scrollableBlock) {
+                observer.unobserve(_scrollableBlock);
+            }
+        };
+    }, []);
+    return (React.createElement("div", { ref: scrollableBlockRef }, children && children({ value: animation.value })));
+};
+
 /**
  * bin(booleanValue)
  * returns 1 if booleanValue == true and 0 if booleanValue == false
@@ -396,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({ value: amv.value }));
+};
+
+/**
+ * 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 };
 };
@@ -599,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 () {
@@ -683,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 () {
@@ -771,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 () {
@@ -915,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) {
@@ -940,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],
     ]);
 }
 
@@ -1122,16 +1181,23 @@ Object.defineProperty(exports, 'interpolate', {
     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.makeAnimatedComponent = makeAnimatedComponent;
+exports.delay = delay;
 exports.mix = mix;
 exports.move = move;
 exports.rubberClamp = rubberClamp;