@baransu/react-styled-flexboxgrid/dist/styled-flexboxgrid.es.js

Grid system based on styled-components and flexbox for React

import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { css } from '@emotion/core';
import isInteger from 'lodash.isinteger';

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }

  return target;
}

function _taggedTemplateLiteralLoose(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

  strings.raw = raw;
  return strings;
}

var THEME_CONF = "flexboxgrid";
var BASE_CONF = {
  gridSize: 12,
  gutterWidth: 1,
  outerMargin: 2,
  mediaQuery: "only screen",
  container: {
    sm: 46,
    md: 61,
    lg: 76
  },
  breakpoints: {
    xs: 0,
    sm: 48,
    md: 64,
    lg: 75
  }
};
var configCache = [];

var makeCacheId = function makeCacheId(props) {
  return JSON.stringify(props.theme && props.theme[THEME_CONF] || {});
};

var resolveConfig = function resolveConfig(props) {
  var themeConf = props.theme && props.theme[THEME_CONF] || {};

  var conf = _objectSpread({}, BASE_CONF, themeConf, {
    container: _objectSpread({}, BASE_CONF.container, themeConf.container),
    breakpoints: _objectSpread({}, BASE_CONF.breakpoints, themeConf.breakpoints)
  });

  conf.media = Object.keys(conf.breakpoints).reduce(function (media, breakpoint) {
    var breakpointWidth = conf.breakpoints[breakpoint];
    media[breakpoint] = [conf.mediaQuery, breakpoint !== 0 && "(min-width: " + breakpointWidth + "em)"].filter(Boolean).join(" and ");
    return media;
  }, {});
  return conf;
};

var DIMENSION_NAMES = ["xs", "sm", "md", "lg"];
function config(props) {
  var cacheId = makeCacheId(props);

  if (configCache[0] === cacheId) {
    return configCache[1];
  }

  var conf = resolveConfig(props);
  configCache[0] = cacheId;
  configCache[1] = conf;
  return conf;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n  margin-right: auto;\n  margin-left: auto;\n  padding-right: ", "\n  padding-left: ", "\n  ", "\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n    ", "rem;\n  "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n        ", "\n      "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var fluid = function fluid(p) {
  return p.fluid ? css(_templateObject()) : css(_templateObject2(), DIMENSION_NAMES.map(function (t) {
    return config(p).container[t] ? "\n              @media " + config(p).media[t] + " {\n                width: " + config(p).container[t] + "rem;\n              }\n            " : "";
  }).join("\n"));
};

var padding = function padding(p) {
  return css(_templateObject3(), config(p).outerMargin);
};

var Grid = styled.div(_templateObject4(), padding, padding, fluid);
Grid.displayName = "Grid";
Grid.propTypes = {
  fluid: PropTypes.bool,
  children: PropTypes.node
};

function _templateObject23() {
  var data = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 1 auto;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin-right: ", "\n  margin-left: ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"]);

  _templateObject23 = function _templateObject23() {
    return data;
  };

  return data;
}

function _templateObject22() {
  var data = _taggedTemplateLiteralLoose(["\n    ", "rem;\n  "]);

  _templateObject22 = function _templateObject22() {
    return data;
  };

  return data;
}

function _templateObject21() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject21 = function _templateObject21() {
    return data;
  };

  return data;
}

function _templateObject20() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          order: 1;\n        }\n      "]);

  _templateObject20 = function _templateObject20() {
    return data;
  };

  return data;
}

function _templateObject19() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject19 = function _templateObject19() {
    return data;
  };

  return data;
}

function _templateObject18() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          order: -1;\n        }\n      "]);

  _templateObject18 = function _templateObject18() {
    return data;
  };

  return data;
}

function _templateObject17() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject17 = function _templateObject17() {
    return data;
  };

  return data;
}

function _templateObject16() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          justify-content: space-between;\n        }\n      "]);

  _templateObject16 = function _templateObject16() {
    return data;
  };

  return data;
}

function _templateObject15() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject15 = function _templateObject15() {
    return data;
  };

  return data;
}

function _templateObject14() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          justify-content: space-around;\n        }\n      "]);

  _templateObject14 = function _templateObject14() {
    return data;
  };

  return data;
}

function _templateObject13() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject13 = function _templateObject13() {
    return data;
  };

  return data;
}

function _templateObject12() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          align-items: flex-end;\n        }\n      "]);

  _templateObject12 = function _templateObject12() {
    return data;
  };

  return data;
}

