[RFR] Remove FC usage from ra-ui-materialui components

packages/ra-ui-materialui/src/Link.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link as RRLink, LinkProps as RRLinkProps } from 'react-router-dom';
@@ -23,7 +22,7 @@ export interface LinkProps extends RRLinkProps {
     className?: string;
 }
 
-const Link: FC<LinkProps> = props => {
+const Link = (props: LinkProps) => {
     const {
         to,
         children,

packages/ra-ui-materialui/src/auth/#Form.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Field, Form } from 'react-final-form';
 import {
@@ -52,7 +51,7 @@ const Input = ({
     />
 );
 
-const LoginForm: FunctionComponent<Props> = props => {
+const LoginForm = (props: Props) => {
     const { redirectTo } = props;
     const [loading, setLoading] = useSafeSetState(false);
     const login = useLogin();

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import PropTypes from 'prop-types';
 import BulkDeleteWithConfirmButton, {
     BulkDeleteWithConfirmButtonProps,
@@ -31,8 +30,8 @@ import BulkDeleteWithUndoButton, {
  *     </List>
  * );
  */
-const BulkDeleteButton: FC<BulkDeleteButtonProps> = ({ undoable, ...props }) =>
-    undoable ? (
+const BulkDeleteButton = (props: BulkDeleteButtonProps) =>
+    props.undoable ? (
         <BulkDeleteWithUndoButton {...props} />
     ) : (
         <BulkDeleteWithConfirmButton {...props} />

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, Fragment, useState, ReactElement } from 'react';
+import { 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';
@@ -37,7 +37,9 @@ const useStyles = makeStyles(
 
 const defaultIcon = <ActionDelete />;
 
-const BulkDeleteWithConfirmButton: FC<BulkDeleteWithConfirmButtonProps> = props => {
+const BulkDeleteWithConfirmButton = (
+    props: BulkDeleteWithConfirmButtonProps
+) => {
     const {
         basePath,
         classes: classesOverride,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ActionDelete from '@material-ui/icons/Delete';
 import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -33,7 +33,7 @@ const useStyles = makeStyles(
     { name: 'RaBulkDeleteWithUndoButton' }
 );
 
-const BulkDeleteWithUndoButton: FC<BulkDeleteWithUndoButtonProps> = props => {
+const BulkDeleteWithUndoButton = (props: BulkDeleteWithUndoButtonProps) => {
     const {
         basePath,
         classes: classesOverride,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, FunctionComponent } from 'react';
+import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import DownloadIcon from '@material-ui/icons/GetApp';
 import {
@@ -36,7 +36,7 @@ import Button, { ButtonProps } from './Button';
  *     </List>
  * );
  */
-const BulkExportButton: FunctionComponent<BulkExportButtonProps> = props => {
+const BulkExportButton = (props: BulkExportButtonProps) => {
     const {
         onClick,
         label = 'ra.action.export',

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import PropTypes from 'prop-types';
 import BulkUpdateWithConfirmButton, {
     BulkUpdateWithConfirmButtonProps,
@@ -32,15 +31,15 @@ import { MutationMode } from 'ra-core';
  *     </List>
  * );
  */
-const BulkUpdateButton: FC<BulkUpdateButtonProps> = ({
-    mutationMode,
-    ...props
-}) =>
-    mutationMode === 'undoable' ? (
-        <BulkUpdateWithUndoButton {...props} />
+const BulkUpdateButton = (props: BulkUpdateButtonProps) => {
+    const { mutationMode, ...rest } = props;
+
+    return mutationMode === 'undoable' ? (
+        <BulkUpdateWithUndoButton {...rest} />
     ) : (
-        <BulkUpdateWithConfirmButton mutationMode={mutationMode} {...props} />
+        <BulkUpdateWithConfirmButton mutationMode={mutationMode} {...rest} />
     );
+};
 
 interface Props {
     mutationMode?: MutationMode;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, Fragment, useState, ReactElement } from 'react';
+import { Fragment, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ActionUpdate from '@material-ui/icons/Update';
 import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -38,7 +38,9 @@ const useStyles = makeStyles(
 
 const defaultIcon = <ActionUpdate />;
 
-const BulkUpdateWithConfirmButton: FC<BulkUpdateWithConfirmButtonProps> = props => {
+const BulkUpdateWithConfirmButton = (
+    props: BulkUpdateWithConfirmButtonProps
+) => {
     const notify = useNotify();
     const refresh = useRefresh();
     const translate = useTranslate();

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ActionUpdate from '@material-ui/icons/Update';
 import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -33,7 +33,7 @@ const useStyles = makeStyles(
     { name: 'RaBulkUpdateWithUndoButton' }
 );
 
-const BulkUpdateWithUndoButton: FC<BulkUpdateWithUndoButtonProps> = props => {
+const BulkUpdateWithUndoButton = (props: BulkUpdateWithUndoButtonProps) => {
     const { selectedIds } = useListContext(props);
     const classes = useStyles(props);
     const notify = useNotify();

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, ReactElement, SyntheticEvent, ReactNode } from 'react';
+import { ReactElement, SyntheticEvent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import {
     Button as MuiButton,
@@ -28,7 +28,7 @@ import { LocationDescriptor } from 'history';
  * </Button>
  *
  */
-const Button: FC<ButtonProps> = props => {
+const Button = (props: ButtonProps) => {
     const {
         alignIcon = 'left',
         children,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, memo, ReactElement } from 'react';
+import { memo, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import Queue from '@material-ui/icons/Queue';
 import { Link } from 'react-router-dom';
@@ -8,14 +8,16 @@ import { Record, useResourceContext } from 'ra-core';
 
 import Button, { ButtonProps } from './Button';
 
-export const CloneButton: FC<CloneButtonProps> = ({
-    basePath = '',
-    label = 'ra.action.clone',
-    scrollToTop = true,
-    record,
-    icon = defaultIcon,
-    ...rest
-}) => {
+export const CloneButton = (props: CloneButtonProps) => {
+    const {
+        basePath = '',
+        label = 'ra.action.clone',
+        scrollToTop = true,
+        record,
+        icon = defaultIcon,
+        ...rest
+    } = props;
+
     const resource = useResourceContext();
     const pathname = basePath ? `${basePath}/create` : `/${resource}/create`;
     return (

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, ReactElement, memo, useMemo } from 'react';
+import { ReactElement, memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Fab, useMediaQuery, Theme } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -23,7 +23,7 @@ import Button, { ButtonProps, sanitizeButtonRestProps } from './Button';
  *     <CreateButton basePath="/comments" label="Create comment" />
  * );
  */
-const CreateButton: FC<CreateButtonProps> = props => {
+const CreateButton = (props: CreateButtonProps) => {
     const {
         basePath = '',
         className,

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

@@ -49,24 +49,21 @@ import { DeleteWithConfirmButton } from './DeleteWithConfirmButton';
  *     return <Edit actions={<EditActions />} {...props} />;
  * };
  */
-export const DeleteButton = ({
-    undoable,
-    mutationMode,
-    record,
-    ...props
-}: DeleteButtonProps) => {
+export const DeleteButton = (props: DeleteButtonProps) => {
+    const { undoable, mutationMode, record, ...rest } = props;
     const mode = getMutationMode(mutationMode, undoable);
     if (!record || record.id == null) {
         return null;
     }
 
     return mode === 'undoable' ? (
-        <DeleteWithUndoButton record={record} {...props} />
+        <DeleteWithUndoButton record={record} {...rest} />
     ) : (
         <DeleteWithConfirmButton
             mutationMode={mode}
             record={record}
-            {...props}
+            undoable={undoable}
+            {...rest}
         />
     );
 };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, ReactElement, useMemo } from 'react';
+import { ReactElement, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import ContentCreate from '@material-ui/icons/Create';
 import { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
@@ -18,14 +18,15 @@ import Button, { ButtonProps } from './Button';
  *     <EditButton basePath="/comments" label="Edit comment" record={record} />
  * );
  */
-const EditButton: FC<EditButtonProps> = ({
-    basePath = '',
-    icon = defaultIcon,
-    label = 'ra.action.edit',
-    record,
-    scrollToTop = true,
-    ...rest
-}) => {
+const EditButton = (props: EditButtonProps) => {
+    const {
+        basePath = '',
+        icon = defaultIcon,
+        label = 'ra.action.edit',
+        record,
+        scrollToTop = true,
+        ...rest
+    } = props;
     const resource = useResourceContext();
     return (
         <Button

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, FunctionComponent } from 'react';
+import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import DownloadIcon from '@material-ui/icons/GetApp';
 import {
@@ -14,7 +14,7 @@ import {
 } from 'ra-core';
 import Button, { ButtonProps } from './Button';
 
-const ExportButton: FunctionComponent<ExportButtonProps> = props => {
+const ExportButton = (props: ExportButtonProps) => {
     const {
         maxResults = 1000,
         onClick,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ActionList from '@material-ui/icons/List';
 import { Link } from 'react-router-dom';
@@ -33,12 +33,13 @@ import Button, { ButtonProps } from './Button';
  *     </Edit>
  * );
  */
-const ListButton: FC<ListButtonProps> = ({
-    basePath = '',
-    icon = defaultIcon,
-    label = 'ra.action.list',
-    ...rest
-}) => {
+const ListButton = (props: ListButtonProps) => {
+    const {
+        basePath = '',
+        icon = defaultIcon,
+        label = 'ra.action.list',
+        ...rest
+    } = props;
     const resource = useResourceContext();
     return (
         <Button

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

@@ -1,18 +1,19 @@
 import * as React from 'react';
-import { FC, ReactElement, MouseEvent, useCallback } from 'react';
+import { ReactElement, MouseEvent, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import NavigationRefresh from '@material-ui/icons/Refresh';
 import { refreshView } from 'ra-core';
 
 import Button, { ButtonProps } from './Button';
 
-const RefreshButton: FC<RefreshButtonProps> = ({
-    label = 'ra.action.refresh',
-    icon = defaultIcon,
-    onClick,
-    ...rest
-}) => {
+const RefreshButton = (props: RefreshButtonProps) => {
+    const {
+        label = 'ra.action.refresh',
+        icon = defaultIcon,
+        onClick,
+        ...rest
+    } = props;
     const dispatch = useDispatch();
     const handleClick = useCallback(
         event => {

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

@@ -1,19 +1,20 @@
 import * as React from 'react';
-import { useCallback, FC, ReactElement } from 'react';
+import { useCallback, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import Tooltip from '@material-ui/core/Tooltip';
 import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
 import NavigationRefresh from '@material-ui/icons/Refresh';
 import { refreshView, useTranslate } from 'ra-core';
 
-const RefreshIconButton: FC<RefreshIconButtonProps> = ({
-    label = 'ra.action.refresh',
-    icon = defaultIcon,
-    onClick,
-    className,
-    ...rest
-}) => {
+const RefreshIconButton = (props: RefreshIconButtonProps) => {
+    const {
+        label = 'ra.action.refresh',
+        icon = defaultIcon,
+        onClick,
+        className,
+        ...rest
+    } = props;
     const dispatch = useDispatch();
     const translate = useTranslate();
     const handleClick = useCallback(

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

@@ -1,4 +1,4 @@
-import React, { cloneElement, FC, ReactElement, SyntheticEvent } from 'react';
+import React, { cloneElement, ReactElement, SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
@@ -58,7 +58,7 @@ import { FormRenderProps } from 'react-final-form';
  *     return <SaveButton {...props} onSuccess={onSuccess} />;
  * }
  */
-const SaveButton: FC<SaveButtonProps> = props => {
+const SaveButton = (props: SaveButtonProps) => {
     const {
         className,
         classes: classesOverride,