diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md index 774d3902972..4d0950b5ff2 100644 --- 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 `` view For that use case, use the `` 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 => ( @@ -630,9 +630,29 @@ const PostCreateToolbar = props => ( ); +export const PostCreate = (props) => ( + + } redirect="show"> + ... + + +); +``` + +Another use case is to remove the `` from the toolbar in an edit view. In that case, create a custom toolbar containing only the `` as child; + +```jsx +import { Edit, SimpleForm, SaveButton, Toolbar } from 'react-admin'; + +const PostEditToolbar = props => ( + + + +); + export const PostEdit = (props) => ( - } redirect="show"> + }> ... diff --git a/packages/ra-ui-materialui/src/form/Toolbar.js b/packages/ra-ui-materialui/src/form/Toolbar.js index b4c0de01dea..872a94b43ba 100644 --- 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,14 +50,14 @@ const Toolbar = ({ }) => ( - - {Children.count(children) === 0 ? ( + {Children.count(children) === 0 ? ( +
- ) : ( - 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 - ) - )} - - {record && - record.id && ( - - )} + {record && + record.id && ( + + )} +
+ ) : ( + 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 + ) + )}
);