@baransu/react-styled-flexboxgrid/lib/components/Row.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 _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 _templateObject23() {
  var data = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 1 auto;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin-right: ", "\n  margin-left: ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

function _templateObject20() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          order: 1;\n        }\n      "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject18() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          order: -1;\n        }\n      "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject16() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          justify-content: space-between;\n        }\n      "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject14() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          justify-content: space-around;\n        }\n      "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject12() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          align-items: flex-end;\n        }\n      "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          align-items: center;\n        }\n      "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          align-items: flex-start;\n        }\n      "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          justify-content: flex-end;\n        }\n      "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n        @media ", " {\n          justify-content: center;\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        @media ", " {\n          justify-content: flex-start;\n        }\n      "]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n    flex-direction: row-reverse;\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.oneOf(_config.DIMENSION_NAMES);

var reverse = function reverse(p) {
  return p.reverse && (0, _core.css)(_templateObject());
};

var start = function start(p) {
  return p.start ? (0, _core.css)(_templateObject2(), (0, _config.default)(p).media[p.start]) : (0, _core.css)(_templateObject3());
};

var center = function center(p) {
  return p.center ? (0, _core.css)(_templateObject4(), (0, _config.default)(p).media[p.center]) : (0, _core.css)(_templateObject5());
};

var end = function end(p) {
  return p.end ? (0, _core.css)(_templateObject6(), (0, _config.default)(p).media[p.end]) : (0, _core.css)(_templateObject7());
};

var top = function top(p) {
  return p.top ? (0, _core.css)(_templateObject8(), (0, _config.default)(p).media[p.top]) : (0, _core.css)(_templateObject9());
};

var middle = function middle(p) {
  return p.middle ? (0, _core.css)(_templateObject10(), (0, _config.default)(p).media[p.middle]) : (0, _core.css)(_templateObject11());
};

var bottom = function bottom(p) {
  return p.bottom ? (0, _core.css)(_templateObject12(), (0, _config.default)(p).media[p.bottom]) : (0, _core.css)(_templateObject13());
};

var around = function around(p) {
  return p.around ? (0, _core.css)(_templateObject14(), (0, _config.default)(p).media[p.around]) : (0, _core.css)(_templateObject15());
};

var between = function between(p) {
  return p.between ? (0, _core.css)(_templateObject16(), (0, _config.default)(p).media[p.between]) : (0, _core.css)(_templateObject17());
};

var first = function first(p) {
  return p.first ? (0, _core.css)(_templateObject18(), (0, _config.default)(p).media[p.first]) : (0, _core.css)(_templateObject19());
};

var last = function last(p) {
  return p.last ? (0, _core.css)(_templateObject20(), (0, _config.default)(p).media[p.last]) : (0, _core.css)(_templateObject21());
};

var margin = function margin(p) {
  return (0, _core.css)(_templateObject22(), (0, _config.default)(p).gutterWidth / 2 * -1);
};

var Row = _styled.default.div(_templateObject23(), margin, margin, reverse, start, center, end, top, middle, bottom, around, between, first, last);

Row.displayName = "Row";
Row.propTypes = {
  reverse: _propTypes.default.bool,
  start: ModificatorType,
  center: ModificatorType,
  end: ModificatorType,
  top: ModificatorType,
  middle: ModificatorType,
  bottom: ModificatorType,
  around: ModificatorType,
  between: ModificatorType,
  first: ModificatorType,
  last: ModificatorType,
  children: _propTypes.default.node
};
var _default = Row;
exports.default = _default;