diff --git a/packages/ra-core/src/dataProvider/useDeleteMany.ts b/packages/ra-core/src/dataProvider/useDeleteMany.ts
index 063d5e9fca7..58b0490934b 100644
--- a/packages/ra-core/src/dataProvider/useDeleteMany.ts
+++ b/packages/ra-core/src/dataProvider/useDeleteMany.ts
@@ -27,7 +27,7 @@ import { Identifier } from '../types';
* return ;
* };
*/
-const useDeleteMany = (resource: string, ids: [Identifier], options?: any) =>
+const useDeleteMany = (resource: string, ids: Identifier[], options?: any) =>
useMutation({ type: 'deleteMany', resource, payload: { ids } }, options);
export default useDeleteMany;
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteButton.tsx
similarity index 51%
rename from packages/ra-ui-materialui/src/button/BulkDeleteButton.js
rename to packages/ra-ui-materialui/src/button/BulkDeleteButton.tsx
index d2da9f1dba7..6cfe99cc254 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteButton.js
+++ b/packages/ra-ui-materialui/src/button/BulkDeleteButton.tsx
@@ -1,15 +1,26 @@
-import React from 'react';
+import React, { FC } from 'react';
import PropTypes from 'prop-types';
-import BulkDeleteWithConfirmButton from './BulkDeleteWithConfirmButton';
-import BulkDeleteWithUndoButton from './BulkDeleteWithUndoButton';
+import BulkDeleteWithConfirmButton, {
+ BulkDeleteWithConfirmButtonProps,
+} from './BulkDeleteWithConfirmButton';
+import BulkDeleteWithUndoButton, {
+ BulkDeleteWithUndoButtonProps,
+} from './BulkDeleteWithUndoButton';
-const BulkDeleteButton = ({ undoable, ...props }) =>
+const BulkDeleteButton: FC = ({ undoable, ...props }) =>
undoable ? (
) : (
);
+interface Props {
+ undoable?: boolean;
+}
+
+export type BulkDeleteButtonProps = Props &
+ (BulkDeleteWithUndoButtonProps | BulkDeleteWithConfirmButtonProps);
+
BulkDeleteButton.propTypes = {
basePath: PropTypes.string,
label: PropTypes.string,
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
similarity index 85%
rename from packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js
rename to packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
index b82c50710d1..b92d59818a9 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js
+++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { FC, Fragment, useState, ReactElement } from 'react';
import PropTypes from 'prop-types';
import ActionDelete from '@material-ui/icons/Delete';
import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -11,21 +11,11 @@ import {
useNotify,
useUnselectAll,
CRUD_DELETE_MANY,
+ Identifier,
} from 'ra-core';
import Confirm from '../layout/Confirm';
-import Button from './Button';
-
-const sanitizeRestProps = ({
- basePath,
- classes,
- crudDeleteMany,
- filterValues,
- label,
- resource,
- selectedIds,
- ...rest
-}) => rest;
+import Button, { ButtonProps } from './Button';
const useStyles = makeStyles(
theme => ({
@@ -43,12 +33,11 @@ const useStyles = makeStyles(
{ name: 'RaBulkDeleteWithConfirmButton' }
);
-const BulkDeleteWithConfirmButton = ({
+const BulkDeleteWithConfirmButton: FC = ({
basePath,
classes: classesOverride,
confirmTitle,
confirmContent,
- crudDeleteMany,
icon,
label,
onClick,
@@ -91,11 +80,11 @@ const BulkDeleteWithConfirmButton = ({
setOpen(false);
};
- const handleDelete = () => {
+ const handleDelete = e => {
deleteMany();
if (typeof onClick === 'function') {
- onClick();
+ onClick(e);
}
};
@@ -131,6 +120,29 @@ const BulkDeleteWithConfirmButton = ({
);
};
+const sanitizeRestProps = ({
+ basePath,
+ classes,
+ filterValues,
+ label,
+ ...rest
+}: Omit<
+ BulkDeleteWithConfirmButtonProps,
+ 'resource' | 'selectedIds' | 'icon'
+>) => rest;
+
+interface Props {
+ basePath?: string;
+ confirmContent?: string;
+ confirmTitle?: string;
+ filterValues?: any;
+ icon: ReactElement;
+ resource: string;
+ selectedIds: Identifier[];
+}
+
+export type BulkDeleteWithConfirmButtonProps = Props & ButtonProps;
+
BulkDeleteWithConfirmButton.propTypes = {
basePath: PropTypes.string,
classes: PropTypes.object,
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
similarity index 82%
rename from packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js
rename to packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
index 9c824835073..212f8eb1a4d 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js
+++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC, ReactElement } from 'react';
import PropTypes from 'prop-types';
import ActionDelete from '@material-ui/icons/Delete';
import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -9,22 +9,10 @@ import {
useNotify,
useUnselectAll,
CRUD_DELETE_MANY,
+ Identifier,
} from 'ra-core';
-import Button from './Button';
-
-const sanitizeRestProps = ({
- basePath,
- classes,
- dispatchCrudDeleteMany,
- filterValues,
- label,
- resource,
- selectedIds,
- startUndoable,
- undoable,
- ...rest
-}) => rest;
+import Button, { ButtonProps } from './Button';
const useStyles = makeStyles(
theme => ({
@@ -42,7 +30,7 @@ const useStyles = makeStyles(
{ name: 'RaBulkDeleteWithUndoButton' }
);
-const BulkDeleteWithUndoButton = ({
+const BulkDeleteWithUndoButton: FC = ({
basePath,
classes: classesOverride,
icon,
@@ -50,7 +38,6 @@ const BulkDeleteWithUndoButton = ({
onClick,
resource,
selectedIds,
- startUndoable,
...rest
}) => {
const classes = useStyles({ classes: classesOverride });
@@ -79,10 +66,10 @@ const BulkDeleteWithUndoButton = ({
undoable: true,
});
- const handleClick = () => {
+ const handleClick = e => {
deleteMany();
if (typeof onClick === 'function') {
- onClick();
+ onClick(e);
}
};
@@ -99,19 +86,36 @@ const BulkDeleteWithUndoButton = ({
);
};
+const sanitizeRestProps = ({
+ basePath,
+ classes,
+ filterValues,
+ label,
+ ...rest
+}: Omit) =>
+ rest;
+
+interface Props {
+ basePath?: string;
+ filterValues?: any;
+ icon: ReactElement;
+ resource: string;
+ selectedIds: Identifier[];
+}
+
+export type BulkDeleteWithUndoButtonProps = Props & ButtonProps;
+
BulkDeleteWithUndoButton.propTypes = {
basePath: PropTypes.string,
classes: PropTypes.object,
label: PropTypes.string,
resource: PropTypes.string.isRequired,
- startUndoable: PropTypes.func,
selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
icon: PropTypes.element,
};
BulkDeleteWithUndoButton.defaultProps = {
label: 'ra.action.delete',
- undoable: true,
icon: ,
};
diff --git a/packages/ra-ui-materialui/src/button/index.js b/packages/ra-ui-materialui/src/button/index.ts
similarity index 100%
rename from packages/ra-ui-materialui/src/button/index.js
rename to packages/ra-ui-materialui/src/button/index.ts
diff --git a/packages/ra-ui-materialui/src/layout/Confirm.js b/packages/ra-ui-materialui/src/layout/Confirm.tsx
similarity index 84%
rename from packages/ra-ui-materialui/src/layout/Confirm.js
rename to packages/ra-ui-materialui/src/layout/Confirm.tsx
index d0e1af1b7cc..22d99666591 100644
--- a/packages/ra-ui-materialui/src/layout/Confirm.js
+++ b/packages/ra-ui-materialui/src/layout/Confirm.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React, { FC, useCallback, MouseEventHandler } from 'react';
+import PropTypes, { ReactComponentLike } from 'prop-types';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
@@ -55,7 +55,7 @@ const useStyles = makeStyles(
* onClose={() => { // do something }}
* />
*/
-const Confirm = ({
+const Confirm: FC = ({
isOpen,
loading,
title,
@@ -76,7 +76,7 @@ const Confirm = ({
const handleConfirm = useCallback(
e => {
e.stopPropagation();
- onConfirm();
+ onConfirm(e);
},
[onConfirm]
);
@@ -125,13 +125,29 @@ const Confirm = ({
);
};
+export interface ConfirmProps {
+ cancel?: string;
+ classes?: object;
+ confirm?: string;
+ confirmColor?: string;
+ ConfirmIcon?: ReactComponentLike;
+ CancelIcon?: ReactComponentLike;
+ content: string;
+ isOpen?: boolean;
+ loading?: boolean;
+ onClose: MouseEventHandler;
+ onConfirm: MouseEventHandler;
+ title: string;
+ translateOptions?: object;
+}
+
Confirm.propTypes = {
- cancel: PropTypes.string.isRequired,
+ cancel: PropTypes.string,
classes: PropTypes.object,
- confirm: PropTypes.string.isRequired,
- confirmColor: PropTypes.string.isRequired,
- ConfirmIcon: PropTypes.elementType.isRequired,
- CancelIcon: PropTypes.elementType.isRequired,
+ confirm: PropTypes.string,
+ confirmColor: PropTypes.string,
+ ConfirmIcon: PropTypes.elementType,
+ CancelIcon: PropTypes.elementType,
content: PropTypes.string.isRequired,
isOpen: PropTypes.bool,
loading: PropTypes.bool,