134 lines
6.0 KiB
JavaScript
134 lines
6.0 KiB
JavaScript
"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, {
|
|
Collapse: function() {
|
|
return Collapse;
|
|
},
|
|
CollapseDelayed: function() {
|
|
return CollapseDelayed;
|
|
},
|
|
CollapseRelaxed: function() {
|
|
return CollapseRelaxed;
|
|
},
|
|
CollapseSnappy: function() {
|
|
return CollapseSnappy;
|
|
}
|
|
});
|
|
const _reactmotion = require("@fluentui/react-motion");
|
|
const _collapseatoms = require("./collapse-atoms");
|
|
const _fadeatom = require("../../atoms/fade-atom");
|
|
/**
|
|
* Define a presence motion for collapse/expand
|
|
*
|
|
* @param element - The element to apply the collapse motion to
|
|
* @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)
|
|
* @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value
|
|
* @param delay - Time (ms) to delay the entire enter transition. Defaults to 0
|
|
* @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry
|
|
* @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
|
|
* @param exitDelay - Time (ms) to delay the entire exit transition. Defaults to the `delay` param for symmetry
|
|
* @param staggerDelay - Time (ms) offset between the size and opacity animations. Defaults to 0
|
|
* @param exitStaggerDelay - Time (ms) offset between the size and opacity animations on exit. Defaults to the `staggerDelay` param for symmetry
|
|
* @param sizeDuration - Time (ms) for the size animation during enter. Defaults to `duration` for unified timing
|
|
* @param opacityDuration - Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing
|
|
* @param exitSizeDuration - Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing
|
|
* @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing
|
|
* @param animateOpacity - Whether to animate the opacity. Defaults to `true`
|
|
* @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
|
|
* @param outSize - Size for the out state (collapsed). Defaults to `'0px'`
|
|
*/ const collapsePresenceFn = ({ element, // Primary duration controls (simple API)
|
|
duration = _reactmotion.motionTokens.durationNormal, exitDuration = duration, // Granular duration controls with smart defaults (advanced API)
|
|
sizeDuration = duration, opacityDuration = sizeDuration, exitSizeDuration = exitDuration, exitOpacityDuration = exitSizeDuration, // Other timing controls
|
|
easing = _reactmotion.motionTokens.curveEasyEaseMax, delay = 0, exitEasing = easing, exitDelay = delay, staggerDelay = 0, exitStaggerDelay = staggerDelay, // Animation controls
|
|
animateOpacity = true, orientation = 'vertical', outSize = '0px' })=>{
|
|
// ----- ENTER -----
|
|
// The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
|
|
// For enter: size expands first, then opacity fades in after staggerDelay
|
|
const enterAtoms = [
|
|
// Apply global delay to size atom - size expansion starts first
|
|
(0, _collapseatoms.sizeEnterAtom)({
|
|
orientation,
|
|
duration: sizeDuration,
|
|
easing,
|
|
element,
|
|
outSize,
|
|
delay
|
|
}),
|
|
(0, _collapseatoms.whitespaceAtom)({
|
|
direction: 'enter',
|
|
orientation,
|
|
duration: sizeDuration,
|
|
easing,
|
|
delay
|
|
})
|
|
];
|
|
// Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
if (animateOpacity) {
|
|
enterAtoms.push((0, _fadeatom.fadeAtom)({
|
|
direction: 'enter',
|
|
duration: opacityDuration,
|
|
easing,
|
|
delay: delay + staggerDelay
|
|
}));
|
|
}
|
|
// ----- EXIT -----
|
|
// The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
|
|
// For exit: opacity fades out first, then size collapses after exitStaggerDelay
|
|
const exitAtoms = [];
|
|
// Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
if (animateOpacity) {
|
|
exitAtoms.push((0, _fadeatom.fadeAtom)({
|
|
direction: 'exit',
|
|
duration: exitOpacityDuration,
|
|
easing: exitEasing,
|
|
delay: exitDelay
|
|
}));
|
|
}
|
|
exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
|
|
orientation,
|
|
duration: exitSizeDuration,
|
|
easing: exitEasing,
|
|
element,
|
|
delay: exitDelay + exitStaggerDelay,
|
|
outSize
|
|
}), (0, _collapseatoms.whitespaceAtom)({
|
|
direction: 'exit',
|
|
orientation,
|
|
duration: exitSizeDuration,
|
|
easing: exitEasing,
|
|
delay: exitDelay + exitStaggerDelay
|
|
}));
|
|
return {
|
|
enter: enterAtoms,
|
|
exit: exitAtoms
|
|
};
|
|
};
|
|
const Collapse = (0, _reactmotion.createPresenceComponent)(collapsePresenceFn);
|
|
const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
|
|
duration: _reactmotion.motionTokens.durationFast
|
|
});
|
|
const CollapseRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
|
|
duration: _reactmotion.motionTokens.durationSlower
|
|
});
|
|
const CollapseDelayed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
|
|
// Enter timing per motion design spec
|
|
sizeDuration: _reactmotion.motionTokens.durationNormal,
|
|
opacityDuration: _reactmotion.motionTokens.durationSlower,
|
|
staggerDelay: _reactmotion.motionTokens.durationNormal,
|
|
// Exit timing per motion design spec
|
|
exitSizeDuration: _reactmotion.motionTokens.durationNormal,
|
|
exitOpacityDuration: _reactmotion.motionTokens.durationSlower,
|
|
exitStaggerDelay: _reactmotion.motionTokens.durationSlower,
|
|
// Easing per motion design spec
|
|
easing: _reactmotion.motionTokens.curveEasyEase,
|
|
exitEasing: _reactmotion.motionTokens.curveEasyEase
|
|
});
|