Merge pull request #3812 from WiXSL/patch-custom-confirm-icons

Add custom icons for Confirm action buttons.
marmelab · Nov 21, 2019 · 91e02f9 · 91e02f9
2 parents cf80699 + 8ab7afb
commit 91e02f9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/docs/List.md b/docs/List.md
@@ -364,7 +364,7 @@ export default ResetViewsButton;
 
 **Tip**: `<Confirm>` text props such as `title` and `content` are translatable. You can pass use translation keys in these props.
 
-**Tip**: You can customize the text of the two `<Confirm>` component buttons using the `cancel` and `confirm` prop which accepts translation keys too.
+**Tip**: You can customize the text of the two `<Confirm>` component buttons using the `cancel` and `confirm` props which accept translation keys. You can customize the icons by setting the `ConfirmIcon` and `CancelIcon` props, which accept a SvgIcon type.
 
 **Tip**: React-admin doesn't use the `<Confirm>` component internally, because deletes and updates are applied locally immediately, then dispatched to the server after a few seconds, unless the user chooses to undo the modification. That's what we call optimistic rendering. You can do the same for the `ResetViewsButton` by setting `undoable: true` in the last argument of `useUpdateMany()`, as follows:
 

diff --git a/packages/ra-ui-materialui/src/layout/Confirm.js b/packages/ra-ui-materialui/src/layout/Confirm.js
@@ -45,6 +45,8 @@ const useStyles = makeStyles(theme => ({
  *     content="Are you sure you want to delete this item?"
  *     confirm="Yes"
  *     confirmColor="primary"
+ *     ConfirmIcon=ActionCheck
+ *     CancelIcon=AlertError
  *     cancel="Cancel"
  *     onConfirm={() => { // do something }}
  *     onClose={() => { // do something }}
@@ -58,6 +60,8 @@ const Confirm = ({
     confirm,
     cancel,
     confirmColor,
+    ConfirmIcon,
+    CancelIcon,
     onClose,
     onConfirm,
     classes: classesOverride,
@@ -98,7 +102,7 @@ const Confirm = ({
             </DialogContent>
             <DialogActions>
                 <Button disabled={loading} onClick={onClose}>
-                    <AlertError className={classes.iconPaddingStyle} />
+                    <CancelIcon className={classes.iconPaddingStyle} />
                     {translate(cancel, { _: cancel })}
                 </Button>
                 <Button
@@ -110,7 +114,7 @@ const Confirm = ({
                     })}
                     autoFocus
                 >
-                    <ActionCheck className={classes.iconPaddingStyle} />
+                    <ConfirmIcon className={classes.iconPaddingStyle} />
                     {translate(confirm, { _: confirm })}
                 </Button>
             </DialogActions>
@@ -123,6 +127,8 @@ Confirm.propTypes = {
     classes: PropTypes.object,
     confirm: PropTypes.string.isRequired,
     confirmColor: PropTypes.string.isRequired,
+    ConfirmIcon: PropTypes.elementType.isRequired,
+    CancelIcon: PropTypes.elementType.isRequired,
     content: PropTypes.string.isRequired,
     isOpen: PropTypes.bool,
     loading: PropTypes.bool,
@@ -136,6 +142,8 @@ Confirm.defaultProps = {
     classes: {},
     confirm: 'ra.action.confirm',
     confirmColor: 'primary',
+    ConfirmIcon: ActionCheck,
+    CancelIcon: AlertError,
     isOpen: false,
 };