Merge pull request #2340 from marmelab/easier-custom-toolbar

[RFR] [BC break] Easier custom toolbar
marmelab · Sep 19, 2018 · c12ece5 · c12ece5
2 parents 59c4c73 + ede32dd
commit c12ece5
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 44 deletions.
diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md
@@ -612,7 +612,7 @@ The most common use case is to display two submit buttons in the `<Create>` view
 For that use case, use the `<SaveButton>` component with a custom `redirect` prop:
 
 ```jsx
-import { Edit, SimpleForm, SaveButton, Toolbar } from 'react-admin';
+import { Create, SimpleForm, SaveButton, Toolbar } from 'react-admin';
 
 const PostCreateToolbar = props => (
     <Toolbar {...props} >
@@ -630,9 +630,29 @@ const PostCreateToolbar = props => (
     </Toolbar>
 );
 
+export const PostCreate = (props) => (
+    <Create {...props}>
+        <SimpleForm toolbar={<PostCreateToolbar />} redirect="show">
+            ...
+        </SimpleForm>
+    </Create>
+);
+```
+
+Another use case is to remove the `<DeleteButton>` from the toolbar in an edit view. In that case, create a custom toolbar containing only the `<SaveButton>` as child;
+
+```jsx
+import { Edit, SimpleForm, SaveButton, Toolbar } from 'react-admin';
+
+const PostEditToolbar = props => (
+    <Toolbar {...props} >
+        <SaveButton />
+    </Toolbar>
+);
+
 export const PostEdit = (props) => (
     <Edit {...props}>
-        <SimpleForm toolbar={<PostCreateToolbar />} redirect="show">
+        <SimpleForm toolbar={<PostEditToolbar />}>
             ...
         </SimpleForm>
     </Edit>

diff --git a/packages/ra-ui-materialui/src/form/Toolbar.js b/packages/ra-ui-materialui/src/form/Toolbar.js
@@ -9,9 +9,6 @@ import classnames from 'classnames';
 import { SaveButton, DeleteButton } from '../button';
 
 const styles = {
-    desktopToolbar: {
-        justifyContent: 'space-between',
-    },
     mobileToolbar: {
         position: 'fixed',
         bottom: 0,
@@ -22,9 +19,13 @@ const styles = {
         boxSizing: 'border-box',
         flexShrink: 0,
         backgroundColor: 'white',
-        justifyContent: 'space-between',
         zIndex: 2,
     },
+    defaultToolbar: {
+        flex: 1,
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
 };
 
 const valueOrDefault = (value, defaultValue) =>
@@ -49,56 +50,56 @@ const Toolbar = ({
 }) => (
     <MuiToolbar
         className={classnames(
-            width === 'xs' ? classes.mobileToolbar : classes.desktopToolbar,
+            { [classes.mobileToolbar]: width === 'xs' },
             className
         )}
         disableGutters
         {...rest}
     >
-        <span>
-            {Children.count(children) === 0 ? (
+        {Children.count(children) === 0 ? (
+            <div className={classes.defaultToolbar}>
                 <SaveButton
                     handleSubmitWithRedirect={handleSubmitWithRedirect}
                     invalid={invalid}
                     redirect={redirect}
                     saving={saving}
                     submitOnEnter={submitOnEnter}
                 />
-            ) : (
-                Children.map(
-                    children,
-                    button =>
-                        button
-                            ? React.cloneElement(button, {
-                                  basePath,
-                                  handleSubmit: valueOrDefault(
-                                      button.props.handleSubmit,
-                                      handleSubmit
-                                  ),
-                                  handleSubmitWithRedirect: valueOrDefault(
-                                      button.props.handleSubmitWithRedirect,
-                                      handleSubmitWithRedirect
-                                  ),
-                                  invalid,
-                                  pristine,
-                                  saving,
-                                  submitOnEnter: valueOrDefault(
-                                      button.props.submitOnEnter,
-                                      submitOnEnter
-                                  ),
-                              })
-                            : null
-                )
-            )}
-        </span>
-        {record &&
-            record.id && (
-                <DeleteButton
-                    basePath={basePath}
-                    record={record}
-                    resource={resource}
-                />
-            )}
+                {record &&
+                    record.id && (
+                        <DeleteButton
+                            basePath={basePath}
+                            record={record}
+                            resource={resource}
+                        />
+                    )}
+            </div>
+        ) : (
+            Children.map(
+                children,
+                button =>
+                    button
+                        ? React.cloneElement(button, {
+                              basePath,
+                              handleSubmit: valueOrDefault(
+                                  button.props.handleSubmit,
+                                  handleSubmit
+                              ),
+                              handleSubmitWithRedirect: valueOrDefault(
+                                  button.props.handleSubmitWithRedirect,
+                                  handleSubmitWithRedirect
+                              ),
+                              invalid,
+                              pristine,
+                              saving,
+                              submitOnEnter: valueOrDefault(
+                                  button.props.submitOnEnter,
+                                  submitOnEnter
+                              ),
+                          })
+                        : null
+            )
+        )}
     </MuiToolbar>
 );