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

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

"use strict";

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

var _react = require("react");

var _ = require(".");

var _provider = require("./provider");

// We will save the calculated value until innerWidth changes
var cachedProplessValue = {};

var calculateProplessValue = function calculateProplessValue(iw, ih) {
  var key = "".concat(iw).concat(ih);
  if (cachedProplessValue[key]) return cachedProplessValue[key];
  var isLandscape = iw > ih;
  var proplessValue = {
    isLandscape,
    isPortrait: !isLandscape,
    isHDPI: typeof window !== 'undefined' && window.devicePixelRatio > 1,
    innerWidth: iw,
    innerHeight: ih,
    media: {}
  }; // @ts-ignore

  for (var [k, [from, to]] of Object.entries(_.options.breakpoints)) {
    // It's a prefix breakpoint, no need to process
    if (from === true) continue;
    var [firstLetter, secondLetter, ...restLetter] = k;
    var isOrientedLandscape = _.LANDSCAPE === firstLetter;
    var isOrientedPortrait = _.PORTRAIT === firstLetter;
    var isOriented = isOrientedLandscape || isOrientedPortrait;

    var _key = isOriented ? "".concat(firstLetter).concat(secondLetter.toUpperCase()).concat(restLetter.join('')) : "".concat(firstLetter.toUpperCase()).concat(secondLetter).concat(restLetter.join(''));

    proplessValue["is".concat(_key)] = iw > from && iw <= to && (!isOriented || isOrientedLandscape && isLandscape || isOrientedPortrait && !isLandscape);
    proplessValue.media[k] = "(min-width: ".concat(from, "px) and (max-width: ").concat(to, "px)");
  }

  cachedProplessValue[key] = proplessValue;
  return proplessValue;
};
/* eslint-disable no-continue */


var calculateValue = function calculateValue(defaultValue) {
  var breakpointValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  var iw = arguments.length > 2 ? arguments[2] : undefined;
  var ih = arguments.length > 3 ? arguments[3] : undefined;

  if (defaultValue === undefined && !breakpointValues.length) {
    return calculateProplessValue(iw, ih);
  }

  var isLandscape = iw > ih;

  if (!breakpointValues || !breakpointValues.length) {
    return defaultValue;
  }

  if (typeof breakpointValues[0] === 'string') {
    // @ts-ignore
    breakpointValues = [breakpointValues]; // eslint-disable-line
  }

  for (var [_key2, value] of breakpointValues) {
    if (!_.options.breakpoints[_key2]) continue;
    var bp = _.options.breakpoints[_key2];
    if (isLandscape && _key2[0] === _.PORTRAIT) continue;
    if (!isLandscape && _key2[0] === _.LANDSCAPE) continue;
    if (iw >= bp[0] && iw <= bp[1]) return value;
  }

  return defaultValue;
};

exports.calculateValue = calculateValue;

function useBreakpoint(defaultValue, breakpointValues) {
  var {
    innerWidth,
    innerHeight
  } = (0, _react.useContext)(_provider.Context);
  return (0, _react.useMemo)(() => calculateValue(defaultValue, breakpointValues, innerWidth, innerHeight), [innerWidth, innerHeight, defaultValue]);
}

var _default = useBreakpoint;
exports.default = _default;