1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.default = useMediaQuery;
|
11 |
|
12 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13 |
|
14 | var React = _interopRequireWildcard(require("react"));
|
15 |
|
16 | var _styles = require("@material-ui/styles");
|
17 |
|
18 | function useMediaQuery(queryInput) {
|
19 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
20 | var theme = (0, _styles.useTheme)();
|
21 | var props = (0, _styles.getThemeProps)({
|
22 | theme: theme,
|
23 | name: 'MuiUseMediaQuery',
|
24 | props: {}
|
25 | });
|
26 |
|
27 | if (process.env.NODE_ENV !== 'production') {
|
28 | if (typeof queryInput === 'function' && theme === null) {
|
29 | console.error(['Material-UI: 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'));
|
30 | }
|
31 | }
|
32 |
|
33 | var query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
|
34 | query = query.replace(/^@media( ?)/m, '');
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
|
40 |
|
41 | var _props$options = (0, _extends2.default)({}, props, options),
|
42 | _props$options$defaul = _props$options.defaultMatches,
|
43 | defaultMatches = _props$options$defaul === void 0 ? false : _props$options$defaul,
|
44 | _props$options$matchM = _props$options.matchMedia,
|
45 | matchMedia = _props$options$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _props$options$matchM,
|
46 | _props$options$noSsr = _props$options.noSsr,
|
47 | noSsr = _props$options$noSsr === void 0 ? false : _props$options$noSsr,
|
48 | _props$options$ssrMat = _props$options.ssrMatchMedia,
|
49 | ssrMatchMedia = _props$options$ssrMat === void 0 ? null : _props$options$ssrMat;
|
50 |
|
51 | var _React$useState = React.useState(function () {
|
52 | if (noSsr && supportMatchMedia) {
|
53 | return matchMedia(query).matches;
|
54 | }
|
55 |
|
56 | if (ssrMatchMedia) {
|
57 | return ssrMatchMedia(query).matches;
|
58 | }
|
59 |
|
60 |
|
61 |
|
62 | return defaultMatches;
|
63 | }),
|
64 | match = _React$useState[0],
|
65 | setMatch = _React$useState[1];
|
66 |
|
67 | React.useEffect(function () {
|
68 | var active = true;
|
69 |
|
70 | if (!supportMatchMedia) {
|
71 | return undefined;
|
72 | }
|
73 |
|
74 | var queryList = matchMedia(query);
|
75 |
|
76 | var updateMatch = function updateMatch() {
|
77 |
|
78 |
|
79 |
|
80 | if (active) {
|
81 | setMatch(queryList.matches);
|
82 | }
|
83 | };
|
84 |
|
85 | updateMatch();
|
86 | queryList.addListener(updateMatch);
|
87 | return function () {
|
88 | active = false;
|
89 | queryList.removeListener(updateMatch);
|
90 | };
|
91 | }, [query, matchMedia, supportMatchMedia]);
|
92 |
|
93 | if (process.env.NODE_ENV !== 'production') {
|
94 |
|
95 | React.useDebugValue({
|
96 | query: query,
|
97 | match: match
|
98 | });
|
99 | }
|
100 |
|
101 | return match;
|
102 | } |
\ | No newline at end of file |