Spaces:
Sleeping
Sleeping
File size: 5,703 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 134 135 136 137 138 139 140 141 142 143 144 145 |
'use client';
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
import { getThemeProps } from '../useThemeProps';
import useTheme from '../useThemeWithoutDefault';
/**
* @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) {
var _React$useState = React.useState(function () {
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;
}),
match = _React$useState[0],
setMatch = _React$useState[1];
useEnhancedEffect(function () {
var active = true;
if (!matchMedia) {
return undefined;
}
var queryList = matchMedia(query);
var updateMatch = function 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 function () {
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
var maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
var getDefaultSnapshot = React.useCallback(function () {
return defaultMatches;
}, [defaultMatches]);
var getServerSnapshot = React.useMemo(function () {
if (noSsr && matchMedia) {
return function () {
return matchMedia(query).matches;
};
}
if (ssrMatchMedia !== null) {
var _ssrMatchMedia = ssrMatchMedia(query),
matches = _ssrMatchMedia.matches;
return function () {
return matches;
};
}
return getDefaultSnapshot;
}, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
var _React$useMemo = React.useMemo(function () {
if (matchMedia === null) {
return [getDefaultSnapshot, function () {
return function () {};
}];
}
var mediaQueryList = matchMedia(query);
return [function () {
return mediaQueryList.matches;
}, function (notify) {
// TODO: Use `addEventListener` once support for Safari < 14 is dropped
mediaQueryList.addListener(notify);
return function () {
mediaQueryList.removeListener(notify);
};
}];
}, [getDefaultSnapshot, matchMedia, query]),
_React$useMemo2 = _slicedToArray(_React$useMemo, 2),
getSnapshot = _React$useMemo2[0],
subscribe = _React$useMemo2[1];
var match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
return match;
}
export default function useMediaQuery(queryInput) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var theme = useTheme();
// 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.
var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
var _getThemeProps = getThemeProps({
name: 'MuiUseMediaQuery',
props: options,
theme: theme
}),
_getThemeProps$defaul = _getThemeProps.defaultMatches,
defaultMatches = _getThemeProps$defaul === void 0 ? false : _getThemeProps$defaul,
_getThemeProps$matchM = _getThemeProps.matchMedia,
matchMedia = _getThemeProps$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _getThemeProps$matchM,
_getThemeProps$ssrMat = _getThemeProps.ssrMatchMedia,
ssrMatchMedia = _getThemeProps$ssrMat === void 0 ? null : _getThemeProps$ssrMat,
_getThemeProps$noSsr = _getThemeProps.noSsr,
noSsr = _getThemeProps$noSsr === void 0 ? false : _getThemeProps$noSsr;
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'));
}
}
var 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
var useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
var 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: query,
match: match
});
}
return match;
} |