function _templateObject11() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          align-items: center;\n        }\n      "]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          align-items: flex-start;\n        }\n      "]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          justify-content: flex-end;\n        }\n      "]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$1() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          justify-content: center;\n        }\n      "]);

  _templateObject4$1 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$1() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject3$1 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$1() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          justify-content: flex-start;\n        }\n      "]);

  _templateObject2$1 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1() {
  var data = _taggedTemplateLiteralLoose(["\n    flex-direction: row-reverse;\n  "]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
var ModificatorType = PropTypes.oneOf(DIMENSION_NAMES);

var reverse = function reverse(p) {
  return p.reverse && css(_templateObject$1());
};

var start = function start(p) {
  return p.start ? css(_templateObject2$1(), config(p).media[p.start]) : css(_templateObject3$1());
};

var center = function center(p) {
  return p.center ? css(_templateObject4$1(), config(p).media[p.center]) : css(_templateObject5());
};

var end = function end(p) {
  return p.end ? css(_templateObject6(), config(p).media[p.end]) : css(_templateObject7());
};

var top = function top(p) {
  return p.top ? css(_templateObject8(), config(p).media[p.top]) : css(_templateObject9());
};

var middle = function middle(p) {
  return p.middle ? css(_templateObject10(), config(p).media[p.middle]) : css(_templateObject11());
};

var bottom = function bottom(p) {
  return p.bottom ? css(_templateObject12(), config(p).media[p.bottom]) : css(_templateObject13());
};

var around = function around(p) {
  return p.around ? css(_templateObject14(), config(p).media[p.around]) : css(_templateObject15());
};

var between = function between(p) {
  return p.between ? css(_templateObject16(), config(p).media[p.between]) : css(_templateObject17());
};

var first = function first(p) {
  return p.first ? css(_templateObject18(), config(p).media[p.first]) : css(_templateObject19());
};

var last = function last(p) {
  return p.last ? css(_templateObject20(), config(p).media[p.last]) : css(_templateObject21());
};

var margin = function margin(p) {
  return css(_templateObject22(), config(p).gutterWidth / 2 * -1);
};

var Row = styled.div(_templateObject23(), margin, margin, reverse, start, center, end, top, middle, bottom, around, between, first, last);
Row.displayName = "Row";
Row.propTypes = {
  reverse: PropTypes.bool,
  start: ModificatorType,
  center: ModificatorType,
  end: ModificatorType,
  top: ModificatorType,
  middle: ModificatorType,
  bottom: ModificatorType,
  around: ModificatorType,
  between: ModificatorType,
  first: ModificatorType,
  last: ModificatorType,
  children: PropTypes.node
};

function _templateObject6$1() {
  var data = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  padding-right: ", "\n  padding-left: ", "\n  ", "\n  ", "\n  ", "\n"]);

  _templateObject6$1 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$1() {
  var data = _taggedTemplateLiteralLoose(["\n    ", "rem;\n  "]);

  _templateObject5$1 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$2() {
  var data = _taggedTemplateLiteralLoose(["\n    ", "\n  "]);

  _templateObject4$2 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$2() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject3$2 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$2() {
  var data = _taggedTemplateLiteralLoose(["\n        flex-direction: column-reverse;\n      "]);

  _templateObject2$2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$2() {
  var data = _taggedTemplateLiteralLoose(["\n    ", "\n  "]);

  _templateObject$2 = function _templateObject() {
    return data;
  };

  return data;
}
var ModificatorType$1 = PropTypes.oneOfType([PropTypes.number, PropTypes.bool]);
var offsetProps = DIMENSION_NAMES.map(function (d) {
  return d + "Offset";
});
var DimensionPropTypes = DIMENSION_NAMES.reduce(function (propTypes, dimension) {
  propTypes[dimension] = ModificatorType$1;
  propTypes[dimension + "Offset"] = PropTypes.number;
  return propTypes;
}, {});

var content = function content(p, k) {
  var grid = "\n      " + 100 / config(p).gridSize * p[k] + "%\n    ";
  return "\n    " + (isInteger(p[k]) ? // Integer value
  "\n            flex-basis: " + grid + ";\n            max-width: " + grid + ";\n            display: block;\n          " : // Boolean
  p[k] ? // Auto-width
  "\n            flex-grow: 1;\n            flex-basis: 0;\n            max-width: 100%;\n            display: block;\n          " : // Hide element
  "\n            display: none;\n          ") + "\n  ";
};

var col = function col(p, k) {
  return "\n    @media " + config(p).media[k] + " {\n      " + content(p, k) + "\n    }\n  ";
};

var column = function column(p) {
  return css(_templateObject$2(), Object.keys(p).filter(function (k) {
    return ~DIMENSION_NAMES.indexOf(k);
  }).sort(function (k1, k2) {
    return DIMENSION_NAMES.indexOf(k1) - DIMENSION_NAMES.indexOf(k2);
  }).map(function (k) {
    return col(p, k);
  }).join("\n"));
};

var reverse$1 = function reverse(p) {
  return p.reverse ? css(_templateObject2$2()) : css(_templateObject3$2());
};

var margin$1 = function margin(p) {
  return css(_templateObject4$2(), Object.keys(p).filter(function (k) {
    return ~offsetProps.indexOf(k);
  }).map(function (k) {
    return "\n          @media " + config(p).media[k.replace(/Offset$/, "")] + " {\n            margin-left: " + 100 / config(p).gridSize * p[k] + "%;\n          }\n        ";
  }).join("\n"));
};

var padding$1 = function padding(p) {
  return css(_templateObject5$1(), config(p).gutterWidth / 2);
};

var Col = styled.div(_templateObject6$1(), padding$1, padding$1, column, reverse$1, margin$1);
Col.displayName = "Col";
Col.propTypes = _objectSpread({}, DimensionPropTypes, {
  reverse: PropTypes.bool,
  children: PropTypes.node
});

export { Grid, Row, Col, BASE_CONF };