@applica-software-guru/react-admin 1.5.313 → 1.5.314

package/package.json

@@ -107,5 +107,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.313"
+  "version": "1.5.314"
 }

package/public/i18n/messages.json

@@ -645,7 +645,7 @@
     "id": "en.ra.message.bulk_delete_content",
     "code": "ra.message.bulk_delete_content",
     "lang": "en",
-    "text": "Sei sicuro di voler cancellare questo %{name}? |||| Sei sicuro di voler eliminare questi %{smart_count}?"
+    "text": "Sei sicuro di voler cancellare questo %{name}? |||| Sei sicuro di voler eliminare questi %{smart_count} %{name}?"
   },
   {
     "id": "en.ra.message.bulk_delete_title",

package/src/components/ra-buttons/BulkDeleteWithConfirmButton.tsx

@@ -3,7 +3,7 @@ import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ActionDelete from '@mui/icons-material/Delete';
 import inflection from 'inflection';
-import { alpha, styled } from '@mui/material/styles';
+import { SxProps, alpha, styled, useTheme } from '@mui/material/styles';
 import {
   DeleteManyParams,
   MutationMode,
@@ -19,6 +19,8 @@ import {
 import { BulkActionProps, Button, ButtonProps, Confirm } from 'react-admin';
 import { UseMutationOptions } from 'react-query';
 import _ from 'lodash';
+import { Box, Typography } from '@mui/material';
+import { DeleteFilled } from '@ant-design/icons';
 
 /**
  * BulkDeleteWithConfirmButton component allows you to delete multiple records with a confirmation dialog.
@@ -39,9 +41,10 @@ import _ from 'lodash';
  */
 function BulkDeleteWithConfirmButton(props: BulkDeleteWithConfirmButtonProps) {
   const {
-    confirmTitle = 'ra.message.bulk_delete_title',
-    confirmContent = 'ra.message.bulk_delete_content',
+    confirmTitle,
+    confirmContent,
     confirmColor = 'primary',
+    dialogSx,
     icon = defaultIcon,
     label = 'ra.action.delete',
     mutationMode = 'pessimistic',
@@ -58,6 +61,7 @@ function BulkDeleteWithConfirmButton(props: BulkDeleteWithConfirmButtonProps) {
   const resource = useResourceContext(props);
   const refresh = useRefresh();
   const translate = useTranslate();
+  const theme = useTheme();
   const [deleteMany, { isLoading }] = useDeleteMany(
     resource,
     { ids: selectedIds, meta: mutationMeta },
@@ -119,8 +123,86 @@ function BulkDeleteWithConfirmButton(props: BulkDeleteWithConfirmButtonProps) {
       <Confirm
         isOpen={isOpen}
         loading={isLoading}
-        title={confirmTitle}
-        content={confirmContent}
+        sx={
+          dialogSx || {
+            '& .MuiPaper-root': {
+              p: 2
+            },
+            '& .MuiDialogActions-root': {
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              '& .RaConfirm-confirmPrimary': {
+                backgroundColor: theme.palette.primary.main,
+                color: theme.palette.primary.contrastText,
+                ml: 2,
+                '&:hover': {
+                  backgroundColor: theme.palette.primary.dark
+                }
+              },
+              '& .MuiButtonBase-root': {
+                width: '50%',
+                border: `1px solid ${theme.palette.action.disabled}`
+              },
+              '& .MuiButton-icon': {
+                display: 'none'
+              }
+            }
+          }
+        }
+        title={
+          confirmTitle ? (
+            typeof confirmTitle === 'string' ? (
+              translate(confirmTitle)
+            ) : (
+              confirmTitle
+            )
+          ) : (
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }}
+            >
+              <Box
+                sx={{
+                  color: 'primary.main',
+                  fontSize: '28px',
+                  borderRadius: '50%',
+                  backgroundColor: 'primary.lighter',
+                  width: '56px',
+                  height: '56px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                }}
+              >
+                <DeleteFilled />
+              </Box>
+            </Box>
+          )
+        }
+        content={
+          confirmContent || (
+            <Typography maxWidth="300px" variant="h4" align="center">
+              {translate('ra.message.bulk_delete_content', {
+                _: 'ra.message.bulk_delete_content',
+                smart_count: selectedIds.length,
+                name: translate(`resources.${resource}.forcedCaseName`, {
+                  smart_count: selectedIds.length,
+                  _: inflection.humanize(
+                    translate(`resources.${resource}.name`, {
+                      smart_count: selectedIds.length,
+                      _: inflection.inflect(resource, selectedIds.length)
+                    }),
+                    true
+                  )
+                })
+              })}
+            </Typography>
+          )
+        }
         confirmColor={confirmColor}
         translateOptions={{
           smart_count: selectedIds.length,
@@ -158,6 +240,7 @@ interface BulkDeleteWithConfirmButtonProps<RecordType extends RaRecord = any, Mu
   confirmContent?: React.ReactNode;
   confirmTitle?: React.ReactNode;
   confirmColor?: 'primary' | 'warning';
+  dialogSx?: SxProps;
   icon?: ReactElement;
   mutationMode: MutationMode;
   mutationOptions?: UseMutationOptions<RecordType, MutationOptionsError, DeleteManyParams<RecordType>> & {
@@ -197,6 +280,7 @@ BulkDeleteWithConfirmButton.propTypes = {
   confirmTitle: PropTypes.node,
   confirmContent: PropTypes.node,
   confirmColor: PropTypes.string,
+  dialogSx: PropTypes.object,
   icon: PropTypes.element,
   label: PropTypes.string,
   mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']),

package/src/components/ra-buttons/DeleteWithConfirmButton.tsx

@@ -23,7 +23,7 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
     confirmColor = 'primary',
     color = 'error',
     dialogSx,
-    icon = defaultIcon,
+    icon = <ActionDelete />,
     label = 'ra.action.delete',
     mutationMode = 'pessimistic',
     mutationOptions,
@@ -122,15 +122,22 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
           )
         }
         content={
-          confirmContent ? (
-            typeof confirmContent === 'string' ? (
-              translate(confirmContent)
-            ) : (
-              confirmContent
-            )
-          ) : (
+          confirmContent || (
             <Typography maxWidth="300px" variant="h4" align="center">
-              {translate('ra.message.delete_content')}
+              {translate('ra.message.delete_content', {
+                _: 'ra.message.delete_content',
+                name: translate(`resources.${resource}.forcedCaseName`, {
+                  smart_count: 1,
+                  _: inflection.humanize(
+                    translate(`resources.${resource}.name`, {
+                      smart_count: 1,
+                      _: inflection.singularize(resource)
+                    }),
+                    true
+                  )
+                }),
+                id: record?.id
+              })}
             </Typography>
           )
         }
@@ -172,6 +179,4 @@ DeleteWithConfirmButton.propTypes = {
   translateOptions: PropTypes.object
 };
 
-const defaultIcon = <ActionDelete />;
-
 export { DeleteWithConfirmButton };