@age/quantum/Grid/sub-components/Container.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _shared = require("./shared");

var _shared2 = require("../../shared");

var _GlobalStyle = require("../../GlobalStyle");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    ", "\n    padding: ", ";\n  "]);

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

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var renderBreakpoint = function renderBreakpoint(_ref, breakpoint) {
  var _ref$theme = _ref.theme,
      gutter = _ref$theme.gutter,
      breakpoints = _ref$theme.breakpoints,
      components = _ref$theme.components,
      noGutters = _ref['no-gutters'],
      withBreakpoints = _ref.withBreakpoints;
  var calculedGutter = (0, _GlobalStyle.CSSVariables)({
    theme: {
      gutter: Number((0, _shared.calcGutter)(gutter, noGutters, true))
    }
  }).gutter[breakpoint];
  var q = (0, _shared.query)(breakpoints)[breakpoint];
  var calculedWidth = components.container.breakpoints[breakpoint];
  return q(_templateObject(), withBreakpoints ? "width: ".concat(calculedWidth, ";") : '', calculedGutter);
};

var renderResponsives = function renderResponsives(_ref2) {
  var _ref2$theme = _ref2.theme,
      breakpoints = _ref2$theme.breakpoints,
      gutter = _ref2$theme.gutter,
      components = _ref2$theme.components,
      noGutters = _ref2['no-gutters'],
      withBreakpoints = _ref2.withBreakpoints;
  return Object.keys(breakpoints).map(function (breakpoint) {
    return renderBreakpoint({
      theme: {
        breakpoints: breakpoints,
        gutter: gutter,
        components: components
      },
      'no-gutters': noGutters,
      withBreakpoints: withBreakpoints
    }, breakpoint);
  });
};

var Container = _styledComponents.default.div.withConfig({
  displayName: "Container",
  componentId: "sc-1ulmae-0"
})(["box-sizing:border-box;margin-left:auto;margin-right:auto;", " ", " ", " & &{max-width:100%;}"], renderResponsives, function (_ref3) {
  var fluid = _ref3.fluid;
  return !fluid && 'max-width: 95%;';
}, _shared.hide);

Container.propTypes = {
  withBreakpoints: _propTypes.default.bool,
  fluid: _propTypes.default.bool,
  hide: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_shared2.theme.breakpoints)), _propTypes.default.arrayOf(_propTypes.default.string)]),
  theme: _propTypes.default.shape({
    breakpoints: _propTypes.default.object,
    components: _propTypes.default.object
  }),
  'no-gutters': _propTypes.default.bool
};
Container.defaultProps = {
  fluid: false,
  withBreakpoints: false,
  'no-gutters': false,
  theme: _shared2.theme
};
Container.displayName = 'Container';
var _default = Container;
exports.default = _default;