@catho/quantum/Grid/sub-components/Col.js

Catho react components

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
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");
var _excluded = ["no-gutters", "theme"];
var _templateObject;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
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,
    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$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
    }
  };
  var _screenDefinitions$br = screenDefinitions[breakpoint],
    size = _screenDefinitions$br.size,
    offset = _screenDefinitions$br.offset;
  var maxColumns = breakpoints[breakpoint].columns;
  return q(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    @supports ( display: grid ) {\n      ", "\n    }\n\n    @supports not ( display: grid ) {\n      ", "\n    }\n  "])), 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.attrs(function (_ref4) {
  var noGutters = _ref4['no-gutters'],
    theme = _ref4.theme,
    rest = _objectWithoutProperties(_ref4, _excluded);
  return _objectSpread({
    'no-gutters': !!noGutters,
    theme: _objectSpread(_objectSpread({}, _shared2.theme), theme)
  }, rest);
}).withConfig({
  displayName: "Col",
  componentId: "sc-o5r7t1-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.propTypes = {
  'no-gutters': _propTypes["default"].bool,
  xsmall: _propTypes["default"].number,
  small: _propTypes["default"].number,
  medium: _propTypes["default"].number,
  large: _propTypes["default"].number,
  'xsmall-offset': _propTypes["default"].number,
  'small-offset': _propTypes["default"].number,
  'medium-offset': _propTypes["default"].number,
  'large-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 = exports["default"] = Col;