[useMediaQuery] Convert to TypeScript

mui · Sep 17, 2021 · 67ac50f · 67ac50f
1 parent 2a52c2a
commit 67ac50f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.d.ts b/packages/mui-material/src/useMediaQuery/useMediaQuery.d.ts
diff --git a/...terial/src/useMediaQuery/useMediaQuery.js → ...terial/src/useMediaQuery/useMediaQuery.ts b/...terial/src/useMediaQuery/useMediaQuery.js → ...terial/src/useMediaQuery/useMediaQuery.ts
@@ -2,8 +2,39 @@ import * as React from 'react';
 import { getThemeProps, useThemeWithoutDefault as useTheme } from '@mui/system';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
 
-export default function useMediaQuery(queryInput, options = {}) {
-  const theme = useTheme();
+/**
+ * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
+ */
+export interface MuiMediaQueryListEvent {
+  matches: boolean;
+}
+
+/**
+ * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
+ */
+export interface MuiMediaQueryList {
+  matches: boolean;
+  addListener: (listener: MuiMediaQueryListListener) => void;
+  removeListener: (listener: MuiMediaQueryListListener) => void;
+}
+
+/**
+ * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
+ */
+export type MuiMediaQueryListListener = (event: MuiMediaQueryListEvent) => void;
+
+export interface Options {
+  defaultMatches?: boolean;
+  matchMedia?: typeof window.matchMedia;
+  noSsr?: boolean;
+  ssrMatchMedia?: (query: string) => { matches: boolean };
+}
+
+export default function useMediaQuery<Theme = unknown>(
+  queryInput: string | ((theme: Theme) => string),
+  options: Options = {},
+): boolean {
+  const theme = useTheme<Theme>();
   // 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.
@@ -34,7 +65,7 @@ export default function useMediaQuery(queryInput, options = {}) {
 
   const [match, setMatch] = React.useState(() => {
     if (noSsr && supportMatchMedia) {
-      return matchMedia(query).matches;
+      return matchMedia!(query).matches;
     }
     if (ssrMatchMedia) {
       return ssrMatchMedia(query).matches;
@@ -52,7 +83,7 @@ export default function useMediaQuery(queryInput, options = {}) {
       return undefined;
     }
 
-    const queryList = matchMedia(query);
+    const queryList = matchMedia!(query);
     const updateMatch = () => {
       // Workaround Safari wrong implementation of matchMedia
       // TODO can we remove it?