Skip to content

Commit 0c364bf

Browse files
MadeorskMadeorsk
committed
Improve stories and examples code.
1 parent 59808d1 commit 0c364bf

File tree

5 files changed

+119
-133
lines changed

5 files changed

+119
-133
lines changed

‎docs/ReferenceArrayFieldBase.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import { ListBase, RecordsIterator, ReferenceArrayFieldBase, WithListContext } f
4949

5050
export const PostList = () => (
5151
<ListBase>
52-
<WithListContext loading={null}>
52+
<WithListContext loading={null} error={null} offline={null} empty={null}>
5353
<RecordsIterator>
5454
<ReferenceArrayFieldBase reference="tags" source="tag_ids">
5555
<TagList />

‎docs/ReferenceFieldBase.md

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -223,21 +223,18 @@ When used in a `<DataTable>`, `<ReferenceFieldBase>` fetches the referenced reco
223223
For instance, with this code:
224224

225225
```jsx
226-
import { ListBase, ReferenceFieldBase, RecordContextProvider } from 'react-admin';
226+
import { ListBase, RecordsIterator, ReferenceFieldBase, WithListContext } from 'react-admin';
227227

228228
export const PostList = () => (
229-
<ListBase
230-
render={({ data, isPending }) => (
231-
<>
232-
{!isPending &&
233-
<RecordsIterator data={data}>
234-
<ReferenceFieldBase source="user_id" reference="users">
235-
<AuthorView />
236-
</ReferenceFieldBase>
237-
</RecordsIterator>
238-
</>
239-
)}
240-
/>
229+
<ListBase>
230+
<WithListContext loading={null} error={null} offline={null} empty={null}>
231+
<RecordsIterator>
232+
<ReferenceFieldBase source="user_id" reference="users">
233+
<AuthorView />
234+
</ReferenceFieldBase>
235+
</RecordsIterator>
236+
</WithListContext>
237+
</ListBase>
241238
);
242239
```
243240

@@ -274,23 +271,18 @@ For example, the following code prefetches the authors referenced by the posts:
274271
{% raw %}
275272
```jsx
276273
const PostList = () => (
277-
<ListBase
278-
queryOptions={{ meta: { prefetch: ['author'] } }}
279-
render={({ data, isPending }) => (
280-
<>
281-
{!isPending &&
282-
<RecordsIterator render={(author) => (
283-
<div>
284-
<h3>{author.title}</h3>
285-
<ReferenceFieldBase source="author_id" reference="authors">
286-
<AuthorView />
287-
</ReferenceFieldBase>
288-
</div>
289-
)} />
290-
}
291-
</>
292-
)}
293-
/>
274+
<ListBase queryOptions={{ meta: { prefetch: ['author'] } }}>
275+
<WithListContext loading={null} error={null} offline={null} empty={null}>
276+
<RecordsIterator render={(author) => (
277+
<div>
278+
<h3>{author.title}</h3>
279+
<ReferenceFieldBase source="author_id" reference="authors">
280+
<AuthorView />
281+
</ReferenceFieldBase>
282+
</div>
283+
)} />
284+
</WithListContext>
285+
</ListBase>
294286
);
295287
```
296288
{% endraw %}

‎docs/ReferenceManyFieldBase.md

Lines changed: 38 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -72,26 +72,18 @@ 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, ReferenceManyFieldBase } from 'react-admin';
75+
import { ListBase, RecordsIterator, ReferenceManyFieldBase, WithListContext } from 'react-admin';
7676

7777
export const PostList = () => (
78-
<ListBase
79-
render={({ data, isPending }) => (
80-
<>
81-
{!isPending &&
82-
data.map(record => (
83-
<RecordContextProvider
84-
value={record}
85-
key={record.id}
86-
>
87-
<ReferenceManyFieldBase reference="comments" target="post_id">
88-
<CustomAuthorView source="name"/>
89-
</ReferenceManyFieldBase>
90-
</RecordContextProvider>
91-
))}
92-
</>
93-
)}
94-
/>
78+
<ListBase>
79+
<WithListContext loading={null} error={null} offline={null} empty={null}>
80+
<RecordsIterator>
81+
<ReferenceManyFieldBase reference="comments" target="post_id">
82+
<CustomAuthorView source="name"/>
83+
</ReferenceManyFieldBase>
84+
</RecordsIterator>
85+
</WithListContext>
86+
</ListBase>
9587
);
9688
```
9789
@@ -126,27 +118,32 @@ export const PostList = () => (
126118
- [`<EditableDatagrid>`](./EditableDatagrid.md)
127119
- [`<Calendar>`](./Calendar.md)
128120
129-
For instance, use a `<WithListContext>` to render the related records:
121+
For instance, use a `<RecordsIterator>` to render the related records:
130122
131123
```jsx
132-
import { ShowBase, ReferenceManyFieldBase, WithListContext } from 'react-admin';
124+
import { ShowBase, RecordsIterator, ReferenceManyFieldBase } from 'react-admin';
133125

