@kiwicom/orbit-components/lib/utils/mediaQuery/index.js

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

"use strict";

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

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

var _consts = require("./consts");

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; }

var getBreakpointWidth = function getBreakpointWidth(name, theme, pure) {
  var _tokens;

  var tokens = (_tokens = {}, _defineProperty(_tokens, _consts.QUERIES.MEDIUMMOBILE, theme.orbit.widthBreakpointMediumMobile), _defineProperty(_tokens, _consts.QUERIES.LARGEMOBILE, theme.orbit.widthBreakpointLargeMobile), _defineProperty(_tokens, _consts.QUERIES.TABLET, theme.orbit.widthBreakpointTablet), _defineProperty(_tokens, _consts.QUERIES.DESKTOP, theme.orbit.widthBreakpointDesktop), _defineProperty(_tokens, _consts.QUERIES.LARGEDESKTOP, theme.orbit.widthBreakpointLargeDesktop), _tokens);

  if (pure) {
    return tokens[name];
  }

  return "(min-width: ".concat(tokens[name], "px)");
};

exports.getBreakpointWidth = getBreakpointWidth;
var mediaQueries = Object.keys(_consts.QUERIES).reduce(function (o, name) {
  return _objectSpread({}, o, _defineProperty({}, _consts.QUERIES[name], function (style) {
    return (0, _styledComponents.css)(["@media ", "{", ";}"], function (_ref) {
      var theme = _ref.theme;
      return getBreakpointWidth(_consts.QUERIES[name], theme);
    }, style);
  }));
}, {});
var _default = mediaQueries;
exports.default = _default;