Merge pull request #3886 from WiXSL/patch-deprecated-symbols

Patch deprecated symbols

packages/ra-core/src/RoutesWithLayout.tsx

@@ -1,4 +1,9 @@
-import React, { Children, cloneElement, createElement, SFC } from 'react';
+import React, {
+    Children,
+    cloneElement,
+    createElement,
+    FunctionComponent,
+} from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 
 import WithPermissions from './auth/WithPermissions';
@@ -18,7 +23,7 @@ interface Props {
     title?: TitleComponent;
 }
 
-const RoutesWithLayout: SFC<Props> = ({
+const RoutesWithLayout: FunctionComponent<Props> = ({
     catchAll,
     children,
     customRoutes,

packages/ra-core/src/dataProvider/withDataProvider.tsx

@@ -57,7 +57,7 @@ export interface DataProviderProps {
  */
 const withDataProvider = <P extends object>(
     Component: React.ComponentType<P>
-): React.SFC<P & DataProviderProps> => (props: P) => (
+): React.FunctionComponent<P & DataProviderProps> => (props: P) => (
     <Component {...props} dataProvider={useDataProvider()} />
 );
 

packages/ra-core/src/form/FormDataConsumer.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, SFC } from 'react';
+import React, { ReactNode, FunctionComponent } from 'react';
 import { useFormState } from 'react-final-form';
 import { FormSubscription } from 'final-form';
 import get from 'lodash/get';
@@ -63,7 +63,7 @@ interface Props extends ConnectedProps {
  *     </Edit>
  * );
  */
-export const FormDataConsumerView: SFC<Props> = ({
+export const FormDataConsumerView: FunctionComponent<Props> = ({
     children,
     form,
     formData,

packages/ra-core/src/form/FormField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Field, FieldProps } from 'react-final-form';
 import { Validator, composeValidators } from './validate';
@@ -20,7 +20,12 @@ interface Props extends Omit<FieldProps<any, HTMLElement>, 'validate'> {
     validate?: Validator | Validator[];
 }
 
-export const FormField: SFC<Props> = ({ id, input, validate, ...props }) => {
+export const FormField: FunctionComponent<Props> = ({
+    id,
+    input,
+    validate,
+    ...props
+}) => {
     if (process.env.NODE_ENV !== 'production') {
         console.log('FormField is deprecated, use the useInput hook instead.');
     }

packages/ra-core/src/form/addField.tsx

@@ -1,8 +1,8 @@
-import React, { ReactType } from 'react';
+import React, { ElementType } from 'react';
 import FormField from './FormField';
 
 export default (
-    BaseComponent: ReactType,
+    BaseComponent: ElementType<any>,
     fieldProps: {
         [key: string]: any;
     } = {}

packages/ra-core/src/i18n/translate.spec.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import expect from 'expect';
 
 import translate from './translate';
@@ -9,7 +9,7 @@ interface Props extends TranslationContextProps {
 }
 describe('translate HOC', () => {
     it('should conserve base component default props', () => {
-        const Component: SFC<Props> = () => <div />;
+        const Component: FunctionComponent<Props> = () => <div />;
         Component.defaultProps = { foo: 'bar' };
 
         const TranslatedComponent = translate(Component);

packages/ra-core/src/inference/inferElementFromValues.spec.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import inferElementFromValues from './inferElementFromValues';
 import InferredElement from './InferredElement';
 
@@ -7,9 +7,9 @@ interface Props {
     reference?: string;
 }
 describe('inferElementFromValues', () => {
-    const Good: SFC<Props> = () => <span />;
-    const Bad: SFC<Props> = () => <span />;
-    const Dummy: SFC<{ [key: string]: any }> = () => <span />;
+    const Good: FunctionComponent<Props> = () => <span />;
+    const Bad: FunctionComponent<Props> = () => <span />;
+    const Dummy: FunctionComponent<{ [key: string]: any }> = () => <span />;
 
     it('should return an InferredElement', () => {
         const types = {

packages/ra-core/src/util/FieldTitle.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import pure from 'recompose/pure';
 
 import useTranslate from '../i18n/useTranslate';
@@ -11,7 +11,7 @@ interface Props {
     label?: string;
 }
 
-export const FieldTitle: SFC<Props> = ({
+export const FieldTitle: FunctionComponent<Props> = ({
     resource,
     source,
     label,

packages/ra-ui-materialui/src/auth/LoginForm.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Field, Form } from 'react-final-form';
 import CardActions from '@material-ui/core/CardActions';
@@ -46,7 +46,7 @@ const Input = ({
     />
 );
 
-const LoginForm: SFC<Props> = ({ redirectTo }) => {
+const LoginForm: FunctionComponent<Props> = ({ redirectTo }) => {
     const [loading, setLoading] = useSafeSetState(false);
     const login = useLogin();
     const translate = useTranslate();

packages/ra-ui-materialui/src/field/BooleanField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
@@ -37,7 +37,7 @@ interface Props extends FieldProps {
     valueLabelFalse?: string;
 }
 
-export const BooleanField: SFC<
+export const BooleanField: FunctionComponent<
     Props & InjectedFieldProps & TypographyProps
 > = ({
     className,

packages/ra-ui-materialui/src/field/ChipField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import compose from 'recompose/compose';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
@@ -13,13 +13,9 @@ const useStyles = makeStyles({
     chip: { margin: 4 },
 });
 
-export const ChipField: SFC<FieldProps & InjectedFieldProps & ChipProps> = ({
-    className,
-    classes: classesOverride,
-    source,
-    record = {},
-    ...rest
-}) => {
+export const ChipField: FunctionComponent<
+    FieldProps & InjectedFieldProps & ChipProps
+> = ({ className, classes: classesOverride, source, record = {}, ...rest }) => {
     const classes = useStyles({ classes: classesOverride });
 
     return (

packages/ra-ui-materialui/src/field/DateField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
@@ -48,7 +48,9 @@ interface Props extends FieldProps {
  * <span>mercredi 7 novembre 2012</span>
  */
 
-export const DateField: SFC<Props & InjectedFieldProps & TypographyProps> = ({
+export const DateField: FunctionComponent<
+    Props & InjectedFieldProps & TypographyProps
+> = ({
     className,
     locales,
     options,

packages/ra-ui-materialui/src/field/EmailField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC, HtmlHTMLAttributes } from 'react';
+import React, { FunctionComponent, HtmlHTMLAttributes } from 'react';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
 
@@ -8,7 +8,7 @@ import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 // useful to prevent click bubbling in a datagrid with rowClick
 const stopPropagation = e => e.stopPropagation();
 
-const EmailField: SFC<
+const EmailField: FunctionComponent<
     FieldProps & InjectedFieldProps & HtmlHTMLAttributes<HTMLAnchorElement>
 > = ({ className, source, record = {}, ...rest }) => (
     <a

packages/ra-ui-materialui/src/field/FileField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { makeStyles } from '@material-ui/core/styles';
@@ -18,7 +18,7 @@ interface Props extends FieldProps {
     classes?: object;
 }
 
-export const FileField: SFC<Props & InjectedFieldProps> = ({
+export const FileField: FunctionComponent<Props & InjectedFieldProps> = ({
     className,
     classes: classesOverride,
     record,

packages/ra-ui-materialui/src/field/FunctionField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import pure from 'recompose/pure';
 import Typography, { TypographyProps } from '@material-ui/core/Typography';
 
@@ -13,13 +13,9 @@ interface Props extends FieldProps {
  * @example
  * <FunctionField source="last_name" label="Name" render={record => `${record.first_name} ${record.last_name}`} />
  */
-const FunctionField: SFC<Props & InjectedFieldProps & TypographyProps> = ({
-    className,
-    record = {},
-    source,
-    render,
-    ...rest
-}) =>
+const FunctionField: FunctionComponent<
+    Props & InjectedFieldProps & TypographyProps
+> = ({ className, record = {}, source, render, ...rest }) =>
     record ? (
         <Typography
             component="span"

packages/ra-ui-materialui/src/field/ImageField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { makeStyles } from '@material-ui/core/styles';
@@ -24,7 +24,7 @@ interface Props extends FieldProps {
     classes?: object;
 }
 
-export const ImageField: SFC<Props & InjectedFieldProps> = ({
+export const ImageField: FunctionComponent<Props & InjectedFieldProps> = ({
     className,
     classes: classesOverride,
     record,

packages/ra-ui-materialui/src/field/NumberField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
@@ -46,15 +46,9 @@ interface Props extends FieldProps {
  * // renders the record { id: 1234, price: 25.99 } as
  * <span>25,99 $US</span>
  */
-export const NumberField: SFC<Props & InjectedFieldProps & TypographyProps> = ({
-    className,
-    record,
-    source,
-    locales,
-    options,
-    textAlign,
-    ...rest
-}) => {
+export const NumberField: FunctionComponent<
+    Props & InjectedFieldProps & TypographyProps
+> = ({ className, record, source, locales, options, textAlign, ...rest }) => {
     if (!record) {
         return null;
     }

packages/ra-ui-materialui/src/field/RichTextField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
@@ -13,13 +13,9 @@ interface Props extends FieldProps {
     stripTags: boolean;
 }
 
-const RichTextField: SFC<Props & InjectedFieldProps & TypographyProps> = ({
-    className,
-    source,
-    record = {},
-    stripTags,
-    ...rest
-}) => {
+const RichTextField: FunctionComponent<
+    Props & InjectedFieldProps & TypographyProps
+> = ({ className, source, record = {}, stripTags, ...rest }) => {
     const value = get(record, source);
     if (stripTags) {
         return (

packages/ra-ui-materialui/src/field/SelectField.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
@@ -67,7 +67,7 @@ import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types';
  *
  * **Tip**: <ReferenceField> sets `translateChoice` to false by default.
  */
-export const SelectField: SFC<
+export const SelectField: FunctionComponent<
     ChoicesProps & FieldProps & InjectedFieldProps
 > = ({
     className,

packages/ra-ui-materialui/src/field/TextField.tsx

@@ -1,17 +1,14 @@
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
 import Typography, { TypographyProps } from '@material-ui/core/Typography';
 
 import sanitizeRestProps from './sanitizeRestProps';
 import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 
-const TextField: SFC<FieldProps & InjectedFieldProps & TypographyProps> = ({
-    className,
-    source,
-    record = {},
-    ...rest
-}) => {
+const TextField: FunctionComponent<
+    FieldProps & InjectedFieldProps & TypographyProps
+> = ({ className, source, record = {}, ...rest }) => {
     const value = get(record, source);
     return (
         <Typography

packages/ra-ui-materialui/src/field/UrlField.tsx

@@ -1,10 +1,10 @@
-import React, { SFC, HtmlHTMLAttributes } from 'react';
+import React, { FunctionComponent, HtmlHTMLAttributes } from 'react';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
 import sanitizeRestProps from './sanitizeRestProps';
 import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 
-const UrlField: SFC<
+const UrlField: FunctionComponent<
     FieldProps & InjectedFieldProps & HtmlHTMLAttributes<HTMLAnchorElement>
 > = ({ className, source, record = {}, ...rest }) => (
     <a