Spaces:
Sleeping
Sleeping
File size: 5,844 Bytes
56fda74 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import PropTypes from 'prop-types';
import deepmerge from '@mui/utils/deepmerge';
import merge from './merge';
// The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm[.
export var values = {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536 // large screen
};
var defaultBreakpoints = {
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
keys: ['xs', 'sm', 'md', 'lg', 'xl'],
up: function up(key) {
return "@media (min-width:".concat(values[key], "px)");
}
};
export function handleBreakpoints(props, propValue, styleFromPropValue) {
var theme = props.theme || {};
if (Array.isArray(propValue)) {
var themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return propValue.reduce(function (acc, item, index) {
acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
return acc;
}, {});
}
if (_typeof(propValue) === 'object') {
var _themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return Object.keys(propValue).reduce(function (acc, breakpoint) {
// key is breakpoint
if (Object.keys(_themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
var mediaKey = _themeBreakpoints.up(breakpoint);
acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
} else {
var cssKey = breakpoint;
acc[cssKey] = propValue[cssKey];
}
return acc;
}, {});
}
var output = styleFromPropValue(propValue);
return output;
}
function breakpoints(styleFunction) {
// false positive
// eslint-disable-next-line react/function-component-definition
var newStyleFunction = function newStyleFunction(props) {
var theme = props.theme || {};
var base = styleFunction(props);
var themeBreakpoints = theme.breakpoints || defaultBreakpoints;
var extended = themeBreakpoints.keys.reduce(function (acc, key) {
if (props[key]) {
acc = acc || {};
acc[themeBreakpoints.up(key)] = styleFunction(_extends({
theme: theme
}, props[key]));
}
return acc;
}, null);
return merge(base, extended);
};
newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
xs: PropTypes.object,
sm: PropTypes.object,
md: PropTypes.object,
lg: PropTypes.object,
xl: PropTypes.object
}) : {};
newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl'].concat(_toConsumableArray(styleFunction.filterProps));
return newStyleFunction;
}
export function createEmptyBreakpointObject() {
var _breakpointsInput$key;
var breakpointsInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce(function (acc, key) {
var breakpointStyleKey = breakpointsInput.up(key);
acc[breakpointStyleKey] = {};
return acc;
}, {});
return breakpointsInOrder || {};
}
export function removeUnusedBreakpoints(breakpointKeys, style) {
return breakpointKeys.reduce(function (acc, key) {
var breakpointOutput = acc[key];
var isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
if (isBreakpointUnused) {
delete acc[key];
}
return acc;
}, style);
}
export function mergeBreakpointsInOrder(breakpointsInput) {
var emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
for (var _len = arguments.length, styles = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
styles[_key - 1] = arguments[_key];
}
var mergedOutput = [emptyBreakpoints].concat(styles).reduce(function (prev, next) {
return deepmerge(prev, next);
}, {});
return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
}
// compute base for responsive values; e.g.,
// [1,2,3] => {xs: true, sm: true, md: true}
// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
// fixed value
if (_typeof(breakpointValues) !== 'object') {
return {};
}
var base = {};
var breakpointsKeys = Object.keys(themeBreakpoints);
if (Array.isArray(breakpointValues)) {
breakpointsKeys.forEach(function (breakpoint, i) {
if (i < breakpointValues.length) {
base[breakpoint] = true;
}
});
} else {
breakpointsKeys.forEach(function (breakpoint) {
if (breakpointValues[breakpoint] != null) {
base[breakpoint] = true;
}
});
}
return base;
}
export function resolveBreakpointValues(_ref) {
var breakpointValues = _ref.values,
themeBreakpoints = _ref.breakpoints,
customBase = _ref.base;
var base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
var keys = Object.keys(base);
if (keys.length === 0) {
return breakpointValues;
}
var previous;
return keys.reduce(function (acc, breakpoint, i) {
if (Array.isArray(breakpointValues)) {
acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
previous = i;
} else if (_typeof(breakpointValues) === 'object') {
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
previous = breakpoint;
} else {
acc[breakpoint] = breakpointValues;
}
return acc;
}, {});
}
export default breakpoints; |