@atlaskit/motion
Version:
A set of utilities to apply motion in your application.
126 lines (120 loc) • 10 kB
JavaScript
/* keyframes-motion.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./keyframes-motion.compiled.css";
import React, { useEffect, useState } from 'react';
import { ax, ix } from '@compiled/react/runtime';
import { durations } from '../utils/durations';
import { exitingDurations } from '../utils/exiting-durations';
import { isReducedMotion } from '../utils/is-reduced-motion';
import { useSetTimeout } from '../utils/use-set-timeout';
import { useExitingPersistence } from './exiting-persistence';
import { useStaggeredEntrance } from './staggered-entrance';
const zoomIn = null;
const zoomOut = null;
const fadeIn = null;
const fadeOut = null;
const fadeInFromTop = null;
const fadeOutFromTop = null;
const fadeInFromLeft = null;
const fadeOutFromLeft = null;
const fadeInFromBottom = null;
const fadeOutFromBottom = null;
const fadeInFromRight = null;
const fadeOutFromRight = null;
const fadeInFromTopConstant = null;
const fadeOutFromTopConstant = null;
const fadeInFromLeftConstant = null;
const fadeOutFromLeftConstant = null;
const fadeInFromBottomConstant = null;
const fadeOutFromBottomConstant = null;
const fadeInFromRightConstant = null;
const fadeOutFromRightConstant = null;
const slideInFromTop = null;
const slideOutFromTop = null;
const slideInFromRight = null;
const slideOutFromRight = null;
const slideInFromBottom = null;
const slideOutFromBottom = null;
const slideInFromLeft = null;
const 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.
*/
const EnteringMotion = ({
children,
animationTimingFunction,
animationTimingFunctionExiting = animationTimingFunction,
enteringAnimation,
exitingAnimation = enteringAnimation,
isPaused,
onFinish: onFinishMotion,
duration = 'large'
}) => {
const staggered = useStaggeredEntrance();
const {
isExiting,
onFinish: onExitFinished,
appear
} = useExitingPersistence();
const setTimeout = useSetTimeout();
const paused = isPaused || !staggered.isReady;
const delay = isExiting ? 0 : staggered.delay;
const state = isExiting ? 'exiting' : 'entering';
const [hasAnimationStyles, setHasAnimationStyles] = useState(appear);
useEffect(() => {
// Tracking this to prevent changing state on an unmounted component
let 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.
*/
const onAnimationEnd = () => {
if (state === 'exiting') {
// Updates the `ExitingPersistence` to remove this child
onExitFinished === null || onExitFinished === void 0 ? void 0 : onExitFinished();
}
if (!isCancelled) {
setHasAnimationStyles(false);
}
onFinishMotion === null || onFinishMotion === void 0 ? 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 () => {
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-40-out' && ax(["_1pgl5y64"]), !isExiting && animationTimingFunction === 'ease-in-60-out' && ax(["_1pgl1ddy"]), !isExiting && animationTimingFunction === 'ease-in-80-out' && ax(["_1pglannl"]), !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-40-out' && ax(["_1pgl5y64"]), isExiting && animationTimingFunctionExiting === 'ease-in-60-out' && ax(["_1pgl1ddy"]), isExiting && animationTimingFunctionExiting === 'ease-in-80-out' && ax(["_1pglannl"]), 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: `${delay}ms`
}
}, state);
};
export default EnteringMotion;