84 lines
2.6 KiB
JavaScript
84 lines
2.6 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
Object.defineProperty(exports, "MessageBarMotion", {
|
|
enumerable: true,
|
|
get: function() {
|
|
return MessageBarMotion;
|
|
}
|
|
});
|
|
const _reactmotion = require("@fluentui/react-motion");
|
|
/**
|
|
* Generates a motion atom object for a fade in or fade out.
|
|
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
|
|
* @param duration - The duration of the motion in milliseconds.
|
|
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
|
|
* @param fromValue - The starting opacity value. Defaults to 0.
|
|
* @returns A motion atom object with opacity keyframes and the supplied duration and easing.
|
|
*/ const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromValue = 0 })=>{
|
|
const keyframes = [
|
|
{
|
|
opacity: fromValue
|
|
},
|
|
{
|
|
opacity: 1
|
|
}
|
|
];
|
|
if (direction === 'exit') {
|
|
keyframes.reverse();
|
|
}
|
|
return {
|
|
keyframes,
|
|
duration,
|
|
easing
|
|
};
|
|
};
|
|
/**
|
|
* Generates a motion atom object for an X or Y translation, from a specified distance to zero.
|
|
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
|
|
* @param axis - The axis of the translation: 'X' or 'Y'.
|
|
* @param fromValue - The starting position of the slide; it can be a percentage or pixels.
|
|
* @param duration - The duration of the motion in milliseconds.
|
|
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.
|
|
*/ const slideAtom = ({ direction, axis, fromValue, duration, easing = _reactmotion.motionTokens.curveDecelerateMid })=>{
|
|
const keyframes = [
|
|
{
|
|
transform: `translate${axis}(${fromValue})`
|
|
},
|
|
{
|
|
transform: `translate${axis}(0)`
|
|
}
|
|
];
|
|
if (direction === 'exit') {
|
|
keyframes.reverse();
|
|
}
|
|
return {
|
|
keyframes,
|
|
duration,
|
|
easing
|
|
};
|
|
};
|
|
const MessageBarMotion = (0, _reactmotion.createPresenceComponent)(({ animate })=>{
|
|
const duration = _reactmotion.motionTokens.durationGentle;
|
|
return {
|
|
enter: animate === 'both' ? [
|
|
fadeAtom({
|
|
direction: 'enter',
|
|
duration
|
|
}),
|
|
slideAtom({
|
|
direction: 'enter',
|
|
axis: 'Y',
|
|
fromValue: '-100%',
|
|
duration
|
|
})
|
|
] : [],
|
|
// Always exit with a fade
|
|
exit: fadeAtom({
|
|
direction: 'exit',
|
|
duration
|
|
})
|
|
};
|
|
});
|