diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md index aa43e34354c..7b9dfb8a170 100644 --- a/docs/CreateEdit.md +++ b/docs/CreateEdit.md @@ -1226,7 +1226,7 @@ export const PostEdit = (props) => ( ); ``` -By default the `<SaveButton>` is disabled when the form is `pristine`. You can bypass this behavior and always enable it without recreating the whole `<Toolbar>`: +In the default `<Toolbar>`, the `<SaveButton>` is disabled when the form is `pristine`. You can bypass this behavior and always enable it without customizing the `<Toolbar>` thanks to the prop `alwaysEnableSaveButton`: ```jsx import * as React from 'react'; @@ -1241,6 +1241,27 @@ export const PostEdit = (props) => ( ); ``` +But if you want to customize the `<Toolbar>` (to remove the `<DeleteButton>` for example), you have to manage the _disabled_ behaviour of the `<SaveButton>` by yourself: + +```jsx +import * as React from "react"; +import { Edit, SimpleForm, SaveButton, Toolbar } from 'react-admin'; + +const PostEditToolbar = props => ( + <Toolbar {...props} > + <SaveButton disabled={!props.pristine} /> + </Toolbar> +); + +export const PostEdit = (props) => ( + <Edit {...props}> + <SimpleForm toolbar={<PostEditToolbar />}> + // ... + </SimpleForm> + </Edit> +); +``` + Here are the props received by the `Toolbar` component when passed as the `toolbar` prop of the `SimpleForm` or `TabbedForm` components: * `handleSubmitWithRedirect`: The function to call in order to submit the form. It accepts a single parameter overriding the form's default redirect.