You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
3.5 KiB
131 lines
3.5 KiB
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = exports.getScreenClassName = exports.MediaQueryEnum = void 0;
|
|
|
|
var _react = require("react");
|
|
|
|
var _reactResponsive = require("react-responsive");
|
|
|
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
|
|
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
|
|
|
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
|
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
|
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
|
|
*/
|
|
|
|
exports.MediaQueryEnum = MediaQueryEnum;
|
|
|
|
var getScreenClassName = function getScreenClassName() {
|
|
var className = 'md'; // support ssr
|
|
|
|
if (typeof window === 'undefined') {
|
|
return className;
|
|
}
|
|
|
|
var mediaQueryKey = Object.keys(MediaQueryEnum).find(function (key) {
|
|
var matchMedia = MediaQueryEnum[key].matchMedia;
|
|
|
|
if (window.matchMedia(matchMedia).matches) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
className = mediaQueryKey;
|
|
return className;
|
|
};
|
|
|
|
exports.getScreenClassName = getScreenClassName;
|
|
|
|
var useMedia = function useMedia() {
|
|
var isMd = (0, _reactResponsive.useMediaQuery)(MediaQueryEnum.md);
|
|
var isLg = (0, _reactResponsive.useMediaQuery)(MediaQueryEnum.lg);
|
|
var isXxl = (0, _reactResponsive.useMediaQuery)(MediaQueryEnum.xxl);
|
|
var isXl = (0, _reactResponsive.useMediaQuery)(MediaQueryEnum.xl);
|
|
var isSm = (0, _reactResponsive.useMediaQuery)(MediaQueryEnum.sm);
|
|
var isXs = (0, _reactResponsive.useMediaQuery)(MediaQueryEnum.xs);
|
|
|
|
var _useState = (0, _react.useState)(getScreenClassName()),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
colSpan = _useState2[0],
|
|
setColSpan = _useState2[1];
|
|
|
|
(0, _react.useEffect)(function () {
|
|
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;
|
|
};
|
|
|
|
var _default = useMedia;
|
|
exports.default = _default; |