@atlaskit/motion
Version:
A set of utilities to apply motion in your application.
224 lines (216 loc) • 9.59 kB
JavaScript
/* motion.tsx generated by @compiled/babel-plugin v0.39.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./motion.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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';
var 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 var 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.
*/
var Motion = /*#__PURE__*/forwardRef(function (_ref, ref) {
var children = _ref.children,
enteringAnimation = _ref.enteringAnimation,
enteringAnimationXcss = _ref.enteringAnimationXcss,
exitingAnimation = _ref.exitingAnimation,
exitingAnimationXcss = _ref.exitingAnimationXcss,
onFinishMotion = _ref.onFinish,
xcss = _ref.xcss,
styleProp = _ref.style,
testId = _ref.testId;
var staggered = useStaggeredEntrance();
var _useExitingPersistenc = useExitingPersistence(),
isExiting = _useExitingPersistenc.isExiting,
onExitFinished = _useExitingPersistenc.onFinish,
appear = _useExitingPersistenc.appear;
var staggeredDelay = isExiting ? 0 : staggered.delay;
var staggedIsReady = staggered.isReady;
var _useState = useState(appear ? staggedIsReady && !staggeredDelay ? 'entering' : 'init' : 'idle'),
_useState2 = _slicedToArray(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
var elementRef = useRef(null);
var reanimateRef = useRef();
var animationRef = useRef();
var staggeredEntryRef = useRef();
useEffect(function () {
if (isExiting) {
setState('exiting');
}
}, [isExiting]);
// Handles staggered entry
useEffect(function () {
if (state !== 'init') return;
// We delay the entry animation by the stagger delay
staggeredEntryRef.current = setTimeout(function () {
setState('entering');
}, staggeredDelay);
return function () {
if (staggeredEntryRef.current) {
clearTimeout(staggeredEntryRef.current);
}
};
}, [state, staggedIsReady, staggeredDelay]);
/**
* Updates relevant state.
* Called when the animation is finished, or immediately with reduced motion.
*/
var onAnimationEnd = useCallback(function (state, cancelled) {
// We are done animating, so we set the state to idle
var newState = 'idle';
if (state === 'exiting') {
if (!reanimateRef.current) {
// Updates the `ExitingPersistence` to remove this child
onExitFinished === null || onExitFinished === void 0 || onExitFinished();
}
onFinishMotion === null || onFinishMotion === void 0 || onFinishMotion('exiting');
}
if (state === 'entering') {
onFinishMotion === null || onFinishMotion === 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(function () {
// Tracking this to prevent changing state on an unmounted component
var 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;
}
var animationDuration = 0;
var animationDelay = 0;
if (state === 'entering' || state === 'exiting') {
if (elementRef.current) {
if (elementRef.current.style.animation) {
// Motion token
var animationTimings = getDurationMs(resolveMotionToken(elementRef.current.style.animation));
animationDuration = animationTimings.duration;
animationDelay = animationTimings.delay;
} else {
// Custom motion
var _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(function () {
return onAnimationEnd(state, isCancelled);
}, animationDuration + animationDelay);
} else if (state === 'entering' && (enteringAnimation || enteringAnimationXcss)) {
animationRef.current = setTimeout(function () {
return onAnimationEnd(state, isCancelled);
}, animationDuration + animationDelay);
}
return function () {
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, function () {
return {
reanimate: function 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');
}
}
};
});
var style = {};
var customAnimation;
if (state === 'entering') {
if (enteringAnimation) {
style.animation = "".concat(enteringAnimation, " backwards");
} else if (enteringAnimationXcss) {
customAnimation = enteringAnimationXcss;
}
} else if (state === 'exiting') {
if (exitingAnimation) {
style.animation = "".concat(exitingAnimation, " forwards");
} else if (exitingAnimationXcss) {
customAnimation = exitingAnimationXcss;
}
}
var 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 ? _objectSpread(_objectSpread({}, styleProp), style) : undefined,
"data-testid": testId
}, children);
});
export default Motion;