motion/dist/targets/react/animated.cjs.js

The Motion library for the web

'use strict';

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

var tslib = require('tslib');
var React = require('react');
var useAnimation = require('./hooks/use-animation.cjs.js');
var useHover = require('./hooks/use-hover.cjs.js');
var usePress = require('./hooks/use-press.cjs.js');
var useExit = require('./hooks/use-exit.cjs.js');
var useViewport = require('./hooks/use-viewport.cjs.js');
var keyframes = require('./utils/keyframes.cjs.js');
var poses = require('./utils/poses.cjs.js');
var context = require('./context.cjs.js');

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);

function createAnimatedComponent(Component) {
    function Animated(props, _externalRef) {
        // TODO: Support externalRef if provided
        const ref = React.useRef(null);
        const { options: defaultOptions, style, initial, hover, press, exit, inViewport, viewport, poses: poses$1, onStart, onComplete, onViewportEnter, onViewportLeave, inherit = true } = props, forwardProps = tslib.__rest(props
        /**
         * Track throughout the render which poses are considered active and should
         * be passed to children.
         */
        , ["options", "style", "initial", "hover", "press", "exit", "inViewport", "viewport", "poses", "onStart", "onComplete", "onViewportEnter", "onViewportLeave", "inherit"]);
        /**
         * Track throughout the render which poses are considered active and should
         * be passed to children.
         */
        const isPoseActive = { initial: true, style: true };
        /**
         * Inherit poses from the parent context,
         */
        let inherited = React.useContext(context.AnimationContext);
        if (!inherit)
            inherited = {};
        const resolvedStyle = poses.resolvePose(style, inherited.style, poses$1);
        const resolvedInitial = poses.resolvePose(initial, inherited.initial, poses$1);
        const initialTarget = Object.assign(Object.assign({}, resolvedStyle), resolvedInitial);
        const target = Object.assign(Object.assign({}, resolvedInitial), resolvedStyle);
        const options = Object.assign(Object.assign({}, defaultOptions), resolvedStyle === null || resolvedStyle === void 0 ? void 0 : resolvedStyle.options);
        /**
         * If we haven't created a style prop for SSR yet (this is the initial render)
         * make one. We provide this to React every render as beyond that with manage style
         * via animations.
         */
        const styleProp = React.useRef(null);
        styleProp.current || (styleProp.current = keyframes.convertKeyframesToStyles(initialTarget));
        /**
         * Attach animation event handlers (gestures/exit/viewport appearance).
         * This are called in reverse order of which styles should take priority when
         * active, for example if there's a hover and press gesture active the press
         * gesture will take precedence.
         */
        const hoverProps = useHover.useHover(target, options, props, inherited, isPoseActive);
        const pressProps = usePress.usePress(target, options, props, inherited, isPoseActive);
        useViewport.useViewport(ref, target, options, props, inherited, isPoseActive);
        const onExitComplete = useExit.useExit(target, options, props, inherited);
        /**
         * Compare our final calculated style target with the one from the previous render
         * and trigger any necessary animations.
         */
        useAnimation.useAnimation(ref, initialTarget, target, options, onStart, (animation) => {
            onComplete && onComplete(animation);
            onExitComplete && onExitComplete();
        });
        const element = React.createElement(Component, Object.assign({}, forwardProps, hoverProps, pressProps, {
            style: styleProp.current,
            ref,
        }));
        /**
         * Create a variant context to pass forward to child components.
         */
        const context$1 = variantProps.reduce((acc, key) => {
            acc[key] = undefined;
            if (props[key]) {
                if (typeof props[key] === "string" && isPoseActive[key]) {
                    acc[key] = props[key];
                }
            }
            else if (inherited[key]) {
                acc[key] = inherited[key];
            }
            return acc;
        }, {});
        /**
         * Memoize the context so we only trigger a re-render in children if the values
         * within it change.
         */
        const memoizedContext = React.useMemo(() => context$1, Object.values(context$1));
        return (React__namespace.createElement(context.AnimationContext.Provider, { value: memoizedContext }, element));
    }
    return React.forwardRef(Animated);
}
const variantProps = [
    "initial",
    "style",
    "hover",
    "press",
    "inViewport",
    "exit",
];

exports.createAnimatedComponent = createAnimatedComponent;