Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for confirmColor prop to <DeleteButton> and <BulkDeleteButton> #9342

Merged
merged 1 commit into from
Oct 9, 2023
Merged

Add support for confirmColor prop to <DeleteButton> and <BulkDeleteButton> #9342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 21 additions & 18 deletions docs/Buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,14 +246,15 @@ export const PostList = () => (

![Bulk Delete button](./img/bulk-delete-button.png)

| Prop | Required | Type | Default | Description |
|-------------------|----------|----------------|--------------------|---------------------------------------------------------------------------------------------------------------------|
| `confirmContent` | Optional | React node | - | Lets you customize the content of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes |
| `confirmTitle` | Optional | `string` | - | Lets you customize the title of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes |
| `label` | Optional | `string` | 'ra.action.delete' | label or translation message to use |
| `icon` | Optional | `ReactElement` | `<DeleteIcon>` | iconElement, e.g. `<CommentIcon />` |
| `mutationMode` | Optional | `string` | `'undoable'` | Mutation mode (`'undoable'`, `'pessimistic'` or `'optimistic'`) |
| `mutationOptions` | Optional | `object` | null | options for react-query `useMutation` hook |
| Prop | Required | Type | Default | Description |
|-------------------|----------|-----------------------------------------|--------------------|--------------------------------------------------------------------------------------------------------------------------------------|
| `confirmContent` | Optional | React node | - | Lets you customize the content of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes |
| `confirmTitle` | Optional | `string` | - | Lets you customize the title of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes |
| `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 |
| `label` | Optional | `string` | 'ra.action.delete' | label or translation message to use |
| `icon` | Optional | `ReactElement` | `<DeleteIcon>` | iconElement, e.g. `<CommentIcon />` |
| `mutationMode` | Optional | `string` | `'undoable'` | Mutation mode (`'undoable'`, `'pessimistic'` or `'optimistic'`) |
| `mutationOptions` | Optional | `object` | null | options for react-query `useMutation` hook |

**Tip:** If you choose the `'pessimistic'` or `'optimistic'` mutation mode, a confirm dialog will be displayed to the user before the mutation is executed.

Expand Down Expand Up @@ -658,16 +659,17 @@ See [its documentation](./UpdateButton.md) for more details.

Delete the current record after a confirm dialog has been accepted. To be used inside a `<Toolbar/>` component.

| Prop | Required | Type | Default | Description |
|------------------------------------------------------------|----------|----------------------------------|-----------------------------|-------------------------------------------------------------------------|
| `className` | Optional | `string` | - | Class name to customize the look and feel of the button element itself |
| `label` | Optional | `string` | 'ra.action.delete' | label or translation message to use |
| `icon` | Optional | `ReactElement` | `<DeleteIcon>` | iconElement, e.g. `<CommentIcon />` |
| `confirmTitle` | Optional | `ReactNode` | 'ra.message.delete_title' | Title of the confirm dialog |
| `confirmContent` | Optional | `ReactNode` | 'ra.message.delete_content' | Message or React component to be used as the body of the confirm dialog |
| `redirect` | Optional | `string | false | Function` | 'list' | Custom redirection after success side effect |
| `translateOptions` | Optional | `{ id?: string, name?: string }` | {} | Custom id and name to be used in the confirm dialog's title |
| `mutationOptions` | Optional | | null | options for react-query `useMutation` hook |
| Prop | Required | Type | Default | Description |
|--------------------|----------|--------------------------------------------------|-----------------------------|-------------------------------------------------------------------------|
| `className` | Optional | `string` | - | Class name to customize the look and feel of the button element itself |
| `label` | Optional | `string` | 'ra.action.delete' | label or translation message to use |
| `icon` | Optional | `ReactElement` | `<DeleteIcon>` | iconElement, e.g. `<CommentIcon />` |
| `confirmTitle` | Optional | `ReactNode` | 'ra.message.delete_title' | Title of the confirm dialog |
| `confirmContent` | Optional | `ReactNode` | 'ra.message.delete_content' | Message or React component to be used as the body of the confirm dialog |
| `confirmColor` | Optional | <code>'primary' &#124; 'warning'</code> | 'primary' | The color of the confirm dialog's "Confirm" button |
| `redirect` | Optional | <code>string &#124; false &#124; Function</code> | 'list' | Custom redirection after success side effect |
| `translateOptions` | Optional | `{ id?: string, name?: string }` | {} | Custom id and name to be used in the confirm dialog's title |
| `mutationOptions` | Optional | | null | options for react-query `useMutation` hook |

{% raw %}
```jsx
Expand All @@ -681,6 +683,7 @@ const EditToolbar = props => {
<SaveButton/>
<DeleteWithConfirmButton
confirmContent="You will not be able to recover this record. Are you sure?"
confirmColor="warning"
translateOptions={{ name: record.name }}
/>
</Toolbar>
Expand Down
4 changes: 4 additions & 0 deletions packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export const BulkDeleteWithConfirmButton = (
const {
confirmTitle = 'ra.message.bulk_delete_title',
confirmContent = 'ra.message.bulk_delete_content',
confirmColor = 'primary',
icon = defaultIcon,
label = 'ra.action.delete',
mutationMode = 'pessimistic',
Expand Down Expand Up @@ -111,6 +112,7 @@ export const BulkDeleteWithConfirmButton = (
loading={isLoading}
title={confirmTitle}
content={confirmContent}
confirmColor={confirmColor}
translateOptions={{
smart_count: selectedIds.length,
name: translate(`resources.${resource}.forcedCaseName`, {
Expand Down Expand Up @@ -152,6 +154,7 @@ export interface BulkDeleteWithConfirmButtonProps<
ButtonProps {
confirmContent?: React.ReactNode;
confirmTitle?: React.ReactNode;
confirmColor?: 'primary' | 'warning';
icon?: ReactElement;
mutationMode: MutationMode;
mutationOptions?: UseMutationOptions<
Expand Down Expand Up @@ -182,6 +185,7 @@ const defaultIcon = <ActionDelete />;
BulkDeleteWithConfirmButton.propTypes = {
confirmTitle: PropTypes.node,
confirmContent: PropTypes.node,
confirmColor: PropTypes.string,
icon: PropTypes.element,
label: PropTypes.string,
mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']),
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/button/DeleteButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ export const DeleteButton = <RecordType extends RaRecord = any>(
: 'undoable';

return finalMutationMode === 'undoable' ? (
// @ts-ignore I looked for the error for one hour without finding it
<DeleteWithUndoButton<RecordType> record={record} {...rest} />
) : (
<DeleteWithConfirmButton<RecordType>
Expand All @@ -86,6 +85,7 @@ export interface DeleteButtonProps<
SaveContextValue {
confirmTitle?: React.ReactNode;
confirmContent?: React.ReactNode;
confirmColor?: 'primary' | 'warning';
icon?: ReactElement;
mutationMode?: MutationMode;
mutationOptions?: UseMutationOptions<
Expand Down
1 change: 1 addition & 0 deletions packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ export const WithCustomDialogContent = () => (
Are you sure you want to delete this user?
</Alert>
}
confirmColor="warning"
/>
</BookList>
}
Expand Down
4 changes: 4 additions & 0 deletions packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
className,
confirmTitle = 'ra.message.delete_title',
confirmContent = 'ra.message.delete_content',
confirmColor = 'primary',
icon = defaultIcon,
label = 'ra.action.delete',
mutationMode = 'pessimistic',
Expand Down Expand Up @@ -71,6 +72,7 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
loading={isLoading}
title={confirmTitle}
content={confirmContent}
confirmColor={confirmColor}
translateOptions={{
name: translate(`resources.${resource}.forcedCaseName`, {
smart_count: 1,
Expand Down Expand Up @@ -100,6 +102,7 @@ export interface DeleteWithConfirmButtonProps<
> extends ButtonProps {
confirmTitle?: React.ReactNode;
confirmContent?: React.ReactNode;
confirmColor?: 'primary' | 'warning';
icon?: ReactElement;
mutationMode?: MutationMode;
onClick?: ReactEventHandler<any>;
Expand All @@ -119,6 +122,7 @@ DeleteWithConfirmButton.propTypes = {
className: PropTypes.string,
confirmTitle: PropTypes.node,
confirmContent: PropTypes.node,
confirmColor: PropTypes.string,
label: PropTypes.string,
mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']),
record: PropTypes.any,
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/layout/Confirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export interface ConfirmProps
cancel?: string;
className?: string;
confirm?: string;
confirmColor?: string;
confirmColor?: 'primary' | 'warning';
ConfirmIcon?: ReactComponentLike;
CancelIcon?: ReactComponentLike;
content: React.ReactNode;
Expand Down