|
| 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 | + |
| 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' | '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