@applica-software-guru/react-admin 1.5.312 → 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.312"
+  "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

@@ -0,0 +1,182 @@
+import PropTypes from 'prop-types';
+import ActionDelete from '@mui/icons-material/Delete';
+import clsx from 'clsx';
+import inflection from 'inflection';
+import { RaRecord, useDeleteWithConfirmController, useRecordContext, useResourceContext, useTranslate } from 'ra-core';
+import { Button } from './Button';
+import { Confirm, DeleteWithConfirmButtonProps as RaDeleteWithConfirmButtonProps } from 'ra-ui-materialui';
+import { Box, SxProps, Typography, useTheme } from '@mui/material';
+import { DeleteFilled } from '@ant-design/icons';
+
+type DeleteWithConfirmButtonProps<RecordType extends RaRecord = RaRecord> =
+  RaDeleteWithConfirmButtonProps<RecordType> & {
+    dialogSx?: SxProps;
+  };
+
+function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
+  props: DeleteWithConfirmButtonProps<RecordType>
+): JSX.Element {
+  const {
+    className,
+    confirmTitle,
+    confirmContent,
+    confirmColor = 'primary',
+    color = 'error',
+    dialogSx,
+    icon = <ActionDelete />,
+    label = 'ra.action.delete',
+    mutationMode = 'pessimistic',
+    mutationOptions,
+    onClick,
+    redirect = 'list',
+    translateOptions = {},
+    ...rest
+  } = props;
+  const translate = useTranslate();
+  const record = useRecordContext(props);
+  const resource = useResourceContext(props);
+  const theme = useTheme();
+
+  const { open, isLoading, handleDialogOpen, handleDialogClose, handleDelete } = useDeleteWithConfirmController({
+    record,
+    redirect,
+    mutationMode,
+    onClick,
+    mutationOptions,
+    resource
+  });
+
+  return (
+    <>
+      <Button
+        onClick={handleDialogOpen}
+        label={label}
+        className={clsx('ra-delete-button', className)}
+        key="button"
+        color={color}
+        {...rest}
+      >
+        {icon}
+      </Button>
+      <Confirm
+        isOpen={open}
+        loading={isLoading}
+        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.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>
+          )
+        }
+        confirmColor={confirmColor}
+        translateOptions={{
+          name: translate(`resources.${resource}.forcedCaseName`, {
+            smart_count: 1,
+            _: inflection.humanize(
+              translate(`resources.${resource}.name`, {
+                smart_count: 1,
+                _: inflection.singularize(resource)
+              }),
+              true
+            )
+          }),
+          id: record?.id,
+          ...translateOptions
+        }}
+        onConfirm={handleDelete}
+        onClose={handleDialogClose}
+      />
+    </>
+  );
+}
+
+DeleteWithConfirmButton.propTypes = {
+  basePath: PropTypes.string,
+  className: PropTypes.string,
+  confirmColor: PropTypes.string,
+  confirmContent: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  confirmTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  icon: PropTypes.element,
+  label: PropTypes.string,
+  mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']),
+  onClick: PropTypes.func,
+  record: PropTypes.any,
+  redirect: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func]),
+  resource: PropTypes.string,
+  translateOptions: PropTypes.object
+};
+
+export { DeleteWithConfirmButton };

package/src/components/ra-buttons/index.ts

@@ -2,5 +2,6 @@ export * from './BulkDeleteWithConfirmButton';
 export * from './Button';
 export * from './CreateButton';
 export * from './CreateInDialogButton';
+export * from './DeleteWithConfirmButton';
 export * from './EditInDialogButton';
 export * from './ImpersonateUserButton';

package/src/components/ra-fields/ActionsField.tsx

@@ -1,5 +1,6 @@
 import { ActionsMenu } from '@/components/ActionsMenu';
-import { CloneButton, DeleteWithConfirmButton, EditButton } from 'react-admin';
+import { CloneButton, EditButton } from 'react-admin';
+import { DeleteWithConfirmButton } from '@/components/ra-buttons';
 
 function ActionsField({ canEdit = true, canDelete = true, canClone = false }: ActionsFieldProps): JSX.Element | null {
   if (!canEdit && !canDelete && !canClone) {

package/src/components/ra-forms/SimpleForm.tsx

@@ -4,12 +4,12 @@ import { Toolbar } from '@/components/ra-forms/Toolbar';
 import { useResourceTitle } from '@/hooks';
 import { styled, useTheme } from '@mui/system';
 import {
-  DeleteWithConfirmButton,
   SimpleForm as RaSimpleForm,
   SimpleFormProps as RaSimpleFormProps,
   SaveButton,
   useRecordContext
 } from 'react-admin';
+import { DeleteWithConfirmButton } from '@/components/ra-buttons';
 
 const StyledSimpleForm = styled(RaSimpleForm, { slot: 'Root' })(({ theme }: { theme: any }) => ({
   [theme.breakpoints.down('sm')]: {

package/src/components/ra-forms/TabbedForm.tsx

@@ -5,13 +5,8 @@ import { useResourceTitle } from '@/hooks';
 import { Box, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import { PropsWithChildren } from 'react';
-import {
-  DeleteWithConfirmButton,
-  TabbedForm as RaTabbedForm,
-  TabbedFormProps as RaTabbedFormProps,
-  SaveButton,
-  TabProps
-} from 'react-admin';
+import { TabbedForm as RaTabbedForm, TabbedFormProps as RaTabbedFormProps, SaveButton, TabProps } from 'react-admin';
+import { DeleteWithConfirmButton } from '@/components/ra-buttons';
 
 type StackTabProps = TabProps & PropsWithChildren<Record<string, never>>;
 

package/src/index.ts

@@ -16,7 +16,6 @@ export {
   Confirm,
   CreateContextProvider,
   CustomRoutes,
-  DeleteWithConfirmButton,
   DeleteWithUndoButton,
   EditButton,
   EditContextProvider,