From b5bc3e731a88cdd7f920ed4ad8f2881377280428 Mon Sep 17 00:00:00 2001 From: Khalid Jebbari Date: Wed, 18 Nov 2020 11:19:11 +0100 Subject: [PATCH 1/3] Fix typos in Theming doc - typo - no error page in example, so I removed the mention in the text - I added a comment in the text itself, another occurrence of something mentioned in text that doesn't appear in code. So I guess you have some fixing to do before merging. --- docs/Theming.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/Theming.md b/docs/Theming.md index a771a3db82b..8f2a7f19c8f 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -11,7 +11,7 @@ Whether you need to adjust a CSS rule for a single component, or change the colo Every react-admin component provides a `className` property, which is always applied to the root element. -Here is an example customizing an `EditButton` component inside a `Datagrid`, using its `className` property and the `makeStyle` hook from Material-UI: +Here is an example customizing an `EditButton` component inside a `Datagrid`, using its `className` property and the `makeStyles` hook from Material-UI: {% raw %} ```jsx @@ -387,7 +387,7 @@ const App = () => ( ); ``` -Your custom layout can extend the default `` component if you only want to override the sidebar, the appBar, the menu, the notification component, or the error page. For instance: +Your custom layout can extend the default `` component if you only want to override the sidebar, the appBar, the menu or the notification component. For instance: ```jsx // in src/MyLayout.js @@ -890,7 +890,7 @@ const App = () => ( The `MenuItemLink` component make use of the React Router [NavLink](https://reacttraining.com/react-router/web/api/NavLink) component, hence allowing to customize its style when it targets the current page. -If the default active style does not suit your tastes, you can override it by passing your own `classes`: +If the default active style does not suit your tastes, you can override it by passing your own `classes`: // the code below doesn't use the `classes` prop ```jsx // in src/Menu.js From 63c2d5f25a4622bae52f52b5d5a6d6d17e042120 Mon Sep 17 00:00:00 2001 From: Khalid Jebbari Date: Wed, 18 Nov 2020 15:36:03 +0100 Subject: [PATCH 2/3] Revert removal of `error` --- docs/Theming.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Theming.md b/docs/Theming.md index 8f2a7f19c8f..c251bb2af52 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -387,7 +387,7 @@ const App = () => ( ); ``` -Your custom layout can extend the default `` component if you only want to override the sidebar, the appBar, the menu or the notification component. For instance: +Your custom layout can extend the default `` component if you only want to override the sidebar, the appBar, the menu, the notification component or the error page. For instance: ```jsx // in src/MyLayout.js From 07e7ed26eeec8de6155988e04f43247d5b3d6feb Mon Sep 17 00:00:00 2001 From: Khalid Jebbari Date: Wed, 18 Nov 2020 15:37:14 +0100 Subject: [PATCH 3/3] Remove irrelevant paragraph --- docs/Theming.md | 43 ------------------------------------------- 1 file changed, 43 deletions(-) diff --git a/docs/Theming.md b/docs/Theming.md index c251bb2af52..d3eb8fad8f4 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -890,49 +890,6 @@ const App = () => ( The `MenuItemLink` component make use of the React Router [NavLink](https://reacttraining.com/react-router/web/api/NavLink) component, hence allowing to customize its style when it targets the current page. -If the default active style does not suit your tastes, you can override it by passing your own `classes`: // the code below doesn't use the `classes` prop - -```jsx -// in src/Menu.js -import * as React from 'react'; -import { createElement } from 'react'; -import { useSelector } 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'; - -const Menu = ({ onMenuClick, logout }) => { - const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs')); - const open = useSelector(state => state.admin.ui.sidebarOpen); - const resources = useSelector(getResources); - return ( -
- {resources.map(resource => ( - - ))} - - {isXSmall && logout} -
- ); -}; - -export default withRouter(Menu); -``` - **Tip**: If you need a multi-level menu, or a Mega Menu opening panels with custom content, check out [the `ra-navigation` module](https://marmelab.com/ra-enterprise/modules/ra-navigation) (part of the [Enterprise Edition](https://marmelab.com/ra-enterprise)) ![MegaMenu and Breadcrumb](https://marmelab.com/ra-enterprise/modules/assets/ra-multilevelmenu-categories.gif)