You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

пре 3 година
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import _extends from "@babel/runtime/helpers/extends";
  2. import warning from 'warning';
  3. import PropTypes from 'prop-types';
  4. import merge from './merge'; // The breakpoint **start** at this value.
  5. // For instance with the first breakpoint xs: [xs, sm[.
  6. const values = {
  7. xs: 0,
  8. sm: 600,
  9. md: 960,
  10. lg: 1280,
  11. xl: 1920
  12. };
  13. const defaultBreakpoints = {
  14. // Sorted ASC by size. That's important.
  15. // It can't be configured as it's used statically for propTypes.
  16. keys: ['xs', 'sm', 'md', 'lg', 'xl'],
  17. up: key => `@media (min-width:${values[key]}px)`
  18. };
  19. export function handleBreakpoints(props, propValue, styleFromPropValue) {
  20. process.env.NODE_ENV !== "production" ? warning(props.theme, '@material-ui/system: you are calling a style function without a theme value.') : void 0;
  21. if (Array.isArray(propValue)) {
  22. const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
  23. return propValue.reduce((acc, item, index) => {
  24. acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
  25. return acc;
  26. }, {});
  27. }
  28. if (typeof propValue === 'object') {
  29. const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
  30. return Object.keys(propValue).reduce((acc, breakpoint) => {
  31. acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
  32. return acc;
  33. }, {});
  34. }
  35. const output = styleFromPropValue(propValue);
  36. return output;
  37. }
  38. function breakpoints(styleFunction) {
  39. const newStyleFunction = props => {
  40. const base = styleFunction(props);
  41. const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
  42. const extended = themeBreakpoints.keys.reduce((acc, key) => {
  43. if (props[key]) {
  44. acc = acc || {};
  45. acc[themeBreakpoints.up(key)] = styleFunction(_extends({
  46. theme: props.theme
  47. }, props[key]));
  48. }
  49. return acc;
  50. }, null);
  51. return merge(base, extended);
  52. };
  53. newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
  54. xs: PropTypes.object,
  55. sm: PropTypes.object,
  56. md: PropTypes.object,
  57. lg: PropTypes.object,
  58. xl: PropTypes.object
  59. }) : {};
  60. newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
  61. return newStyleFunction;
  62. }
  63. export default breakpoints;