@bianic-ui/media-query/dist/cjs/create-media-query.js

A React hook for changing properties or visibility of a component based on css media query

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _utils = require("@bianic-ui/utils");

var _calculateMeasurement = _interopRequireDefault(require("calculate-measurement"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/**
 * Create a media query string from the breakpoints,
 * using a combination of `min-width` and `max-width`.
 */
function createMediaQueries(breakpoints) {
  /**
   * Get the non-number breakpoint keys from the provided breakpoints
   */
  var keys = Object.keys(breakpoints);
  /**
   * Use only the keys matching the official breakpoints names, and sort them in
   * largest to smallest order
   */

  var sorted = _utils.breakpoints.filter(function (bp) {
    return keys.includes(bp);
  }).reverse();
  /**
   * create a min-max media query string
   */


  return sorted.map(function (breakpoint, index) {
    var minWidth = breakpoints[breakpoint];
    var next = sorted[index - 1];
    var maxWidth = next ? breakpoints[next] : undefined;
    var query = "";

    if (parseInt(minWidth) >= 0) {
      query = "(min-width: " + toMediaString(minWidth) + ")";
    }

    if (maxWidth) {
      if (query) {
        query += " and ";
      }

      query += "(max-width: " + toMediaString(subtract(maxWidth)) + ")";
    }

    var mediaQuery = {
      breakpoint: breakpoint,
      maxWidth: maxWidth,
      minWidth: minWidth,
      query: query
    };
    return mediaQuery;
  });
}

function subtract(value) {
  return (0, _calculateMeasurement["default"])(value, -0.01);
}
/**
 * Convert media query value to string
 */


function toMediaString(value) {
  return (0, _utils.isNumber)(value) ? value + "px" : value;
}

var _default = createMediaQueries;
exports["default"] = _default;
//# sourceMappingURL=create-media-query.js.map