antd
Version:
An enterprise-class UI design language and React components implementation
62 lines • 2.03 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
export var responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
export var responsiveMap = {
xs: '(max-width: 575px)',
sm: '(min-width: 576px)',
md: '(min-width: 768px)',
lg: '(min-width: 992px)',
xl: '(min-width: 1200px)',
xxl: '(min-width: 1600px)'
};
var subscribers = new Map();
var subUid = -1;
var screens = {};
var responsiveObserve = {
matchHandlers: {},
dispatch: function dispatch(pointMap) {
screens = pointMap;
subscribers.forEach(function (func) {
return func(screens);
});
return subscribers.size >= 1;
},
subscribe: function subscribe(func) {
if (!subscribers.size) this.register();
subUid += 1;
subscribers.set(subUid, func);
func(screens);
return subUid;
},
unsubscribe: function unsubscribe(token) {
subscribers["delete"](token);
if (!subscribers.size) this.unregister();
},
unregister: function unregister() {
var _this = this;
Object.keys(responsiveMap).forEach(function (screen) {
var matchMediaQuery = responsiveMap[screen];
var handler = _this.matchHandlers[matchMediaQuery];
handler === null || handler === void 0 ? void 0 : handler.mql.removeListener(handler === null || handler === void 0 ? void 0 : handler.listener);
});
subscribers.clear();
},
register: function register() {
var _this2 = this;
Object.keys(responsiveMap).forEach(function (screen) {
var matchMediaQuery = responsiveMap[screen];
var listener = function listener(_ref) {
var matches = _ref.matches;
_this2.dispatch(_extends(_extends({}, screens), _defineProperty({}, screen, matches)));
};
var mql = window.matchMedia(matchMediaQuery);
mql.addListener(listener);
_this2.matchHandlers[matchMediaQuery] = {
mql: mql,
listener: listener
};
listener(mql);
});
}
};
export default responsiveObserve;