@amaui/ui-react
Version:
UI for React
49 lines (48 loc) • 2.41 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const useMediaQuery = (props, options) => {
var _a, _b, _c;
const element = options === null || options === void 0 ? void 0 : options.element;
const [root, setRoot] = react_1.default.useState();
const [matches, setMatches] = react_1.default.useState((options === null || options === void 0 ? void 0 : options.initial) !== undefined ? options.initial : ((0, utils_1.isEnvironment)('browser') && ((_c = (_b = (((_a = element === null || element === void 0 ? void 0 : element.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) || window)) === null || _b === void 0 ? void 0 : _b.matchMedia(props)) === null || _c === void 0 ? void 0 : _c.matches)));
const refs = {
root: react_1.default.useRef(root),
responsive: react_1.default.useRef({}),
matches: react_1.default.useRef(matches)
};
refs.matches.current = matches;
// Root
react_1.default.useEffect(() => {
var _a;
const rootNew = ((_a = element === null || element === void 0 ? void 0 : element.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) || window;
setRoot(rootNew);
refs.root.current = rootNew;
}, [element]);
const method = react_1.default.useCallback((event) => {
if (refs.matches.current !== event.matches)
setMatches(event.matches);
}, []);
// Watch
react_1.default.useEffect(() => {
if (!root)
return;
const mediaQuery = root.matchMedia(props);
// Add new event listener
mediaQuery.addEventListener('change', method);
if (refs.matches.current !== (mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.matches))
setMatches(mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.matches);
return () => {
// Remove event listener
if (mediaQuery)
mediaQuery.removeEventListener('change', method);
};
}, [root, props]);
return matches;
};
useMediaQuery.displayName = 'amaui-UseMediaQuery';
exports.default = useMediaQuery;