@material-ui/core
Version:
React components that implement Google's Material Design.
84 lines (76 loc) • 4.04 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
/* eslint-disable no-restricted-globals */
import warning from 'warning'; // 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://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
};
export var formatMs = function formatMs(milliseconds) {
return "".concat(Math.round(milliseconds), "ms");
};
export var isString = function isString(value) {
return typeof value === 'string';
};
export var isNumber = function isNumber(value) {
return !isNaN(parseFloat(value));
};
/**
* @param {string|Array} props
* @param {object} param
* @param {string} param.prop
* @param {number} param.duration
* @param {string} param.easing
* @param {number} param.delay
*/
export default {
easing: easing,
duration: duration,
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 ? duration.standard : _options$duration,
_options$easing = options.easing,
easingOption = _options$easing === void 0 ? easing.easeInOut : _options$easing,
_options$delay = options.delay,
delay = _options$delay === void 0 ? 0 : _options$delay,
other = _objectWithoutProperties(options, ["duration", "easing", "delay"]);
process.env.NODE_ENV !== "production" ? warning(isString(props) || Array.isArray(props), 'Material-UI: argument "props" must be a string or Array.') : void 0;
process.env.NODE_ENV !== "production" ? warning(isNumber(durationOption) || isString(durationOption), "Material-UI: argument \"duration\" must be a number or a string but found ".concat(durationOption, ".")) : void 0;
process.env.NODE_ENV !== "production" ? warning(isString(easingOption), 'Material-UI: argument "easing" must be a string.') : void 0;
process.env.NODE_ENV !== "production" ? warning(isNumber(delay) || isString(delay), 'Material-UI: argument "delay" must be a number or a string.') : void 0;
process.env.NODE_ENV !== "production" ? warning(Object.keys(other).length === 0, "Material-UI: unrecognized argument(s) [".concat(Object.keys(other).join(','), "]")) : void 0;
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(',');
},
getAutoHeightDuration: 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);
}
};