Spaces:
Sleeping
Sleeping
| ; | |
| '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; | |
| } |