97 lines
3.9 KiB
JavaScript
97 lines
3.9 KiB
JavaScript
'use client';
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
MOTION_DEFINITION: function() {
|
|
return MOTION_DEFINITION;
|
|
},
|
|
createMotionComponent: function() {
|
|
return createMotionComponent;
|
|
}
|
|
});
|
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
const _useAnimateAtoms = require("../hooks/useAnimateAtoms");
|
|
const _useMotionImperativeRef = require("../hooks/useMotionImperativeRef");
|
|
const _useIsReducedMotion = require("../hooks/useIsReducedMotion");
|
|
const _useChildElement = require("../utils/useChildElement");
|
|
const _MotionBehaviourContext = require("../contexts/MotionBehaviourContext");
|
|
const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
|
|
function createMotionComponent(value) {
|
|
const Atom = (props)=>{
|
|
'use no memo';
|
|
const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
|
|
const params = _rest;
|
|
const [child, childRef] = (0, _useChildElement.useChildElement)(children);
|
|
const handleRef = (0, _useMotionImperativeRef.useMotionImperativeRef)(imperativeRef);
|
|
const skipMotions = (0, _MotionBehaviourContext.useMotionBehaviourContext)() === 'skip';
|
|
const optionsRef = _react.useRef({
|
|
skipMotions,
|
|
params
|
|
});
|
|
const animateAtoms = (0, _useAnimateAtoms.useAnimateAtoms)();
|
|
const isReducedMotion = (0, _useIsReducedMotion.useIsReducedMotion)();
|
|
const onMotionStart = (0, _reactutilities.useEventCallback)(()=>{
|
|
onMotionStartProp === null || onMotionStartProp === void 0 ? void 0 : onMotionStartProp(null);
|
|
});
|
|
const onMotionFinish = (0, _reactutilities.useEventCallback)(()=>{
|
|
onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);
|
|
});
|
|
const onMotionCancel = (0, _reactutilities.useEventCallback)(()=>{
|
|
onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
|
|
});
|
|
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
// Heads up!
|
|
// We store the params in a ref to avoid re-rendering the component when the params change.
|
|
optionsRef.current = {
|
|
skipMotions,
|
|
params
|
|
};
|
|
});
|
|
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
const element = childRef.current;
|
|
if (element) {
|
|
const atoms = typeof value === 'function' ? value({
|
|
element,
|
|
...optionsRef.current.params
|
|
}) : value;
|
|
onMotionStart();
|
|
const handle = animateAtoms(element, atoms, {
|
|
isReducedMotion: isReducedMotion()
|
|
});
|
|
handleRef.current = handle;
|
|
handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
|
|
if (optionsRef.current.skipMotions) {
|
|
handle.finish();
|
|
}
|
|
return ()=>{
|
|
handle.cancel();
|
|
};
|
|
}
|
|
}, [
|
|
animateAtoms,
|
|
childRef,
|
|
handleRef,
|
|
isReducedMotion,
|
|
onMotionFinish,
|
|
onMotionStart,
|
|
onMotionCancel
|
|
]);
|
|
return child;
|
|
};
|
|
return Object.assign(Atom, {
|
|
// Heads up!
|
|
// Always normalize it to a function to simplify types
|
|
[MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
|
|
});
|
|
}
|