Improve typing of Field components

packages/ra-ui-materialui/src/field/ArrayField.spec.js → packages/ra-ui-materialui/src/field/ArrayField.spec.tsx

@@ -20,7 +20,7 @@ describe('<ArrayField />', () => {
     it('should not fail for empty records', () => {
         const { queryByText } = render(
             <TestContext>
-                <ArrayField source="arr" resource="posts" record={{}}>
+                <ArrayField source="arr" resource="posts" record={{ id: 123 }}>
                     <DummyIterator />
                 </ArrayField>
             </TestContext>
@@ -38,6 +38,7 @@ describe('<ArrayField />', () => {
                     source="arr"
                     resource="posts"
                     record={{
+                        id: 123,
                         arr: [{ id: 123, foo: 'bar' }, { id: 456, foo: 'baz' }],
                     }}
                 >

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

@@ -1,26 +1,10 @@
-import {
-    FunctionComponent,
-    cloneElement,
-    Children,
-    useEffect,
-    useState,
-    memo,
-} from 'react';
+import { FC, cloneElement, Children, useEffect, useState, memo } from 'react';
 import get from 'lodash/get';
 import { Identifier } from 'ra-core';
 
 import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 import PropTypes from 'prop-types';
 
-interface ArrayFieldProps {
-    fieldKey?: string;
-}
-
-interface State {
-    data: object;
-    ids: Identifier[];
-}
-
 const initialState = {
     data: {},
     ids: [],
@@ -121,9 +105,7 @@ const getDataAndIds = (record: object, source: string, fieldKey: string) => {
  *     )
  *     TagsField.defaultProps = { addLabel: true };
  */
-export const ArrayField: FunctionComponent<
-    ArrayFieldProps & FieldProps & InjectedFieldProps
-> = memo<ArrayFieldProps & FieldProps & InjectedFieldProps>(
+export const ArrayField: FC<ArrayFieldProps> = memo<ArrayFieldProps>(
     ({
         addLabel,
         basePath,
@@ -164,4 +146,13 @@ ArrayField.propTypes = {
     fieldKey: PropTypes.string,
 };
 
+export interface ArrayFieldProps extends FieldProps, InjectedFieldProps {
+    fieldKey?: string;
+}
+
+interface State {
+    data: object;
+    ids: Identifier[];
+}
+
 export default ArrayField;

packages/ra-ui-materialui/src/field/BooleanField.spec.js → packages/ra-ui-materialui/src/field/BooleanField.spec.tsx

@@ -4,7 +4,7 @@ import BooleanField from './BooleanField';
 import { render, cleanup } from '@testing-library/react';
 
 const defaultProps = {
-    record: { published: true },
+    record: { id: 123, published: true },
     source: 'published',
     resource: 'posts',
     classes: {},
@@ -32,7 +32,10 @@ describe('<BooleanField />', () => {
 
     it('should display cross and falsy text if value is false', () => {
         const { queryByTitle } = render(
-            <BooleanField {...defaultProps} record={{ published: false }} />
+            <BooleanField
+                {...defaultProps}
+                record={{ id: 123, published: false }}
+            />
         );
         expect(queryByTitle('ra.boolean.true')).toBeNull();
         expect(queryByTitle('ra.boolean.false')).not.toBeNull();
@@ -43,7 +46,7 @@ describe('<BooleanField />', () => {
         const { queryByTitle } = render(
             <BooleanField
                 {...defaultProps}
-                record={{ published: false }}
+                record={{ id: 123, published: false }}
                 valueLabelFalse="Has not been published"
             />
         );
@@ -53,7 +56,10 @@ describe('<BooleanField />', () => {
 
     it('should not display anything if value is null', () => {
         const { queryByTitle } = render(
-            <BooleanField {...defaultProps} record={{ published: null }} />
+            <BooleanField
+                {...defaultProps}
+                record={{ id: 123, published: null }}
+            />
         );
         expect(queryByTitle('ra.boolean.true')).toBeNull();
         expect(queryByTitle('ra.boolean.false')).toBeNull();
@@ -65,7 +71,7 @@ describe('<BooleanField />', () => {
             const { queryByTitle, queryByText } = render(
                 <BooleanField
                     {...defaultProps}
-                    record={{ published }}
+                    record={{ id: 123, published }}
                     emptyText="NA"
                 />
             );
@@ -79,18 +85,18 @@ describe('<BooleanField />', () => {
         const { container } = render(
             <BooleanField
                 {...defaultProps}
-                record={{ foo: true }}
+                record={{ id: 123, foo: true }}
                 className="foo"
             />
         );
-        expect(container.firstChild.classList.contains('foo')).toBe(true);
+        expect(container.children[0].classList.contains('foo')).toBe(true);
     });
 
     it('should handle deep fields', () => {
         const { queryByTitle } = render(
             <BooleanField
                 {...defaultProps}
-                record={{ foo: { bar: true } }}
+                record={{ id: 123, foo: { bar: true } }}
                 source="foo.bar"
             />
         );

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent, memo } from 'react';
+import { FC, memo } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import classnames from 'classnames';
@@ -12,11 +12,6 @@ import { useTranslate } from 'ra-core';
 import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 import sanitizeRestProps from './sanitizeRestProps';
 
-interface Props extends FieldProps {
-    valueLabelTrue?: string;
-    valueLabelFalse?: string;
-}
-
 const useStyles = makeStyles(
     {
         root: {
@@ -28,58 +23,59 @@ const useStyles = makeStyles(
     }
 );
 
-export const BooleanField: FunctionComponent<
-    Props & InjectedFieldProps & TypographyProps
-> = memo<Props & InjectedFieldProps & TypographyProps>(props => {
-    const {
-        className,
-        classes: classesOverride,
-        emptyText,
-        source,
-        record = {},
-        valueLabelTrue,
-        valueLabelFalse,
-        ...rest
-    } = props;
-    const translate = useTranslate();
-    const classes = useStyles(props);
-    const value = get(record, source);
-    let ariaLabel = value ? valueLabelTrue : valueLabelFalse;
+export const BooleanField: FC<BooleanFieldProps> = memo<BooleanFieldProps>(
+    props => {
+        const {
+            className,
+            classes: classesOverride,
+            emptyText,
+            source,
+            record = {},
+            valueLabelTrue,
+            valueLabelFalse,
+            ...rest
+        } = props;
+        const translate = useTranslate();
+        const classes = useStyles(props);
+        const value = get(record, source);
+        let ariaLabel = value ? valueLabelTrue : valueLabelFalse;
 
-    if (!ariaLabel) {
-        ariaLabel = value === false ? 'ra.boolean.false' : 'ra.boolean.true';
-    }
+        if (!ariaLabel) {
+            ariaLabel =
+                value === false ? 'ra.boolean.false' : 'ra.boolean.true';
+        }
+
+        if (value === false || value === true) {
+            return (
+                <Typography
+                    component="span"
+                    variant="body2"
+                    className={classnames(classes.root, className)}
+                    {...sanitizeRestProps(rest)}
+                >
+                    <Tooltip title={translate(ariaLabel, { _: ariaLabel })}>
+                        {value === true ? (
+                            <TrueIcon data-testid="true" fontSize="small" />
+                        ) : (
+                            <FalseIcon data-testid="false" fontSize="small" />
+                        )}
+                    </Tooltip>
+                </Typography>
+            );
+        }
 
-    if (value === false || value === true) {
         return (
             <Typography
                 component="span"
                 variant="body2"
-                className={classnames(classes.root, className)}
+                className={className}
                 {...sanitizeRestProps(rest)}
             >
-                <Tooltip title={translate(ariaLabel, { _: ariaLabel })}>
-                    {value === true ? (
-                        <TrueIcon data-testid="true" fontSize="small" />
-                    ) : (
-                        <FalseIcon data-testid="false" fontSize="small" />
-                    )}
-                </Tooltip>
+                {emptyText}
             </Typography>
         );
     }
-
-    return (
-        <Typography
-            component="span"
-            variant="body2"
-            className={className}
-            {...sanitizeRestProps(rest)}
-        >
-            {emptyText}
-        </Typography>
-    );
-});
+);
 
 BooleanField.defaultProps = {
     addLabel: true,
@@ -93,4 +89,12 @@ BooleanField.propTypes = {
     valueLabelTrue: PropTypes.string,
 };
 
+export interface BooleanFieldProps
+    extends FieldProps,
+        InjectedFieldProps,
+        TypographyProps {
+    valueLabelTrue?: string;
+    valueLabelFalse?: string;
+}
+
 export default BooleanField;

packages/ra-ui-materialui/src/field/ChipField.spec.js → packages/ra-ui-materialui/src/field/ChipField.spec.tsx

@@ -12,7 +12,7 @@ describe('<ChipField />', () => {
                 className="className"
                 classes={{}}
                 source="name"
-                record={{ name: 'foo' }}
+                record={{ id: 123, name: 'foo' }}
             />
         );
         expect(getByText('foo')).not.toBeNull();
@@ -24,7 +24,7 @@ describe('<ChipField />', () => {
                 className="className"
                 classes={{}}
                 source="name"
-                record={{ name: 'foo' }}
+                record={{ id: 123, name: 'foo' }}
                 label="bar"
             />
         );
@@ -39,7 +39,7 @@ describe('<ChipField />', () => {
                     className="className"
                     classes={{}}
                     source="name"
-                    record={{ name }}
+                    record={{ id: 123, name }}
                     emptyText="NA"
                 />
             );

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent, memo } from 'react';
+import { FC, memo } from 'react';
 import get from 'lodash/get';
 import Chip, { ChipProps } from '@material-ui/core/Chip';
 import Typography from '@material-ui/core/Typography';
@@ -16,9 +16,7 @@ const useStyles = makeStyles(
     { name: 'RaChipField' }
 );
 
-export const ChipField: FunctionComponent<
-    FieldProps & InjectedFieldProps & ChipProps
-> = memo<FieldProps & InjectedFieldProps & ChipProps>(props => {
+export const ChipField: FC<ChipFieldProps> = memo<ChipFieldProps>(props => {
     const {
         className,
         classes: classesOverride,
@@ -61,4 +59,9 @@ ChipField.propTypes = {
     ...fieldPropTypes,
 };
 
+export interface ChipFieldProps
+    extends FieldProps,
+        InjectedFieldProps,
+        Omit<ChipProps, 'label'> {}
+
 export default ChipField;