@w11r/use-breakpoint/dist/cjs/mediaQuery.js

React useBreakpoint hook to have different values for a variable based on a breakpoints.

"use strict";

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

var _ = require(".");

var mediaQuery = function mediaQuery(input) {
  var returnType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : String;
  var generated = returnType === String ? '' : {};

  if (typeof input[0] === 'string') {
    input = [input];
  }

  for (var value of input) {
    var _options$shorthands;

    var bp = _.options.breakpoints[value[0]];
    var shorthand = _.options === null || _.options === void 0 ? void 0 : (_options$shorthands = _.options.shorthands) === null || _options$shorthands === void 0 ? void 0 : _options$shorthands[value[0]]; // Handle shorthand

    if (shorthand) {
      if (returnType === String) {
        generated += shorthand + "{ ".concat(value[1], " }");
      } else {
        generated[shorthand] = value[1];
      }

      continue;
    } // No such breakpoint, simply add
    else if (!bp) {
        if (returnType === String) {
          generated += value[0] + "{ ".concat(value[1], " }");
        } else {
          generated[value[0]] = value[1];
        }

        continue;
      }

    var key = value[0];
    var first = key[0];
    var last = key[key.length - 1];
    var query = "@media screen ";

    if (last === _.UP) {
      query += "and (min-width: ".concat(bp[0], "px) ");
    } else if (last === _.DOWN) {
      query += "and (max-width: ".concat(bp[1], "px) ");
    } else if (bp[0] !== true) {
      query += "and (min-width: ".concat(bp[0], "px) and (max-width: ").concat(bp[1], "px) ");
    }

    if (first === _.PORTRAIT) {
      query += "and (orientation: portrait) ";
    } else if (first === _.LANDSCAPE) {
      query += "and (orientation: landscape) ";
    } else if (first === _.DARK) {
      query += "and (prefers-color-scheme: dark) ";
    } else if (first === _.LIGHT) {
      query += "and (prefers-color-scheme: light) ";
    }

    if (returnType === String) {
      generated += query + "{ ".concat(value[1], " }");
    } else {
      generated[query] = value[1];
    }
  }

  return generated;
};

var _default = mediaQuery;
exports.default = _default;
module.exports = exports.default;