Skip to content

Commit f334812

Browse files
committed
doc: usage of transform second argument.
1 parent eb0a889 commit f334812

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
@@ -542,6 +542,22 @@ The `transform` function can also return a `Promise`, which allows you to do all
542542

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

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

547563
Users may need to create a copy of an existing record. For that use case, use the `<CloneButton>` component. It reads the `record` from the current `RecordContext`.
@@ -2285,6 +2301,32 @@ const dataProvider = {
22852301
}
22862302
```
22872303

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

22902332
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)