Merge pull request #2945 from marmelab/demo-review-drawer

Improve drawer animation of review edition in Posters Galore demo
marmelab · Apr 2, 2019 · bee74f7 · bee74f7
2 parents 3578d0b + db026f4
commit bee74f7
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 35 deletions.
diff --git a/examples/demo/src/reviews/ReviewList.js b/examples/demo/src/reviews/ReviewList.js
@@ -1,10 +1,12 @@
 import React, { Fragment, Component } from 'react';
+import compose from 'recompose/compose';
+import classnames from 'classnames';
 import { BulkDeleteButton, List, Responsive } from 'react-admin';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 import { Route } from 'react-router';
 import Drawer from '@material-ui/core/Drawer';
-
+import { createStyles, withStyles } from '@material-ui/core/styles';
 import BulkAcceptButton from './BulkAcceptButton';
 import BulkRejectButton from './BulkRejectButton';
 import ReviewListMobile from './ReviewListMobile';
@@ -20,49 +22,74 @@ const ReviewsBulkActionButtons = props => (
     </Fragment>
 );
 
+const styles = theme => createStyles({
+    root: {
+        display: 'flex',
+    },
+    list: {
+        flexGrow: 1,
+        transition: theme.transitions.create(['all'], {
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+        marginRight: 0,
+    },
+    listWithDrawer: {
+        marginRight: 400,
+    },
+});
+
 class ReviewList extends Component {
     render() {
-        const props = this.props;
+        const { classes, ...props } = this.props;
         return (
-            <Fragment>
-                <List
-                    {...props}
-                    bulkActionButtons={<ReviewsBulkActionButtons />}
-                    filters={<ReviewFilter />}
-                    perPage={25}
-                    sort={{ field: 'date', order: 'DESC' }}
-                >
-                    <Responsive
-                        xsmall={<ReviewListMobile />}
-                        medium={<ReviewListDesktop />}
-                    />
-                </List>
+            <div className={classes.root}>
                 <Route path="/reviews/:id">
                     {({ match }) => {
                         const isMatch =
-                            match &&
+                            !!(match &&
                             match.params &&
-                            match.params.id !== 'create';
+                            match.params.id !== 'create');
+
                         return (
-                            <Drawer
-                                variant="persistent"
-                                open={isMatch}
-                                anchor="right"
-                                onClose={this.handleClose}
-                            >
-                                {/* To avoid any errors if the route does not match, we don't render at all the component in this case */}
-                                {isMatch ? (
-                                    <ReviewEdit
-                                        id={match.params.id}
-                                        onCancel={this.handleClose}
-                                        {...props}
+                            <Fragment>
+                                <List
+                                    {...props}
+                                    className={classnames(classes.list, {
+                                        [classes.listWithDrawer]: isMatch
+                                    })}
+                                    bulkActionButtons={<ReviewsBulkActionButtons />}
+                                    filters={<ReviewFilter />}
+                                    perPage={25}
+                                    sort={{ field: 'date', order: 'DESC' }}
+                                >
+                                    <Responsive
+                                        xsmall={<ReviewListMobile />}
+                                        medium={<ReviewListDesktop />}
                                     />
-                                ) : null}
-                            </Drawer>
+                                </List>
+                                <Drawer
+                                    variant="persistent"
+                                    open={isMatch}
+                                    anchor="right"
+                                    onClose={this.handleClose}
+                                    classes={{
+                                        paper: classes.drawerPaper
+                                    }}
+                                >
+                                    {/* To avoid any errors if the route does not match, we don't render at all the component in this case */}
+                                    {isMatch ? (
+                                        <ReviewEdit
+                                            id={match.params.id}
+                                            onCancel={this.handleClose}
+                                            {...props}
+                                        />
+                                    ) : null}
+                                </Drawer>
+                            </Fragment>
                         );
                     }}
                 </Route>
-            </Fragment>
+            </div>
         );
     }
 
@@ -71,7 +98,7 @@ class ReviewList extends Component {
     };
 }
 
-export default connect(
-    undefined,
-    { push }
+export default compose(
+    connect(undefined, { push }),
+    withStyles(styles)
 )(ReviewList);
diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx
@@ -94,6 +94,7 @@ interface Props {
     path?: string;
     query: ListParams;
     resource: string;
+    [key: string]: any;
 }
 interface EnhancedProps {
     changeListParams: Dispatch<typeof changeListParamsAction>;
@@ -229,6 +230,7 @@ export class UnconnectedListController extends Component<
 
     shouldComponentUpdate(nextProps: Props & EnhancedProps, nextState) {
         if (
+            nextProps.className === this.props.className &&
             nextProps.translate === this.props.translate &&
             nextProps.isLoading === this.props.isLoading &&
             nextProps.version === this.props.version &&