@baransu/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 _styled = _interopRequireDefault(require("@emotion/styled"));

var _core = require("@emotion/core");

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

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

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 _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 _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  padding-right: ", "\n  padding-left: ", "\n  ", "\n  ", "\n  ", "\n"]);

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n    ", "rem;\n  "]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n    ", "\n  "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n        flex-direction: column-reverse;\n      "]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\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 content = function content(p, k) {
  var grid = "\n      " + 100 / (0, _config.default)(p).gridSize * p[k] + "%\n    ";
  return "\n    " + ((0, _lodash.default)(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 " + (0, _config.default)(p).media[k] + " {\n      " + content(p, k) + "\n    }\n  ";
};

var column = function column(p) {
  return (0, _core.css)(_templateObject(), 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 col(p, k);
  }).join("\n"));
};

var reverse = function reverse(p) {
  return p.reverse ? (0, _core.css)(_templateObject2()) : (0, _core.css)(_templateObject3());
};

var margin = function margin(p) {
  return (0, _core.css)(_templateObject4(), Object.keys(p).filter(function (k) {
    return ~offsetProps.indexOf(k);
  }).map(function (k) {
    return "\n          @media " + (0, _config.default)(p).media[k.replace(/Offset$/, "")] + " {\n            margin-left: " + 100 / (0, _config.default)(p).gridSize * p[k] + "%;\n          }\n        ";
  }).join("\n"));
};

var padding = function padding(p) {
  return (0, _core.css)(_templateObject5(), (0, _config.default)(p).gutterWidth / 2);
};

var Col = _styled.default.div(_templateObject6(), padding, padding, column, reverse, margin);

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