Replace Responsive by useMediaQuery in documentation

marmelab · Aug 9, 2019 · 8fcd609 · 8fcd609
1 parent 21f3cb4
commit 8fcd609
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 152 deletions.
diff --git a/docs/Admin.md b/docs/Admin.md
@@ -162,36 +162,39 @@ If you want to add or remove menu items, for instance to link to non-resources p
 // in src/Menu.js
 import React, { createElement } from 'react';
 import { connect } from 'react-redux';
+import { useMediaQuery } from '@material-ui/core';
 import { MenuItemLink, getResources } from 'react-admin';
 import { withRouter } from 'react-router-dom';
 import LabelIcon from '@material-ui/icons/Label';
 
-import Responsive from '../layout/Responsive';
-
-const Menu = ({ resources, onMenuClick, logout }) => (
-    <div>
-        {resources.map(resource => (
+const Menu = ({ resources, onMenuClick, open, logout }) => {
+    const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
+    return (
+        <div>
+            {resources.map(resource => (
+                <MenuItemLink
+                    key={resource.name}
+                    to={`/${resource.name}`}
+                    primaryText={resource.options && resource.options.label || resource.name}
+                    leftIcon={createElement(resource.icon)}
+                    onClick={onMenuClick}
+                    sidebarIsOpen={open}
+                />
+            ))}
             <MenuItemLink
-                key={resource.name}
-                to={`/${resource.name}`}
-                primaryText={resource.options && resource.options.label || resource.name}
-                leftIcon={createElement(resource.icon)}
+                to="/custom-route"
+                primaryText="Miscellaneous"
+                leftIcon={LabelIcon}
                 onClick={onMenuClick}
+                sidebarIsOpen={open}
             />
-        ))}
-        <MenuItemLink
-            to="/custom-route"
-            primaryText="Miscellaneous"
-            leftIcon={LabelIcon}
-            onClick={onMenuClick} />
-        <Responsive
-            small={logout}
-            medium={null} // Pass null to render nothing on larger devices
-        />
-    </div>
-);
+            {isXSmall && logout}
+        </div>
+    );
+}
 
 const mapStateToProps = state => ({
+    open: state.admin.ui.sidebarOpen,
     resources: getResources(state),
 });
 

diff --git a/docs/Authentication.md b/docs/Authentication.md
@@ -300,37 +300,25 @@ const MyLoginPage = ({ theme }) => {
 export default MyLoginPage;
 
 // in src/MyLogoutButton.js
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { useDispatch } from 'react-redux';
-import { Responsive, userLogout } from 'react-admin';
+import { userLogout } from 'react-admin';
 import MenuItem from '@material-ui/core/MenuItem';
-import Button from '@material-ui/core/Button';
 import ExitIcon from '@material-ui/icons/PowerSettingsNew';
 
-const MyLogoutButton = props => {
+const MyLogoutButton = forwardRef((props, ref) => {
     const dispatch = useDispatch();
+    const logout = () => dispatch(userLogout(redirectTo));
     return (
-        <Responsive
-            xsmall={
-                <MenuItem
-                    onClick={() => dispatch(userLogout())}
-                    {...props}
-                >
-                    <ExitIcon /> Logout
-                </MenuItem>
-            }
-            medium={
-                <Button
-                    onClick={() => dispatch(userLogout())}
-                    size="small"
-                    {...props}
-                >
-                    <ExitIcon /> Logout
-                </Button>
-            }
-        />
+        <MenuItem
+            onClick={logout}
+            ref={ref}
+        >
+            <ExitIcon /> Logout
+        </MenuItem>
     );
-};
+});
+
 export default MyLogoutButton;
 
 // in src/App.js

diff --git a/docs/List.md b/docs/List.md
@@ -1048,31 +1048,32 @@ export const PostList = (props) => (
 
 `<SimpleList>` iterates over the list data. For each record, it executes the `primaryText`, `secondaryText`, `leftAvatar`, `leftIcon`, `rightAvatar`, and `rightIcon` props function, and passes the result as the corresponding `<ListItem>` prop.
 
-**Tip**: To use a `<SimpleList>` on small screens and a `<Datagrid>` on larger screens, use the `<Responsive>` component:
+**Tip**: To use a `<SimpleList>` on small screens and a `<Datagrid>` on larger screens, use material-ui's `useMediaQuery` hook:
 
 ```jsx
 // in src/posts.js
 import React from 'react';
-import { List, Responsive, SimpleList, Datagrid, TextField, ReferenceField, EditButton } from 'react-admin';
+import { useMediaQuery } from '@material-ui/core';
+import { List, SimpleList, Datagrid, TextField, ReferenceField, EditButton } from 'react-admin';
 
-export const PostList = (props) => (
-    <List {...props}>
-        <Responsive
-            small={
+export const PostList = (props) => {
+    const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
+    return (
+        <List {...props}>
+            {isSmall ? (
                 <SimpleList
                     primaryText={record => record.title}
                     secondaryText={record => `${record.views} views`}
                     tertiaryText={record => new Date(record.published_at).toLocaleDateString()}
                 />
-            }
-            medium={
+            ) : (
                 <Datagrid>
                     ...
                 </Datagrid>
-            }
-        />
-    </List>
-);
+            )}
+        </List>
+    );
+}
 ```
 
 **Tip**: The `<SimpleList>` items link to the edition page by default. You can set the `linkType` prop to `show` to link to the `<Show>` page instead.
@@ -1281,31 +1282,32 @@ const UserFilter = ({ permissions, ...props }) =>
         {permissions === 'admin' ? <TextInput source="role" /> : null}
     </Filter>;
 
-export const UserList = ({ permissions, ...props }) =>
-    <List
-        {...props}
-        filters={<UserFilter permissions={permissions} {...props} />}
-        sort={{ field: 'name', order: 'ASC' }}
-    >
-        <Responsive
-            small={
+export const UserList = ({ permissions, ...props }) => {
+    const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
+    return (
+        <List
+            {...props}
+            filters={<UserFilter permissions={permissions} {...props} />}
+            sort={{ field: 'name', order: 'ASC' }}
+        >
+            {isSmall ? (
                 <SimpleList
                     primaryText={record => record.name}
                     secondaryText={record =>
                         permissions === 'admin' ? record.role : null}
                 />
-            }
-            medium={
+            ): (
                 <Datagrid>
                     <TextField source="id" />
                     <TextField source="name" />
                     {permissions === 'admin' && <TextField source="role" />}
                     {permissions === 'admin' && <EditButton />}
                     <ShowButton />
                 </Datagrid>
-            }
-        />
-    </List>;
+            )}
+        </List>;
+    )
+}
 ```
 {% endraw %}
 

diff --git a/docs/Reference.md b/docs/Reference.md
@@ -68,7 +68,6 @@ title: "Reference"
 * [`<ReferenceManyField>`](./Fields.md#referencemanyfield)
 * `<RefreshButton>`
 * [`<Resource>`](./Resource.md#the-resource-component)
-* [`<Responsive>`](./Theming.md#responsive-utility)
 * [`<RichTextField>`](./Fields.md#richtextfield)
 * [`<RichTextInput>`](./Inputs.md#richtextinput)
 * `<SaveButton>`