@atlaskit/motion/dist/cjs/entering/keyframes-motion.js

A set of utilities to apply motion in your application.

/* keyframes-motion.tsx generated by @compiled/babel-plugin v0.36.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./keyframes-motion.compiled.css");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _runtime = require("@compiled/react/runtime");
var _accessibility = require("../utils/accessibility");
var _durations = require("../utils/durations");
var _timerHooks = require("../utils/timer-hooks");
var _exitingPersistence = require("./exiting-persistence");
var _staggeredEntrance = require("./staggered-entrance");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var zoomIn = null;
var zoomOut = null;
var fadeIn = null;
var fadeOut = null;
var fadeInFromTop = null;
var fadeOutFromTop = null;
var fadeInFromLeft = null;
var fadeOutFromLeft = null;
var fadeInFromBottom = null;
var fadeOutFromBottom = null;
var fadeInFromRight = null;
var fadeOutFromRight = null;
var fadeInFromTopConstant = null;
var fadeOutFromTopConstant = null;
var fadeInFromLeftConstant = null;
var fadeOutFromLeftConstant = null;
var fadeInFromBottomConstant = null;
var fadeOutFromBottomConstant = null;
var fadeInFromRightConstant = null;
var fadeOutFromRightConstant = null;
var slideInFromTop = null;
var slideOutFromTop = null;
var slideInFromRight = null;
var slideOutFromRight = null;
var slideInFromBottom = null;
var slideOutFromBottom = null;
var slideInFromLeft = null;
var slideOutFromLeft = null;

/**
 * These are props that motions should use as their external props for consumers.
 * See [FadeIn](packages/helpers/motion/src/entering/fade-in.tsx) for an example usage.
 */

/**
 * This is the base INTERNAL component used for all other entering motions.
 * This does not need Javascript to execute on the client so it will run immediately
 * for any SSR rendered React apps before the JS has executed.
 */
