97 lines
4.4 KiB
JavaScript
97 lines
4.4 KiB
JavaScript
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
|
|
// to learn the context in which each easing should be used.
|
|
export var easing = {
|
|
// This is the most common easing curve.
|
|
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
// Objects enter the screen at full velocity from off-screen and
|
|
// slowly decelerate to a resting point.
|
|
easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
|
|
// Objects leave the screen at full velocity. They do not decelerate when off-screen.
|
|
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
// The sharp curve is used by objects that may return to the screen at any time.
|
|
sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
|
|
};
|
|
|
|
// Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
|
|
// to learn when use what timing
|
|
export var duration = {
|
|
shortest: 150,
|
|
shorter: 200,
|
|
short: 250,
|
|
// most basic recommended timing
|
|
standard: 300,
|
|
// this is to be used in complex animations
|
|
complex: 375,
|
|
// recommended when something is entering screen
|
|
enteringScreen: 225,
|
|
// recommended when something is leaving screen
|
|
leavingScreen: 195
|
|
};
|
|
function formatMs(milliseconds) {
|
|
return "".concat(Math.round(milliseconds), "ms");
|
|
}
|
|
function getAutoHeightDuration(height) {
|
|
if (!height) {
|
|
return 0;
|
|
}
|
|
var constant = height / 36;
|
|
|
|
// https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
|
|
return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
|
|
}
|
|
export default function createTransitions(inputTransitions) {
|
|
var mergedEasing = _extends({}, easing, inputTransitions.easing);
|
|
var mergedDuration = _extends({}, duration, inputTransitions.duration);
|
|
var create = function create() {
|
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['all'];
|
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
var _options$duration = options.duration,
|
|
durationOption = _options$duration === void 0 ? mergedDuration.standard : _options$duration,
|
|
_options$easing = options.easing,
|
|
easingOption = _options$easing === void 0 ? mergedEasing.easeInOut : _options$easing,
|
|
_options$delay = options.delay,
|
|
delay = _options$delay === void 0 ? 0 : _options$delay,
|
|
other = _objectWithoutProperties(options, ["duration", "easing", "delay"]);
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
var isString = function isString(value) {
|
|
return typeof value === 'string';
|
|
};
|
|
// IE11 support, replace with Number.isNaN
|
|
// eslint-disable-next-line no-restricted-globals
|
|
var isNumber = function isNumber(value) {
|
|
return !isNaN(parseFloat(value));
|
|
};
|
|
if (!isString(props) && !Array.isArray(props)) {
|
|
console.error('MUI: Argument "props" must be a string or Array.');
|
|
}
|
|
if (!isNumber(durationOption) && !isString(durationOption)) {
|
|
console.error("MUI: Argument \"duration\" must be a number or a string but found ".concat(durationOption, "."));
|
|
}
|
|
if (!isString(easingOption)) {
|
|
console.error('MUI: Argument "easing" must be a string.');
|
|
}
|
|
if (!isNumber(delay) && !isString(delay)) {
|
|
console.error('MUI: Argument "delay" must be a number or a string.');
|
|
}
|
|
if (_typeof(options) !== 'object') {
|
|
console.error(['MUI: Secong argument of transition.create must be an object.', "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join('\n'));
|
|
}
|
|
if (Object.keys(other).length !== 0) {
|
|
console.error("MUI: Unrecognized argument(s) [".concat(Object.keys(other).join(','), "]."));
|
|
}
|
|
}
|
|
return (Array.isArray(props) ? props : [props]).map(function (animatedProp) {
|
|
return "".concat(animatedProp, " ").concat(typeof durationOption === 'string' ? durationOption : formatMs(durationOption), " ").concat(easingOption, " ").concat(typeof delay === 'string' ? delay : formatMs(delay));
|
|
}).join(',');
|
|
};
|
|
return _extends({
|
|
getAutoHeightDuration: getAutoHeightDuration,
|
|
create: create
|
|
}, inputTransitions, {
|
|
easing: mergedEasing,
|
|
duration: mergedDuration
|
|
});
|
|
} |