Skip to content

Commit ff3c330

Browse files
committed
doc: usage of transform second argument.
1 parent 442ad33 commit ff3c330

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

docs/CreateEdit.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -541,6 +541,22 @@ The `transform` function can also return a `Promise`, which allows you to do all
541541

542542
**Tip**: The message will be translated.
543543

544+
**Tip**: `<Edit>`'s transform prop function also get the `previousData` in its second argument:
545+
546+
```jsx
547+
export const UserEdit = (props) => {
548+
const transform = (data, { previousData }) => ({
549+
...data,
550+
avoidChangeField: previousData.avoidChangeField
551+
});
552+
return (
553+
<Edit {...props} transform={transform}>
554+
...
555+
</Edit>
556+
);
557+
}
558+
```
559+
544560
## Prefilling a `<Create>` Record
545561

546562
Users may need to create a copy of an existing record. For that use case, use the `<CloneButton>` component. It expects a `record` and a `basePath` (usually injected to children of `<Datagrid>`, `<SimpleForm>`, `<SimpleShowLayout>`, etc.), so it's as simple to use as a regular field or input.
@@ -2289,6 +2305,32 @@ const dataProvider = {
22892305
}
22902306
```
22912307

2308+
**Tip**: `<Edit>`'s transform prop function also get the `previousData` in its second argument:
2309+
2310+
```jsx
2311+
const PostEditToolbar = props => (
2312+
<Toolbar {...props}>
2313+
<SaveButton submitOnEnter={true} />
2314+
<SaveButton
2315+
label="post.action.save_and_notify"
2316+
transform={(data, { previousData }) => ({
2317+
...data,
2318+
avoidChangeField: previousData.avoidChangeField
2319+
})}
2320+
submitOnEnter={false}
2321+
/>
2322+
</Toolbar>
2323+
);
2324+
2325+
const PostEdit = () => (
2326+
<Edit>
2327+
<SimpleForm toolbar={<PostEditToolbar />}>
2328+
// ...
2329+
</SimpleForm>
2330+
</Edit>
2331+
);
2332+
```
2333+
22922334
### Grouping Inputs
22932335

22942336
Sometimes, you may want to group inputs in order to make a form more approachable. You may use a [`<TabbedForm>`](#the-tabbedform-component), an [`<AccordionForm>`](#the-accordionform-component) or you may want to roll your own layout. In this case, you might need to know the state of a group of inputs: whether it's valid or if the user has changed them (dirty/pristine state).

0 commit comments

Comments
 (0)