100 lines
2.5 KiB
JavaScript
100 lines
2.5 KiB
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 }; |