From 900e1601adc984034e6323c171d9747076eb8e63 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Fri, 7 Jun 2019 19:58:04 +0200
Subject: [PATCH] Hookify Responsive

---
 .../ra-ui-materialui/src/layout/Responsive.js | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/ra-ui-materialui/src/layout/Responsive.js b/packages/ra-ui-materialui/src/layout/Responsive.js
index e5961424642..d665e261388 100644
--- a/packages/ra-ui-materialui/src/layout/Responsive.js
+++ b/packages/ra-ui-materialui/src/layout/Responsive.js
@@ -1,15 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withWidth from '@material-ui/core/withWidth';
+import { useTheme } from '@material-ui/styles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 
-export const Responsive = ({
-    xsmall,
-    small,
-    medium,
-    large,
-    width,
-    ...rest
-}) => {
+export const Responsive = ({ xsmall, small, medium, large, ...rest }) => {
+    const theme = useTheme();
+    const width =
+        [...theme.breakpoints.keys].reverse().reduce((output, key) => {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const matches = useMediaQuery(theme.breakpoints.only(key));
+            return !output && matches ? key : output;
+        }, null) || 'xs';
     let element;
     switch (width) {
         case 'xs':
@@ -59,7 +60,6 @@ Responsive.propTypes = {
     small: PropTypes.element,
     medium: PropTypes.element,
     large: PropTypes.element,
-    width: PropTypes.string,
 };
 
-export default withWidth()(Responsive);
+export default Responsive;