Migrate more components from Responsive to useMediaQuery

marmelab · Jun 20, 2019 · 94db5a2 · 94db5a2
1 parent 5bca9d0
commit 94db5a2
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 78 deletions.
diff --git a/examples/demo/src/layout/Menu.js b/examples/demo/src/layout/Menu.js
@@ -9,7 +9,7 @@ import {
     useTranslate,
     DashboardMenuItem,
     MenuItemLink,
-    Responsive,
+    useMediaQuery,
 } from 'react-admin';
 
 import visitors from '../visitors';
@@ -27,6 +27,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
         menuCustomers: false,
     });
     const translate = useTranslate();
+    const isXsmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
 
     const handleToggle = menu => {
         setState(state => ({ ...state, [menu]: !state[menu] }));
@@ -116,21 +117,15 @@ const Menu = ({ onMenuClick, open, logout }) => {
                 leftIcon={<reviews.icon />}
                 onClick={onMenuClick}
             />
-            <Responsive
-                xsmall={
-                    <MenuItemLink
-                        to="/configuration"
-                        primaryText={translate('pos.configuration')}
-                        leftIcon={<SettingsIcon />}
-                        onClick={onMenuClick}
-                    />
-                }
-                medium={null}
-            />
-            <Responsive
-                small={logout}
-                medium={null} // Pass null to render nothing on larger devices
-            />
+            {isXsmall && (
+                <MenuItemLink
+                    to="/configuration"
+                    primaryText={translate('pos.configuration')}
+                    leftIcon={<SettingsIcon />}
+                    onClick={onMenuClick}
+                />
+            )}
+            {isXsmall && logout}
         </div>
     );
 };

diff --git a/examples/demo/src/visitors/VisitorList.js b/examples/demo/src/visitors/VisitorList.js
@@ -9,8 +9,8 @@ import {
     List,
     NullableBooleanInput,
     NumberField,
-    Responsive,
     SearchInput,
+    useMediaQuery,
 } from 'react-admin';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -36,35 +36,35 @@ const useStyles = makeStyles({
 
 const VisitorList = props => {
     const classes = useStyles();
+    const isXsmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
     return (
         <List
             {...props}
             filters={<VisitorFilter />}
             sort={{ field: 'last_seen', order: 'DESC' }}
             perPage={25}
         >
-            <Responsive
-                xsmall={<MobileGrid />}
-                medium={
-                    <Datagrid>
-                        <CustomerLinkField />
-                        <DateField source="last_seen" type="date" />
-                        <NumberField
-                            source="nb_commands"
-                            label="resources.customers.fields.commands"
-                            className={classes.nb_commands}
-                        />
-                        <ColoredNumberField
-                            source="total_spent"
-                            options={{ style: 'currency', currency: 'USD' }}
-                        />
-                        <DateField source="latest_purchase" showTime />
-                        <BooleanField source="has_newsletter" label="News." />
-                        <SegmentsField />
-                        <EditButton />
-                    </Datagrid>
-                }
-            />
+            {isXsmall ? (
+                <MobileGrid />
+            ) : (
+                <Datagrid>
+                    <CustomerLinkField />
+                    <DateField source="last_seen" type="date" />
+                    <NumberField
+                        source="nb_commands"
+                        label="resources.customers.fields.commands"
+                        className={classes.nb_commands}
+                    />
+                    <ColoredNumberField
+                        source="total_spent"
+                        options={{ style: 'currency', currency: 'USD' }}
+                    />
+                    <DateField source="latest_purchase" showTime />
+                    <BooleanField source="has_newsletter" label="News." />
+                    <SegmentsField />
+                    <EditButton />
+                </Datagrid>
+            )}
         </List>
     );
 };

diff --git a/examples/simple/src/users/UserList.js b/examples/simple/src/users/UserList.js
@@ -8,11 +8,11 @@ import {
     Datagrid,
     Filter,
     List,
-    Responsive,
     SearchInput,
     SimpleList,
     TextField,
     TextInput,
+    useMediaQuery,
 } from 'react-admin';
 
 import Aside from './Aside';
@@ -46,26 +46,23 @@ const UserList = ({ permissions, ...props }) => (
         aside={<Aside />}
         bulkActionButtons={<UserBulkActionButtons />}
     >
-        <Responsive
-            small={
-                <SimpleList
-                    primaryText={record => record.name}
-                    secondaryText={record =>
-                        permissions === 'admin' ? record.role : null
-                    }
-                />
-            }
-            medium={
-                <Datagrid
-                    rowClick={rowClick(permissions)}
-                    expand={<UserEditEmbedded />}
-                >
-                    <TextField source="id" />
-                    <TextField source="name" />
-                    {permissions === 'admin' && <TextField source="role" />}
-                </Datagrid>
-            }
-        />
+        {useMediaQuery(theme => theme.breakpoints.down('sm')) ? (
+            <SimpleList
+                primaryText={record => record.name}
+                secondaryText={record =>
+                    permissions === 'admin' ? record.role : null
+                }
+            />
+        ) : (
+            <Datagrid
+                rowClick={rowClick(permissions)}
+                expand={<UserEditEmbedded />}
+            >
+                <TextField source="id" />
+                <TextField source="name" />
+                {permissions === 'admin' && <TextField source="role" />}
+            </Datagrid>
+        )}
     </List>
 );
 

diff --git a/examples/tutorial/src/users.js b/examples/tutorial/src/users.js
@@ -1,31 +1,28 @@
 import React from 'react';
 import {
-    Responsive,
     SimpleList,
     List,
     Datagrid,
     EmailField,
     TextField,
+    useMediaQuery,
 } from 'react-admin';
 
 export const UserList = props => (
     <List title="All users" {...props}>
-        <Responsive
-            small={
-                <SimpleList
-                    primaryText={record => record.name}
-                    secondaryText={record => record.username}
-                    tertiaryText={record => record.email}
-                />
-            }
-            medium={
-                <Datagrid>
-                    <TextField source="id" />
-                    <TextField source="name" />
-                    <TextField source="username" />
-                    <EmailField source="email" />
-                </Datagrid>
-            }
-        />
+        {useMediaQuery(theme => theme.breakpoints.down('sm')) ? (
+            <SimpleList
+                primaryText={record => record.name}
+                secondaryText={record => record.username}
+                tertiaryText={record => record.email}
+            />
+        ) : (
+            <Datagrid>
+                <TextField source="id" />
+                <TextField source="name" />
+                <TextField source="username" />
+                <EmailField source="email" />
+            </Datagrid>
+        )}
     </List>
 );
diff --git a/packages/ra-ui-materialui/src/layout/Responsive.js b/packages/ra-ui-materialui/src/layout/Responsive.js
@@ -2,6 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import withWidth from '@material-ui/core/withWidth';
 
+/**
+ * @deprecated use useMediaQuery instead
+ */
 export const Responsive = ({
     xsmall,
     small,