@ozen-ui/kit
Version:
React component library
69 lines (68 loc) • 3.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBreakpoints = useBreakpoints;
var tslib_1 = require("tslib");
var react_1 = require("react");
var Breakpoints_1 = require("../../types/Breakpoints");
var useDeprecated_1 = require("../useDeprecated");
var useIsomorphicEffect_1 = require("../useIsomorphicEffect");
var breakpoint = {
xs: '(min-width: 0px)',
s: '(min-width: 640px)',
m: '(min-width: 1024px)',
l: '(min-width: 1280px)',
};
/**
* @deprecated Хук устарел. Для замены используйте useBreakpointsNext
*/
function useBreakpoints() {
(0, useDeprecated_1.useDeprecatedHook)('useBreakpoints');
var _a = tslib_1.__read((0, react_1.useState)(Breakpoints_1.breakpointVariant.reduce(function (acc, key) {
var _a;
return (tslib_1.__assign(tslib_1.__assign({}, acc), (_a = {}, _a[key] = window.matchMedia(breakpoint[key]).matches, _a)));
}, {})), 2), matches = _a[0], setMatches = _a[1];
var updateMatches = (0, react_1.useCallback)(function (key) { return function (e) {
setMatches(function (prevMatches) {
var _a;
return (tslib_1.__assign(tslib_1.__assign({}, prevMatches), (_a = {}, _a[key] = e.matches, _a)));
});
}; }, []);
(0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
var e_1, _a;
var matchMedias = [];
try {
for (var breakpointVariant_1 = tslib_1.__values(Breakpoints_1.breakpointVariant), breakpointVariant_1_1 = breakpointVariant_1.next(); !breakpointVariant_1_1.done; breakpointVariant_1_1 = breakpointVariant_1.next()) {
var key = breakpointVariant_1_1.value;
var matchMedia_1 = window.matchMedia(breakpoint[key]);
var func = updateMatches(key);
matchMedia_1.addEventListener('change', func);
matchMedias.push({ matchMedia: matchMedia_1, func: func });
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (breakpointVariant_1_1 && !breakpointVariant_1_1.done && (_a = breakpointVariant_1.return)) _a.call(breakpointVariant_1);
}
finally { if (e_1) throw e_1.error; }
}
return function () {
var e_2, _a;
try {
for (var matchMedias_1 = tslib_1.__values(matchMedias), matchMedias_1_1 = matchMedias_1.next(); !matchMedias_1_1.done; matchMedias_1_1 = matchMedias_1.next()) {
var _b = matchMedias_1_1.value, matchMedia_2 = _b.matchMedia, func = _b.func;
matchMedia_2.removeEventListener('change', func);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (matchMedias_1_1 && !matchMedias_1_1.done && (_a = matchMedias_1.return)) _a.call(matchMedias_1);
}
finally { if (e_2) throw e_2.error; }
}
};
}, []);
(0, react_1.useDebugValue)(matches);
return matches;
}