Skip to content

Commit aa8fb97

Browse files
djhidjhi
authored
Merge pull request #10972 from marmelab/merge-master-5.11.4
Merge branch `master` `5.11.4` into `next`
2 parents 62b9028 + e8fa833 commit aa8fb97

File tree

92 files changed

+1456
-512
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+1456
-512
lines changed

‎CHANGELOG.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,27 @@
11
# Changelog
22

3+
## 5.11.4
4+
5+
* Fix `useGetManyAggregate` merge queries with different `meta` ([#10969](https://github.com/marmelab/react-admin/pull/10969)) ([djhi](https://github.com/djhi))
6+
* Fix `useDeleteController` should get the record from closest `RecordContext` ([#10967](https://github.com/marmelab/react-admin/pull/10967)) ([djhi](https://github.com/djhi))
7+
* Fix incompatibility with latest `@tanstack/react-query` ([#10964](https://github.com/marmelab/react-admin/pull/10964)) ([djhi](https://github.com/djhi))
8+
* Fix `<Toolbar>` design ([#10960](https://github.com/marmelab/react-admin/pull/10960)) ([djhi](https://github.com/djhi))
9+
* Fix `<ReferenceInput>` don't return currently selected choice when `enableGetChoices` returns `false` ([#10958](https://github.com/marmelab/react-admin/pull/10958)) ([djhi](https://github.com/djhi))
10+
* Fix `<FilterLiveForm>` may override latest users inputs when they type at the same pace than the debounce delay ([#10952](https://github.com/marmelab/react-admin/pull/10952)) ([djhi](https://github.com/djhi))
11+
* [Doc] Update `<ReferenceManyInput>` documentation to mention `rankSource` ([#10970](https://github.com/marmelab/react-admin/pull/10970)) ([djhi](https://github.com/djhi))
12+
* [Doc] Add logo to `ra-core` documentation ([#10968](https://github.com/marmelab/react-admin/pull/10968)) ([djhi](https://github.com/djhi))
13+
* [Doc] Change `ra-core` documentation styles ([#10966](https://github.com/marmelab/react-admin/pull/10966)) ([djhi](https://github.com/djhi))
14+
* [Doc] Improve sidebar scrolling on `ra-core` documentation ([#10963](https://github.com/marmelab/react-admin/pull/10963)) ([slax57](https://github.com/slax57))
15+
* [Doc] Fix some incorrect video types ([#10962](https://github.com/marmelab/react-admin/pull/10962)) ([slax57](https://github.com/slax57))
16+
* [Doc] Add missing props to `<ReferenceArrayFieldBase>` and `<ReferenceManyFieldBase>` documentation ([#10956](https://github.com/marmelab/react-admin/pull/10956)) ([slax57](https://github.com/slax57))
17+
* [Doc] Fix `<BulkActionsToolbar selectAllButton>` only accepts an element ([#10954](https://github.com/marmelab/react-admin/pull/10954)) ([slax57](https://github.com/slax57))
18+
* [Doc] Update `<Scheduler>` documentation ([#10950](https://github.com/marmelab/react-admin/pull/10950)) ([djhi](https://github.com/djhi))
19+
20+
## 5.11.3
21+
22+
* Fix `useLogout` does not redirect to the `checkAuth` call `redirectTo` property ([#10949](https://github.com/marmelab/react-admin/pull/10949)) ([djhi](https://github.com/djhi))
23+
* [Doc] Update `disableSort` property in `<DataTable>` documentation ([#10947](https://github.com/marmelab/react-admin/pull/10947)) ([johannchopin-buyco](https://github.com/johannchopin-buyco))
24+
325
## 5.11.2
426

527
* Fix `<BulkDeleteWithConfirmButton>` default color ([#10928](https://github.com/marmelab/react-admin/pull/10928)) ([wmatex](https://github.com/wmatex))

‎docs/Buttons.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1405,7 +1405,7 @@ export const PostList = () => (
14051405
<List>
14061406
<DataTable
14071407
bulkActionsToolbar={
1408-
<BulkActionsToolbar selectAllButton={PostSelectAllButton}>
1408+
<BulkActionsToolbar selectAllButton={<PostSelectAllButton />}>
14091409
<BulkDeleteButton />
14101410
</BulkActionsToolbar>
14111411
}

‎docs/DataTable.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1607,7 +1607,7 @@ The column headers are buttons that allow users to change the list sort field an
16071607

16081608
### Disabling Sorting
16091609

1610-
It is possible to disable sorting for a specific `<DataTable.Col>` by passing a `sortable` property set to `false`:
1610+
It is possible to disable sorting for a specific `<DataTable.Col>` by passing the `disableSort` property:
16111611

16121612
{% raw %}
16131613
```tsx
@@ -1617,7 +1617,7 @@ import { List, DataTable } from 'react-admin';
16171617
export const PostList = () => (
16181618
<List>
16191619
<DataTable>
1620-
<DataTable.Col source="id" sortable={false} />
1620+
<DataTable.Col source="id" disableSort />
16211621
<DataTable.Col source="title" />
16221622
<DataTable.Col source="body" />
16231623
</DataTable>

‎docs/Features.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ Let's be realistic: Many developers focus on features first and don't have much
257257
React-admin provides **components that look pretty good out of the box**, so even if you don't spend time on the UI, it won't look bad (unless you try hard). React-admin uses [Material UI](https://mui.com/material-ui/getting-started/), which is a React implementation of the [Material Design](https://material.io/) guidelines, the most battle-tested design system.
258258

259259
<video controls autoplay playsinline muted loop width="100%">
260-
<source src="https://user-images.githubusercontent.com/99944/116970434-4a926480-acb8-11eb-8ce2-0602c680e45e.mp4" type="video/webm" />
260+
<source src="https://user-images.githubusercontent.com/99944/116970434-4a926480-acb8-11eb-8ce2-0602c680e45e.mp4" type="video/mp4" />
261261
Your browser does not support the video tag.
262262
</video>
263263

‎docs/ReferenceArrayFieldBase.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,10 @@ You can change how the list of related records is rendered by passing a custom c
8989
| `reference` | Required | `string` | - | The name of the resource for the referenced records, e.g. 'tags' |
9090
| `children` | Optional\* | `Element` | | One or several elements that render a list of records based on a `ListContext` |
9191
| `render` | Optional\* | `(ListContext) => Element` | | A function that takes a list context and renders a list of records |
92+
| `empty` | Optional | `ReactNode` | - | The component to render when the related records list is empty |
93+
| `error` | Optional | `ReactNode` | - | The component to render when an error occurs while fetching the related records |
9294
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records (the filtering is done client-side) |
95+
| `loading` | Optional | `ReactNode` | - | The component to render while fetching the related records |
9396
| `offline` | Optional | `ReactNode` | | The component to render when there is no connectivity and the record isn't in the cache |
9497
| `perPage` | Optional | `number` | 1000 | Maximum number of results to display |
9598
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v5/docs/react/reference/useQuery) | `{}` | `react-query` options for the `getMany` query |
@@ -127,6 +130,70 @@ const TagList = (props: { children: React.ReactNode }) => {
127130
};
128131
```
129132
133+
## `empty`
134+
135+
By default, `<ReferenceArrayFieldBase>` renders its children even when the related records list is empty. You can customize what is rendered by providing your own component via the `empty` prop:
136+
137+
```jsx
138+
import { ReferenceArrayFieldBase, ShowBase } from 'react-admin';
139+
140+
export const PostShow = () => (
141+
<ShowBase>
142+
<ReferenceArrayFieldBase
143+
source="tag_ids"
144+
reference="tags"
145+
empty={<p>No tags found.</p>}
146+
>
147+
...
148+
</ReferenceArrayFieldBase>
149+
</ShowBase>
150+
);
151+
```
152+
153+
You can also have `<ReferenceArrayFieldBase>` render nothing in that case by setting the prop to `null`:
154+
155+
```jsx
156+
<ReferenceArrayFieldBase
157+
source="tag_ids"
158+
reference="tags"
159+
empty={null}
160+
>
161+
...
162+
</ReferenceArrayFieldBase>
163+
```
164+
165+
## `error`
166+
167+
By default, `<ReferenceArrayFieldBase>` renders its children even when an error occurs while fetching the related records. You can customize what is rendered by providing your own component via the `error` prop:
168+
169+
```jsx
170+
import { ReferenceArrayFieldBase, ShowBase } from 'react-admin';
171+
172+
export const PostShow = () => (
173+
<ShowBase>
174+
<ReferenceArrayFieldBase
175+
source="tag_ids"
176+
reference="tags"
177+
error={<p>Error loading tags. Please try again.</p>}
178+
>
179+
...
180+
</ReferenceArrayFieldBase>
181+
</ShowBase>
182+
);
183+
```
184+
185+
You can also have `<ReferenceArrayFieldBase>` render nothing in that case by setting the prop to `null`:
186+
187+
```jsx
188+
<ReferenceArrayFieldBase
189+
source="tag_ids"
190+
reference="tags"
191+
error={null}
192+
>
193+
...
194+
</ReferenceArrayFieldBase>
195+
```
196+
130197
## `render`
131198
132199
Alternatively to `children`, you can pass a `render` function prop to `<ReferenceArrayFieldBase>`. The `render` prop will receive the `ListContext` as its argument, allowing to inline the rendering logic.
@@ -174,6 +241,38 @@ For instance, to render only tags that are 'published', you can use the followin
174241
```
175242
{% endraw %}
176243
244+
## `loading`
245+
246+
By default, `<ReferenceArrayFieldBase>` renders its children even while fetching the related records. You can customize what is rendered by providing your own component via the `loading` prop:
247+
248+
```jsx
249+
import { ReferenceArrayFieldBase, ShowBase } from 'react-admin';
250+
251+
export const PostShow = () => (
252+
<ShowBase>
253+
<ReferenceArrayFieldBase
254+
source="tag_ids"
255+
reference="tags"
256+
loading={<p>Loading tags...</p>}
257+
>
258+
...
259+
</ReferenceArrayFieldBase>
260+
</ShowBase>
261+
);
262+
```
263+
264+
You can also have `<ReferenceArrayFieldBase>` render nothing in that case by setting the prop to `null`:
265+
266+
```jsx
267+
<ReferenceArrayFieldBase
268+
source="tag_ids"
269+
reference="tags"
270+
loading={null}
271+
>
272+
...
273+
</ReferenceArrayFieldBase>
274+
```
275+
177276
## `offline`
178277
179278
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:

‎docs/ReferenceManyFieldBase.md‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,13 @@ export const PostList = () => (
8989
9090
| Prop | Required | Type | Default | Description |
9191
| -------------- | -------- | --------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------- |
92-
| `children` | Optional | `Element` | - | One or several elements that render a list of records based on a `ListContext` |
92+
| `children` | Optional\* | `Element` | - | One or several elements that render a list of records based on a `ListContext` |
9393
| `render` | Optional\* | `(ListContext) => Element` | - | Function that receives a `ListContext` and returns an element |
94-
| `debounce` | Optional\* | `number` | 500 | debounce time in ms for the `setFilters` callbacks |
94+
| `debounce` | Optional | `number` | 500 | debounce time in ms for the `setFilters` callbacks |
9595
| `empty` | Optional | `ReactNode` | - | Element to display when there are no related records. |
96+
| `error` | Optional | `ReactNode` | - | The component to render when an error occurs while fetching the related records |
9697
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records, passed to `getManyReference()` |
98+
| `loading` | Optional | `ReactNode` | - | The component to render while fetching the related records |
9799
| `offline` | Optional | `ReactNode` | - | Element to display when there are no related records because of lack of network connectivity. |
98100
| `perPage` | Optional | `number` | 25 | Maximum number of referenced records to fetch |
99101
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v3/docs/react/reference/useQuery) | `{}` | `react-query` options for the `getMany` query |
@@ -184,6 +186,38 @@ Use `empty` to customize the text displayed when there are no related records.
184186
</ReferenceManyFieldBase>
185187
```
186188
189+
## `error`
190+
191+
By default, `<ReferenceManyFieldBase>` renders its children when an error occurs while fetching the related records. You can customize what is rendered by providing your own component via the `error` prop:
192+
193+
```jsx
194+
import { ReferenceManyFieldBase, ShowBase } from 'react-admin';
195+
196+
export const AuthorShow = () => (
197+
<ShowBase>
198+
<ReferenceManyFieldBase
199+
reference="books"
200+
target="author_id"
201+
error={<p>Error loading books. Please try again.</p>}
202+
>
203+
...
204+
</ReferenceManyFieldBase>
205+
</ShowBase>
206+
);
207+
```
208+
209+
You can also have `<ReferenceManyFieldBase>` render nothing in that case by setting the prop to `null`:
210+
211+
```jsx
212+
<ReferenceManyFieldBase
213+
reference="books"
214+
target="author_id"
215+
error={null}
216+
>
217+
...
218+
</ReferenceManyFieldBase>
219+
```
220+
187221
## `filter`: Permanent Filter
188222
189223
You can filter the query used to populate the possible values. Use the `filter` prop for that.
@@ -202,6 +236,38 @@ You can filter the query used to populate the possible values. Use the `filter`
202236
203237
{% endraw %}
204238
239+
## `loading`
240+
241+
By default, `<ReferenceManyFieldBase>` renders its children while fetching the related records. You can customize what is rendered by providing your own component via the `loading` prop:
242+
243+
```jsx
244+
import { ReferenceManyFieldBase, ShowBase } from 'react-admin';
245+
246+
export const AuthorShow = () => (
247+
<ShowBase>
248+
<ReferenceManyFieldBase
249+
reference="books"
250+
target="author_id"
251+
loading={<p>Loading books...</p>}
252+
>
253+
...
254+
</ReferenceManyFieldBase>
255+
</ShowBase>
256+
);
257+
```
258+
259+
You can also have `<ReferenceManyFieldBase>` render nothing in that case by setting the prop to `null`:
260+
261+
```jsx
262+
<ReferenceManyFieldBase
263+
reference="books"
264+
target="author_id"
265+
loading={null}
266+
>
267+
...
268+
</ReferenceManyFieldBase>
269+
```
270+
205271
## `offline`
206272
207273
Use `offline` to customize the text displayed when there are no related records because of lack of network connectivity.

‎docs/ReferenceManyInput.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@ const ProductEdit = () => (
7474

7575
**Tip**: `<ReferenceManyInput>` cannot be used with `undoable` mutations. You have to set `mutationMode="optimistic"` or `mutationMode="pessimistic"` in the parent `<Edit>`, as in the example above.
7676

77+
**Tip**: `<SimpleFormIterator>` uses the `disableReordering` prop in this example because the `variants` resource doesn't support reordering. If your reference table does have a `rank` column, you can leave sorting controls on (see [the `rankSource` section](#ranksource) for details).
78+
7779
## Props
7880

7981
| Prop | Required | Type | Default | Description |
@@ -86,6 +88,7 @@ const ProductEdit = () => (
8688
| `source` | Optional | `string` | `id` | Name of the field that carries the identity of the current record, used as origin for the relationship |
8789
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records, passed to `getManyReference()` |
8890
| `perPage` | Optional | `number` | 25 | Maximum number of referenced records to fetch |
91+
| `rankSource` | Optional | `string` | - | Name of the field used to store the rank of each item. When defined, it enables reordering of the items. |
8992
| `sort` | Optional | `{ field, order }` | `{ field: 'id', order: 'DESC' }` | Sort order to use when fetching the related records, passed to `getManyReference()` |
9093
| `defaultValue` | Optional | `array` | - | Default value of the input. |
9194
| `validate` | Optional | `Function` &#124; `array` | - | Validation rules for the array. See the [Validation Documentation](./Validation.md) for details. |
@@ -202,6 +205,31 @@ By default, react-admin restricts the possible values to 25 and displays no pagi
202205
</ReferenceManyInput>
203206
```
204207

208+
### `rankSource`
209+
210+
`<SimpleFormIterator>` provides controls to reorder the items in the list. If the related records have a numeric rank field, you can enable the reordering feature by setting the `rankSource` prop.
211+
212+
for example, if the variants have a `rank` field, you can set the `rankSource` prop like this:
213+
214+
```jsx
215+
<ReferenceManyInput
216+
reference="variants"
217+
target="product_id"
218+
rankSource="rank"
219+
>
220+
<SimpleFormIterator>
221+
<TextInput source="sku" />
222+
<SelectInput source="size" choices={sizes} />
223+
<SelectInput source="color" choices={colors} />
224+
<NumberInput source="stock" defaultValue={0} />
225+
</SimpleFormIterator>
226+
</ReferenceManyInput>
227+
```
228+
229+
Now the variants will be ordered by rank, and whenever the user changes the order of the items, `<ReferenceManyInput>` will update the `rank` field of each item accordingly.
230+
231+
Note that `<SimpleFormIterator>` doesn't have the `disableReordering` prop in that case, to display the up/down controls.
232+
205233
## `reference`
206234

207235
The name of the resource to fetch for the related records.

0 commit comments

Comments
 (0)