@ducor/react/dist/hooks/use-media-query.js

admin template ui interface

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { isArray } from "lodash";
import { useEffect, useState, useCallback } from "react";
/**
 * Custom hook to detect media query matches.
 * @see Docs https://ui.ducor.net/hooks/use-media-query
 */
var useEnvironment = function () {
    var getWindow = useCallback(function () {
        return typeof window !== "undefined" ? window : null;
    }, []);
    return { getWindow: getWindow };
};
var useMediaQuery = function (query, _a) {
    var _b = _a === void 0 ? {} : _a, fallback = _b.fallback, _c = _b.ssr, ssr = _c === void 0 ? true : _c;
    var getWindow = useEnvironment().getWindow;
    var queries = isArray(query) ? query : [query];
    var fallbackValues = isArray(fallback) ? fallback : [fallback];
    fallbackValues = fallbackValues.filter(function (value) { return value != null; });
    var _d = useState(function () {
        return queries.map(function (media, index) {
            var _a;
            return ({
                matches: ssr
                    ? !!fallbackValues[index]
                    : !!((_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia(media).matches),
                media: media,
            });
        });
    }), matches = _d[0], setMatches = _d[1];
    useEffect(function () {
        var win = getWindow();
        if (!win)
            return;
        var mql = queries.map(function (query) { return win.matchMedia(query); });
        var handler = function (ev) {
            setMatches(function (prev) {
                return prev.map(function (item) {
                    return item.media === ev.media ? __assign(__assign({}, item), { matches: ev.matches }) : item;
                });
            });
        };
        // Initial update
        setMatches(function (prev) {
            return prev.map(function (item, index) { return (__assign(__assign({}, item), { matches: mql[index].matches })); });
        });
        // Attach listeners (using modern API)
        mql.forEach(function (mq) { return mq.addEventListener("change", handler); });
        return function () {
            mql.forEach(function (mq) { return mq.removeEventListener("change", handler); });
        };
    }, [getWindow, queries]); // ✅ Ensures effect runs when `queries` change
    return matches.map(function (item) { return item.matches; });
};
export default useMediaQuery;