Skip to content

Commit

Permalink
Merge pull request #9342 from IAmVisco/delete-button-confirm-color
Browse files Browse the repository at this point in the history 
[RFR] Pass confirmColor from DeleteButton to Confirm
  • Loading branch information
@slax57
slax57 authored Oct 9, 2023
2 parents dcd86cd + 8cd89a2 commit f348143
Show file tree
Hide file tree
Showing 6 changed files with 32 additions and 20 deletions.
39 changes: 21 additions & 18 deletions docs/Buttons.md
View file
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
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
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
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
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
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

0 comments on commit f348143

Please sign in to comment.