134126
export const AuthorShow = () => (
135127
<ShowBase>
136-
<ReferenceManyFieldBase label="Books" reference="books" target="author_id">
137-
<WithListContext
138-
loading={<p>Loading...</p>}
139-
render={({ data }) => (
140-
<ul>
141-
{data.map(book => (
142-
<li key={book.id}>
143-
<i>{book.title}</i>, published on
144-
{book.published_at}
145-
</li>
146-
))}
147-
</ul>
148-
)}
149-
/>
128+
<ReferenceManyFieldBase
129+
label="Books"
130+
reference="books"
131+
target="author_id"
132+
loading={<p>Loading...</p>}
133+
error={null}
134+
offline={null}
135+
empty={null}
136+
>
137+
<ul>
138+
<RecordsIterator
139+
render={book => (
140+
<li key={book.id}>
141+
<i>{book.title}</i>, published on
142+
{book.published_at}
143+
</li>
144+
)}
145+
/>
146+
</ul>
150147
</ReferenceManyFieldBase>
151148
</ShowBase>
152149
);
@@ -359,17 +356,14 @@ In the example below, both lists use the same reference ('books'), but their sel
359356
queryOptions={{
360357
meta: { foo: 'bar' },
361358
}}
359+
loading={<p>Loading...</p>}
360+
error={null}
361+
offline={null}
362+
empty={<p>No books</p>}
362363
>
363-
<WithListContext
364-
loading={<p>Loading...</p>}
365-
render={({ data }) => (
366-
<>
367-
{data.map(book => (
368-
<p key={book.id}>{book.title}</p>
369-
))}
370-
</>
371-
)}
372-
/>
364+
<RecordsIterator render={(book) => (
365+
<p>{book.title}</p>
366+
)} />
373367
</ReferenceManyFieldBase>
374368
<ReferenceManyFieldBase
375369
reference="books"

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

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { onlineManager, QueryClient } from '@tanstack/react-query';
3-
import { RecordsIterator } from 'ra-core';
3+
import { RecordsIterator, WithListContext } from 'ra-core';
44
import { CoreAdmin } from '../../core/CoreAdmin';
55
import { Resource } from '../../core/Resource';
66
import { ShowBase } from '../../controller/show/ShowBase';
@@ -134,31 +134,29 @@ export const InAList = ({ dataProvider = dataProviderWithAuthorList }) => (
134134
<Resource
135135
name="authors"
136136
list={
137-
<ListBase
138-
render={({ data, isPending }) => (
139-
<>
140-
{!isPending && (
141-
<RecordsIterator
142-
data={data}
143-
render={author => (
144-
<div>
145-
<h3>
146-
{author.last_name} Books
147-
</h3>
148-
<ReferenceManyFieldBase
149-
target="author"
150-
source="id"
151-
reference="books"
152-
>
153-
<AuthorList source="title" />
154-
</ReferenceManyFieldBase>
155-
</div>
156-
)}
157-
/>
137+
<ListBase>
138+
<WithListContext
139+
loading={null}
140+
error={null}
141+
offline={null}
142+
empty={null}
143+
>
144+
<RecordsIterator
145+
render={author => (
146+
<div>
147+
<h3>{author.last_name} Books</h3>
148+
<ReferenceManyFieldBase
149+
target="author"
150+
source="id"
151+
reference="books"
152+
>
153+
<AuthorList source="title" />
154+
</ReferenceManyFieldBase>
155+
</div>
158156
)}
159-
</>
160-
)}
161-
/>
157+
/>
158+
</WithListContext>
159+
</ListBase>
162160
}
163161
/>
164162
</CoreAdmin>

‎packages/ra-core/src/controller/list/RecordsIterator.stories.tsx

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -36,28 +36,29 @@ export const UsingRender = ({
3636
<ListContextProvider value={value}>
3737
<WithListContext
3838
loading={<div>Loading...</div>}
39+
errorElement={<div>Error</div>}
40+
offline={<div>Offline</div>}
3941
empty={<div>No data</div>}
40-
render={() => (
41-
<ul
42-
style={{
43-
listStyleType: 'none',
44-
}}
45-
>
46-
<RecordsIterator
47-
render={record => (
48-
<li
49-
style={{
50-
padding: '10px',
51-
border: '1px solid #ccc',
52-
}}
53-
>
54-
{record.title}
55-
</li>
56-
)}
57-
/>
58-
</ul>
59-
)}
60-
/>
42+
>
43+
<ul
44+
style={{
45+
listStyleType: 'none',
46+
}}
47+
>
48+
<RecordsIterator
49+
render={record => (
50+
<li
51+
style={{
52+
padding: '10px',
53+
border: '1px solid #ccc',
54+
}}
55+
>
56+
{record.title}
57+
</li>
58+
)}
59+
/>
60+
</ul>
61+
</WithListContext>
6162
</ListContextProvider>
6263
);
6364
};
@@ -100,19 +101,20 @@ export const UsingChildren = ({
100101
<ListContextProvider value={value}>
101102
<WithListContext
102103
loading={<div>Loading...</div>}
104+
errorElement={<div>Error</div>}
105+
offline={<div>Offline</div>}
103106
empty={<div>No data</div>}
104-
render={() => (
105-
<ul
106-
style={{
107-
listStyleType: 'none',
108-
}}
109-
>
110-
<RecordsIterator>
111-
<ListItem />
112-
</RecordsIterator>
113-
</ul>
114-
)}
115-
/>
107+
>
108+
<ul
109+
style={{
110+
listStyleType: 'none',
111+
}}
112+
>
113+
<RecordsIterator>
114+
<ListItem />
115+
</RecordsIterator>
116+
</ul>
117+
</WithListContext>
116118
</ListContextProvider>
117119
);
118120
};

0 commit comments

Comments
 (0)