[Dialog] Prepare deprecation of withMobileDialog

mui · Jun 21, 2019 · b683999 · b683999
1 parent bd65310
commit b683999
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 23 deletions.
diff --git a/docs/src/pages/components/dialogs/ResponsiveDialog.js b/docs/src/pages/components/dialogs/ResponsiveDialog.js
@@ -1,16 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import withMobileDialog from '@material-ui/core/withMobileDialog';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { useTheme } from '@material-ui/core/styles';
 
-function ResponsiveDialog(props) {
-  const { fullScreen } = props;
+export default function ResponsiveDialog() {
   const [open, setOpen] = React.useState(false);
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
   function handleClickOpen() {
     setOpen(true);
@@ -50,9 +51,3 @@ function ResponsiveDialog(props) {
     </div>
   );
 }
-
-ResponsiveDialog.propTypes = {
-  fullScreen: PropTypes.bool.isRequired,
-};
-
-export default withMobileDialog()(ResponsiveDialog);
diff --git a/docs/src/pages/components/dialogs/ResponsiveDialog.tsx b/docs/src/pages/components/dialogs/ResponsiveDialog.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import withMobileDialog, { WithMobileDialog } from '@material-ui/core/withMobileDialog';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { useTheme } from '@material-ui/core/styles';
 
-export type ResponsiveDialogProps = WithMobileDialog;
-
-function ResponsiveDialog(props: ResponsiveDialogProps) {
-  const { fullScreen } = props;
+export default function ResponsiveDialog() {
   const [open, setOpen] = React.useState(false);
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
   function handleClickOpen() {
     setOpen(true);
@@ -52,9 +51,3 @@ function ResponsiveDialog(props: ResponsiveDialogProps) {
     </div>
   );
 }
-
-ResponsiveDialog.propTypes = {
-  fullScreen: PropTypes.bool.isRequired,
-};
-
-export default withMobileDialog()(ResponsiveDialog);
diff --git a/docs/src/pages/components/dialogs/dialogs.md b/docs/src/pages/components/dialogs/dialogs.md
@@ -78,7 +78,18 @@ When the `fullWidth` property is true, the dialog will adapt based on the `maxWi
 
 ## Responsive full-screen
 
-You may make a dialog responsively full screen using `withMobileDialog`. By default, `withMobileDialog()(Dialog)` responsively full screens *at or below* the `sm` [screen size](/customization/breakpoints/). You can choose your own breakpoint for example `xs` by passing the `breakpoint` argument: `withMobileDialog({breakpoint: 'xs'})(Dialog)`.
+You may make a dialog responsively full screen using [`useMediaQuery`](/components/use-media-query/#usemediaquery).
+
+```jsx
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+function MyComponent() {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+  return <Dialog fullScreen={fullScreen} />
+}
+```
 
 {{"demo": "pages/components/dialogs/ResponsiveDialog.js"}}