UNPKG

2.24 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3// Sorted ASC by size. That's important.
4// It can't be configured as it's used statically for propTypes.
5export const keys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.
6
7export default function createBreakpoints(breakpoints) {
8 const {
9 // The breakpoint **start** at this value.
10 // For instance with the first breakpoint xs: [xs, sm[.
11 values = {
12 xs: 0,
13 sm: 600,
14 md: 960,
15 lg: 1280,
16 xl: 1920
17 },
18 unit = 'px',
19 step = 5
20 } = breakpoints,
21 other = _objectWithoutPropertiesLoose(breakpoints, ["values", "unit", "step"]);
22
23 function up(key) {
24 const value = typeof values[key] === 'number' ? values[key] : key;
25 return `@media (min-width:${value}${unit})`;
26 }
27
28 function down(key) {
29 const endIndex = keys.indexOf(key) + 1;
30 const upperbound = values[keys[endIndex]];
31
32 if (endIndex === keys.length) {
33 // xl down applies to all sizes
34 return up('xs');
35 }
36
37 const value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
38 return `@media (max-width:${value - step / 100}${unit})`;
39 }
40
41 function between(start, end) {
42 const endIndex = keys.indexOf(end);
43
44 if (endIndex === keys.length - 1) {
45 return up(start);
46 }
47
48 return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex + 1]] === 'number' ? values[keys[endIndex + 1]] : end) - step / 100}${unit})`;
49 }
50
51 function only(key) {
52 return between(key, key);
53 }
54
55 let warnedOnce = false;
56
57 function width(key) {
58 if (process.env.NODE_ENV !== 'production') {
59 if (!warnedOnce) {
60 warnedOnce = true;
61 console.warn(["Material-UI: The `theme.breakpoints.width` utility is deprecated because it's redundant.", 'Use the `theme.breakpoints.values` instead.'].join('\n'));
62 }
63 }
64
65 return values[key];
66 }
67
68 return _extends({
69 keys,
70 values,
71 up,
72 down,
73 between,
74 only,
75 width
76 }, other);
77}
\No newline at end of file