react-styled-flexboxgrid/lib/components/Col.js

Grid system based on styled-components and flexbox for React

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

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

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

var _lodash = _interopRequireDefault(require("lodash.isinteger"));

var _config = _interopRequireWildcard(require("../config"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

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 _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n        margin-left: ", "%;\n      "]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

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

var ModificatorType = _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].bool]);

var offsetProps = _config.DIMENSION_NAMES.map(function (d) {
  return d + 'Offset';
});

var DimensionPropTypes = _config.DIMENSION_NAMES.reduce(function (propTypes, dimension) {
  propTypes[dimension] = ModificatorType;
  propTypes[dimension + 'Offset'] = _propTypes["default"].number;
  return propTypes;
}, {});

var Col = _styledComponents["default"].div(_templateObject(), function (p) {
  return (0, _config["default"])(p).gutterWidth / 2;
}, function (p) {
  return (0, _config["default"])(p).gutterWidth / 2;
}, function (p) {
  return p.reverse && "\n    flex-direction: column-reverse;\n  ";
}, function (p) {
  return Object.keys(p).filter(function (k) {
    return ~_config.DIMENSION_NAMES.indexOf(k);
  }).sort(function (k1, k2) {
    return _config.DIMENSION_NAMES.indexOf(k1) - _config.DIMENSION_NAMES.indexOf(k2);
  }).map(function (k) {
    return (0, _config["default"])(p).media[k](_templateObject2(), (0, _lodash["default"])(p[k]) // Integer value
    ? "\n        flex-basis: " + 100 / (0, _config["default"])(p).gridSize * p[k] + "%;\n        max-width: " + 100 / (0, _config["default"])(p).gridSize * p[k] + "%;\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
    : 'display: none;');
  });
}, function (p) {
  return Object.keys(p).filter(function (k) {
    return ~offsetProps.indexOf(k);
  }).map(function (k) {
    return (0, _config["default"])(p).media[k.replace(/Offset$/, '')](_templateObject3(), 100 / (0, _config["default"])(p).gridSize * p[k]);
  });
});

Col.displayName = 'Col';
Col.propTypes = _objectSpread({}, DimensionPropTypes, {
  reverse: _propTypes["default"].bool,
  children: _propTypes["default"].node
});
var _default = Col;
exports["default"] = _default;