diff --git a/docs/Theming.md b/docs/Theming.md index 2b522c085a1..bbed3cbb1a9 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 `false` 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'; diff --git a/packages/ra-ui-materialui/src/layout/AppBar.tsx b/packages/ra-ui-materialui/src/layout/AppBar.tsx index 6c7582e1bff..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} userMenu A custom user menu component for the AppBar. component by default + * @param {Element | boolean} userMenu A custom user menu component for the AppBar. component by default. Pass false 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,11 @@ const AppBar = (props: AppBarProps): JSX.Element => { children )} - {cloneElement(userMenu, { logout })} + {typeof userMenu === 'boolean' + ? userMenu === true + ? cloneElement(, { logout }) + : null + : cloneElement(userMenu, { logout })} @@ -167,7 +180,7 @@ AppBar.propTypes = { ]), logout: PropTypes.element, open: PropTypes.bool, - userMenu: PropTypes.element, + userMenu: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]), }; AppBar.defaultProps = { @@ -179,7 +192,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;