116 lines
4.6 KiB
JavaScript
116 lines
4.6 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;
|
|
},
|
|
createCollapseDelayedPresence: function() {
|
|
return createCollapseDelayedPresence;
|
|
},
|
|
createCollapsePresence: function() {
|
|
return createCollapsePresence;
|
|
}
|
|
});
|
|
const _reactmotion = require("@fluentui/react-motion");
|
|
const _collapseatoms = require("./collapse-atoms");
|
|
const _fadeatom = require("../../atoms/fade-atom");
|
|
const createCollapseDelayedPresence = ({ // enter
|
|
enterSizeDuration = _reactmotion.motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry
|
|
exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
|
|
// ----- ENTER -----
|
|
// The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
|
|
const enterAtoms = [
|
|
(0, _collapseatoms.sizeEnterAtom)({
|
|
orientation,
|
|
duration: enterSizeDuration,
|
|
easing: enterEasing,
|
|
element
|
|
}),
|
|
(0, _collapseatoms.whitespaceAtom)({
|
|
direction: 'enter',
|
|
orientation,
|
|
duration: enterSizeDuration,
|
|
easing: enterEasing
|
|
})
|
|
];
|
|
// Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
if (animateOpacity) {
|
|
enterAtoms.push({
|
|
...(0, _fadeatom.fadeAtom)({
|
|
direction: 'enter',
|
|
duration: enterOpacityDuration,
|
|
easing: enterEasing
|
|
}),
|
|
delay: enterDelay,
|
|
fill: 'both'
|
|
});
|
|
}
|
|
// ----- EXIT -----
|
|
// The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
|
|
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
|
|
}));
|
|
}
|
|
exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
|
|
orientation,
|
|
duration: exitSizeDuration,
|
|
easing: exitEasing,
|
|
element,
|
|
delay: exitDelay
|
|
}), (0, _collapseatoms.whitespaceAtom)({
|
|
direction: 'exit',
|
|
orientation,
|
|
duration: exitSizeDuration,
|
|
easing: exitEasing,
|
|
delay: exitDelay
|
|
}));
|
|
return {
|
|
enter: enterAtoms,
|
|
exit: exitAtoms
|
|
};
|
|
};
|
|
const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// Implement a regular collapse as a special case of the delayed collapse,
|
|
// where the delays are zero, and the size and opacity durations are equal.
|
|
createCollapseDelayedPresence({
|
|
enterSizeDuration: enterDuration,
|
|
enterEasing,
|
|
exitSizeDuration: exitDuration,
|
|
exitEasing
|
|
});
|
|
const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
|
|
const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
|
|
enterDuration: _reactmotion.motionTokens.durationFast
|
|
}));
|
|
const CollapseRelaxed = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
|
|
enterDuration: _reactmotion.motionTokens.durationSlower
|
|
}));
|
|
const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(createCollapseDelayedPresence({
|
|
enterSizeDuration: _reactmotion.motionTokens.durationNormal,
|
|
enterOpacityDuration: _reactmotion.motionTokens.durationSlower,
|
|
enterDelay: _reactmotion.motionTokens.durationNormal,
|
|
exitDelay: _reactmotion.motionTokens.durationSlower,
|
|
enterEasing: _reactmotion.motionTokens.curveEasyEase
|
|
}));
|