@age/quantum/Grid/sub-components/Col.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    @supports ( display: grid ) {\n      ", "\n    }\n\n    @supports not ( display: grid ) {\n      ", "\n    }\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 columnGrid = function columnGrid(_ref) {
  var size = _ref.size,
      offset = _ref.offset;
  var offsetStyle = offset ? "".concat(offset + 1, "/") : '';
  return "grid-column: ".concat(offsetStyle, " span ").concat(size || 12, ";");
};

var columnGridLess = function columnGridLess(_ref2) {
  var size = _ref2.size,
      offset = _ref2.offset,
      breakpoint = _ref2.breakpoint,
      noGutters = _ref2.noGutters,
      gutter = _ref2.gutter,
      maxColumns = _ref2.maxColumns;
  var calculedWidth = size ? 100 / maxColumns * size : 100;
  var calculedOffset = offset ? 100 / maxColumns * offset : 100;
  var calculedGutter = (0, _shared.calcGutter)((0, _GlobalStyle.CSSVariables)({
    theme: {
      gutter: gutter
    }
  }).gutter[breakpoint], noGutters, true);
  var offsetStyle = offset ? "\n    margin-left: calc(".concat(calculedOffset.toFixed(3), "% + ").concat(calculedGutter > 0 ? "(".concat(calculedGutter, "px / (").concat(maxColumns, " / ").concat(offset, ")") : "0px", " ) );\n\n    &:first-child {\n      margin-left: 0px;\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n  \n  ") : "\n    margin-right: ".concat(calculedGutter > 0 ? "calc(".concat(calculedGutter, "px / 2)") : '0px', ";\n    \n    &:first-child {\n      margin-left: 0;\n    }\n    &:last-child {\n      margin-right: 0;\n    }\n  ");
  var colWidth = calculedGutter > 0 ? "calc(".concat(calculedWidth.toFixed(3), "% - ").concat(calculedGutter, "px + (").concat(calculedGutter, "px / (").concat(maxColumns, " / ").concat(size || maxColumns, ") ) )") : "".concat(calculedWidth.toFixed(3), "%");
  return "\n    display: inline-block;\n    width: ".concat(colWidth, ";\n\n    ").concat(offsetStyle, "\n  ");
};

var columnPosition = function columnPosition(_ref3, breakpoint) {
  var xsmall = _ref3.xsmall,
      _ref3$small = _ref3.small,
      small = _ref3$small === void 0 ? xsmall : _ref3$small,
      _ref3$medium = _ref3.medium,
      medium = _ref3$medium === void 0 ? small : _ref3$medium,
      _ref3$large = _ref3.large,
      large = _ref3$large === void 0 ? medium : _ref3$large,
      _ref3$xlarge = _ref3.xlarge,
      xlarge = _ref3$xlarge === void 0 ? large : _ref3$xlarge,
      xsmallOffset = _ref3['xsmall-offset'],
      _ref3$smallOffset = _ref3['small-offset'],
      smallOffset = _ref3$smallOffset === void 0 ? xsmallOffset : _ref3$smallOffset,
      _ref3$mediumOffset = _ref3['medium-offset'],
      mediumOffset = _ref3$mediumOffset === void 0 ? smallOffset : _ref3$mediumOffset,
      _ref3$largeOffset = _ref3['large-offset'],
      largeOffset = _ref3$largeOffset === void 0 ? mediumOffset : _ref3$largeOffset,
      _ref3$xlargeOffset = _ref3['xlarge-offset'],
      xlargeOffset = _ref3$xlargeOffset === void 0 ? largeOffset : _ref3$xlargeOffset,
      _ref3$theme = _ref3.theme,
      breakpoints = _ref3$theme.breakpoints,
      gutter = _ref3$theme.gutter,
      noGutters = _ref3['no-gutters'];
  var q = (0, _shared.query)(breakpoints)[breakpoint];
  var screenDefinitions = {
    xsmall: {
      size: xsmall,
      offset: xsmallOffset
    },
    small: {
      size: small,
      offset: smallOffset
    },
    medium: {
      size: medium,
      offset: mediumOffset
    },
    large: {
      size: large,
      offset: largeOffset
    },
    xlarge: {
      size: xlarge,
      offset: xlargeOffset
    }
  };
  var _screenDefinitions$br = screenDefinitions[breakpoint],
      size = _screenDefinitions$br.size,
      offset = _screenDefinitions$br.offset;
  var maxColumns = breakpoints[breakpoint].columns;
  return q(_templateObject(), columnGrid({
    size: size,
    offset: offset,
    breakpoint: breakpoint
  }), columnGridLess({
    size: size,
    offset: offset,
    breakpoint: breakpoint,
    noGutters: noGutters,
    gutter: gutter,
    maxColumns: maxColumns
  }));
};

var Col = _styledComponents.default.div.withConfig({
  displayName: "Col",
  componentId: "sc-1b4ubld-0"
})(["", " word-break:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;"], function (props) {
  return Object.keys(props.theme.breakpoints).map(function (breakpoint) {
    return columnPosition(props, breakpoint);
  });
});

Col.defaultProps = {
  theme: _shared2.theme,
  'no-gutters': false
};
Col.propTypes = {
  'no-gutters': _propTypes.default.bool,
  xsmall: _propTypes.default.number,
  small: _propTypes.default.number,
  medium: _propTypes.default.number,
  large: _propTypes.default.number,
  xlarge: _propTypes.default.number,
  'xsmall-offset': _propTypes.default.number,
  'small-offset': _propTypes.default.number,
  'medium-offset': _propTypes.default.number,
  'large-offset': _propTypes.default.number,
  'xlarge-offset': _propTypes.default.number,
  hide: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_shared2.theme.breakpoints)), _propTypes.default.arrayOf(_propTypes.default.oneOf(Object.keys(_shared2.theme.breakpoints)))])
};
Col.displayName = 'Col';
var _default = Col;
exports.default = _default;