@bianic-ui/media-query/dist/cjs/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.useQuery = useQuery;
exports.Show = exports.Hide = void 0;

var _useMediaQuery2 = require("./use-media-query");

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

var _system = require("@bianic-ui/system");

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * Visibility
 *
 * React component to control the visibility of it's
 * children based on the current breakpoint
 */
var Visibility = function Visibility(props) {
  var breakpoint = props.breakpoint,
      hide = props.hide,
      children = props.children;

  var _useMediaQuery = (0, _useMediaQuery2.useMediaQuery)(breakpoint),
      show = _useMediaQuery[0];

  var isVisible = hide ? !show : show;
  var rendered = isVisible ? children : null;
  return rendered;
};

var Hide = function Hide(props) {
  var query = useQuery(props);
  return /*#__PURE__*/React.createElement(Visibility, {
    breakpoint: query,
    hide: true
  }, props.children);
};

exports.Hide = Hide;

if (_utils.__DEV__) {
  Hide.displayName = "Hide";
}

var Show = function Show(props) {
  var query = useQuery(props);
  return /*#__PURE__*/React.createElement(Visibility, {
    breakpoint: query
  }, props.children);
};

exports.Show = Show;

if (_utils.__DEV__) {
  Show.displayName = "Show";
}

var getBreakpoint = function getBreakpoint(theme, value) {
  return (0, _utils.get)(theme, "breakpoints." + value, value);
};

function useQuery(props) {
  var _props$breakpoint = props.breakpoint,
      breakpoint = _props$breakpoint === void 0 ? "" : _props$breakpoint,
      below = props.below,
      above = props.above;
  var theme = (0, _system.useTheme)();
  var bpBelow = getBreakpoint(theme, below);
  var bpAbove = getBreakpoint(theme, above);
  var query = bpBelow ? "(max-width: " + bpBelow + ")" : bpAbove ? "(min-width: " + bpAbove + ")" : breakpoint;
  return query;
}
//# sourceMappingURL=media-query.js.map