Skip to content

Commit f6ccb1c

Browse files
committed
[Doc] Add Soft Delete Documentation
1 parent 353b0e2 commit f6ccb1c

17 files changed

+1909
-0
lines changed

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+
| `confirmContent` | Optional | React node | - | Lets you customize the content of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes |
42+
| `confirmTitle` | Optional | `string` | - | Lets you customize the title of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes |
43+
| `confirmColor` | 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+
| `mutationMode` | Optional | `string` | `'undoable'` | Mutation mode (`'undoable'`, `'pessimistic'` or `'optimistic'`) |
47+
| `mutationOptions` | Optional | `object` | null | options for react-query `useMutation` hook |
48+
| `successMessage` | 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+
```

0 commit comments

Comments
 (0)