Merge pull request #3247 from marmelab/remove-headroom

[RFR] Replace Headroom by native Material-ui solution

UPGRADE.md

@@ -153,3 +153,11 @@ const App = () => (
     </Admin>
 );
 ```
+
+## Deprecated components were removed
+
+Components deprecated in 2.X have been removed in 3.x. This includes:
+
+* `AppBarMobile` (use `AppBar` instead, which is responsive)
+* `Header` (use `Title` instead)
+* `ViewTitle` (use `Title` instead)

cypress/integration/list.js

@@ -16,23 +16,6 @@ describe('List Page', () => {
         });
     });
 
-    describe('Auto-hide AppBar', () => {
-        it('should hide/show the appBar when scroll action appears', () => {
-            // wait for the skeleton to disappear
-            cy.contains('1-10 of 13');
-
-            cy.viewport(1280, 500);
-
-            cy.scrollTo(0, 200);
-            cy.get(ListPagePosts.elements.headroomUnpinned).should(
-                'not.be.visible'
-            );
-
-            cy.scrollTo(0, -100);
-            cy.get(ListPagePosts.elements.headroomUnfixed).should('be.visible');
-        });
-    });
-
     describe('Pagination', () => {
         it('should display paginated list of available posts', () => {
             cy.contains('1-10 of 13');

docs/Reference.md

@@ -11,7 +11,6 @@ title: "Reference"
 * [`<Admin>`](./Admin.md)
 * `<AdminRoutes>`
 * `<AppBar>`
-* `<AppBarMobile>` (deprecated)
 * [`<ArrayField>`](./Fields.md#arrayfield)
 * [`<ArrayInput>`](./Inputs.md#arrayinput)
 * [`<Authenticated>`](./Authentication.md#restricting-access-to-a-custom-page)
@@ -47,7 +46,6 @@ title: "Reference"
 * [`<FormDataConsumer>`](./Inputs.md#linking-two-inputs)
 * [`<FormTab>`](./CreateEdit.md#the-tabbedform-component)
 * [`<FunctionField>`](./Fields.md#functionfield)
-* `<EditButton>`
 * [`<ImageField>`](./Fields.md#imagefield)
 * [`<ImageInput>`](./Inputs.md#imageinput)
 * [`<ImageInputPreview>`](./Inputs.md#imageinput)
@@ -94,7 +92,6 @@ title: "Reference"
 * `<Title>`
 * `<Toolbar>`
 * [`<UrlField>`](./Fields.md#urlfield)
-* `<ViewTitle>` (deprecated)
 * [`<WithPermissions>`](./Authorization.md#withpermissions)
 
 </div>

examples/demo/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "^4.0.0-beta.0",
+        "@material-ui/core": "^4.0.0-beta.2",
         "@material-ui/icons": "^4.0.0-beta.0",
         "data-generator-retail": "^2.7.0",
         "fakerest": "~2.1.0",

examples/simple/package.json

@@ -38,7 +38,7 @@
     },
     "dependencies": {
         "@babel/polyfill": "^7.0.0",
-        "@material-ui/core": "^4.0.0-beta.0",
+        "@material-ui/core": "^4.0.0-beta.2",
         "@material-ui/icons": "^4.0.0-beta.0",
         "ra-data-fakerest": "^2.0.0",
         "ra-input-rich-text": "^2.0.0",

examples/tutorial/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "^4.0.0-beta.0",
+        "@material-ui/core": "^4.0.0-beta.2",
         "ra-data-json-server": "^2.0.0",
         "react": "~16.8.0",
         "react-admin": "^2.0.0",

packages/ra-ui-materialui/package.json

@@ -26,8 +26,8 @@
         "watch": "rimraf ./lib && tsc --watch"
     },
     "devDependencies": {
-        "@material-ui/core": "^4.0.0-beta.0",
-        "@material-ui/styles": "^4.0.0-beta.0",
+        "@material-ui/core": "^4.0.0-beta.2",
+        "@material-ui/styles": "^4.0.0-beta.2",
         "@material-ui/icons": "^4.0.0-beta.0",
         "cross-env": "^5.2.0",
         "enzyme": "~3.9.0",
@@ -44,8 +44,8 @@
         "react-dom": "^16.8.0"
     },
     "dependencies": {
-        "@material-ui/core": "^4.0.0-beta.0",
-        "@material-ui/styles": "^4.0.0-beta.0",
+        "@material-ui/core": "^4.0.0-beta.2",
+        "@material-ui/styles": "^4.0.0-beta.2",
         "@material-ui/icons": "^4.0.0-beta.0",
         "autosuggest-highlight": "^3.1.1",
         "classnames": "~2.2.5",
@@ -58,7 +58,6 @@
         "ra-core": "^2.9.1",
         "react-autosuggest": "^9.4.2",
         "react-dropzone": "~4.0.1",
-        "react-headroom": "^2.2.4",
         "react-redux": "^7.1.0-alpha.3",
         "react-router": "^4.2.0",
         "react-router-dom": "^4.2.0",

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

@@ -14,7 +14,7 @@ import { toggleSidebar as toggleSidebarAction } from 'ra-core';
 
 import LoadingIndicator from './LoadingIndicator';
 import UserMenu from './UserMenu';
-import Headroom from './Headroom';
+import HideOnScroll from './HideOnScroll';
 
 const styles = theme =>
     createStyles({
@@ -60,13 +60,8 @@ const AppBar = ({
     width,
     ...rest
 }) => (
-    <Headroom>
-        <MuiAppBar
-            className={className}
-            color="secondary"
-            position="static"
-            {...rest}
-        >
+    <HideOnScroll>
+        <MuiAppBar className={className} color="secondary" {...rest}>
             <Toolbar
                 disableGutters
                 variant={width === 'xs' ? 'regular' : 'dense'}
@@ -100,7 +95,7 @@ const AppBar = ({
                 {cloneElement(userMenu, { logout })}
             </Toolbar>
         </MuiAppBar>
-    </Headroom>
+    </HideOnScroll>
 );
 
 AppBar.propTypes = {

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import useScrollTrigger from '@material-ui/core/useScrollTrigger';
+import Slide from '@material-ui/core/Slide';
+
+interface Props {
+    children: React.ReactElement;
+}
+
+function HideOnScroll(props: Props) {
+    const { children } = props;
+    const trigger = useScrollTrigger();
+    return (
+        <Slide appear={false} direction="down" in={!trigger}>
+            {children}
+        </Slide>
+    );
+}
+
+HideOnScroll.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
+export default HideOnScroll;

packages/ra-ui-materialui/src/layout/Layout.js

@@ -34,6 +34,12 @@ const styles = theme =>
         appFrame: {
             display: 'flex',
             flexDirection: 'column',
+            [theme.breakpoints.up('xs')]: {
+                marginTop: theme.spacing(6),
+            },
+            [theme.breakpoints.down('xs')]: {
+                marginTop: theme.spacing(7),
+            },
         },
         contentWithSidebar: {
             display: 'flex',