@kiwicom/orbit-components/lib/utils/Grid/helpers/getViewportGridStyles.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

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

var _getViewportIEGridStyles = _interopRequireDefault(require("./getViewportIEGridStyles"));

var _getDisplay = _interopRequireDefault(require("./getDisplay"));

/*
  We need to get gap, rowGap and columnGap recursively because someone can change row or columns
  in some mediaQuery, so we need to render IE compatible format once again and we need to know to gaps
  Also we want to render only own gaps into CSS
 */
var getViewportGridStyles = function getViewportGridStyles(_ref) {
  var viewport = _ref.viewport,
      index = _ref.index,
      devices = _ref.devices;
  return function (props) {
    if (props[viewport]) {
      var _props$viewport = props[viewport],
          inline = _props$viewport.inline,
          maxWidth = _props$viewport.maxWidth,
          gap = _props$viewport.gap,
          columnGap = _props$viewport.columnGap,
          rowGap = _props$viewport.rowGap,
          rows = _props$viewport.rows,
          columns = _props$viewport.columns,
          width = _props$viewport.width;
      var compatibleIE = (0, _getViewportIEGridStyles.default)(props[viewport], React.Children.count(props.children), {
        index: index,
        devices: devices
      }, props);
      return (0, _styledComponents.css)(["", ";max-width:", ";width:", ";grid-template-columns:", ";grid-template-rows:", ";grid-column-gap:", ";grid-row-gap:", ";grid-gap:", ";", ";"], (0, _getDisplay.default)(inline, viewport === "smallMobile"), maxWidth, width, columns, rows, columnGap, rowGap, gap, compatibleIE);
    }

    return false;
  };
};

var _default = getViewportGridStyles;
exports.default = _default;