No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
 

104 líneas
3.3 KiB

  1. import warning from 'warning';
  2. import responsivePropType from './responsivePropType';
  3. import { handleBreakpoints } from './breakpoints';
  4. import merge from './merge';
  5. import memoize from './memoize';
  6. const properties = {
  7. m: 'margin',
  8. p: 'padding'
  9. };
  10. const directions = {
  11. t: 'Top',
  12. r: 'Right',
  13. b: 'Bottom',
  14. l: 'Left',
  15. x: ['Left', 'Right'],
  16. y: ['Top', 'Bottom']
  17. }; // memoize() impact:
  18. // From 300,000 ops/sec
  19. // To 350,000 ops/sec
  20. const getCssProperties = memoize(prop => {
  21. // It's not a shorthand notation.
  22. if (prop.length > 3) {
  23. return [prop];
  24. }
  25. const [a, b] = prop.split('');
  26. const property = properties[a];
  27. const direction = directions[b] || '';
  28. return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
  29. });
  30. const spacingKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'];
  31. function getTransformer(theme) {
  32. const themeTransformer = theme.spacing && theme.spacing.unit != null ? theme.spacing.unit : theme.spacing || 8;
  33. if (typeof themeTransformer === 'number') {
  34. return abs => themeTransformer * abs;
  35. }
  36. if (Array.isArray(themeTransformer)) {
  37. return abs => {
  38. process.env.NODE_ENV !== "production" ? warning(abs <= themeTransformer.length - 1, [`@material-ui/system: the value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeTransformer)}.`, `${abs} > ${themeTransformer.length - 1}, you need to add the missing values.`].join('\n')) : void 0;
  39. return themeTransformer[abs];
  40. };
  41. }
  42. if (typeof themeTransformer === 'function') {
  43. return themeTransformer;
  44. }
  45. process.env.NODE_ENV !== "production" ? warning(false, [`@material-ui/system: the \`theme.spacing\` value (${themeTransformer}) is invalid.`, 'It should be a number, an array or a function.'].join('\n')) : void 0;
  46. return () => undefined;
  47. }
  48. function getValue(transformer, propValue) {
  49. if (typeof propValue === 'string') {
  50. return propValue;
  51. }
  52. const abs = Math.abs(propValue);
  53. const transformed = transformer(abs);
  54. if (propValue >= 0) {
  55. return transformed;
  56. }
  57. if (typeof transformed === 'number') {
  58. return -transformed;
  59. }
  60. return `-${transformed}`;
  61. }
  62. function getStyleFromPropValue(cssProperties, transformer) {
  63. return propValue => cssProperties.reduce((acc, cssProperty) => {
  64. acc[cssProperty] = getValue(transformer, propValue);
  65. return acc;
  66. }, {});
  67. }
  68. function spacing(props) {
  69. const theme = props.theme;
  70. const transformer = getTransformer(theme);
  71. return Object.keys(props).map(prop => {
  72. // Using a hash computation over an array iteration could be faster, but with only 14 items,
  73. // it's doesn't worth the bundle size.
  74. if (spacingKeys.indexOf(prop) === -1) {
  75. return null;
  76. }
  77. const cssProperties = getCssProperties(prop);
  78. const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
  79. const propValue = props[prop];
  80. return handleBreakpoints(props, propValue, styleFromPropValue);
  81. }).reduce(merge, {});
  82. }
  83. spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
  84. obj[key] = responsivePropType;
  85. return obj;
  86. }, {}) : {};
  87. spacing.filterProps = spacingKeys;
  88. export default spacing;