From 01b4113df4352b5e44f888ff7d1e75fce8b0fb5c Mon Sep 17 00:00:00 2001 From: Luwangel Date: Mon, 19 Oct 2020 13:20:25 +0200 Subject: [PATCH 1/6] Allow to disable the UserMenu by passing null in the AppBar --- .../ra-ui-materialui/src/layout/AppBar.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/ra-ui-materialui/src/layout/AppBar.tsx b/packages/ra-ui-materialui/src/layout/AppBar.tsx index 6c7582e1bff..00135840df7 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.tsx +++ b/packages/ra-ui-materialui/src/layout/AppBar.tsx @@ -65,7 +65,7 @@ const useStyles = makeStyles( * @param {string} color The color of the AppBar * @param {Component} logout The logout button component that will be pass to the UserMenu component * @param {boolean} open State of the Sidebar - * @param {Element} userMenu A custom user menu component for the AppBar. component by default + * @param {Element | null} userMenu A custom user menu component for the AppBar. component by default. Pass null to disable. * * @example * @@ -79,8 +79,17 @@ const useStyles = makeStyles( * className={classes.title} * id="react-admin-title" * /> - * - * ); + * + * ); + *}; + * + * @example Without a user menu + * + * const MyAppBar = props => { + * const classes = useStyles(); + * return ( + * + * ); *}; */ const AppBar = (props: AppBarProps): JSX.Element => { @@ -146,7 +155,9 @@ const AppBar = (props: AppBarProps): JSX.Element => { children )} - {cloneElement(userMenu, { logout })} + {userMenu !== null + ? cloneElement(userMenu, { logout }) + : null} @@ -179,7 +190,7 @@ export interface AppBarProps extends Omit { logout?: JSX.Element; open?: boolean; title?: string | JSX.Element; - userMenu?: JSX.Element; + userMenu?: JSX.Element | boolean; } export default AppBar; From 03f72a6c79e86b1cc79317f682c605516359d47d Mon Sep 17 00:00:00 2001 From: Luwangel Date: Mon, 19 Oct 2020 13:29:25 +0200 Subject: [PATCH 2/6] Document how to hide the user menu --- docs/Theming.md | 46 ++++++++++++++++++++++++++++------------------ 1 file changed, 28 insertions(+), 18 deletions(-) diff --git a/docs/Theming.md b/docs/Theming.md index 2b522c085a1..cf0fe87bb6a 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -15,7 +15,7 @@ Here is an example customizing an `EditButton` component inside a `Datagrid`, us {% raw %} ```jsx -import * as React from "react"; +import * as React from 'react'; import { NumberField, List, Datagrid, TextField, EditButton } from 'react-admin'; import { makeStyles } from '@material-ui/core/styles'; @@ -50,7 +50,7 @@ Here is an example using the `classes` property of the `Filter` and `List` compo {% raw %} ```jsx -import * as React from "react"; +import * as React from 'react'; import { BooleanField, Datagrid, @@ -146,7 +146,7 @@ Sometimes you want the format to depend on the value. The following example show {% raw %} ```jsx -import * as React from "react"; +import * as React from 'react'; import { NumberField, List, Datagrid, TextField, EditButton } from 'react-admin'; import { makeStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; @@ -189,7 +189,7 @@ Furthermore, you may extract this highlighting strategy into a Higher Order Comp {% raw %} ```jsx -import * as React from "react"; +import * as React from 'react'; import { NumberField, List, Datagrid, TextField, EditButton } from 'react-admin'; import { makeStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; @@ -244,7 +244,7 @@ const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm')); const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); ``` -You can also pass a custom media query as a screen. +You can also pass a custom media query as a screen. ```jsx const isSmall = useMediaQuery('(min-width:600px)'); @@ -254,7 +254,7 @@ Here is an example for a responsive list of posts, displaying a `SimpleList` on ```jsx // in src/posts.js -import * as React from "react"; +import * as React from 'react'; import { useMediaQuery } from '@material-ui/core'; import { List, SimpleList, Datagrid, TextField, ReferenceField, EditButton } from 'react-admin'; @@ -413,7 +413,7 @@ export default MyLayout; You can replace the default user menu by your own by setting the `userMenu` prop of the `` component. For instance, to add custom menu items, just decorate the default `` by adding children to it: ```jsx -import * as React from "react"; +import * as React from 'react'; import { AppBar, UserMenu, MenuItemLink } from 'react-admin'; import SettingsIcon from '@material-ui/icons/Settings'; @@ -438,6 +438,17 @@ const MyAppBar = props => } />; const MyLayout = props => ; ``` +You can also remove the `` from the `` by passing `null` to the `userMenu` prop: + +```jsx +import * as React from 'react'; +import { AppBar } from 'react-admin'; + +const MyAppBar = props => ; + +const MyLayout = props => ; +``` + You can also customize the default icon by setting the `icon` prop to the `` component. {% raw %} @@ -561,7 +572,7 @@ const useStyles = makeStyles(theme => ({ }, })); -const MyLayout = ({ +const MyLayout = ({ children, dashboard, logout, @@ -570,11 +581,11 @@ const MyLayout = ({ const classes = useStyles(); const dispatch = useDispatch(); const open = useSelector(state => state.admin.ui.sidebarOpen); - + useEffect(() => { dispatch(setSidebarVisibility(true)); }, [setSidebarVisibility]); - + return (
@@ -606,7 +617,7 @@ MyLayout.propTypes = { export default MyLayout; ``` -**Tip**: Don't forget to render a `` component in your custom layout, otherwise the undoable updates will never be sent to the server. That's because part of the "undo" logic of react-admin lies in the `` component. +**Tip**: Don't forget to render a `` component in your custom layout, otherwise the undoable updates will never be sent to the server. That's because part of the "undo" logic of react-admin lies in the `` component. ## Adding a Breadcrumb @@ -654,13 +665,13 @@ Check [the `ra-navigation` documentation](https://marmelab.com/ra-enterprise/mod ## Customizing the AppBar Content -By default, the react-admin `` component displays the page title. You can override this default by passing children to `` - they will replace the default title. And if you still want to include the page title, make sure you include an element with id `react-admin-title` in the top bar (this uses [React Portals](https://reactjs.org/docs/portals.html)). +By default, the react-admin `` component displays the page title. You can override this default by passing children to `` - they will replace the default title. And if you still want to include the page title, make sure you include an element with id `react-admin-title` in the top bar (this uses [React Portals](https://reactjs.org/docs/portals.html)). Here is an example customization for `` to include a company logo in the center of the page header: ```jsx // in src/MyAppBar.js -import * as React from "react"; +import * as React from 'react'; import { AppBar } from 'react-admin'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; @@ -702,7 +713,7 @@ To use this custom `MyAppBar` component, pass it as prop to a custom `Layout`, a ```jsx // in src/MyLayout.js -import * as React from "react"; +import * as React from 'react'; import { Layout } from 'react-admin'; import MyAppBar from './MyAppBar'; @@ -726,18 +737,17 @@ const App = () => ( ![custom AppBar](./img/custom_appbar.png) - **Tip**: You can change the color of the `` by setting the `color` prop to `default`, `inherit`, `primary`, `secondary` or `transparent`. The default value is `secondary`. ## Replacing The AppBar -For more drastic changes of the top component, you will probably want to create an `` from scratch instead of just passing children to react-admin's ``. +For more drastic changes of the top component, you will probably want to create an `` from scratch instead of just passing children to react-admin's ``. By default, React-admin uses [Material-ui's `` component](https://material-ui.com/api/app-bar/) together with [react-headroom](https://github.com/KyleAMathews/react-headroom) to hide the `AppBar` on scroll. Here is an example top bar rebuilt from scratch to remove the "headroom" effect: ```jsx // in src/MyAppBar.js -import * as React from "react"; +import * as React from 'react'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; @@ -1015,7 +1025,7 @@ Whenever a client-side error happens in react-admin, the user sees a default err ```jsx // in src/MyError.js -import * as React from "react"; +import * as React from 'react'; import Button from '@material-ui/core/Button'; import ErrorIcon from '@material-ui/icons/Report'; import History from '@material-ui/icons/History'; From 6b81ac776d3cce5278b8f45b0d2b39971e9a86b9 Mon Sep 17 00:00:00 2001 From: Luwangel Date: Mon, 19 Oct 2020 13:40:02 +0200 Subject: [PATCH 3/6] Fix types --- packages/ra-ui-materialui/src/layout/AppBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/layout/AppBar.tsx b/packages/ra-ui-materialui/src/layout/AppBar.tsx index 00135840df7..f176dafb8ef 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.tsx +++ b/packages/ra-ui-materialui/src/layout/AppBar.tsx @@ -190,7 +190,7 @@ export interface AppBarProps extends Omit { logout?: JSX.Element; open?: boolean; title?: string | JSX.Element; - userMenu?: JSX.Element | boolean; + userMenu?: JSX.Element | null; } export default AppBar; From 34740166bc7e60789ba75a545d8c41934290dbcf Mon Sep 17 00:00:00 2001 From: Luwangel Date: Mon, 19 Oct 2020 18:25:24 +0200 Subject: [PATCH 4/6] Replace null by false to disable to UserMenu --- packages/ra-ui-materialui/src/layout/AppBar.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/ra-ui-materialui/src/layout/AppBar.tsx b/packages/ra-ui-materialui/src/layout/AppBar.tsx index f176dafb8ef..dde05f6b1b1 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.tsx +++ b/packages/ra-ui-materialui/src/layout/AppBar.tsx @@ -65,7 +65,7 @@ const useStyles = makeStyles( * @param {string} color The color of the AppBar * @param {Component} logout The logout button component that will be pass to the UserMenu component * @param {boolean} open State of the Sidebar - * @param {Element | null} userMenu A custom user menu component for the AppBar. component by default. Pass null to disable. + * @param {Element | false} userMenu A custom user menu component for the AppBar. component by default. Pass false to disable. * * @example * @@ -88,7 +88,7 @@ const useStyles = makeStyles( * const MyAppBar = props => { * const classes = useStyles(); * return ( - * + * * ); *}; */ @@ -155,9 +155,9 @@ const AppBar = (props: AppBarProps): JSX.Element => { children )} - {userMenu !== null - ? cloneElement(userMenu, { logout }) - : null} + {userMenu !== false && + userMenu && + cloneElement(userMenu, { logout })} @@ -178,7 +178,7 @@ AppBar.propTypes = { ]), logout: PropTypes.element, open: PropTypes.bool, - userMenu: PropTypes.element, + userMenu: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]), }; AppBar.defaultProps = { @@ -190,7 +190,7 @@ export interface AppBarProps extends Omit { logout?: JSX.Element; open?: boolean; title?: string | JSX.Element; - userMenu?: JSX.Element | null; + userMenu?: JSX.Element | false; } export default AppBar; From e7536c0abef041a2d65e033cdf654d20b0d80918 Mon Sep 17 00:00:00 2001 From: Luwangel Date: Tue, 20 Oct 2020 10:24:58 +0200 Subject: [PATCH 5/6] Accept the true value to display the default UserMenu in the AppBar --- packages/ra-ui-materialui/src/layout/AppBar.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/ra-ui-materialui/src/layout/AppBar.tsx b/packages/ra-ui-materialui/src/layout/AppBar.tsx index dde05f6b1b1..a6c758e3f18 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.tsx +++ b/packages/ra-ui-materialui/src/layout/AppBar.tsx @@ -65,7 +65,7 @@ const useStyles = makeStyles( * @param {string} color The color of the AppBar * @param {Component} logout The logout button component that will be pass to the UserMenu component * @param {boolean} open State of the Sidebar - * @param {Element | false} userMenu A custom user menu component for the AppBar. component by default. Pass false to disable. + * @param {Element | boolean} userMenu A custom user menu component for the AppBar. component by default. Pass false to disable. * * @example * @@ -155,9 +155,11 @@ const AppBar = (props: AppBarProps): JSX.Element => { children )} - {userMenu !== false && - userMenu && - cloneElement(userMenu, { logout })} + {typeof userMenu === 'boolean' + ? userMenu === true + ? cloneElement(, { logout }) + : null + : cloneElement(userMenu, { logout })} @@ -190,7 +192,7 @@ export interface AppBarProps extends Omit { logout?: JSX.Element; open?: boolean; title?: string | JSX.Element; - userMenu?: JSX.Element | false; + userMenu?: JSX.Element | boolean; } export default AppBar; From aad5d8a7cd860f1adbb3f4f8cafc7fbeace7fde5 Mon Sep 17 00:00:00 2001 From: Luwangel Date: Thu, 22 Oct 2020 09:49:14 +0200 Subject: [PATCH 6/6] Fix doc in Theming --- docs/Theming.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/Theming.md b/docs/Theming.md index cf0fe87bb6a..bbed3cbb1a9 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -438,13 +438,13 @@ const MyAppBar = props => } />; const MyLayout = props => ; ``` -You can also remove the `` from the `` by passing `null` to the `userMenu` prop: +You can also remove the `` from the `` by passing `false` to the `userMenu` prop: ```jsx import * as React from 'react'; import { AppBar } from 'react-admin'; -const MyAppBar = props => ; +const MyAppBar = props => ; const MyLayout = props => ; ```