Skip to content

Commit 7a6c9c0

Browse files
djhidjhi
committed
Update documentation
1 parent 6f820a6 commit 7a6c9c0

File tree

3 files changed

+89
-3
lines changed

3 files changed

+89
-3
lines changed

‎docs/Edit.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -542,7 +542,7 @@ The default `onError` function is:
542542

543543
## `offline`
544544

545-
By default, `<EditBase>` renders nothing when there is no connectivity and the record hasn't been cached yet. You can provide your own component via the `offline` prop:
545+
By default, `<Edit>` renders the `<Offline>` component when there is no connectivity and the record hasn't been cached yet. You can provide your own component via the `offline` prop:
546546

547547
```jsx
548548
import { Edit } from 'react-admin';

‎docs/ReferenceArrayField.md‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,11 @@ You can change how the list of related records is rendered by passing a custom c
8585
| -------------- | -------- | --------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------ |
8686
| `source` | Required | `string` | - | Name of the property to display |
8787
| `reference` | Required | `string` | - | The name of the resource for the referenced records, e.g. 'tags' |
88-
| `children` | Optional&nbsp;* | `Element` | `<SingleFieldList>` | One or several elements that render a list of records based on a `ListContext` |
88+
| `children` | Optional&nbsp;* | `ReactNode` | `<SingleFieldList>` | One or several elements that render a list of records based on a `ListContext` |
8989
| `render` | Optional&nbsp;* | `(listContext) => Element` | `<SingleFieldList>` | A function that takes a list context and render a list of records |
9090
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records (the filtering is done client-side) |
91-
| `pagination` | Optional | `Element` | - | Pagination element to display pagination controls. empty by default (no pagination) |
91+
| `offline` | Optional | `ReactNode` | `<Offline variant="inline" />` | The component to render when there is no connectivity and the record isn't in the cache |
92+
| `pagination` | Optional | `ReactNode` | - | Pagination element to display pagination controls. empty by default (no pagination) |
9293
| `perPage` | Optional | `number` | 1000 | Maximum number of results to display |
9394
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v5/docs/react/reference/useQuery) | `{}` | `react-query` options for the `getMany` query |
9495
| `sort` | Optional | `{ field, order }` | `{ field: 'id', order: 'DESC' }` | Sort order to use when displaying the related records (the sort is done client-side) |
@@ -235,6 +236,47 @@ React-admin uses [the i18n system](./Translation.md) to translate the label, so
235236
<ReferenceArrayField label="resource.posts.fields.tags" source="tag_ids" reference="tags" />
236237
```
237238

239+
## `offline`
240+
241+
By default, `<ReferenceArrayField>` renders the `<Offline variant="inline">` when there is no connectivity and the records haven't been cached yet. You can provide your own component via the `offline` prop:
242+
243+
```jsx
244+
import { ReferenceArrayField, Show } from 'react-admin';
245+
import { Alert } from '@mui/material';
246+
247+
export const PostShow = () => (
248+
<Show>
249+
<ReferenceArrayField
250+
source="tag_ids"
251+
reference="tags"
252+
offline={<Alert severity="warning">No network. Could not load the tags.</Alert>}
253+
>
254+
...
255+
</ReferenceArrayField>
256+
</Show>
257+
);
258+
```
259+
260+
**Tip**: If the records are in the Tanstack Query cache but you want to warn the user that they may see an outdated version, you can use the `<IsOffline>` component:
261+
262+
```jsx
263+
import { IsOffline, ReferenceArrayField, Show } from 'react-admin';
264+
import { Alert } from '@mui/material';
265+
266+
export const PostShow = () => (
267+
<Show>
268+
<ReferenceArrayField source="tag_ids" reference="tags">
269+
<IsOffline>
270+
<Alert severity="warning">
271+
You are offline, tags may be outdated
272+
</Alert>
273+
</IsOffline>
274+
...
275+
</ReferenceArrayField>
276+
</Show>
277+
);
278+
```
279+
238280
## `pagination`
239281

240282
`<ReferenceArrayField>` fetches *all* the related fields, and puts them all in a `ListContext`. If a record has a large number of related records, you can limit the number of displayed records with the [`perPage`](#perpage) prop. Then, let users display remaining records by rendering pagination controls. For that purpose, pass a pagination element to the `pagination` prop.

‎docs/ReferenceArrayFieldBase.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ You can change how the list of related records is rendered by passing a custom c
9292
| `children` | Optional\* | `Element` | | One or several elements that render a list of records based on a `ListContext` |
9393
| `render` | Optional\* | `(ListContext) => Element` | | A function that takes a list context and renders a list of records |
9494
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records (the filtering is done client-side) |
95+
| `offline` | Optional | `ReactNode` | | The component to render when there is no connectivity and the record isn't in the cache |
9596
| `perPage` | Optional | `number` | 1000 | Maximum number of results to display |
9697
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v5/docs/react/reference/useQuery) | `{}` | `react-query` options for the `getMany` query |
9798
| `sort` | Optional | `{ field, order }` | `{ field: 'id', order: 'DESC' }` | Sort order to use when displaying the related records (the sort is done client-side) |
@@ -175,6 +176,49 @@ For instance, to render only tags that are 'published', you can use the followin
175176
```
176177
{% endraw %}
177178
179+
## `offline`
180+
181+
By default, `<ReferenceArrayFieldBase>` renders nothing when there is no connectivity and the records haven't been cached yet. You can provide your own component via the `offline` prop:
182+
183+
```jsx
184+
import { ReferenceArrayFieldBase, ShowBase } from 'ra-core';
185+
186+
export const PostShow = () => (
187+
<ShowBase>
188+
<ReferenceArrayFieldBase
189+
source="tag_ids"
190+
reference="tags"
191+
offline={<p>No network. Could not load the tags.</p>}
192+
>
193+
...
194+
</ReferenceArrayFieldBase>
195+
</ShowBase>
196+
);
197+
```
198+
199+
**Tip**: If the records are in the Tanstack Query cache but you want to warn the user that they may see an outdated version, you can use the `<IsOffline>` component:
200+
201+
```jsx
202+
import { IsOffline, ReferenceArrayFieldBase, ShowBase } from 'ra-core';
203+
204+
export const PostShow = () => (
205+
<ShowBase>
206+
<ReferenceArrayFieldBase
207+
source="tag_ids"
208+
reference="tags"
209+
offline={<p>No network. Could not load the tags.</p>}
210+
>
211+
<IsOffline>
212+
<p>
213+
You are offline, tags may be outdated
214+
</p>
215+
</IsOffline>
216+
...
217+
</ReferenceArrayFieldBase>
218+
</ShowBase>
219+
);
220+
```
221+
178222
## `perPage`
179223
180224
`<ReferenceArrayFieldBase>` fetches *all* the related fields, and puts them all in a `ListContext`. If a record has a large number of related records, it may be a good idea to limit the number of displayed records. The `perPage` prop allows to create a client-side pagination for the related records.

0 commit comments

Comments
 (0)