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,