@atlaskit/motion
Version:
A set of utilities to apply motion in your application.
233 lines (224 loc) • 10.9 kB
JavaScript
/* motion.tsx generated by @compiled/babel-plugin v0.39.1 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Reanimate = void 0;
require("./motion.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _css = require("@atlaskit/css");
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _convertToMs = require("../utils/convert-to-ms");
var _getDurationMs = require("../utils/get-duration-ms");
var _isReducedMotion = require("../utils/is-reduced-motion");
var _resolveMotionToken = require("../utils/resolve-motion-token");
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); }
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) { (0, _defineProperty2.default)(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; }
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.
*/
var Reanimate = exports.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__*/(0, _react.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 = (0, _staggeredEntrance.useStaggeredEntrance)();
var _useExitingPersistenc = (0, _exitingPersistence.useExitingPersistence)(),
isExiting = _useExitingPersistenc.isExiting,
onExitFinished = _useExitingPersistenc.onFinish,
appear = _useExitingPersistenc.appear;
var staggeredDelay = isExiting ? 0 : staggered.delay;
var staggedIsReady = staggered.isReady;
var _useState = (0, _react.useState)(appear ? staggedIsReady && !staggeredDelay ? 'entering' : 'init' : 'idle'),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
var elementRef = (0, _react.useRef)(null);
var reanimateRef = (0, _react.useRef)();
var animationRef = (0, _react.useRef)();
var staggeredEntryRef = (0, _react.useRef)();
(0, _react.useEffect)(function () {
if (isExiting) {
setState('exiting');
}
}, [isExiting]);
// Handles staggered entry
(0, _react.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 = (0, _react.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]);
(0, _react.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 ((0, _isReducedMotion.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 = (0, _getDurationMs.getDurationMs)((0, _resolveMotionToken.resolveMotionToken)(elementRef.current.style.animation));
animationDuration = animationTimings.duration;
animationDelay = animationTimings.delay;
} else {
// Custom motion
var _styles = window.getComputedStyle(elementRef.current);
if (_styles.animationDuration) {
animationDuration = (0, _convertToMs.convertToMs)(_styles.animationDuration);
}
if (_styles.animationDelay) {
animationDelay = (0, _convertToMs.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]);
(0, _react.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.default.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: (0, _runtime.ax)([hasAnimationStyles && styles.base, state === 'init' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting, (0, _css.cx)(xcss, customAnimation)]),
ref: (0, _mergeRefs.default)([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);
});
var _default = exports.default = Motion;