motion/dist/motion.umd.js

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
    typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Motion = {}, global.React));
}(this, (function (exports, React) { 'use strict';

    function _interopNamespace(e) {
        if (e && e.__esModule) return e;
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () {
                            return e[k];
                        }
                    });
                }
            });
        }
        n['default'] = e;
        return Object.freeze(n);
    }

    var React__namespace = /*#__PURE__*/_interopNamespace(React);

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */

    var __assign = function() {
        __assign = Object.assign || function __assign(t) {
            for (var s, i = 1, n = arguments.length; i < n; i++) {
                s = arguments[i];
                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
            }
            return t;
        };
        return __assign.apply(this, arguments);
    };

    function __rest(s, e) {
        var t = {};
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
            t[p] = s[p];
        if (s != null && typeof Object.getOwnPropertySymbols === "function")
            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                    t[p[i]] = s[p[i]];
            }
        return t;
    }

    function __read(o, n) {
        var m = typeof Symbol === "function" && o[Symbol.iterator];
        if (!m) return o;
        var i = m.call(o), r, ar = [], e;
        try {
            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
        }
        catch (error) { e = { error: error }; }
        finally {
            try {
                if (r && !r.done && (m = i["return"])) m.call(i);
            }
            finally { if (e) throw e.error; }
        }
        return ar;
    }

    function convertToBezierString(_a) {
        var _b = __read(_a, 4), a = _b[0], b = _b[1], c = _b[2], d = _b[3];
        return "cubic-bezier(" + a + ", " + b + ", " + c + ", " + d + ")";
    }

    function secondsToMilliseconds(seconds) {
        return seconds * 1000;
    }

    function getTargetKeyframe(keyframes) {
        return Array.isArray(keyframes) ? keyframes[keyframes.length - 1] : keyframes;
    }

    function animate(element, 
    // elements: Element | Element[] | NodeListOf<Element> | string,
    keyframes, options) {
        // if (typeof elements === "string") {
        //   elements = document.querySelectorAll(elements)
        // }
        if (options === void 0) { options = {}; }
        // if (Array.isArray(elements) || elements instanceof NodeList) {
        //   const { stagger = 0, delay = 0 } = options
        //   return Array.from(elements).map((element, i) => {
        //     animate(element, keyframes, { ...options, delay: delay + stagger * i })
        //   })
        // }
        // const element = elements as HTMLElement
        var _a = options.delay, delay = _a === void 0 ? 0 : _a, _b = options.duration, duration = _b === void 0 ? 0.3 : _b, _c = options.repeat, repeat = _c === void 0 ? 0 : _c, _d = options.initialProgress, iterationStart = _d === void 0 ? 0 : _d, _e = options.easing, easing = _e === void 0 ? "linear" : _e;
        delay = secondsToMilliseconds(delay);
        duration = secondsToMilliseconds(duration);
        console.log({
            delay: delay,
            duration: duration,
            easing: Array.isArray(easing) ? convertToBezierString(easing) : easing,
            iterations: repeat + 1,
            iterationStart: iterationStart,
        });
        function onComplete() {
            Object.assign(element.style, getTargetKeyframe(keyframes));
        }
        var animation = element.animate(keyframes, {
            delay: delay,
            duration: duration,
            easing: Array.isArray(easing) ? convertToBezierString(easing) : easing,
            iterations: repeat + 1,
            iterationStart: iterationStart,
        });
        animation.finished.then(onComplete);
    }

    function useAnimation(ref, target, options) {
        var prevTarget = React.useRef({});
        React.useEffect(function () {
            if (!target)
                return;
            var targetKeyframe = {};
            for (var key in target) {
                if (target !== prevTarget.current[key]) {
                    targetKeyframe[key] = target[key];
                }
            }
            if (Object.keys(targetKeyframe).length && ref.current) {
                animate(ref.current, targetKeyframe, options);
            }
            prevTarget.current = target;
        });
    }
    function useInitialRender() {
        var isInitialRender = React.useRef(true);
        React.useEffect(function () {
            isInitialRender.current = false;
        }, []);
        return isInitialRender.current;
    }
    function createAnimatedComponent(Component) {
        function Animated(_a, _externalRef) {
            var options = _a.options, style = _a.style, first = _a.first, props = __rest(_a, ["options", "style", "first"]);
            var ref = React.useRef(null);
            useAnimation(ref, style, options);
            var isInitialRender = useInitialRender();
            return React__namespace.createElement(Component, __assign(__assign({}, props), { style: isInitialRender && first ? first : style, ref: ref }));
        }
        return React__namespace.forwardRef(Animated);
    }
    var components = new Map();
    var animated = new Proxy({}, {
        get: function (_, key) {
            if (!components.has(key)) {
                components.set(key, createAnimatedComponent(key));
            }
            return components.get(key);
        },
    });

    exports.animate = animate;
    exports.animated = animated;
    exports.useAnimation = useAnimation;

    Object.defineProperty(exports, '__esModule', { value: true });

})));