@applica-software-guru/react-admin 1.5.329 → 1.5.330

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.329"
+  "version": "1.5.330"
 }

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

@@ -7,10 +7,19 @@ 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';
+import { useCallback } from 'react';
 
 type DeleteWithConfirmButtonProps<RecordType extends RaRecord = RaRecord> =
   RaDeleteWithConfirmButtonProps<RecordType> & {
     dialogSx?: SxProps;
+    /**
+     * @deprecated confirmTitle prop is deprecated, please use confirmContent instead.
+     */
+    confirmTitle?: React.ReactNode;
+    /**
+     * onConfirm {callback} is used to handle a custom delete action when user confirms the deletion.
+     */
+    onConfirm?: () => void;
   };
 
 function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
@@ -30,6 +39,7 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
     onClick,
     redirect = 'list',
     translateOptions = {},
+    onConfirm,
     ...rest
   } = props;
   const translate = useTranslate();
@@ -46,6 +56,17 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
     resource
   });
 
+  const handleOnConfirm = useCallback(
+    (event: any) => {
+      if (onConfirm) {
+        onConfirm();
+      } else {
+        handleDelete(event);
+      }
+    },
+    [handleDelete, onConfirm]
+  );
+
   return (
     <>
       <Button
@@ -122,9 +143,9 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
           )
         }
         content={
-          confirmContent || (
-            <Typography maxWidth="300px" variant="h4" align="center">
-              {translate('ra.message.delete_content', {
+          <Typography maxWidth="300px" variant="h4" align="center">
+            {confirmContent ||
+              translate('ra.message.delete_content', {
                 _: 'ra.message.delete_content',
                 name: translate(`resources.${resource}.forcedCaseName`, {
                   smart_count: 1,
@@ -138,8 +159,7 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
                 }),
                 id: record?.id
               })}
-            </Typography>
-          )
+          </Typography>
         }
         confirmColor={confirmColor}
         translateOptions={{
@@ -156,7 +176,7 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
           id: record?.id,
           ...translateOptions
         }}
-        onConfirm={handleDelete}
+        onConfirm={handleOnConfirm}
         onClose={handleDialogClose}
       />
     </>

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -19,10 +19,11 @@ import {
 import { styled, useTheme } from '@mui/material/styles';
 import { FormDataConsumer, RaRecord, useTranslate, useTranslateLabel } from 'ra-core';
 import * as React from 'react';
-import { Children, ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
-import { Confirm, useArrayInput } from 'react-admin';
+import { Children, ReactElement, ReactNode, useCallback, useMemo, useRef } from 'react';
+import { useArrayInput } from 'react-admin';
 import { UseFieldArrayReturn, useFormContext } from 'react-hook-form';
 import { Tooltip } from '@/components/@extended';
+import { DeleteWithConfirmButton } from '@/components/ra-buttons';
 
 /**
  * How to use TableFormIterator:
@@ -57,7 +58,6 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
     inset,
     sx
   } = props;
-  const [confirmIsOpen, setConfirmIsOpen] = useState<boolean>(false);
   const { fields, remove, replace, append } = useArrayInput(props);
   const { resetField } = useFormContext();
   const theme = useTheme();
@@ -129,7 +129,6 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
 
   const handleArrayClear = useCallback(() => {
     replace([]);
-    setConfirmIsOpen(false);
   }, [replace]);
 
   const context = useMemo(
@@ -217,9 +216,10 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
                 {!disableRemove && showClearAllButton ? (
                   <TableCell key="actions" sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                     <ActionsMenu horizontal>
-                      <Typography color="error" onClick={() => setConfirmIsOpen(true)}>
-                        {translate('ra.action.delete')}
-                      </Typography>
+                      <DeleteWithConfirmButton
+                        onConfirm={handleArrayClear}
+                        confirmContent={translate('ra.message.clear_array_input')}
+                      />
                     </ActionsMenu>
                   </TableCell>
                 ) : (
@@ -264,16 +264,6 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
             </TableBody>
           </Table>
         </TableContainer>
-
-        {fields.length > 0 && (
-          <Confirm
-            isOpen={confirmIsOpen}
-            title={translate('ra.action.clear_array_input')}
-            content={translate('ra.message.clear_array_input')}
-            onConfirm={handleArrayClear}
-            onClose={() => setConfirmIsOpen(false)}
-          />
-        )}
       </div>
     </TableFormIteratorContext.Provider>
   ) : null;

package/src/components/ra-forms/TableForm/TableFormIteratorItem.tsx

@@ -1,25 +1,24 @@
 import { EditButton } from './EditButton';
 import { ActionsMenu } from '@/components/ActionsMenu';
+import { DeleteWithConfirmButton } from '@/components/ra-buttons';
 import { useTableFormIterator } from '@/components/ra-forms/TableForm/TableFormIteratorContext';
 import {
   TableFormIteratorItemContext,
   TableFormIteratorItemContextValue
 } from '@/components/ra-forms/TableForm/TableFormIteratorItemContext';
-import { Button, Stack, TableCell } from '@mui/material';
+import { Stack, TableCell } from '@mui/material';
 import { RaRecord } from 'ra-core';
 import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useMemo } from 'react';
 import * as React from 'react';
-import { Confirm, useTranslate } from 'react-admin';
+import { useTranslate } from 'react-admin';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProps, _: any) => {
   const { children, disabled, disableRemove = false, index, member, resource, record } = props;
   const translate = useTranslate();
-  const [confirmIsOpen, setConfirmIsOpen] = React.useState<boolean>(false);
   const { total, remove } = useTableFormIterator();
 
   const handleRowDelete = React.useCallback(() => {
-    setConfirmIsOpen(false);
     remove(index);
   }, [index, remove]);
 
@@ -75,9 +74,10 @@ const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProp
         <TableCell>
           <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
             <ActionsMenu horizontal>
-              <Button onClick={() => setConfirmIsOpen(true)} color="error" sx={{ justifyContent: 'flex-start' }}>
-                {translate('ra.action.delete')}
-              </Button>
+              <DeleteWithConfirmButton
+                onConfirm={handleRowDelete}
+                confirmContent={translate('ra.message.remove_item')}
+              />
               {renderEditButton}
             </ActionsMenu>
           </Stack>
@@ -90,17 +90,6 @@ const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProp
           </Stack>
         </TableCell>
       ) : null}
-
-      {/** @ts-ignore */}
-      {children.length > 0 && (
-        <Confirm
-          isOpen={confirmIsOpen}
-          title={translate('ra.action.remove_item')}
-          content={translate('ra.message.remove_item')}
-          onConfirm={handleRowDelete}
-          onClose={() => setConfirmIsOpen(false)}
-        />
-      )}
     </TableFormIteratorItemContext.Provider>
   );
 });