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

Grid system based on styled-components and flexbox for React

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('@emotion/styled'), require('@emotion/core'), require('lodash.isinteger')) :
  typeof define === 'function' && define.amd ? define(['exports', 'prop-types', '@emotion/styled', '@emotion/core', 'lodash.isinteger'], factory) :
  (global = global || self, factory(global['react-styled-flexboxgrid'] = {}, global.PropTypes, global.styled, global.core, global._.isInteger));
}(this, function (exports, PropTypes, styled, core, isInteger) { 'use strict';

  PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
  styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
  isInteger = isInteger && isInteger.hasOwnProperty('default') ? isInteger['default'] : 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 ? core.css(_templateObject()) : core.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 core.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 && core.css(_templateObject$1());
  };

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

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

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

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

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

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

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

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

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

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

  var margin = function margin(p) {
    return core.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 core.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 ? core.css(_templateObject2$2()) : core.css(_templateObject3$2());
  };

  var margin$1 = function margin(p) {
    return core.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 core.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
  });

  exports.Grid = Grid;
  exports.Row = Row;
  exports.Col = Col;
  exports.BASE_CONF = BASE_CONF;

  Object.defineProperty(exports, '__esModule', { value: true });

}));