Hookify Responsive

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;