1 | import useEffect from './useIsomorphicEffect';
|
2 | import { useState } from 'react';
|
3 | var matchersByWindow = new WeakMap();
|
4 |
|
5 | var getMatcher = function getMatcher(query, targetWindow) {
|
6 | if (!query || !targetWindow) return undefined;
|
7 | var matchers = matchersByWindow.get(targetWindow) || new Map();
|
8 | matchersByWindow.set(targetWindow, matchers);
|
9 | var mql = matchers.get(query);
|
10 |
|
11 | if (!mql) {
|
12 | mql = targetWindow.matchMedia(query);
|
13 | mql.refCount = 0;
|
14 | matchers.set(mql.media, mql);
|
15 | }
|
16 |
|
17 | return mql;
|
18 | };
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 | export default function useMediaQuery(query, targetWindow) {
|
41 | if (targetWindow === void 0) {
|
42 | targetWindow = typeof window === 'undefined' ? undefined : window;
|
43 | }
|
44 |
|
45 | var mql = getMatcher(query, targetWindow);
|
46 |
|
47 | var _useState = useState(function () {
|
48 | return mql ? mql.matches : false;
|
49 | }),
|
50 | matches = _useState[0],
|
51 | setMatches = _useState[1];
|
52 |
|
53 | useEffect(function () {
|
54 | var mql = getMatcher(query, targetWindow);
|
55 |
|
56 | if (!mql) {
|
57 | return setMatches(false);
|
58 | }
|
59 |
|
60 | var matchers = matchersByWindow.get(targetWindow);
|
61 |
|
62 | var handleChange = function handleChange() {
|
63 | setMatches(mql.matches);
|
64 | };
|
65 |
|
66 | mql.refCount++;
|
67 | mql.addListener(handleChange);
|
68 | handleChange();
|
69 | return function () {
|
70 | mql.removeListener(handleChange);
|
71 | mql.refCount--;
|
72 |
|
73 | if (mql.refCount <= 0) {
|
74 | matchers == null ? void 0 : matchers.delete(mql.media);
|
75 | }
|
76 |
|
77 | mql = undefined;
|
78 | };
|
79 | }, [query]);
|
80 | return matches;
|
81 | } |
\ | No newline at end of file |