Convert Confirm Layout and BulkDeleteButton to typescript

packages/ra-core/src/dataProvider/useDeleteMany.ts

@@ -27,7 +27,7 @@ import { Identifier } from '../types';
  *     return <button disabled={loading} onClick={deleteMany}>Delete selected posts</button>;
  * };
  */
-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;

packages/ra-ui-materialui/src/button/BulkDeleteButton.js → 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<BulkDeleteButtonProps> = ({ undoable, ...props }) =>
     undoable ? (
         <BulkDeleteWithUndoButton {...props} />
     ) : (
         <BulkDeleteWithConfirmButton {...props} />
     );
 
+interface Props {
+    undoable?: boolean;
+}
+
+export type BulkDeleteButtonProps = Props &
+    (BulkDeleteWithUndoButtonProps | BulkDeleteWithConfirmButtonProps);
+
 BulkDeleteButton.propTypes = {
     basePath: PropTypes.string,
     label: PropTypes.string,

packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js → 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<BulkDeleteWithConfirmButtonProps> = ({
     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,

packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js → 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,15 +30,14 @@ const useStyles = makeStyles(
     { name: 'RaBulkDeleteWithUndoButton' }
 );
 
-const BulkDeleteWithUndoButton = ({
+const BulkDeleteWithUndoButton: FC<BulkDeleteWithUndoButtonProps> = ({
     basePath,
     classes: classesOverride,
     icon,
     label,
     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<BulkDeleteWithUndoButtonProps, 'resource' | 'selectedIds' | 'icon'>) =>
+    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: <ActionDelete />,
 };
 

packages/ra-ui-materialui/src/layout/Confirm.js → 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<ConfirmProps> = ({
     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,