Skip to content

Commit 7970990

Browse files
erwanMarmelaberwanMarmelab
committed
adapt docs
1 parent 25644fa commit 7970990

File tree

4 files changed

+92
-39
lines changed

4 files changed

+92
-39
lines changed

‎docs/ReferenceArrayFieldBase.md‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,27 @@ A typical `post` record therefore looks like this:
4545
In that case, use `<ReferenceArrayFieldBase>` to display the post tag names as a list of chips, as follows:
4646

4747
```jsx
48-
import { ListBase, ListIterator, ReferenceArrayFieldBase } from 'react-admin';
48+
import { ListBase, WithListContext, ReferenceArrayFieldBase, RecordContextProvider } from 'react-admin';
4949

5050
export const PostList = () => (
5151
<ListBase>
52-
<ListIterator>
53-
<ReferenceArrayFieldBase reference="tags" source="tag_ids">
54-
<TagList />
55-
</ReferenceArrayFieldBase>
56-
</ListIterator>
52+
<WithListContext
53+
render={({ data, isPending }) => (
54+
<>
55+
{!isPending &&
56+
data.map(record => (
57+
<RecordContextProvider
58+
value={record}
59+
key={record.id}
60+
>
61+
<ReferenceArrayFieldBase reference="tags" source="tag_ids">
62+
<TagList />
63+
</ReferenceArrayFieldBase>
64+
</RecordContextProvider>
65+
))}
66+
</>
67+
)}
68+
/>
5769
</ListBase>
5870
);
5971

‎docs/ReferenceFieldBase.md‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -205,15 +205,27 @@ When used in a `<DataTable>`, `<ReferenceFieldBase>` fetches the referenced reco
205205
For instance, with this code:
206206

207207
```jsx
208-
import { ListBase, ListIterator, ReferenceFieldBase } from 'react-admin';
208+
import { ListBase, WithListContext, ReferenceFieldBase, RecordContextProvider } from 'react-admin';
209209

210210
export const PostList = () => (
211211
<ListBase>
212-
<ListIterator>
213-
<ReferenceFieldBase source="user_id" reference="users">
214-
<AuthorView />
215-
</ReferenceFieldBase>
216-
</ListIterator>
212+
<WithListContext
213+
render={({ data, isPending }) => (
214+
<>
215+
{!isPending &&
216+
data.map(author => (
217+
<RecordContextProvider
218+
value={author}
219+
key={author.id}
220+
>
221+
<ReferenceFieldBase source="user_id" reference="users">
222+
<AuthorView />
223+
</ReferenceFieldBase>
224+
</RecordContextProvider>
225+
))}
226+
</>
227+
)}
228+
/>
217229
</ListBase>
218230
);
219231
```
@@ -252,14 +264,19 @@ For example, the following code prefetches the authors referenced by the posts:
252264
```jsx
253265
const PostList = () => (
254266
<ListBase queryOptions={{ meta: { prefetch: ['author'] } }}>
255-
<ListIterator
256-
render={({ title, author_id }) => (
257-
<div>
258-
<h3>{title}</h3>
259-
<ReferenceFieldBase source="author_id" reference="authors">
260-
<AuthorView />
261-
</ReferenceFieldBase>
262-
</div>
267+
<WithListContext
268+
render={({ data, isPending }) => (
269+
<>
270+
{!isPending &&
271+
data.map({ title, author_id }) => (
272+
<div>
273+
<h3>{title}</h3>
274+
<ReferenceFieldBase source="author_id" reference="authors">
275+
<AuthorView />
276+
</ReferenceFieldBase>
277+
</div>
278+
)}
279+
</>
263280
)}
264281
/>
265282
</ListBase>

‎docs/ReferenceManyFieldBase.md‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -72,15 +72,27 @@ const BookList = ({
7272
You can also use `<ReferenceManyFieldBase>` in a list, e.g. to display the authors of the comments related to each post in a list by matching `post.id` to `comment.post_id`:
7373
7474
```jsx
75-
import { ListBase, ListIterator, ReferenceManyFieldBase } from 'react-admin';
75+
import { ListBase, WithListContext, ReferenceManyFieldBase } from 'react-admin';
7676

7777
export const PostList = () => (
7878
<ListBase>
79-
<ListIterator>
80-
<ReferenceManyFieldBase reference="comments" target="post_id">
81-
<CustomAuthorView source="name"/>
82-
</ReferenceManyFieldBase>
83-
</ListIterator>
79+
<WithListContext
80+
render={({ data, isPending }) => (
81+
<>
82+
{!isPending &&
83+
data.map(author => (
84+
<RecordContextProvider
85+
value={author}
86+
key={author.id}
87+
>
88+
<ReferenceManyFieldBase reference="comments" target="post_id">
89+
<CustomAuthorView source="name"/>
90+
</ReferenceManyFieldBase>
91+
</RecordContextProvider>
92+
))}
93+
</>
94+
)}
95+
/>
8496
</ListBase>
8597
);
8698
```
@@ -115,21 +127,26 @@ export const PostList = () => (
115127
- [`<EditableDatagrid>`](./EditableDatagrid.md)
116128
- [`<Calendar>`](./Calendar.md)
117129
118-
For instance, use a `<ListIterator>` to render the related records:
130+
For instance, use a `<WithListContext>` to render the related records:
119131
120132
```jsx
121-
import { ShowBase, ReferenceManyFieldBase, ListIterator } from 'react-admin';
133+
import { ShowBase, ReferenceManyFieldBase, WithListContext } from 'react-admin';
122134

123135
export const AuthorShow = () => (
124136
<ShowBase>
125137
<ReferenceManyFieldBase label="Books" reference="books" target="author_id">
126-
<ul>
127-
<ListIterator render={(book) => (
128-
<li key={book.id}>
129-
<i>{book.title}</i>, published on{' '}{book.published_at}
130-
</li>
131-
)}/>
132-
</ul>
138+
<WithListContext
139+
render={({ isPending, data }) => (
140+
<ul>
141+
{!isPending &&
142+
data.map(book => (
143+
<li key={book.id}>
144+
<i>{book.title}</i>, published on {book.published_at}
145+
</li>
146+
))}
147+
</ul>
148+
)}
149+
/>
133150
</ReferenceManyFieldBase>
134151
</ShowBase>
135152
);
@@ -329,9 +346,16 @@ In the example below, both lists use the same reference ('books'), but their sel
329346
meta: { foo: 'bar' },
330347
}}
331348
>
332-
<ListIterator render={(book) => (
333-
<p>{book.title}</p>
334-
)} />
349+
<WithListContext
350+
render={({ isPending, data }) => (
351+
<>
352+
{!isPending &&
353+
data.map(book => (
354+
<p key={book.id}>{book.title}</p>
355+
))}
356+
</>
357+
)}
358+
/>
335359
</ReferenceManyFieldBase>
336360
<ReferenceManyFieldBase
337361
reference="books"

‎packages/ra-core/src/controller/field/ReferenceManyFieldBase.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export const InAList = ({ dataProvider = dataProviderWithAuthorList }) => (
159159
))}
160160
</>
161161
)}
162-
></WithListContext>
162+
/>
163163
</ListBase>
164164
}
165165
/>

0 commit comments

Comments
 (0)