Merge pull request #6515 from WiXSL/remove-fc-core

[RFR] Remove FC usage from `ra-core` components

Author: djhi

packages/ra-core/src/auth/Authenticated.tsx

@@ -1,4 +1,4 @@
-import { cloneElement, ReactElement, FunctionComponent } from 'react';
+import { cloneElement, ReactElement } from 'react';
 
 import useAuthenticated from './useAuthenticated';
 
@@ -36,12 +36,13 @@ interface Props {
  *         </Admin>
  *     );
  */
-const Authenticated: FunctionComponent<Props> = ({
-    authParams,
-    children,
-    location, // kept for backwards compatibility, unused
-    ...rest
-}) => {
+const Authenticated = (props: Props) => {
+    const {
+        authParams,
+        children,
+        location, // kept for backwards compatibility, unused
+        ...rest
+    } = props;
     useAuthenticated(authParams);
     // render the child even though the useAuthenticated() call isn't finished (optimistic rendering)
     // the above hook will log out if the authProvider doesn't validate that the user is authenticated

packages/ra-core/src/auth/WithPermissions.tsx

@@ -1,10 +1,4 @@
-import {
-    Children,
-    FunctionComponent,
-    ReactElement,
-    ComponentType,
-    createElement,
-} from 'react';
+import { Children, ReactElement, ComponentType, createElement } from 'react';
 import { Location } from 'history';
 
 import warning from '../util/warning';
@@ -65,14 +59,15 @@ const isEmptyChildren = children => Children.count(children) === 0;
  *         </Admin>
  *     );
  */
-const WithPermissions: FunctionComponent<Props> = ({
-    authParams,
-    children,
-    render,
-    component,
-    staticContext,
-    ...props
-}) => {
+const WithPermissions = (props: Props) => {
+    const {
+        authParams,
+        children,
+        render,
+        component,
+        staticContext,
+        ...rest
+    } = props;
     warning(
         (render && children && !isEmptyChildren(children)) ||
             (render && component) ||
@@ -84,15 +79,15 @@ const WithPermissions: FunctionComponent<Props> = ({
     const { permissions } = usePermissionsOptimized(authParams);
     // render even though the usePermissions() call isn't finished (optimistic rendering)
     if (component) {
-        return createElement(component, { permissions, ...props });
+        return createElement(component, { permissions, ...rest });
     }
     // @deprecated
     if (render) {
-        return render({ permissions, ...props });
+        return render({ permissions, ...rest });
     }
     // @deprecated
     if (children) {
-        return children({ permissions, ...props });
+        return children({ permissions, ...rest });
     }
 };
 

packages/ra-core/src/controller/field/ReferenceArrayFieldController.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactElement } from 'react';
+import { ReactElement } from 'react';
 
 import useReferenceArrayFieldController from './useReferenceArrayFieldController';
 import { ListControllerProps } from '../useListController';
@@ -22,7 +22,7 @@ interface Props {
  *
  * @see useReferenceArrayFieldController
  */
-const ReferenceArrayFieldController: FunctionComponent<Props> = props => {
+const ReferenceArrayFieldController = (props: Props) => {
     const { children, ...rest } = props;
     const controllerProps = useReferenceArrayFieldController({
         sort: {

packages/ra-core/src/controller/field/ReferenceFieldController.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode, ReactElement } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import get from 'lodash/get';
 
 import { Record } from '../../types';
@@ -49,12 +49,12 @@ interface Props {
  *     <TextField source="name" />
  * </ReferenceField>
  */
-export const ReferenceFieldController: FunctionComponent<Props> = ({
+export const ReferenceFieldController = ({
     children,
     record,
     source,
     ...props
-}) => {
+}: Props) => {
     const id = get(record, source);
     return children({
         ...useReference({ ...props, id }),

packages/ra-core/src/controller/field/ReferenceManyFieldController.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, FunctionComponent } from 'react';
+import { ReactElement } from 'react';
 
 import { Record, SortPayload } from '../../types';
 import useReferenceManyFieldController from './useReferenceManyFieldController';
@@ -24,7 +24,7 @@ interface Props {
  *
  * @see useReferenceManyFieldController
  */
-export const ReferenceManyFieldController: FunctionComponent<Props> = props => {
+export const ReferenceManyFieldController = (props: Props) => {
     const { children, page = 1, perPage = 25, ...rest } = props;
     const controllerProps = useReferenceManyFieldController({
         page,

packages/ra-core/src/controller/input/ReferenceInputController.tsx

@@ -1,9 +1,4 @@
-import {
-    ReactNode,
-    ComponentType,
-    FunctionComponent,
-    ReactElement,
-} from 'react';
+import { ReactNode, ComponentType, ReactElement } from 'react';
 
 import { SortPayload, Record } from '../../types';
 import {
@@ -33,11 +28,9 @@ interface Props {
  *
  * @see useReferenceInputController
  */
-export const ReferenceInputController: FunctionComponent<Props> = ({
-    children,
-    ...props
-}) => {
-    return children(useReferenceInputController(props)) as ReactElement;
+export const ReferenceInputController = (props: Props) => {
+    const { children, ...rest } = props;
+    return children(useReferenceInputController(rest)) as ReactElement;
 };
 
 export default ReferenceInputController as ComponentType<Props>;

packages/ra-core/src/core/CoreAdmin.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent, ComponentType } from 'react';
+import { ComponentType } from 'react';
 
 import CoreAdminContext from './CoreAdminContext';
 import CoreAdminUI from './CoreAdminUI';
@@ -86,28 +86,29 @@ export type ChildrenFunction = () => ComponentType[];
  *     );
  * };
  */
-const CoreAdmin: FunctionComponent<AdminProps> = ({
-    appLayout,
-    authProvider,
-    catchAll,
-    children,
-    customReducers,
-    customRoutes = [],
-    customSagas,
-    dashboard,
-    dataProvider,
-    disableTelemetry,
-    history,
-    i18nProvider,
-    initialState,
-    layout,
-    loading,
-    loginPage,
-    logoutButton,
-    menu, // deprecated, use a custom layout instead
-    theme,
-    title = 'React Admin',
-}) => {
+const CoreAdmin = (props: AdminProps) => {
+    const {
+        appLayout,
+        authProvider,
+        catchAll,
+        children,
+        customReducers,
+        customRoutes = [],
+        customSagas,
+        dashboard,
+        dataProvider,
+        disableTelemetry,
+        history,
+        i18nProvider,
+        initialState,
+        layout,
+        loading,
+        loginPage,
+        logoutButton,
+        menu, // deprecated, use a custom layout instead
+        theme,
+        title = 'React Admin',
+    } = props;
     return (
         <CoreAdminContext
             authProvider={authProvider}

packages/ra-core/src/core/CoreAdminContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent, ComponentType, useContext, useState } from 'react';
+import { ComponentType, useContext, useState } from 'react';
 import { Provider, ReactReduxContext } from 'react-redux';
 import { History } from 'history';
 import { createHashHistory } from 'history';
@@ -40,16 +40,17 @@ export interface AdminContextProps {
     theme?: object;
 }
 
-const CoreAdminContext: FunctionComponent<AdminContextProps> = ({
-    authProvider,
-    dataProvider,
-    i18nProvider,
-    children,
-    history,
-    customReducers,
-    customSagas,
-    initialState,
-}) => {
+const CoreAdminContext = (props: AdminContextProps) => {
+    const {
+        authProvider,
+        dataProvider,
+        i18nProvider,
+        children,
+        history,
+        customReducers,
+        customSagas,
+        initialState,
+    } = props;
     const reduxIsAlreadyInitialized = !!useContext(ReactReduxContext);
 
     if (!dataProvider) {

packages/ra-core/src/core/CoreAdminRouter.tsx

@@ -5,7 +5,6 @@ import React, {
     createElement,
     ComponentType,
     ReactElement,
-    FunctionComponent,
 } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
@@ -36,7 +35,7 @@ export interface AdminRouterProps extends CoreLayoutProps {
 
 type State = ResourceElement[];
 
-const CoreAdminRouter: FunctionComponent<AdminRouterProps> = props => {
+const CoreAdminRouter = (props: AdminRouterProps) => {
     const getPermissions = useGetPermissions();
     const doLogout = useLogout();
     const { authenticated } = useAuthState();

packages/ra-core/src/core/CoreAdminUI.tsx

@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-    createElement,
-    FunctionComponent,
-    ComponentType,
-    useMemo,
-    useEffect,
-} from 'react';
+import { createElement, ComponentType, useMemo, useEffect } from 'react';
 import { Switch, Route } from 'react-router-dom';
 
 import CoreAdminRouter from './CoreAdminRouter';
@@ -24,9 +18,7 @@ import {
 
 export type ChildrenFunction = () => ComponentType[];
 
-const DefaultLayout: FunctionComponent<CoreLayoutProps> = ({ children }) => (
-    <>{children}</>
-);
+const DefaultLayout = ({ children }: CoreLayoutProps) => <>{children}</>;
 
 export interface AdminUIProps {
     catchAll?: CatchAllComponent;
@@ -47,21 +39,23 @@ export interface AdminUIProps {
 // for BC
 export type CoreAdminUIProps = AdminUIProps;
 
-const CoreAdminUI: FunctionComponent<AdminUIProps> = ({
-    catchAll = Noop,
-    children,
-    customRoutes = [],
-    dashboard,
-    disableTelemetry = false,
-    layout = DefaultLayout,
-    loading = Noop,
-    loginPage = false,
-    logout,
-    menu, // deprecated, use a custom layout instead
-    ready = Ready,
-    theme,
-    title = 'React Admin',
-}) => {
+const CoreAdminUI = (props: AdminUIProps) => {
+    const {
+        catchAll = Noop,
+        children,
+        customRoutes = [],
+        dashboard,
+        disableTelemetry = false,
+        layout = DefaultLayout,
+        loading = Noop,
+        loginPage = false,
+        logout,
+        menu, // deprecated, use a custom layout instead
+        ready = Ready,
+        theme,
+        title = 'React Admin',
+    } = props;
+
     const logoutElement = useMemo(() => logout && createElement(logout), [
         logout,
     ]);