Skip to content

Commit f3794b3

Browse files
ThieryMichelThieryMichel
committed
remove mui components from ReferenceManyFieldBase doc. Add example of ref in a list in stories
1 parent 4a2d425 commit f3794b3

File tree

2 files changed

+158
-132
lines changed

2 files changed

+158
-132
lines changed

‎docs/ReferenceManyFieldBase.md‎

Lines changed: 93 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ For instance, if an `author` has many `books`, and each book resource exposes an
3333
`<ReferenceManyFieldBase>` can render the titles of all the books by a given author.
3434

3535
```jsx
36-
import { Show, SimpleShowLayout, ReferenceManyFieldBase, DataTable, TextField, DateField } from 'react-admin';
36+
import { ShowBase, ReferenceManyFieldBase } from 'react-admin';
3737

3838
const BookList = ({
3939
source,
@@ -60,15 +60,11 @@ const BookList = ({
6060
};
6161

6262
const AuthorShow = () => (
63-
<Show>
64-
<SimpleShowLayout>
65-
<TextField source="first_name" />
66-
<TextField source="last_name" />
67-
<ReferenceManyFieldBase reference="books" target="author_id" >
68-
<BookList source="title" />
69-
</ReferenceManyFieldBase>
70-
</SimpleShowLayout>
71-
</Show>
63+
<ShowBase>
64+
<ReferenceManyFieldBase reference="books" target="author_id" >
65+
<BookList source="title" />
66+
</ReferenceManyFieldBase>
67+
</ShowBase>
7268
);
7369
```
7470
@@ -77,23 +73,16 @@ const AuthorShow = () => (
7773
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`:
7874
7975
```jsx
80-
import { List, DataTable, ChipField, ReferenceManyFieldBase, SingleFieldList } from 'react-admin';
76+
import { ListBase, ListIterator, ReferenceManyFieldBase } from 'react-admin';
8177

8278
export const PostList = () => (
83-
<List>
84-
<DataTable>
85-
<DataTable.Col source="id" />
86-
<DataTable.Col source="title" />
87-
<DataTable.Col label="Comments by">
88-
<ReferenceManyFieldBase reference="comments" target="post_id">
89-
<CustomAuthorView source="name"/>
90-
</ReferenceManyFieldBase>
91-
</DataTable.Col>
92-
<DataTable.Col>
93-
<EditButton />
94-
</DataTable.Col>
95-
</DataTable>
96-
</List>
79+
<ListBase>
80+
<ListIterator>
81+
<ReferenceManyFieldBase reference="comments" target="post_id">
82+
<CustomAuthorView source="name"/>
83+
</ReferenceManyFieldBase>
84+
</ListIterator>
85+
</ListBase>
9786
);
9887
```
9988
@@ -130,22 +119,19 @@ export const PostList = () => (
130119
For instance, use a `<DataTable>` to render the related records in a table:
131120
132121
```jsx
133-
import { Show, SimpleShowLayout, TextField, ReferenceManyFieldBase, DataTable, DateField } from 'react-admin';
122+
import { ShowBase, ReferenceManyFieldBase, ListIterator } from 'react-admin';
134123

135124
export const AuthorShow = () => (
136-
<Show>
137-
<SimpleShowLayout>
138-
<TextField source="first_name" />
139-
<TextField source="last_name" />
140-
<DateField label="Born" source="dob" />
141-
<ReferenceManyFieldBase label="Books" reference="books" target="author_id">
142-
<DataTable>
143-
<DataTable.Col source="title" />
144-
<DataTable.Col source="published_at" field={DateField} />
145-
</DataTable>
146-
</ReferenceManyFieldBase>
147-
</SimpleShowLayout>
148-
</Show>
125+
<ShowBase>
126+
<ReferenceManyFieldBase label="Books" reference="books" target="author_id">
127+
<ListIterator render={(book) => (
128+
<div>
129+
<p>{book.title}</p>
130+
<p>{book.published_at}</p>
131+
</div>
132+
)}/>
133+
</ReferenceManyFieldBase>
134+
</ShowBase>
149135
);
150136
```
151137
@@ -155,38 +141,37 @@ Alternatively, you can pass a `render` function prop instead of children. The `r
155141
When receiving a `render` function prop the `<ReferenceManyFieldBase>` component will ignore the children property.
156142
157143
```jsx
158-
import { Show, SimpleShowLayout, ReferenceManyFieldBase, DataTable, TextField, DateField } from 'react-admin';
144+
import { ShowBase, ReferenceManyFieldBase } from 'react-admin';
159145

160146
const AuthorShow = () => (
161-
<Show>
162-
<SimpleShowLayout>
163-
<TextField source="first_name" />
164-
<TextField source="last_name" />
165-
<ReferenceManyFieldBase
166-
reference="books"
167-
target="author_id"
168-
render={
169-
({ isPending, error, data }) => {
170-
171-
if (isPending) {
172-
return <p>Loading...</p>;
173-
}
174-
175-
if (error) {
176-
return <p className="error">{error.toString()}</p>;
177-
}
178-
return (
179-
<p>
180-
{data.map((author, index) => (
181-
<li key={index}>{author.name}</li>
182-
))}
183-
</p>
184-
);
147+
<ShowBase>
148+
<ReferenceManyFieldBase
149+
reference="books"
150+
target="author_id"
151+
render={
152+
({ isPending, error, data }) => {
153+
154+
if (isPending) {
155+
return <p>Loading...</p>;
156+
}
157+
158+
if (error) {
159+
return <p className="error">{error.toString()}</p>;
185160
}
161+
return (
162+
<p>
163+
{data.map((book, index) => (
164+
<div key={index}>
165+
<p>{book.title}</p>
166+
<p>{book.published_at}</p>
167+
</div>
168+
))}
169+
</p>
170+
);
186171
}
187-
/>
188-
</SimpleShowLayout>
189-
</Show>
172+
}
173+
/>
174+
</ShowBase>
190175
);
191176
```
192177
@@ -211,9 +196,9 @@ Use `empty` to customize the text displayed when the related record is empty.
211196
212197
```jsx
213198
<ReferenceManyFieldBase
214-
reference="books"
215-
target="author_id"
216-
empty="no books"
199+
reference="books"
200+
target="author_id"
201+
empty="no books"
217202
>
218203
...
219204
</ReferenceManyFieldBase>
@@ -223,9 +208,9 @@ Use `empty` to customize the text displayed when the related record is empty.
223208
224209
```jsx
225210
<ReferenceManyFieldBase
226-
reference="books"
227-
target="author_id"
228-
empty="resources.authors.fields.books.empty"
211+
reference="books"
212+
target="author_id"
213+
empty="resources.authors.fields.books.empty"
229214
>
230215
...
231216
</ReferenceManyFieldBase>
@@ -235,9 +220,9 @@ Use `empty` to customize the text displayed when the related record is empty.
235220
236221
```jsx
237222
<ReferenceManyFieldBase
238-
reference="books"
239-
target="author_id"
240-
empty={<CreateButton resource="books" />}
223+
reference="books"
224+
target="author_id"
225+
empty={<button onClick={...}>Create</button>}
241226
>
242227
...
243228
</ReferenceManyFieldBase>
@@ -261,37 +246,6 @@ You can filter the query used to populate the possible values. Use the `filter`
261246
262247
{% endraw %}
263248
264-
## Filtering The References
265-
266-
<video controls autoplay playsinline muted loop>
267-
<source src="./img/ReferenceManyFieldBaseFilterInput.mp4" type="video/mp4" />
268-
Your browser does not support the video tag.
269-
</video>
270-
271-
You can add filters to `<ReferenceManyFieldBase>` by adding [`<FilterForm>`](./FilterForm.md) and [`<FilterButton>`](./FilterButton.md):
272-
273-
{% raw %}
274-
275-
```jsx
276-
const filters = [<TextInput source="q" label="Search" />];
277-
278-
const AuthorEdit = () => (
279-
<Edit>
280-
<SimpleForm>
281-
<ReferenceManyFieldBase reference="comments" target="post_id">
282-
<FilterButton filters={filters}/>
283-
<FilterForm filters={filters}/>
284-
<DataTable>
285-
...
286-
</DataTable>
287-
</ReferenceManyFieldBase>
288-
</SimpleForm>
289-
</Edit>
290-
);
291-
```
292-
293-
{% endraw %}
294-
295249
## `perPage`
296250
297251
By default, react-admin restricts the possible values to 25 and displays no pagination control. You can change the limit by setting the `perPage` prop:
@@ -310,7 +264,9 @@ For instance, to pass [a custom `meta`](./Actions.md#meta-parameter):
310264
311265
{% raw %}
312266
```jsx
313-
<ReferenceManyFieldBase queryOptions={{ meta: { foo: 'bar' } }} />
267+
<ReferenceManyFieldBase queryOptions={{ meta: { foo: 'bar' } }}>
268+
...
269+
</ReferenceManyFieldBase>
314270
```
315271
{% endraw %}
316272
@@ -322,10 +278,12 @@ For instance, if you want to display the `books` of a given `author`, the `refer
322278
323279
```jsx
324280
<ReferenceManyFieldBase label="Books" reference="books" target="author_id">
325-
<DataTable>
326-
<DataTable.Col source="title" />
327-
<DataTable.Col source="published_at" field={DateField} />
328-
</DataTable>
281+
<ListIterator render={(book) => (
282+
<div>
283+
<p>{book.title}</p>
284+
<p>{book.published_at}</p>
285+
</div>
286+
)} />
329287
</ReferenceManyFieldBase>
330288
```
331289
@@ -336,11 +294,11 @@ By default, it orders the possible values by id desc. You can change this order
336294
{% raw %}
337295
```jsx
338296
<ReferenceManyFieldBase
339-
target="post_id"
340-
reference="comments"
341-
sort={{ field: 'created_at', order: 'DESC' }}
297+
target="post_id"
298+
reference="comments"
299+
sort={{ field: 'created_at', order: 'DESC' }}
342300
>
343-
...
301+
...
344302
</ReferenceManyFieldBase>
345303
```
346304
{% endraw %}
@@ -351,9 +309,9 @@ By default, `ReferenceManyFieldBase` uses the `id` field as target for the refer
351309
352310
```jsx
353311
<ReferenceManyFieldBase
354-
target="post_id"
355-
reference="comments"
356-
source="_id"
312+
target="post_id"
313+
reference="comments"
314+
source="_id"
357315
>
358316
...
359317
</ReferenceManyFieldBase>
@@ -369,17 +327,17 @@ In the example below, both lists use the same reference ('books'), but their sel
369327
370328
{% raw %}
371329
```jsx
372-
<Stack direction="row" spacing={2}>
330+
<div>
373331
<ReferenceManyFieldBase
374332
reference="books"
375333
target="author_id"
376334
queryOptions={{
377335
meta: { foo: 'bar' },
378336
}}
379337
>
380-
<DataTable>
381-
<DataTable.Col source="title" />
382-
</DataTable>
338+
<ListIterator render={(book) => (
339+
<p>{book.title}</p>
340+
)} />
383341
</ReferenceManyFieldBase>
384342
<ReferenceManyFieldBase
385343
reference="books"
@@ -389,11 +347,11 @@ In the example below, both lists use the same reference ('books'), but their sel
389347
}}
390348
storeKey="custom"
391349
>
392-
<DataTable>
393-
<DataTable.Col source="title" />
394-
</DataTable>
350+
<Iterator render={(book) => (
351+
<p>{book.title}</p>
352+
)} />
395353
</ReferenceManyFieldBase>
396-
</Stack>
354+
</div>
397355
```
398356
{% endraw %}
399357
@@ -403,9 +361,13 @@ Name of the field carrying the relationship on the referenced resource. For inst
403361
404362
```jsx
405363
<ReferenceManyFieldBase label="Books" reference="books" target="author_id">
406-
<DataTable>
407-
<DataTable.Col source="title" />
408-
<DataTable.Col source="published_at" field={DateField} />
409-
</DataTable>
364+
<ListIterator
365+
render={(book) => (
366+
<div>
367+
<p>{book.title}</p>
368+
<p>{book.published_at}</p>
369+
</div>
370+
)}
371+
/>
410372
</ReferenceManyFieldBase>
411373
```

0 commit comments

Comments
 (0)