Skip to content

Commit

Permalink
Merge pull request #4441 from josephktcheung/feature/ra_material_ui_c…
Browse files Browse the repository at this point in the history
…onfirm_layout_ts

Convert Confirm Layout and BulkDeleteButton to typescript
  • Loading branch information
fzaninotto authored Feb 25, 2020
2 parents b80e536 + 7dd9d94 commit ef3a685
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 52 deletions.
2 changes: 1 addition & 1 deletion packages/ra-core/src/dataProvider/useDeleteMany.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 => ({
Expand All @@ -43,12 +33,11 @@ const useStyles = makeStyles(
{ name: 'RaBulkDeleteWithConfirmButton' }
);

const BulkDeleteWithConfirmButton = ({
const BulkDeleteWithConfirmButton: FC<BulkDeleteWithConfirmButtonProps> = ({
basePath,
classes: classesOverride,
confirmTitle,
confirmContent,
crudDeleteMany,
icon,
label,
onClick,
Expand Down Expand Up @@ -91,11 +80,11 @@ const BulkDeleteWithConfirmButton = ({
setOpen(false);
};

const handleDelete = () => {
const handleDelete = e => {
deleteMany();

if (typeof onClick === 'function') {
onClick();
onClick(e);
}
};

Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 => ({
Expand All @@ -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 });
Expand Down Expand Up @@ -79,10 +66,10 @@ const BulkDeleteWithUndoButton = ({
undoable: true,
});

const handleClick = () => {
const handleClick = e => {
deleteMany();
if (typeof onClick === 'function') {
onClick();
onClick(e);
}
};

Expand All @@ -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 />,
};

Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -55,7 +55,7 @@ const useStyles = makeStyles(
* onClose={() => { // do something }}
* />
*/
const Confirm = ({
const Confirm: FC<ConfirmProps> = ({
isOpen,
loading,
title,
Expand All @@ -76,7 +76,7 @@ const Confirm = ({
const handleConfirm = useCallback(
e => {
e.stopPropagation();
onConfirm();
onConfirm(e);
},
[onConfirm]
);
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit ef3a685

Please sign in to comment.