Merge pull request #6585 from marmelab/TS-Field-components-memo-FC

[TypeScript] Fix Field components types doesn't expose defaultProps & propTypes
marmelab · Sep 14, 2021 · 1cb9a8d · 1cb9a8d
2 parents cdc6928 + 679e520
commit 1cb9a8d
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 36 deletions.
diff --git a/packages/ra-ui-materialui/src/field/ArrayField.tsx b/packages/ra-ui-materialui/src/field/ArrayField.tsx
@@ -5,6 +5,7 @@ import {
     useEffect,
     useState,
     memo,
+    FC,
     ReactElement,
 } from 'react';
 import get from 'lodash/get';
@@ -117,7 +118,7 @@ const getDataAndIds = (
  *     );
  *     TagsField.defaultProps = { addLabel: true };
  */
-export const ArrayField = memo<ArrayFieldProps>((props: ArrayFieldProps) => {
+export const ArrayField: FC<ArrayFieldProps> = memo(props => {
     const {
         addLabel,
         basePath,
@@ -180,11 +181,10 @@ export const ArrayField = memo<ArrayFieldProps>((props: ArrayFieldProps) => {
     );
 });
 
-// @ts-ignore
 ArrayField.defaultProps = {
     addLabel: true,
 };
-// @ts-ignore
+
 ArrayField.propTypes = {
     ...fieldPropTypes,
     fieldKey: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/field/BooleanField.tsx b/packages/ra-ui-materialui/src/field/BooleanField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { memo } from 'react';
+import { memo, FC } from 'react';
 import { SvgIconComponent } from '@material-ui/icons';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
@@ -25,7 +25,7 @@ const useStyles = makeStyles(
     }
 );
 
-const BooleanField = memo<BooleanFieldProps>((props: BooleanFieldProps) => {
+const BooleanField: FC<BooleanFieldProps> = memo(props => {
     const {
         className,
         classes: classesOverride,
@@ -84,15 +84,13 @@ const BooleanField = memo<BooleanFieldProps>((props: BooleanFieldProps) => {
     );
 });
 
-// @ts-ignore
 BooleanField.defaultProps = {
     addLabel: true,
     TrueIcon: DoneIcon,
     FalseIcon: ClearIcon,
     looseValue: false,
 };
 
-// @ts-ignore
 BooleanField.propTypes = {
     // @ts-ignore
     ...Typography.propTypes,

diff --git a/packages/ra-ui-materialui/src/field/ChipField.tsx b/packages/ra-ui-materialui/src/field/ChipField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { memo } from 'react';
+import { memo, FC } from 'react';
 import get from 'lodash/get';
 import Chip, { ChipProps } from '@material-ui/core/Chip';
 import Typography from '@material-ui/core/Typography';
@@ -17,7 +17,7 @@ const useStyles = makeStyles(
     { name: 'RaChipField' }
 );
 
-export const ChipField = memo<ChipFieldProps>((props: ChipFieldProps) => {
+export const ChipField: FC<ChipFieldProps> = memo(props => {
     const {
         className,
         classes: classesOverride,
@@ -51,11 +51,10 @@ export const ChipField = memo<ChipFieldProps>((props: ChipFieldProps) => {
     );
 });
 
-// @ts-ignore
 ChipField.defaultProps = {
     addLabel: true,
 };
-// @ts-ignore
+
 ChipField.propTypes = {
     // @ts-ignore
     ...ChipField.propTypes,

diff --git a/packages/ra-ui-materialui/src/field/DateField.tsx b/packages/ra-ui-materialui/src/field/DateField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { memo } from 'react';
+import { memo, FC } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import Typography, { TypographyProps } from '@material-ui/core/Typography';
@@ -42,7 +42,7 @@ const toLocaleStringSupportsLocales = (() => {
  * // renders the record { id: 1234, new Date('2012-11-07') } as
  * <span>mercredi 7 novembre 2012</span>
  */
-export const DateField = memo<DateFieldProps>((props: DateFieldProps) => {
+export const DateField: FC<DateFieldProps> = memo(props => {
     const {
         className,
         emptyText,
@@ -91,11 +91,10 @@ export const DateField = memo<DateFieldProps>((props: DateFieldProps) => {
     );
 });
 
-// @ts-ignore
 DateField.defaultProps = {
     addLabel: true,
 };
-// @ts-ignore
+
 DateField.propTypes = {
     // @ts-ignore
     ...Typography.propTypes,

diff --git a/packages/ra-ui-materialui/src/field/EmailField.tsx b/packages/ra-ui-materialui/src/field/EmailField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AnchorHTMLAttributes, memo } from 'react';
+import { AnchorHTMLAttributes, memo, FC } from 'react';
 import get from 'lodash/get';
 import Typography from '@material-ui/core/Typography';
 import { Link } from '@material-ui/core';
@@ -11,7 +11,7 @@ import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 // useful to prevent click bubbling in a datagrid with rowClick
 const stopPropagation = e => e.stopPropagation();
 
-const EmailField = memo<EmailFieldProps>((props: EmailFieldProps) => {
+const EmailField: FC<EmailFieldProps> = memo(props => {
     const { className, source, emptyText, ...rest } = props;
     const record = useRecordContext(props);
     const value = get(record, source);
@@ -41,11 +41,11 @@ const EmailField = memo<EmailFieldProps>((props: EmailFieldProps) => {
         </Link>
     );
 });
-// @ts-ignore
+
 EmailField.defaultProps = {
     addLabel: true,
 };
-// @ts-ignore
+
 EmailField.propTypes = fieldPropTypes;
 
 export interface EmailFieldProps

diff --git a/packages/ra-ui-materialui/src/field/NumberField.tsx b/packages/ra-ui-materialui/src/field/NumberField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { memo } from 'react';
+import { memo, FC } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import Typography, { TypographyProps } from '@material-ui/core/Typography';
@@ -42,7 +42,7 @@ const hasNumberFormat = !!(
  * // renders the record { id: 1234, price: 25.99 } as
  * <span>25,99 $US</span>
  */
-export const NumberField = memo<NumberFieldProps>((props: NumberFieldProps) => {
+export const NumberField: FC<NumberFieldProps> = memo(props => {
     const {
         className,
         emptyText,
@@ -85,12 +85,10 @@ export const NumberField = memo<NumberFieldProps>((props: NumberFieldProps) => {
 // what? TypeScript loses the displayName if we don't set it explicitly
 NumberField.displayName = 'NumberField';
 
-// @ts-ignore
 NumberField.defaultProps = {
     addLabel: true,
     textAlign: 'right',
 };
-// @ts-ignore
 NumberField.propTypes = {
     // @ts-ignore
     ...Typography.propTypes,

diff --git a/packages/ra-ui-materialui/src/field/SelectField.tsx b/packages/ra-ui-materialui/src/field/SelectField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { memo } from 'react';
+import { memo, FC } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { ChoicesProps, useChoices, useRecordContext } from 'ra-core';
@@ -67,7 +67,7 @@ import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
  *
  * **Tip**: <ReferenceField> sets `translateChoice` to false by default.
  */
-export const SelectField = memo<SelectFieldProps>((props: SelectFieldProps) => {
+export const SelectField: FC<SelectFieldProps> = memo(props => {
     const {
         className,
         emptyText,
@@ -115,17 +115,16 @@ export const SelectField = memo<SelectFieldProps>((props: SelectFieldProps) => {
     );
 });
 
-// @ts-ignore
 SelectField.defaultProps = {
     optionText: 'name',
     optionValue: 'id',
     translateChoice: true,
 };
-// @ts-ignore
+
 SelectField.defaultProps = {
     addLabel: true,
 };
-// @ts-ignore
+
 SelectField.propTypes = {
     // @ts-ignore
     ...Typography.propTypes,

diff --git a/packages/ra-ui-materialui/src/field/TextField.tsx b/packages/ra-ui-materialui/src/field/TextField.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { memo, ElementType } from 'react';
+import { memo, FC, ElementType } from 'react';
 import get from 'lodash/get';
 import Typography, { TypographyProps } from '@material-ui/core/Typography';
 import { useRecordContext } from 'ra-core';
 
 import sanitizeFieldRestProps from './sanitizeFieldRestProps';
 import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 
-const TextField = memo<TextFieldProps>((props: TextFieldProps) => {
+const TextField: FC<TextFieldProps> = memo(props => {
     const { className, source, emptyText, ...rest } = props;
     const record = useRecordContext(props);
     const value = get(record, source);
@@ -28,11 +28,11 @@ const TextField = memo<TextFieldProps>((props: TextFieldProps) => {
 
 // what? TypeScript loses the displayName if we don't set it explicitly
 TextField.displayName = 'TextField';
-// @ts-ignore
+
 TextField.defaultProps = {
     addLabel: true,
 };
-// @ts-ignore
+
 TextField.propTypes = {
     // @ts-ignore
     ...Typography.propTypes,

diff --git a/packages/ra-ui-materialui/src/field/UrlField.tsx b/packages/ra-ui-materialui/src/field/UrlField.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { AnchorHTMLAttributes, memo } from 'react';
+import { AnchorHTMLAttributes, memo, FC } from 'react';
 import get from 'lodash/get';
 import sanitizeFieldRestProps from './sanitizeFieldRestProps';
 import { Typography, Link } from '@material-ui/core';
 import { useRecordContext } from 'ra-core';
 import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 
-const UrlField = memo<UrlFieldProps>((props: UrlFieldProps) => {
+const UrlField: FC<UrlFieldProps> = memo(props => {
     const { className, emptyText, source, ...rest } = props;
     const record = useRecordContext(props);
     const value = get(record, source);
@@ -36,11 +36,10 @@ const UrlField = memo<UrlFieldProps>((props: UrlFieldProps) => {
     );
 });
 
-// @ts-ignore
 UrlField.defaultProps = {
     addLabel: true,
 };
-// @ts-ignore
+
 UrlField.propTypes = fieldPropTypes;
 UrlField.displayName = 'UrlField';