@atlaskit/motion
Version:
A set of utilities to apply motion in your application.
130 lines (124 loc) • 10.1 kB
JavaScript
/* keyframes-motion.tsx generated by @compiled/babel-plugin v0.36.1 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./keyframes-motion.compiled.css";
import React, { useEffect, useState } from 'react';
import { ax, ix } from '@compiled/react/runtime';
import { isReducedMotion } from '../utils/accessibility';
import { durations, exitingDurations } from '../utils/durations';
import { useSetTimeout } from '../utils/timer-hooks';
import { useExitingPersistence } from './exiting-persistence';
import { useStaggeredEntrance } from './staggered-entrance';
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 = useStaggeredEntrance();
var _useExitingPersistenc = useExitingPersistence(),
isExiting = _useExitingPersistenc.isExiting,
onExitFinished = _useExitingPersistenc.onFinish,
appear = _useExitingPersistenc.appear;
var setTimeout = useSetTimeout();
var paused = isPaused || !staggered.isReady;
var delay = isExiting ? 0 : staggered.delay;
var state = isExiting ? 'exiting' : 'entering';
var _useState = useState(appear),
_useState2 = _slicedToArray(_useState, 2),
hasAnimationStyles = _useState2[0],
setHasAnimationStyles = _useState2[1];
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 (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 ? exitingDurations[duration] : 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 ? ax([ax(["_1o51eoah _1y0co91m _1bumglyw _sedtglyw"]), paused && ax(["_1y0ctrqk"]), duration === 'small' && ax(["_5sag1yx9"]), duration === 'medium' && ax(["_5sag1ttt"]), duration === 'large' && ax(["_5sagpwmj"]), isExiting && duration === 'small' && ax(["_5sag14ed"]), isExiting && duration === 'medium' && ax(["_5sagluct"]), isExiting && duration === 'large' && ax(["_5sag1ttt"]), isExiting && ax(["_ju255cps _1o51q7pw"]), !isExiting && animationTimingFunction === 'linear' && ax(["_1pglp3kn"]), !isExiting && animationTimingFunction === 'ease-out' && ax(["_1pgldkwg"]), !isExiting && animationTimingFunction === 'ease-in' && ax(["_1pgl1nzg"]), !isExiting && animationTimingFunction === 'ease-in-out' && ax(["_1pgl1fu8"]), isExiting && animationTimingFunction === 'linear' && ax(["_1pglp3kn"]), isExiting && animationTimingFunctionExiting === 'ease-out' && ax(["_1pgldkwg"]), isExiting && animationTimingFunctionExiting === 'ease-in' && ax(["_1pgl1nzg"]), isExiting && animationTimingFunctionExiting === 'ease-in-out' && ax(["_1pgl1fu8"]), (!isExiting && enteringAnimation === 'fade-in' || isExiting && exitingAnimation === 'fade-in') && ax(["_j7hq1cgr"]), (!isExiting && enteringAnimation === 'fade-out' || isExiting && exitingAnimation === 'fade-out') && ax(["_j7hq1lln"]), (!isExiting && enteringAnimation === 'zoom-in' || isExiting && exitingAnimation === 'zoom-in') && ax(["_j7hqe8p0"]), (!isExiting && enteringAnimation === 'zoom-out' || isExiting && exitingAnimation === 'zoom-out') && ax(["_j7hqy6ql"]), (!isExiting && enteringAnimation === 'slide-in-from-top' || isExiting && exitingAnimation === 'slide-in-from-top') && ax(["_j7hqqshu"]), (!isExiting && enteringAnimation === 'slide-out-from-top' || isExiting && exitingAnimation === 'slide-out-from-top') && ax(["_j7hq7ri4"]), (!isExiting && enteringAnimation === 'slide-in-from-right' || isExiting && exitingAnimation === 'slide-in-from-right') && ax(["_j7hqdfjr"]), (!isExiting && enteringAnimation === 'slide-out-from-right' || isExiting && exitingAnimation === 'slide-out-from-right') && ax(["_j7hqonfj"]), (!isExiting && enteringAnimation === 'slide-in-from-bottom' || isExiting && exitingAnimation === 'slide-in-from-bottom') && ax(["_j7hq1liq"]), (!isExiting && enteringAnimation === 'slide-out-from-bottom' || isExiting && exitingAnimation === 'slide-out-from-bottom') && ax(["_j7hqhnf1"]), (!isExiting && enteringAnimation === 'slide-in-from-left' || isExiting && exitingAnimation === 'slide-in-from-left') && ax(["_j7hq1bh1"]), (!isExiting && enteringAnimation === 'slide-out-from-left' || isExiting && exitingAnimation === 'slide-out-from-left') && ax(["_j7hqj08w"]), (!isExiting && enteringAnimation === 'fade-in-from-top' || isExiting && exitingAnimation === 'fade-in-from-top') && ax(["_j7hq2iua"]), (!isExiting && enteringAnimation === 'fade-out-from-top' || isExiting && exitingAnimation === 'fade-out-from-top') && ax(["_j7hq39va"]), (!isExiting && enteringAnimation === 'fade-in-from-left' || isExiting && exitingAnimation === 'fade-in-from-left') && ax(["_j7hq15m2"]), (!isExiting && enteringAnimation === 'fade-out-from-left' || isExiting && exitingAnimation === 'fade-out-from-left') && ax(["_j7hq1yiv"]), (!isExiting && enteringAnimation === 'fade-in-from-bottom' || isExiting && exitingAnimation === 'fade-in-from-bottom') && ax(["_j7hq1w00"]), (!isExiting && enteringAnimation === 'fade-out-from-bottom' || isExiting && exitingAnimation === 'fade-out-from-bottom') && ax(["_j7hqzy3z"]), (!isExiting && enteringAnimation === 'fade-in-from-right' || isExiting && exitingAnimation === 'fade-in-from-right') && ax(["_j7hqpqak"]), (!isExiting && enteringAnimation === 'fade-out-from-right' || isExiting && exitingAnimation === 'fade-out-from-right') && ax(["_j7hq1ebg"]), (!isExiting && enteringAnimation === 'fade-in-from-top-constant' || isExiting && exitingAnimation === 'fade-in-from-top-constant') && ax(["_j7hqm2e2"]), (!isExiting && enteringAnimation === 'fade-out-from-top-constant' || isExiting && exitingAnimation === 'fade-out-from-top-constant') && ax(["_j7hq97jn"]), (!isExiting && enteringAnimation === 'fade-in-from-left-constant' || isExiting && exitingAnimation === 'fade-in-from-left-constant') && ax(["_j7hqovgq"]), (!isExiting && enteringAnimation === 'fade-out-from-left-constant' || isExiting && exitingAnimation === 'fade-out-from-left-constant') && ax(["_j7hq15do"]), (!isExiting && enteringAnimation === 'fade-in-from-bottom-constant' || isExiting && exitingAnimation === 'fade-in-from-bottom-constant') && ax(["_j7hq797a"]), (!isExiting && enteringAnimation === 'fade-out-from-bottom-constant' || isExiting && exitingAnimation === 'fade-out-from-bottom-constant') && ax(["_j7hqwo7r"]), (!isExiting && enteringAnimation === 'fade-in-from-right-constant' || isExiting && exitingAnimation === 'fade-in-from-right-constant') && ax(["_j7hqt8u5"]), (!isExiting && enteringAnimation === 'fade-out-from-right-constant' || isExiting && exitingAnimation === 'fade-out-from-right-constant') && ax(["_j7hq1pgp"])]) : '',
style: {
animationDelay: "".concat(delay, "ms")
}
}, state);
};
export default EnteringMotion;