@ant-design/pro-utils
Version:
100 lines • 2.55 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useEffect, useState } from 'react';
import useMediaQuery from "./query";
export var 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)'
}
};
/**
* loop query screen className
* Array.find will throw a error
* `Rendered more hooks than during the previous render.`
* So should use Array.forEach
*/
export var getScreenClassName = function getScreenClassName() {
var queryKey = undefined;
// support ssr
if (typeof window === 'undefined') {
return queryKey;
}
var mediaQueryKey = Object.keys(MediaQueryEnum).find(function (key) {
var matchMedia = MediaQueryEnum[key].matchMedia;
if (window.matchMedia(matchMedia).matches) {
return true;
}
return false;
});
queryKey = mediaQueryKey;
return queryKey;
};
var useBreakpoint = function useBreakpoint() {
var isMd = useMediaQuery(MediaQueryEnum.md.matchMedia);
var isLg = useMediaQuery(MediaQueryEnum.lg.matchMedia);
var isXxl = useMediaQuery(MediaQueryEnum.xxl.matchMedia);
var isXl = useMediaQuery(MediaQueryEnum.xl.matchMedia);
var isSm = useMediaQuery(MediaQueryEnum.sm.matchMedia);
var isXs = useMediaQuery(MediaQueryEnum.xs.matchMedia);
var _useState = useState(getScreenClassName()),
_useState2 = _slicedToArray(_useState, 2),
colSpan = _useState2[0],
setColSpan = _useState2[1];
useEffect(function () {
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');
}, [isMd, isLg, isXxl, isXl, isSm, isXs]);
return colSpan;
};
export { useBreakpoint };