@antdv/pro-utils/lib/hooks/useBreakpoint/index.js

@antdv/pro-utils

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var stdin_exports = {};
__export(stdin_exports, {
  MediaQueryEnum: () => MediaQueryEnum,
  getScreenClassName: () => getScreenClassName,
  useBreakpoint: () => useBreakpoint
});
module.exports = __toCommonJS(stdin_exports);
var import_vue = require("vue");
var import_useMediaQuery = require("../../vueuse/useMediaQuery");
var import_useEffect = require("../useEffect");
var import_useState = require("../useState");
const MediaQueryEnum = {
  xs: {
    maxWidth: 575,
    matchMedia: "(max-width: 575px)"
  },
  sm: {
    minWidth: 576,
    maxWidth: 767,
    matchMedia: "(min-width: 576px) and (max-width: 767px)"
  },
  md: {
    minWidth: 768,
    maxWidth: 991,
    matchMedia: "(min-width: 768px) and (max-width: 991px)"
  },
  lg: {
    minWidth: 992,
    maxWidth: 1199,
    matchMedia: "(min-width: 992px) and (max-width: 1199px)"
  },
  xl: {
    minWidth: 1200,
    maxWidth: 1599,
    matchMedia: "(min-width: 1200px) and (max-width: 1599px)"
  },
  xxl: {
    minWidth: 1600,
    matchMedia: "(min-width: 1600px)"
  }
};
function getScreenClassName() {
  let queryKey;
  if (typeof window === "undefined") {
    return queryKey;
  }
  const mediaQueryKey = Object.keys(MediaQueryEnum).find(
    (key) => {
      const { matchMedia } = MediaQueryEnum[key];
      if (window.matchMedia(matchMedia).matches) {
        return true;
      }
      return false;
    }
  );
  queryKey = mediaQueryKey;
  return queryKey;
}
function useBreakpoint() {
  const isMd = (0, import_useMediaQuery.useMediaQuery)(MediaQueryEnum.md.matchMedia);
  const isLg = (0, import_useMediaQuery.useMediaQuery)(MediaQueryEnum.lg.matchMedia);
  const isXxl = (0, import_useMediaQuery.useMediaQuery)(MediaQueryEnum.xxl.matchMedia);
  const isXl = (0, import_useMediaQuery.useMediaQuery)(MediaQueryEnum.xl.matchMedia);
  const isSm = (0, import_useMediaQuery.useMediaQuery)(MediaQueryEnum.sm.matchMedia);
  const isXs = (0, import_useMediaQuery.useMediaQuery)(MediaQueryEnum.xs.matchMedia);
  const [colSpan, setColSpan] = (0, import_useState.useState)(getScreenClassName());
  (0, import_useEffect.useEffect)(() => {
    if (process.env.NODE_ENV === "TEST") {
      setColSpan(process.env.USE_MEDIA || "md");
      return;
    }
    if (isXxl) {
      setColSpan("xxl");
      return;
    }
    if (isXl) {
      setColSpan("xl");
      return;
    }
    if (isLg) {
      setColSpan("lg");
      return;
    }
    if (isMd) {
      setColSpan("md");
      return;
    }
    if (isSm) {
      setColSpan("sm");
      return;
    }
    if (isXs) {
      setColSpan("xs");
      return;
    }
    setColSpan("md");
  }, (0, import_vue.computed)(() => [isMd.value, isLg.value, isXxl.value, isXl.value, isSm.value, isXs.value]));
  return colSpan;
}