Spaces:
Sleeping
Sleeping
File size: 5,746 Bytes
56fda74 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useMediaQuery;
var React = _interopRequireWildcard(require("react"));
var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
var _useThemeProps = require("../useThemeProps");
var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
*/
/**
* @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
*/
/**
* @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
*/
function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
const [match, setMatch] = React.useState(() => {
if (noSsr && matchMedia) {
return matchMedia(query).matches;
}
if (ssrMatchMedia) {
return ssrMatchMedia(query).matches;
}
// Once the component is mounted, we rely on the
// event listeners to return the correct matches value.
return defaultMatches;
});
(0, _useEnhancedEffect.default)(() => {
let active = true;
if (!matchMedia) {
return undefined;
}
const queryList = matchMedia(query);
const updateMatch = () => {
// Workaround Safari wrong implementation of matchMedia
// TODO can we remove it?
// https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
if (active) {
setMatch(queryList.matches);
}
};
updateMatch();
// TODO: Use `addEventListener` once support for Safari < 14 is dropped
queryList.addListener(updateMatch);
return () => {
active = false;
queryList.removeListener(updateMatch);
};
}, [query, matchMedia]);
return match;
}
// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
const getServerSnapshot = React.useMemo(() => {
if (noSsr && matchMedia) {
return () => matchMedia(query).matches;
}
if (ssrMatchMedia !== null) {
const {
matches
} = ssrMatchMedia(query);
return () => matches;
}
return getDefaultSnapshot;
}, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
const [getSnapshot, subscribe] = React.useMemo(() => {
if (matchMedia === null) {
return [getDefaultSnapshot, () => () => {}];
}
const mediaQueryList = matchMedia(query);
return [() => mediaQueryList.matches, notify => {
// TODO: Use `addEventListener` once support for Safari < 14 is dropped
mediaQueryList.addListener(notify);
return () => {
mediaQueryList.removeListener(notify);
};
}];
}, [getDefaultSnapshot, matchMedia, query]);
const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
return match;
}
function useMediaQuery(queryInput, options = {}) {
const theme = (0, _useThemeWithoutDefault.default)();
// Wait for jsdom to support the match media feature.
// All the browsers MUI support have this built-in.
// This defensive check is here for simplicity.
// Most of the time, the match media logic isn't central to people tests.
const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
const {
defaultMatches = false,
matchMedia = supportMatchMedia ? window.matchMedia : null,
ssrMatchMedia = null,
noSsr = false
} = (0, _useThemeProps.getThemeProps)({
name: 'MuiUseMediaQuery',
props: options,
theme
});
if (process.env.NODE_ENV !== 'production') {
if (typeof queryInput === 'function' && theme === null) {
console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
}
}
let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
query = query.replace(/^@media( ?)/m, '');
// TODO: Drop `useMediaQueryOld` and use `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useDebugValue({
query,
match
});
}
return match;
} |