Add types for button components

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

@@ -205,7 +205,7 @@ export interface MutationOptions {
 }
 
 export type UseMutationValue = [
-    (query: Partial<Mutation>, options?: Partial<MutationOptions>) => void,
+    (query?: Partial<Mutation>, options?: Partial<MutationOptions>) => void,
     {
         data?: any;
         total?: number;

packages/ra-core/src/sideEffect/redirection.ts

@@ -11,7 +11,7 @@ type RedirectToFunction = (
     data: any
 ) => string;
 
-export type RedirectionSideEffect = string | false | RedirectToFunction;
+export type RedirectionSideEffect = string | boolean | RedirectToFunction;
 
 interface ActionWithSideEffect {
     type: string;

packages/ra-core/src/sideEffect/useRedirect.ts

@@ -12,7 +12,7 @@ type RedirectToFunction = (
     data?: Record
 ) => string;
 
-export type RedirectionSideEffect = string | false | RedirectToFunction;
+export type RedirectionSideEffect = string | boolean | RedirectToFunction;
 
 /**
  * Hook for Redirection Side Effect

packages/ra-ui-materialui/src/button/Button.js → packages/ra-ui-materialui/src/button/Button.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
+import React, { FC, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import {
     Button as MuiButton,
     Tooltip,
     IconButton,
     useMediaQuery,
     makeStyles,
+    PropTypes as MuiPropTypes,
 } from '@material-ui/core';
+import { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
+import { Theme } from '@material-ui/core';
 import classnames from 'classnames';
 import { useTranslate } from 'ra-core';
 
@@ -35,7 +38,20 @@ const useStyles = makeStyles(
     { name: 'RaButton' }
 );
 
-const Button = ({
+/**
+ * A generic Button with side icon. Only the icon is displayed on small screens.
+ *
+ * The component translates the label. Pass the icon as child.
+ * The icon displays on the left side of the button by default. Set alignIcon prop to 'right' to inverse.
+ *
+ * @example
+ *
+ * <Button label="Edit" color="secondary" onClick={doEdit}>
+ *   <ContentCreate />
+ * </Button>
+ *
+ */
+const Button: FC<ButtonProps> = ({
     alignIcon = 'left',
     children,
     classes: classesOverride,
@@ -48,7 +64,9 @@ const Button = ({
 }) => {
     const translate = useTranslate();
     const classes = useStyles({ classes: classesOverride });
-    const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
+    const isXSmall = useMediaQuery((theme: Theme) =>
+        theme.breakpoints.down('xs')
+    );
 
     return isXSmall ? (
         label && !disabled ? (
@@ -105,12 +123,25 @@ const Button = ({
     );
 };
 
+interface Props {
+    alignIcon?: 'left' | 'right';
+    children?: ReactElement;
+    classes?: object;
+    className?: string;
+    color?: MuiPropTypes.Color;
+    disabled?: boolean;
+    label?: string;
+    size?: 'small' | 'medium' | 'large';
+}
+
+export type ButtonProps = Props & MuiButtonProps;
+
 Button.propTypes = {
-    alignIcon: PropTypes.string,
+    alignIcon: PropTypes.oneOf(['left', 'right']),
     children: PropTypes.element,
     classes: PropTypes.object,
     className: PropTypes.string,
-    color: PropTypes.string,
+    color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
     disabled: PropTypes.bool,
     label: PropTypes.string,
     size: PropTypes.oneOf(['small', 'medium', 'large']),

packages/ra-ui-materialui/src/button/CloneButton.spec.js → packages/ra-ui-materialui/src/button/CloneButton.spec.tsx

@@ -1,3 +1,4 @@
+import expect from 'expect';
 import { shallow } from 'enzyme';
 import React from 'react';
 
@@ -6,7 +7,7 @@ import { CloneButton } from './CloneButton';
 describe('<CloneButton />', () => {
     it('should pass a clone of the record in the location state', () => {
         const wrapper = shallow(
-            <CloneButton record={{ id: 123, foo: 'bar' }} />
+            <CloneButton record={{ id: 123, foo: 'bar' }} basePath="" />
         );
 
         expect(wrapper.prop('to')).toEqual(

packages/ra-ui-materialui/src/button/CloneButton.js → packages/ra-ui-materialui/src/button/CloneButton.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { FC, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import shouldUpdate from 'recompose/shouldUpdate';
 import Queue from '@material-ui/icons/Queue';
 import { Link } from 'react-router-dom';
 import { stringify } from 'query-string';
+import { Record } from 'ra-core';
 
-import Button from './Button';
+import Button, { ButtonProps } from './Button';
 
 // useful to prevent click bubbling in a datagrid with rowClick
 const stopPropagation = e => e.stopPropagation();
 
-const omitId = ({ id, ...rest }) => rest;
+const omitId = ({ id, ...rest }: Record) => rest;
 
 const sanitizeRestProps = ({
     // the next 6 props are injected by Toolbar
@@ -21,21 +22,27 @@ const sanitizeRestProps = ({
     saving,
     submitOnEnter,
     ...rest
-}) => rest;
+}: any) => rest;
 
-export const CloneButton = ({
+export const CloneButton: FC<CloneButtonProps> = ({
     basePath = '',
     label = 'ra.action.clone',
-    record = {},
+    record,
     icon = <Queue />,
     ...rest
 }) => (
     <Button
         component={Link}
-        to={{
-            pathname: `${basePath}/create`,
-            search: stringify({ source: JSON.stringify(omitId(record)) }),
-        }}
+        to={
+            record
+                ? {
+                      pathname: `${basePath}/create`,
+                      search: stringify({
+                          source: JSON.stringify(omitId(record)),
+                      }),
+                  }
+                : `${basePath}/create`
+        }
         label={label}
         onClick={stopPropagation}
         {...sanitizeRestProps(rest)}
@@ -44,18 +51,23 @@ export const CloneButton = ({
     </Button>
 );
 
+interface Props {
+    basePath: string;
+    record?: Record;
+    icon?: ReactElement;
+}
+
+export type CloneButtonProps = Props & ButtonProps;
+
 CloneButton.propTypes = {
     basePath: PropTypes.string,
-    className: PropTypes.string,
-    classes: PropTypes.object,
-    label: PropTypes.string,
-    record: PropTypes.object,
     icon: PropTypes.element,
+    label: PropTypes.string,
+    record: PropTypes.any,
 };
 
 const enhance = shouldUpdate(
-    (props, nextProps) =>
-        props.translate !== nextProps.translate ||
+    (props: Props, nextProps: Props) =>
         (props.record &&
             nextProps.record &&
             props.record !== nextProps.record) ||

packages/ra-ui-materialui/src/button/CreateButton.js → packages/ra-ui-materialui/src/button/CreateButton.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { FC, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
-import { Fab, makeStyles, useMediaQuery } from '@material-ui/core';
+import { Fab, makeStyles, useMediaQuery, Theme } from '@material-ui/core';
 import ContentAdd from '@material-ui/icons/Add';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
 import { useTranslate } from 'ra-core';
 
-import Button from './Button';
+import Button, { ButtonProps } from './Button';
 
 const useStyles = makeStyles(
     theme => ({
@@ -28,7 +28,7 @@ const useStyles = makeStyles(
     { name: 'RaCreateButton' }
 );
 
-const CreateButton = ({
+const CreateButton: FC<CreateButtonProps> = ({
     basePath = '',
     className,
     classes: classesOverride,
@@ -38,15 +38,17 @@ const CreateButton = ({
 }) => {
     const classes = useStyles({ classes: classesOverride });
     const translate = useTranslate();
-    const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
+    const isSmall = useMediaQuery((theme: Theme) =>
+        theme.breakpoints.down('sm')
+    );
     return isSmall ? (
         <Fab
             component={Link}
             color="primary"
             className={classnames(classes.floating, className)}
             to={`${basePath}/create`}
             aria-label={label && translate(label)}
-            {...rest}
+            {...rest as any}
         >
             {icon}
         </Fab>
@@ -56,20 +58,26 @@ const CreateButton = ({
             to={`${basePath}/create`}
             className={className}
             label={label}
-            {...rest}
+            {...rest as any}
         >
             {icon}
         </Button>
     );
 };
 
+interface Props {
+    basePath: string;
+    icon?: ReactElement;
+}
+
+export type CreateButtonProps = Props & ButtonProps;
+
 CreateButton.propTypes = {
     basePath: PropTypes.string,
-    className: PropTypes.string,
     classes: PropTypes.object,
-    label: PropTypes.string,
-    size: PropTypes.string,
+    className: PropTypes.string,
     icon: PropTypes.element,
+    label: PropTypes.string,
 };
 
 const enhance = onlyUpdateForKeys(['basePath', 'label', 'translate']);

packages/ra-ui-materialui/src/button/DeleteButton.tsx

@@ -0,0 +1,57 @@
+import React, { FC, ReactElement, SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
+import { Record, RedirectionSideEffect } from 'ra-core';
+
+import { ButtonProps } from './Button';
+import DeleteWithUndoButton from './DeleteWithUndoButton';
+import DeleteWithConfirmButton from './DeleteWithConfirmButton';
+
+const DeleteButton: FC<DeleteButtonProps> = ({ undoable, ...props }) =>
+    undoable ? (
+        <DeleteWithUndoButton {...props} />
+    ) : (
+        <DeleteWithConfirmButton {...props} />
+    );
+
+interface Props {
+    basePath: string;
+    classes?: object;
+    className?: string;
+    icon?: ReactElement;
+    label?: string;
+    onClick?: (e: MouseEvent) => void;
+    record?: Record;
+    redirect?: RedirectionSideEffect;
+    resource?: string;
+    // May be injected by Toolbar - sanitized in DeleteWithUndoButtonutton
+    handleSubmit?: (event?: SyntheticEvent<HTMLFormElement>) => Promise<Object>;
+    handleSubmitWithRedirect?: (redirect?: RedirectionSideEffect) => void;
+    invalid?: boolean;
+    pristine?: boolean;
+    saving?: boolean;
+    submitOnEnter?: boolean;
+    undoable?: boolean;
+}
+
+export type DeleteButtonProps = Props & ButtonProps;
+
+DeleteButton.propTypes = {
+    basePath: PropTypes.string,
+    label: PropTypes.string,
+    record: PropTypes.any,
+    // @ts-ignore
+    redirect: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.bool,
+        PropTypes.func,
+    ]),
+    resource: PropTypes.string,
+    undoable: PropTypes.bool,
+    icon: PropTypes.element,
+};
+
+DeleteButton.defaultProps = {
+    undoable: true,
+};
+
+export default DeleteButton;