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 merge from './merge'; // The breakpoint **start** at this value. // For instance with the first breakpoint xs: [xs, sm[. var values = { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 }; 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) { if (process.env.NODE_ENV !== 'production') { if (!props.theme) { console.error('Material-UI: You are calling a style function without a theme value.'); } } if (Array.isArray(propValue)) { var themeBreakpoints = props.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 = props.theme.breakpoints || defaultBreakpoints; return Object.keys(propValue).reduce(function (acc, breakpoint) { acc[_themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]); return acc; }, {}); } var output = styleFromPropValue(propValue); return output; } function breakpoints(styleFunction) { var newStyleFunction = function newStyleFunction(props) { var base = styleFunction(props); var themeBreakpoints = props.theme.breakpoints || defaultBreakpoints; var extended = themeBreakpoints.keys.reduce(function (acc, key) { if (props[key]) { acc = acc || {}; acc[themeBreakpoints.up(key)] = styleFunction(_extends({ theme: props.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 default breakpoints;