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

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.313"
 }

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

@@ -0,0 +1,177 @@
+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 = defaultIcon,
+    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 ? (
+            typeof confirmContent === 'string' ? (
+              translate(confirmContent)
+            ) : (
+              confirmContent
+            )
+          ) : (
+            <Typography maxWidth="300px" variant="h4" align="center">
+              {translate('ra.message.delete_content')}
+            </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
+};
+
+const defaultIcon = <ActionDelete />;
+
+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,