Skip to content

Commit 18462e3

Browse files
committed
Merge branch 'master' into ra-core-reference-doc
2 parents f3ad55e + 622449b commit 18462e3

File tree

226 files changed

+10155
-4636
lines changed

Some content is hidden

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

226 files changed

+10155
-4636
lines changed

CHANGELOG.md

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

3+
## 5.12.0
4+
5+
* Add `error`, `loading`, `empty` and `offline` props to `<ListBase>`, `<WithListContext>`, `<EditBase>`, and `<ShowBase>` to set fallback components for non-success states. ([#10880](https://github.com/marmelab/react-admin/pull/10880)) ([erwanMarmelab](https://github.com/erwanMarmelab))
6+
* Add `<RecordsIterator>` for easy rendering of lists of records ([#10880](https://github.com/marmelab/react-admin/pull/10880)) ([erwanMarmelab](https://github.com/erwanMarmelab))
7+
* Add `<TextArrayField>` to render arrays of strings ([#10939](https://github.com/marmelab/react-admin/pull/10939)) ([slax57](https://github.com/slax57))
8+
* Add `useUpdateController` to make the logic portable ([#10924](https://github.com/marmelab/react-admin/pull/10924)) ([djhi](https://github.com/djhi))
9+
* Add `useBulkUpdateController` to make the logic portable ([#10925](https://github.com/marmelab/react-admin/pull/10925)) ([djhi](https://github.com/djhi))
10+
* Add `useBulkDeleteController` to make the logic portable ([#10923](https://github.com/marmelab/react-admin/pull/10923)) ([djhi](https://github.com/djhi))
11+
* Add `<ListBase emptyWhileLoading>` option ([#10917](https://github.com/marmelab/react-admin/pull/10917)) ([djhi](https://github.com/djhi))
12+
* Add `useMutationWithMutationMode` hook ([#10910](https://github.com/marmelab/react-admin/pull/10910)) ([djhi](https://github.com/djhi))
13+
* Update Guessers to use `<TextArrayInput>` / `<TextArrayField>` for scalar arrays ([#10939](https://github.com/marmelab/react-admin/pull/10939)) ([slax57](https://github.com/slax57))
14+
* Fix `useMutationWithMutationMode` in `optimistic` and `undoable` mode may pass invalid parameters to the mutation ([#10977](https://github.com/marmelab/react-admin/pull/10977)) ([djhi](https://github.com/djhi))
15+
* Fix update removing `meta` and `pageInfo` properties from `getManyReference` result ([#10975](https://github.com/marmelab/react-admin/pull/10975)) ([jvasseur](https://github.com/jvasseur))
16+
* [Doc] Add missing props to `<ReferenceArrayField>` and `<ReferenceManyField>`, and base components ([#10978](https://github.com/marmelab/react-admin/pull/10978)) ([slax57](https://github.com/slax57))
17+
* [Doc] Add Soft Delete Documentation ([#10974](https://github.com/marmelab/react-admin/pull/10974)) ([djhi](https://github.com/djhi))
18+
19+
## 5.11.4
20+
21+
* Fix `useGetManyAggregate` merge queries with different `meta` ([#10969](https://github.com/marmelab/react-admin/pull/10969)) ([djhi](https://github.com/djhi))
22+
* Fix `useDeleteController` should get the record from closest `RecordContext` ([#10967](https://github.com/marmelab/react-admin/pull/10967)) ([djhi](https://github.com/djhi))
23+
* Fix incompatibility with latest `@tanstack/react-query` ([#10964](https://github.com/marmelab/react-admin/pull/10964)) ([djhi](https://github.com/djhi))
24+
* Fix `<Toolbar>` design ([#10960](https://github.com/marmelab/react-admin/pull/10960)) ([djhi](https://github.com/djhi))
25+
* 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))
26+
* 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))
27+
* [Doc] Update `<ReferenceManyInput>` documentation to mention `rankSource` ([#10970](https://github.com/marmelab/react-admin/pull/10970)) ([djhi](https://github.com/djhi))
28+
* [Doc] Add logo to `ra-core` documentation ([#10968](https://github.com/marmelab/react-admin/pull/10968)) ([djhi](https://github.com/djhi))
29+
* [Doc] Change `ra-core` documentation styles ([#10966](https://github.com/marmelab/react-admin/pull/10966)) ([djhi](https://github.com/djhi))
30+
* [Doc] Improve sidebar scrolling on `ra-core` documentation ([#10963](https://github.com/marmelab/react-admin/pull/10963)) ([slax57](https://github.com/slax57))
31+
* [Doc] Fix some incorrect video types ([#10962](https://github.com/marmelab/react-admin/pull/10962)) ([slax57](https://github.com/slax57))
32+
* [Doc] Add missing props to `<ReferenceArrayFieldBase>` and `<ReferenceManyFieldBase>` documentation ([#10956](https://github.com/marmelab/react-admin/pull/10956)) ([slax57](https://github.com/slax57))
33+
* [Doc] Fix `<BulkActionsToolbar selectAllButton>` only accepts an element ([#10954](https://github.com/marmelab/react-admin/pull/10954)) ([slax57](https://github.com/slax57))
34+
* [Doc] Update `<Scheduler>` documentation ([#10950](https://github.com/marmelab/react-admin/pull/10950)) ([djhi](https://github.com/djhi))
35+
336
## 5.11.3
437

538
* 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))

docs/ArrayField.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,13 @@ Check [the `useListContext` documentation](./useListContext.md) for more informa
260260

261261
## Rendering An Array Of Strings
262262

263-
If you need to render a custom collection (e.g. an array of tags `['dolor', 'sit', 'amet']`), it's often simpler to write your own component:
263+
If you need to render a custom collection (e.g. an array of tags `['dolor', 'sit', 'amet']`), you can use the [`<TextArrayField>`](./TextArrayField.md) component.
264+
265+
```jsx
266+
<TextArrayField source="tags" />
267+
```
268+
269+
You can also create your own field component, using the `useRecordContext` hook:
264270

265271
```jsx
266272
import { useRecordContext } from 'react-admin';

docs/BulkSoftDeleteButton.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
layout: default
3+
title: "The BulkSoftDeleteButton Component"
4+
---
5+
6+
# `<BulkSoftDeleteButton>`
7+
8+
Soft-deletes the selected rows. To be used inside [the `<DataTable bulkActionButtons>` prop](https://marmelab.com/react-admin/DataTable.html#bulkactionbuttons).
9+
10+
![A bulk soft delete button in a `<DataTable>`](https://react-admin-ee.marmelab.com/assets/BulkSoftDeleteButton.png)
11+
12+
## Usage
13+
14+
`<BulkSoftDeleteButton>` reads the selected record ids from the `ListContext`, and the current resource from `ResourceContext`, so in general it doesn’t need any props:
15+
16+
```tsx
17+
import * as React from 'react';
18+
import { BulkExportButton, DataTable } from 'react-admin';
19+
import { BulkSoftDeleteButton } from '@react-admin/ra-soft-delete';
20+
21+
const PostBulkActionButtons = () => (
22+
<>
23+
<BulkExportButton />
24+
<BulkSoftDeleteButton />
25+
</>
26+
);
27+
28+
export const PostList = () => (
29+
<List>
30+
<DataTable bulkActionButtons={<PostBulkActionButtons />}>
31+
...
32+
</DataTable>
33+
</List>
34+
);
35+
```
36+
37+
## Props
38+
39+
| Prop | Required | Type | Default | Description |
40+
|-------------------|----------|-----------------------------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------|
41+
| `confirm Content` | Optional | React node | - | Lets you customize the content of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes |
42+
| `confirm Title` | Optional | `string` | - | Lets you customize the title of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes |
43+
| `confirm Color` | Optional | <code>'primary' &#124; 'warning'</code> | 'primary' | Lets you customize the color of the confirm dialog's "Confirm" button. Only used in `'pessimistic'` or `'optimistic'` mutation modes |
44+
| `label` | Optional | `string` | 'ra-soft-delete. action. soft_delete' | label or translation message to use |
45+
| `icon` | Optional | `ReactElement` | `<DeleteIcon>` | iconElement, e.g. `<CommentIcon />` |
46+
| `mutation Mode` | Optional | `string` | `'undoable'` | Mutation mode (`'undoable'`, `'pessimistic'` or `'optimistic'`) |
47+
| `mutation Options` | Optional | `object` | null | options for react-query `useMutation` hook |
48+
| `success Message` | Optional | `string` | 'ra-soft-delete. notification. soft_deleted' | Lets you customize the success notification message. |
49+
50+
**Tip:** If you choose the `'pessimistic'` or `'optimistic'` mutation mode, a confirm dialog will be displayed to the user before the mutation is executed.
51+
52+
## `successMessage`
53+
54+
On success, `<BulkSoftDeleteButton>` displays a "XX elements deleted" notification in English. `<BulkSoftDeleteButton>` uses two successive translation keys to build the success message:
55+
56+
- `resources.{resource}.notifications.soft_deleted` as a first choice
57+
- `ra-soft-delete.notification.soft_deleted` as a fallback
58+
59+
To customize the notification message, you can set custom translation for these keys in your i18nProvider.
60+
61+
**Tip**: If you choose to use a custom translation, be aware that react-admin uses the same translation message for the `<SoftDeleteButton>`, so the message must support [pluralization](https://marmelab.com/react-admin/TranslationTranslating.html#interpolation-pluralization-and-default-translation):
62+
63+
```tsx
64+
const englishMessages = {
65+
resources: {
66+
posts: {
67+
notifications: {
68+
soft_deleted: 'Post archived |||| %{smart_count} posts archived',
69+
// ...
70+
},
71+
},
72+
},
73+
};
74+
```
75+
76+
Alternately, pass a `successMessage` prop:
77+
78+
```tsx
79+
<BulkSoftDeleteButton successMessage="Posts deleted successfully" />
80+
```

docs/Buttons.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -838,7 +838,7 @@ If your `authProvider` implements [Access Control](./Permissions.md#access-contr
838838

839839
## `<DeleteButton>`
840840

841-
Delete the current record.
841+
Deletes the current record.
842842

843843
![Delete button](./img/DeleteButton.png)
844844

@@ -867,6 +867,8 @@ You can also call it with a record and a resource:
867867
```
868868
{% endraw %}
869869

870+
**Tip**: React-admin provides a [`<SoftDeleteButton>`](./SoftDeleteButton.md) variant, which archives the record instead of deleting it. Check out the [Soft Delete documentation](./SoftDeleteDataProvider.md) for more information.
871+
870872
### Props
871873

872874
| Prop | Required | Type | Default | Description |

docs/ChipField.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,13 @@ The `<ChipField>` component accepts the usual `className` prop. You can also ove
4141
| `&.RaChipField-chip` | Applied to the underlying Material UI's `Chip` component |
4242

4343
To override the style of all instances of `<ChipField>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaChipField` key.
44+
45+
## Rendering A Scalar Value
46+
47+
If you need to render a custom collection (e.g. an array of tags `['dolor', 'sit', 'amet']`), you may be tempted to use `<ChipField source="." />`, but that won't work.
48+
49+
What you probably need in that case instead is the [`<TextArrayField>`](./TextArrayField.md) component, which will render each item of a scalar array in its own Chip.
50+
51+
```jsx
52+
<TextArrayField source="tags" />
53+
```

docs/Create.md

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -55,23 +55,24 @@ export default App;
5555

5656
You can customize the `<Create>` component using the following props:
5757

58-
| Prop | Required | Type | Default | Description |
59-
|---------------------|----------|---------------------|----------------|--------------------------------------------------------------------------------------------------|
60-
| `children` | Optional&nbsp;* | `ReactNode` | - | The components that render the form |
61-
| `render` | Optional&nbsp;* | `function` | - | Alternative to children. Function that renders the form, receives the create context as argument |
62-
| `actions` | Optional | `ReactNode` | Default toolbar| Override the actions toolbar with a custom component |
63-
| `aside` | Optional | `ReactNode` | - | Component to render aside to the main content |
64-
| `className` | Optional | `string` | - | Passed to the root component |
65-
| `component` | Optional | `string`/`Component`| `Card` | Override the root component |
66-
| `disableAuthentication` | Optional | `boolean` | `false` | Disable the authentication check |
67-
| `mutationMode` | Optional | `string` | `pessimistic` | Switch to optimistic or undoable mutations |
68-
| `mutationOptions` | Optional | `object` | - | Options for the `dataProvider.create()` call |
69-
| `record` | Optional | `object` | `{}` | Initialize the form with a record |
70-
| `redirect` | Optional | `string`/`function` | `'edit'` | Change the redirect location after successful creation |
71-
| `resource` | Optional | `string` | From URL | Override the name of the resource to create |
72-
| `sx` | Optional | `object` | - | Override the styles |
73-
| `title` | Optional | `string`/`ReactNode`| Translation | Override the page title |
74-
| `transform` | Optional | `function` | - | Transform the form data before calling `dataProvider.create()` |
58+
| Prop | Required | Type | Default | Description |
59+
|-------------------------|-----------------|----------------------|-----------------|--------------------------------------------------------------------------------------------------|
60+
| `authLoading` | Optional | `ReactNode` | - | The component to display while checking for authentication |
61+
| `children` | Optional&nbsp;* | `ReactNode` | - | The components that render the form |
62+
| `render` | Optional&nbsp;* | `function` | - | Alternative to children. Function that renders the form, receives the create context as argument |
63+
| `actions` | Optional | `ReactNode` | Default toolbar | Override the actions toolbar with a custom component |
64+
| `aside` | Optional | `ReactNode` | - | Component to render aside to the main content |
65+
| `className` | Optional | `string` | - | Passed to the root component |
66+
| `component` | Optional | `string`/`Component` | `Card` | Override the root component |
67+
| `disableAuthentication` | Optional | `boolean` | `false` | Disable the authentication check |
68+
| `mutationMode` | Optional | `string` | `pessimistic` | Switch to optimistic or undoable mutations |
69+
| `mutationOptions` | Optional | `object` | - | Options for the `dataProvider.create()` call |
70+
| `record` | Optional | `object` | `{}` | Initialize the form with a record |
71+
| `redirect` | Optional | `string`/`function` | `'edit'` | Change the redirect location after successful creation |
72+
| `resource` | Optional | `string` | From URL | Override the name of the resource to create |
73+
| `sx` | Optional | `object` | - | Override the styles |
74+
| `title` | Optional | `string`/`ReactNode` | Translation | Override the page title |
75+
| `transform` | Optional | `function` | - | Transform the form data before calling `dataProvider.create()` |
7576

7677
`*` You must provide either `children` or `render`.
7778

@@ -125,6 +126,20 @@ const PostCreate = () => (
125126

126127
{% endraw %}
127128

129+
## `authLoading`
130+
131+
By default, `<Create>` renders the `<Loading>` component while checking for authentication and permissions. You can display a custom component via the `authLoading` prop:
132+
133+
```jsx
134+
import { Create } from 'react-admin';
135+
136+
export const PostCreate = () => (
137+
<Create authLoading={<p>Checking for permissions...</p>}>
138+
...
139+
</Create>
140+
);
141+
```
142+
128143
## `children`
129144

130145
The `<Create>` component will render its children inside a [`CreateContext`](./useCreateContext.md#return-value). Children can be any React node, but are usually a form component like [`<SimpleForm>`](./SimpleForm.md), [`<TabbedForm>`](./TabbedForm.md), or the headless [`<Form>`](./Form.md) component.

docs/CreateBase.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@ export const BookCreate = () => (
4545

4646
You can customize the `<CreateBase>` component using the following props, documented in the `<Create>` component:
4747

48-
* `children`: the components that renders the form
49-
* `render`: alternative to children, a function that takes the `CreateController` context and renders the form
48+
* [`authLoading`](./Create.md#authloading): the component to display while checking for authentication
49+
* [`children`](./Create.md#children): the components that renders the form
50+
* [`render`](./Create.md#render): alternative to children, a function that takes the `CreateController` context and renders the form
5051
* [`disableAuthentication`](./Create.md#disableauthentication): disable the authentication check
5152
* [`mutationMode`](./Create.md#mutationmode): Switch to optimistic or undoable mutations (pessimistic by default)
5253
* [`mutationOptions`](./Create.md#mutationoptions): options for the `dataProvider.create()` call

0 commit comments

Comments
 (0)