Remove FC usage from Input components

Author: asvarcas

packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent, isValidElement, cloneElement } from 'react';
+import { isValidElement, cloneElement } from 'react';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
 import { MenuItem } from '@material-ui/core';
@@ -37,9 +37,10 @@ export interface AutocompleteSuggestionItemProps {
     getSuggestionText: (suggestion: any) => string;
 }
 
-const AutocompleteSuggestionItem: FunctionComponent<
-    AutocompleteSuggestionItemProps & MenuItemProps<'li', { button?: true }>
-> = props => {
+const AutocompleteSuggestionItem = (
+    props: AutocompleteSuggestionItemProps &
+        MenuItemProps<'li', { button?: true }>
+) => {
     const {
         createValue,
         suggestion,

packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactNode, FunctionComponent } from 'react';
+import { ReactNode } from 'react';
 import classnames from 'classnames';
 import { Paper, Popper } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -27,7 +27,7 @@ interface Props {
     suggestionsContainerProps?: any;
 }
 
-const AutocompleteSuggestionList: FunctionComponent<Props> = props => {
+const AutocompleteSuggestionList = (props: Props) => {
     const {
         children,
         className,

packages/ra-ui-materialui/src/input/BooleanInput.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent, useCallback } from 'react';
+import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
@@ -11,22 +11,23 @@ import sanitizeInputRestProps from './sanitizeInputRestProps';
 import InputHelperText from './InputHelperText';
 import InputPropTypes from './InputPropTypes';
 
-const BooleanInput: FunctionComponent<BooleanInputProps> = ({
-    format,
-    label,
-    fullWidth,
-    helperText,
-    onBlur,
-    onChange,
-    onFocus,
-    options,
-    disabled,
-    parse,
-    resource,
-    source,
-    validate,
-    ...rest
-}) => {
+const BooleanInput = (props: BooleanInputProps) => {
+    const {
+        format,
+        label,
+        fullWidth,
+        helperText,
+        onBlur,
+        onChange,
+        onFocus,
+        options,
+        disabled,
+        parse,
+        resource,
+        source,
+        validate,
+        ...rest
+    } = props;
     const {
         id,
         input: { onChange: finalFormOnChange, type, value, ...inputProps },

packages/ra-ui-materialui/src/input/FileInputPreview.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, ReactNode, FunctionComponent } from 'react';
+import { useEffect, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import RemoveCircle from '@material-ui/icons/RemoveCircle';
@@ -24,7 +24,7 @@ interface Props {
     file: any;
 }
 
-const FileInputPreview: FunctionComponent<Props> = props => {
+const FileInputPreview = (props: Props) => {
     const {
         children,
         classes: classesOverride,

packages/ra-ui-materialui/src/input/InputHelperText.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FunctionComponent } from 'react';
 import { useTranslate, ValidationError, ValidationErrorMessage } from 'ra-core';
 
 export interface InputHelperTextProps {
@@ -8,11 +7,8 @@ export interface InputHelperTextProps {
     touched: boolean;
 }
 
-const InputHelperText: FunctionComponent<InputHelperTextProps> = ({
-    helperText,
-    touched,
-    error,
-}) => {
+const InputHelperText = (props: InputHelperTextProps) => {
+    const { helperText, touched, error } = props;
     const translate = useTranslate();
 
     return touched && error ? (

packages/ra-ui-materialui/src/input/Labeled.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import InputLabel from '@material-ui/core/InputLabel';
 import FormControl from '@material-ui/core/FormControl';
@@ -56,7 +56,7 @@ export interface LabeledProps {
  *     <FooComponent source="title" />
  * </Labeled>
  */
-const Labeled: FunctionComponent<LabeledProps> = props => {
+const Labeled = (props: LabeledProps) => {
     const {
         children,
         className,

packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import TextField, { TextFieldProps } from '@material-ui/core/TextField';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -36,7 +35,7 @@ export type NullableBooleanInputProps = InputProps<TextFieldProps> &
         trueLabel?: string;
     };
 
-const NullableBooleanInput: FunctionComponent<NullableBooleanInputProps> = props => {
+const NullableBooleanInput = (props: NullableBooleanInputProps) => {
     const {
         className,
         classes: classesOverride,

packages/ra-ui-materialui/src/input/PasswordInput.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { useTranslate } from 'ra-core';
 import { InputAdornment, IconButton } from '@material-ui/core';
 import Visibility from '@material-ui/icons/Visibility';
@@ -11,10 +11,8 @@ export interface PasswordInputProps extends TextInputProps {
     initiallyVisible?: boolean;
 }
 
-const PasswordInput: FC<PasswordInputProps> = ({
-    initiallyVisible = false,
-    ...props
-}) => {
+const PasswordInput = (props: PasswordInputProps) => {
+    const { initiallyVisible = false, ...rest } = props;
     const [visible, setVisible] = useState(initiallyVisible);
     const translate = useTranslate();
 
@@ -24,7 +22,7 @@ const PasswordInput: FC<PasswordInputProps> = ({
 
     return (
         <TextInput
-            {...props}
+            {...rest}
             type={visible ? 'text' : 'password'}
             InputProps={{
                 endAdornment: (

packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import {
     FormControl,
@@ -88,7 +87,7 @@ const useStyles = makeStyles(
  *
  * The object passed as `options` props is passed to the material-ui <RadioButtonGroup> component
  */
-const RadioButtonGroupInput: FunctionComponent<RadioButtonGroupInputProps> = props => {
+const RadioButtonGroupInput = (props: RadioButtonGroupInputProps) => {
     const {
         choices = [],
         classes: classesOverride,

packages/ra-ui-materialui/src/input/ReferenceInput.tsx

@@ -1,7 +1,6 @@
 import React, {
     Children,
     cloneElement,
-    FunctionComponent,
     ReactElement,
 } from 'react';
 import PropTypes from 'prop-types';
@@ -98,29 +97,30 @@ import ReferenceError from './ReferenceError';
  *     <AutocompleteInput optionText="title" />
  * </ReferenceInput>
  */
-const ReferenceInput: FunctionComponent<ReferenceInputProps> = ({
-    format,
-    onBlur,
-    onChange,
-    onFocus,
-    parse,
-    validate,
-    ...props
-}) => {
+const ReferenceInput = (props: ReferenceInputProps) => {
+    const {
+        format,
+        onBlur,
+        onChange,
+        onFocus,
+        parse,
+        validate,
+        ...rest
+    } = props;
     const inputProps = useInput({
         format,
         onBlur,
         onChange,
         onFocus,
         parse,
         validate,
-        ...props,
+        ...rest,
     });
     return (
         <ReferenceInputView
             {...inputProps}
-            {...props}
-            {...useReferenceInputController({ ...props, ...inputProps })}
+            {...rest}
+            {...useReferenceInputController({ ...rest, ...inputProps })}
         />
     );
 };
@@ -188,30 +188,31 @@ export interface ReferenceInputViewProps
         ReferenceInputProps,
         Omit<UseInputValue, 'id'> {}
 
-export const ReferenceInputView: FunctionComponent<ReferenceInputViewProps> = ({
-    allowEmpty,
-    basePath,
-    children,
-    choices,
-    classes,
-    className,
-    error,
-    helperText,
-    id,
-    input,
-    isRequired,
-    label,
-    meta,
-    possibleValues,
-    resource,
-    reference,
-    setFilter,
-    setPagination,
-    setSort,
-    source,
-    warning,
-    ...rest
-}) => {
+export const ReferenceInputView = (props: ReferenceInputViewProps) => {
+    const {
+        allowEmpty,
+        basePath,
+        children,
+        choices,
+        classes,
+        className,
+        error,
+        helperText,
+        id,
+        input,
+        isRequired,
+        label,
+        meta,
+        possibleValues,
+        resource,
+        reference,
+        setFilter,
+        setPagination,
+        setSort,
+        source,
+        warning,
+        ...rest
+    } = props;
     if (Children.count(children) !== 1) {
         throw new Error('<ReferenceInput> only accepts a single child');
     }

packages/ra-ui-materialui/src/input/ResettableTextField.tsx

@@ -18,7 +18,7 @@ import { Styles } from '@material-ui/styles';
 /**
  * An override of the default Material-UI TextField which is resettable
  */
-function ResettableTextField(props: ResettableTextFieldProps) {
+const ResettableTextField = (props: ResettableTextFieldProps) => {
     const {
         classes: classesOverride,
         clearAlwaysVisible,
@@ -170,7 +170,7 @@ function ResettableTextField(props: ResettableTextFieldProps) {
             onBlur={handleBlur}
         />
     );
-}
+};
 
 export const resettableStyles: Styles<Theme, ResettableTextFieldProps> = {
     clearIcon: {

packages/ra-ui-materialui/src/input/SearchInput.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import SearchIcon from '@material-ui/icons/Search';
 import { InputAdornment } from '@material-ui/core';
@@ -18,7 +17,7 @@ const useStyles = makeStyles(
     { name: 'RaSearchInput' }
 );
 
-const SearchInput: FunctionComponent<SearchInputProps> = props => {
+const SearchInput = (props: SearchInputProps) => {
     const { classes: classesOverride, ...rest } = props;
     const translate = useTranslate();
     const classes = useStyles(props);

packages/ra-ui-materialui/src/input/TextInput.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { useInput, FieldTitle, InputProps } from 'ra-core';
 import { TextFieldProps } from '@material-ui/core/TextField';
@@ -25,20 +24,21 @@ export type TextInputProps = InputProps<TextFieldProps> &
  *
  * The object passed as `options` props is passed to the <ResettableTextField> component
  */
-const TextInput: FunctionComponent<TextInputProps> = ({
-    label,
-    format,
-    helperText,
-    onBlur,
-    onFocus,
-    onChange,
-    options,
-    parse,
-    resource,
-    source,
-    validate,
-    ...rest
-}) => {
+const TextInput = (props: TextInputProps) => {
+    const {
+        label,
+        format,
+        helperText,
+        onBlur,
+        onFocus,
+        onChange,
+        options,
+        parse,
+        resource,
+        source,
+        validate,
+        ...rest
+    } = props;
     const {
         id,
         input,