Merge pull request #5954 from andrico1234/feature/pass-node-to-confirm

Feature: Confirm Dialog's `content` prop can receive `React.ReactNode`
marmelab · Mar 15, 2021 · 48564f9 · 48564f9
2 parents 557f384 + f800cb8
commit 48564f9
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/docs/List.md b/docs/List.md
@@ -404,7 +404,7 @@ export default ResetViewsButton;
 
 **Tip**: `<Confirm>` leverages material-ui's `<Dialog>` component to implement a confirmation popup. Feel free to use it in your admins!
 
-**Tip**: `<Confirm>` text props such as `title` and `content` are translatable. You can pass use translation keys in these props.
+**Tip**: `<Confirm>` text props such as `title` and `content` are translatable. You can pass use translation keys in these props. Note: `content` is only translateable when value is `string`, otherwise it renders the content as a `ReactNode`.
 
 **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.
 

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
@@ -153,7 +153,7 @@ const sanitizeRestProps = ({
 export interface BulkDeleteWithConfirmButtonProps
     extends BulkActionProps,
         ButtonProps {
-    confirmContent?: string;
+    confirmContent?: React.ReactNode;
     confirmTitle?: string;
     icon?: ReactElement;
 }

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx
@@ -125,7 +125,7 @@ interface Props {
     classes?: object;
     className?: string;
     confirmTitle?: string;
-    confirmContent?: string;
+    confirmContent?: React.ReactNode;
     icon?: ReactElement;
     label?: string;
     mutationMode?: MutationMode;

diff --git a/packages/ra-ui-materialui/src/layout/Confirm.tsx b/packages/ra-ui-materialui/src/layout/Confirm.tsx
@@ -94,12 +94,16 @@ const Confirm: FC<ConfirmProps> = props => {
                 {translate(title, { _: title, ...translateOptions })}
             </DialogTitle>
             <DialogContent>
-                <DialogContentText>
-                    {translate(content, {
-                        _: content,
-                        ...translateOptions,
-                    })}
-                </DialogContentText>
+                {typeof content === 'string' ? (
+                    <DialogContentText>
+                        {translate(content, {
+                            _: content,
+                            ...translateOptions,
+                        })}
+                    </DialogContentText>
+                ) : (
+                    content
+                )}
             </DialogContent>
             <DialogActions>
                 <Button disabled={loading} onClick={onClose}>
@@ -130,7 +134,7 @@ export interface ConfirmProps {
     confirmColor?: string;
     ConfirmIcon?: ReactComponentLike;
     CancelIcon?: ReactComponentLike;
-    content: string;
+    content: React.ReactNode;
     isOpen?: boolean;
     loading?: boolean;
     onClose: MouseEventHandler;
@@ -146,7 +150,7 @@ Confirm.propTypes = {
     confirmColor: PropTypes.string,
     ConfirmIcon: PropTypes.elementType,
     CancelIcon: PropTypes.elementType,
-    content: PropTypes.string.isRequired,
+    content: PropTypes.node.isRequired,
     isOpen: PropTypes.bool,
     loading: PropTypes.bool,
     onClose: PropTypes.func.isRequired,