UNPKG

4.28 kBJavaScriptView Raw
1"use strict";
2
3var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5Object.defineProperty(exports, "__esModule", {
6 value: true
7});
8exports.default = exports.duration = exports.easing = void 0;
9
10var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
12// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
13// to learn the context in which each easing should be used.
14var easing = {
15 // This is the most common easing curve.
16 easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
17 // Objects enter the screen at full velocity from off-screen and
18 // slowly decelerate to a resting point.
19 easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
20 // Objects leave the screen at full velocity. They do not decelerate when off-screen.
21 easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
22 // The sharp curve is used by objects that may return to the screen at any time.
23 sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
24}; // Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
25// to learn when use what timing
26
27exports.easing = easing;
28var duration = {
29 shortest: 150,
30 shorter: 200,
31 short: 250,
32 // most basic recommended timing
33 standard: 300,
34 // this is to be used in complex animations
35 complex: 375,
36 // recommended when something is entering screen
37 enteringScreen: 225,
38 // recommended when something is leaving screen
39 leavingScreen: 195
40};
41exports.duration = duration;
42
43function formatMs(milliseconds) {
44 return "".concat(Math.round(milliseconds), "ms");
45}
46/**
47 * @param {string|Array} props
48 * @param {object} param
49 * @param {string} param.prop
50 * @param {number} param.duration
51 * @param {string} param.easing
52 * @param {number} param.delay
53 */
54
55
56var _default = {
57 easing: easing,
58 duration: duration,
59 create: function create() {
60 var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['all'];
61 var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
62 var _options$duration = options.duration,
63 durationOption = _options$duration === void 0 ? duration.standard : _options$duration,
64 _options$easing = options.easing,
65 easingOption = _options$easing === void 0 ? easing.easeInOut : _options$easing,
66 _options$delay = options.delay,
67 delay = _options$delay === void 0 ? 0 : _options$delay,
68 other = (0, _objectWithoutProperties2.default)(options, ["duration", "easing", "delay"]);
69
70 if (process.env.NODE_ENV !== 'production') {
71 var isString = function isString(value) {
72 return typeof value === 'string';
73 };
74
75 var isNumber = function isNumber(value) {
76 return !isNaN(parseFloat(value));
77 };
78
79 if (!isString(props) && !Array.isArray(props)) {
80 console.error('Material-UI: Argument "props" must be a string or Array.');
81 }
82
83 if (!isNumber(durationOption) && !isString(durationOption)) {
84 console.error("Material-UI: Argument \"duration\" must be a number or a string but found ".concat(durationOption, "."));
85 }
86
87 if (!isString(easingOption)) {
88 console.error('Material-UI: Argument "easing" must be a string.');
89 }
90
91 if (!isNumber(delay) && !isString(delay)) {
92 console.error('Material-UI: Argument "delay" must be a number or a string.');
93 }
94
95 if (Object.keys(other).length !== 0) {
96 console.error("Material-UI: Unrecognized argument(s) [".concat(Object.keys(other).join(','), "]."));
97 }
98 }
99
100 return (Array.isArray(props) ? props : [props]).map(function (animatedProp) {
101 return "".concat(animatedProp, " ").concat(typeof durationOption === 'string' ? durationOption : formatMs(durationOption), " ").concat(easingOption, " ").concat(typeof delay === 'string' ? delay : formatMs(delay));
102 }).join(',');
103 },
104 getAutoHeightDuration: function getAutoHeightDuration(height) {
105 if (!height) {
106 return 0;
107 }
108
109 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
110
111 return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
112 }
113};
114exports.default = _default;
\No newline at end of file