var EnteringMotion = function EnteringMotion(_ref) {
  var children = _ref.children,
    animationTimingFunction = _ref.animationTimingFunction,
    _ref$animationTimingF = _ref.animationTimingFunctionExiting,
    animationTimingFunctionExiting = _ref$animationTimingF === void 0 ? animationTimingFunction : _ref$animationTimingF,
    enteringAnimation = _ref.enteringAnimation,
    _ref$exitingAnimation = _ref.exitingAnimation,
    exitingAnimation = _ref$exitingAnimation === void 0 ? enteringAnimation : _ref$exitingAnimation,
    isPaused = _ref.isPaused,
    onFinishMotion = _ref.onFinish,
    _ref$duration = _ref.duration,
    duration = _ref$duration === void 0 ? 'large' : _ref$duration;
  var staggered = (0, _staggeredEntrance.useStaggeredEntrance)();
  var _useExitingPersistenc = (0, _exitingPersistence.useExitingPersistence)(),
    isExiting = _useExitingPersistenc.isExiting,
    onExitFinished = _useExitingPersistenc.onFinish,
    appear = _useExitingPersistenc.appear;
  var setTimeout = (0, _timerHooks.useSetTimeout)();
  var paused = isPaused || !staggered.isReady;
  var delay = isExiting ? 0 : staggered.delay;
  var state = isExiting ? 'exiting' : 'entering';
  var _useState = (0, _react.useState)(appear),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    hasAnimationStyles = _useState2[0],
    setHasAnimationStyles = _useState2[1];
  (0, _react.useEffect)(function () {
    // Tracking this to prevent changing state on an unmounted component
    var isCancelled = false;
    if (paused) {
      return;
    }

    // On initial mount if elements aren't set to animate on appear, we return early and callback
    if (!appear) {
      onFinishMotion && onFinishMotion(state);
      return;
    }

    /**
     * Updates relevant state.
     * Called when the animation is finished, or immediately with reduced motion.
     */
    var onAnimationEnd = function onAnimationEnd() {
      if (state === 'exiting') {
        // Updates the `ExitingPersistence` to remove this child
        onExitFinished === null || onExitFinished === void 0 || onExitFinished();
      }
      if (!isCancelled) {
        setHasAnimationStyles(false);
      }
      onFinishMotion === null || onFinishMotion === void 0 || onFinishMotion(state);
    };
    if ((0, _accessibility.isReducedMotion)()) {
      // If there is reduced motion there is no exit animation, so call this immediately
      onAnimationEnd();
      return;
    }

    // Elements may need animation styles back after initial mount (they could animate out)
    setHasAnimationStyles(true);

    // Queue `onAnimationEnd` for after the animation has finished
    setTimeout(onAnimationEnd, isExiting ? _durations.exitingDurations[duration] : _durations.durations[duration] + delay);
    return function () {
      isCancelled = true;
    };
    // We ignore this for onFinishMotion as consumers could potentially inline the function
    // which would then trigger this effect every re-render.
    // We want to make it easier for consumers so we go down this path unfortunately.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [onExitFinished, state, isExiting, duration, delay, paused, setTimeout]);
  return children({
    ref: staggered.ref,
    // @ts-expect-error: `ax` is not typed correctly
    className: hasAnimationStyles ? (0, _runtime.ax)([(0, _runtime.ax)(["_1o51eoah _1y0co91m _1bumglyw _sedtglyw"]), paused && (0, _runtime.ax)(["_1y0ctrqk"]), duration === 'small' && (0, _runtime.ax)(["_5sag1yx9"]), duration === 'medium' && (0, _runtime.ax)(["_5sag1ttt"]), duration === 'large' && (0, _runtime.ax)(["_5sagpwmj"]), isExiting && duration === 'small' && (0, _runtime.ax)(["_5sag14ed"]), isExiting && duration === 'medium' && (0, _runtime.ax)(["_5sagluct"]), isExiting && duration === 'large' && (0, _runtime.ax)(["_5sag1ttt"]), isExiting && (0, _runtime.ax)(["_ju255cps _1o51q7pw"]), !isExiting && animationTimingFunction === 'linear' && (0, _runtime.ax)(["_1pglp3kn"]), !isExiting && animationTimingFunction === 'ease-out' && (0, _runtime.ax)(["_1pgldkwg"]), !isExiting && animationTimingFunction === 'ease-in' && (0, _runtime.ax)(["_1pgl1nzg"]), !isExiting && animationTimingFunction === 'ease-in-out' && (0, _runtime.ax)(["_1pgl1fu8"]), isExiting && animationTimingFunction === 'linear' && (0, _runtime.ax)(["_1pglp3kn"]), isExiting && animationTimingFunctionExiting === 'ease-out' && (0, _runtime.ax)(["_1pgldkwg"]), isExiting && animationTimingFunctionExiting === 'ease-in' && (0, _runtime.ax)(["_1pgl1nzg"]), isExiting && animationTimingFunctionExiting === 'ease-in-out' && (0, _runtime.ax)(["_1pgl1fu8"]), (!isExiting && enteringAnimation === 'fade-in' || isExiting && exitingAnimation === 'fade-in') && (0, _runtime.ax)(["_j7hq1cgr"]), (!isExiting && enteringAnimation === 'fade-out' || isExiting && exitingAnimation === 'fade-out') && (0, _runtime.ax)(["_j7hq1lln"]), (!isExiting && enteringAnimation === 'zoom-in' || isExiting && exitingAnimation === 'zoom-in') && (0, _runtime.ax)(["_j7hqe8p0"]), (!isExiting && enteringAnimation === 'zoom-out' || isExiting && exitingAnimation === 'zoom-out') && (0, _runtime.ax)(["_j7hqy6ql"]), (!isExiting && enteringAnimation === 'slide-in-from-top' || isExiting && exitingAnimation === 'slide-in-from-top') && (0, _runtime.ax)(["_j7hqqshu"]), (!isExiting && enteringAnimation === 'slide-out-from-top' || isExiting && exitingAnimation === 'slide-out-from-top') && (0, _runtime.ax)(["_j7hq7ri4"]), (!isExiting && enteringAnimation === 'slide-in-from-right' || isExiting && exitingAnimation === 'slide-in-from-right') && (0, _runtime.ax)(["_j7hqdfjr"]), (!isExiting && enteringAnimation === 'slide-out-from-right' || isExiting && exitingAnimation === 'slide-out-from-right') && (0, _runtime.ax)(["_j7hqonfj"]), (!isExiting && enteringAnimation === 'slide-in-from-bottom' || isExiting && exitingAnimation === 'slide-in-from-bottom') && (0, _runtime.ax)(["_j7hq1liq"]), (!isExiting && enteringAnimation === 'slide-out-from-bottom' || isExiting && exitingAnimation === 'slide-out-from-bottom') && (0, _runtime.ax)(["_j7hqhnf1"]), (!isExiting && enteringAnimation === 'slide-in-from-left' || isExiting && exitingAnimation === 'slide-in-from-left') && (0, _runtime.ax)(["_j7hq1bh1"]), (!isExiting && enteringAnimation === 'slide-out-from-left' || isExiting && exitingAnimation === 'slide-out-from-left') && (0, _runtime.ax)(["_j7hqj08w"]), (!isExiting && enteringAnimation === 'fade-in-from-top' || isExiting && exitingAnimation === 'fade-in-from-top') && (0, _runtime.ax)(["_j7hq2iua"]), (!isExiting && enteringAnimation === 'fade-out-from-top' || isExiting && exitingAnimation === 'fade-out-from-top') && (0, _runtime.ax)(["_j7hq39va"]), (!isExiting && enteringAnimation === 'fade-in-from-left' || isExiting && exitingAnimation === 'fade-in-from-left') && (0, _runtime.ax)(["_j7hq15m2"]), (!isExiting && enteringAnimation === 'fade-out-from-left' || isExiting && exitingAnimation === 'fade-out-from-left') && (0, _runtime.ax)(["_j7hq1yiv"]), (!isExiting && enteringAnimation === 'fade-in-from-bottom' || isExiting && exitingAnimation === 'fade-in-from-bottom') && (0, _runtime.ax)(["_j7hq1w00"]), (!isExiting && enteringAnimation === 'fade-out-from-bottom' || isExiting && exitingAnimation === 'fade-out-from-bottom') && (0, _runtime.ax)(["_j7hqzy3z"]), (!isExiting && enteringAnimation === 'fade-in-from-right' || isExiting && exitingAnimation === 'fade-in-from-right') && (0, _runtime.ax)(["_j7hqpqak"]), (!isExiting && enteringAnimation === 'fade-out-from-right' || isExiting && exitingAnimation === 'fade-out-from-right') && (0, _runtime.ax)(["_j7hq1ebg"]), (!isExiting && enteringAnimation === 'fade-in-from-top-constant' || isExiting && exitingAnimation === 'fade-in-from-top-constant') && (0, _runtime.ax)(["_j7hqm2e2"]), (!isExiting && enteringAnimation === 'fade-out-from-top-constant' || isExiting && exitingAnimation === 'fade-out-from-top-constant') && (0, _runtime.ax)(["_j7hq97jn"]), (!isExiting && enteringAnimation === 'fade-in-from-left-constant' || isExiting && exitingAnimation === 'fade-in-from-left-constant') && (0, _runtime.ax)(["_j7hqovgq"]), (!isExiting && enteringAnimation === 'fade-out-from-left-constant' || isExiting && exitingAnimation === 'fade-out-from-left-constant') && (0, _runtime.ax)(["_j7hq15do"]), (!isExiting && enteringAnimation === 'fade-in-from-bottom-constant' || isExiting && exitingAnimation === 'fade-in-from-bottom-constant') && (0, _runtime.ax)(["_j7hq797a"]), (!isExiting && enteringAnimation === 'fade-out-from-bottom-constant' || isExiting && exitingAnimation === 'fade-out-from-bottom-constant') && (0, _runtime.ax)(["_j7hqwo7r"]), (!isExiting && enteringAnimation === 'fade-in-from-right-constant' || isExiting && exitingAnimation === 'fade-in-from-right-constant') && (0, _runtime.ax)(["_j7hqt8u5"]), (!isExiting && enteringAnimation === 'fade-out-from-right-constant' || isExiting && exitingAnimation === 'fade-out-from-right-constant') && (0, _runtime.ax)(["_j7hq1pgp"])]) : '',
    style: {
      animationDelay: "".concat(delay, "ms")
    }
  }, state);
};
var _default = exports.default = EnteringMotion;