@atlaskit/motion
Version:
A set of utilities to apply motion in your application.
216 lines (208 loc) • 8.23 kB
JavaScript
/* motion.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./motion.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { cx } from '@atlaskit/css';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import { convertToMs } from '../utils/convert-to-ms';
import { getDurationMs } from '../utils/get-duration-ms';
import { isReducedMotion } from '../utils/is-reduced-motion';
import { resolveMotionToken } from '../utils/resolve-motion-token';
import { useExitingPersistence } from './exiting-persistence';
import { useStaggeredEntrance } from './staggered-entrance';
const styles = {
base: "_1y0co91m _1bumglyw _sedtglyw",
hidden: "_3um015vq",
entering: "_1o51eoah",
exiting: "_1o51q7pw"
};
/**
* Supported reanimate values.
* 'enter' will re-enter the animation.
* 'exit-then-enter' will exit the animation and then enter it again.
*/
export let Reanimate = /*#__PURE__*/function (Reanimate) {
Reanimate["enter"] = "enter";
Reanimate["exit_then_enter"] = "exit_then_enter";
return Reanimate;
}({});
/**
* __Motion__
*
* A motion primitive that can be used to animate the entry and exit of components.
*/
const Motion = /*#__PURE__*/forwardRef(({
children,
enteringAnimation,
enteringAnimationXcss,
exitingAnimation,
exitingAnimationXcss,
onFinish: onFinishMotion,
xcss,
style: styleProp,
testId
}, ref) => {
const staggered = useStaggeredEntrance();
const {
isExiting,
onFinish: onExitFinished,
appear
} = useExitingPersistence();
const staggeredDelay = isExiting ? 0 : staggered.delay;
const staggedIsReady = staggered.isReady;
const [state, setState] = useState(appear ? staggedIsReady && !staggeredDelay ? 'entering' : 'init' : 'idle');
const elementRef = useRef(null);
const reanimateRef = useRef();
const animationRef = useRef();
const staggeredEntryRef = useRef();
useEffect(() => {
if (isExiting) {
setState('exiting');
}
}, [isExiting]);
// Handles staggered entry
useEffect(() => {
if (state !== 'init') return;
// We delay the entry animation by the stagger delay
staggeredEntryRef.current = setTimeout(() => {
setState('entering');
}, staggeredDelay);
return () => {
if (staggeredEntryRef.current) {
clearTimeout(staggeredEntryRef.current);
}
};
}, [state, staggedIsReady, staggeredDelay]);
/**
* Updates relevant state.
* Called when the animation is finished, or immediately with reduced motion.
*/
const onAnimationEnd = useCallback((state, cancelled) => {
// We are done animating, so we set the state to idle
let newState = 'idle';
if (state === 'exiting') {
if (!reanimateRef.current) {
// Updates the `ExitingPersistence` to remove this child
onExitFinished === null || onExitFinished === void 0 ? void 0 : onExitFinished();
}
onFinishMotion === null || onFinishMotion === void 0 ? void 0 : onFinishMotion('exiting');
}
if (state === 'entering') {
onFinishMotion === null || onFinishMotion === void 0 ? void 0 : onFinishMotion('entering');
}
if (reanimateRef.current === Reanimate.exit_then_enter) {
// We are done exiting, so we set the state to entering
reanimateRef.current = Reanimate.enter;
newState = 'entering';
} else if (reanimateRef.current) {
// We are done reanimating, so we clear the reanimate state
reanimateRef.current = undefined;
}
if (!cancelled) {
setState(newState);
}
// 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]);
useEffect(() => {
// Tracking this to prevent changing state on an unmounted component
let isCancelled = false;
if (!staggedIsReady) {
return;
}
// On initial mount if elements aren't set to animate on appear, we return early and callback
// This only occurs on initial mount, as appear will be true once the component is mounted
if (!appear) {
onFinishMotion && onFinishMotion('entering');
return;
}
// If the state is idle or init, we don't need to do anything
if (state === 'idle' || state === 'init') {
return;
}
// If there is reduced motion or no exit animation, we call the onAnimationEnd function immediately
if (isReducedMotion() || !exitingAnimation && !exitingAnimationXcss) {
onAnimationEnd(state, isCancelled);
return;
}
let animationDuration = 0;
let animationDelay = 0;
if (state === 'entering' || state === 'exiting') {
if (elementRef.current) {
if (elementRef.current.style.animation) {
// Motion token
const animationTimings = getDurationMs(resolveMotionToken(elementRef.current.style.animation));
animationDuration = animationTimings.duration;
animationDelay = animationTimings.delay;
} else {
// Custom motion
const styles = window.getComputedStyle(elementRef.current);
if (styles.animationDuration) {
animationDuration = convertToMs(styles.animationDuration);
}
if (styles.animationDelay) {
animationDelay = convertToMs(styles.animationDelay);
}
}
}
}
// Queue `onAnimationEnd` for after the animation has finished
if (state === 'exiting' && (exitingAnimation || exitingAnimationXcss)) {
animationRef.current = setTimeout(() => onAnimationEnd(state, isCancelled), animationDuration + animationDelay);
} else if (state === 'entering' && (enteringAnimation || enteringAnimationXcss)) {
animationRef.current = setTimeout(() => onAnimationEnd(state, isCancelled), animationDuration + animationDelay);
}
return () => {
isCancelled = true;
if (animationRef.current) {
clearTimeout(animationRef.current);
}
};
// 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
}, [onAnimationEnd, state, exitingAnimation, enteringAnimation, exitingAnimationXcss, enteringAnimationXcss, staggeredDelay, staggedIsReady]);
useImperativeHandle(ref, () => ({
reanimate: value => {
animationRef.current && clearTimeout(animationRef.current);
reanimateRef.current = value;
if (value === Reanimate.exit_then_enter) {
setState('exiting');
} else if (value === Reanimate.enter) {
setState('entering');
}
}
}));
let style = {};
let customAnimation;
if (state === 'entering') {
if (enteringAnimation) {
style.animation = `${enteringAnimation} backwards`;
} else if (enteringAnimationXcss) {
customAnimation = enteringAnimationXcss;
}
} else if (state === 'exiting') {
if (exitingAnimation) {
style.animation = `${exitingAnimation} forwards`;
} else if (exitingAnimationXcss) {
customAnimation = exitingAnimationXcss;
}
}
const hasAnimationStyles = state !== 'idle' && state !== 'init';
return /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
className: ax([hasAnimationStyles && styles.base, state === 'init' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting, cx(xcss, customAnimation)]),
ref: mergeRefs([staggered.ref, elementRef]),
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
style: styleProp || hasAnimationStyles ? {
...styleProp,
...style
} : undefined,
"data-testid": testId
}, children);
});
export default Motion;