Skip to content

Commit 77c1d8f

Browse files
MadeorskMadeorsk
committed
Improve stories and examples code.
1 parent 59808d1 commit 77c1d8f

File tree

4 files changed

+101
-131
lines changed

4 files changed

+101
-131
lines changed

‎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, 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}>
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}>
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: 30 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -75,23 +75,13 @@ You can also use `<ReferenceManyFieldBase>` in a list, e.g. to display the autho
7575
import { ListBase, ReferenceManyFieldBase } 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}>
80+
<ReferenceManyFieldBase reference="comments" target="post_id">
81+
<CustomAuthorView source="name"/>
82+
</ReferenceManyFieldBase>
83+
</WithListContext>
84+
</ListBase>
9585
);
9686
```
9787
@@ -126,27 +116,29 @@ export const PostList = () => (
126116
- [`<EditableDatagrid>`](./EditableDatagrid.md)
127117
- [`<Calendar>`](./Calendar.md)
128118
129-
For instance, use a `<WithListContext>` to render the related records:
119+
For instance, use a `<RecordsIterator>` to render the related records:
130120
131121
```jsx
132-
import { ShowBase, ReferenceManyFieldBase, WithListContext } from 'react-admin';
122+
import { ShowBase, ReferenceManyFieldBase, RecordsIterator } from 'react-admin';
133123

134124
export const AuthorShow = () => (
135125
<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-
/>
126+
<ReferenceManyFieldBase
127+
label="Books"
128+
reference="books"
129+
target="author_id"
130+
loading={<p>Loading...</p>}
131+
>
132+
<ul>
133+
<RecordsIterator
134+
render={book => (
135+
<li key={book.id}>
136+
<i>{book.title}</i>, published on
137+
{book.published_at}
138+
</li>
139+
)}
140+
/>
141+
</ul>
150142
</ReferenceManyFieldBase>
151143
</ShowBase>
152144
);
@@ -360,16 +352,11 @@ In the example below, both lists use the same reference ('books'), but their sel
360352
meta: { foo: 'bar' },
361353
}}
362354
>
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-
/>
355+
<WithListContext loading={<p>Loading...</p>}>
356+
<RecordsIterator render={(book) => (
357+
<p>{book.title}</p>
358+
)} />
359+
</WithListContext>
373360
</ReferenceManyFieldBase>
374361
<ReferenceManyFieldBase
375362
reference="books"

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

Lines changed: 18 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,24 @@ 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 loading={null}>
139+
<RecordsIterator
140+
render={author => (
141+
<div>
142+
<h3>{author.last_name} Books</h3>
143+
<ReferenceManyFieldBase
144+
target="author"
145+
source="id"
146+
reference="books"
147+
>
148+
<AuthorList source="title" />
149+
</ReferenceManyFieldBase>
150+
</div>
158151
)}
159-
</>
160-
)}
161-
/>
152+
/>
153+
</WithListContext>
154+
</ListBase>
162155
}
163156
/>
164157
</CoreAdmin>

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

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -37,27 +37,26 @@ export const UsingRender = ({
3737
<WithListContext
3838
loading={<div>Loading...</div>}
3939
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-
/>
40+
>
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+
</WithListContext>
6160
</ListContextProvider>
6261
);
6362
};
@@ -101,18 +100,17 @@ export const UsingChildren = ({
101100
<WithListContext
102101
loading={<div>Loading...</div>}
103102
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-
/>
103+
>
104+
<ul
105+
style={{
106+
listStyleType: 'none',
107+
}}
108+
>
109+
<RecordsIterator>
110+
<ListItem />
111+
</RecordsIterator>
112+
</ul>
113+
</WithListContext>
116114
</ListContextProvider>
117115
);
118116
};

0 commit comments

Comments
 (0)