Merge pull request #6178 from WiXSL/disable-hos

Add container prop to AppBar

Author: fzaninotto

docs/Theming.md

@@ -740,9 +740,22 @@ const App = () => (
 
 ## Replacing The AppBar
 
-For more drastic changes of the top component, you will probably want to create an `<AppBar>` from scratch instead of just passing children to react-admin's `<AppBar>`.
+By default, React-admin uses [Material-ui's `<AppBar>` component](https://material-ui.com/api/app-bar/) together with a custom container that internally uses a [Slide](https://material-ui.com/api/slide) to hide the `AppBar` on scroll. Here is an example of how to change this container with any component:
 
-By default, React-admin uses [Material-ui's `<AppBar>` 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 { Fragment } from 'react';
+import { AppBar } from 'react-admin';
+
+const MyAppBar = props => (
+    <AppBar {...props} container={Fragment} />
+);
+
+export default MyAppBar;
+```
+
+For more drastic changes of the top component, you will probably want to create an `<AppBar>` from scratch instead of just passing children to react-admin's `<AppBar>`. Here is an example top bar rebuilt from scratch:
 
 ```jsx
 // in src/MyAppBar.js

packages/ra-ui-materialui/src/layout/AppBar.tsx

@@ -103,6 +103,7 @@ const AppBar = (props: AppBarProps): JSX.Element => {
         open,
         title,
         userMenu,
+        container: Container,
         ...rest
     } = props;
     const classes = useStyles(props);
@@ -113,7 +114,7 @@ const AppBar = (props: AppBarProps): JSX.Element => {
     const translate = useTranslate();
 
     return (
-        <HideOnScroll>
+        <Container>
             <MuiAppBar className={className} color={color} {...rest}>
                 <Toolbar
                     disableGutters
@@ -163,7 +164,7 @@ const AppBar = (props: AppBarProps): JSX.Element => {
                         : cloneElement(userMenu, { logout })}
                 </Toolbar>
             </MuiAppBar>
-        </HideOnScroll>
+        </Container>
     );
 };
 
@@ -179,17 +180,20 @@ AppBar.propTypes = {
         'secondary',
         'transparent',
     ]),
+    container: PropTypes.element,
     logout: PropTypes.element,
     open: PropTypes.bool,
     userMenu: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
 };
 
 AppBar.defaultProps = {
     userMenu: <DefaultUserMenu />,
+    container: HideOnScroll,
 };
 
 export interface AppBarProps extends Omit<MuiAppBarProps, 'title' | 'classes'> {
     classes?: ClassesOverride<typeof useStyles>;
+    container?: React.ComponentType<any>;
     logout?: React.ReactNode;
     open?: boolean;
     title?: string | JSX.Element;