Fix Field components don't show labels when used in Show views

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

@@ -117,7 +117,7 @@ const getDataAndIds = (
  *     );
  *     TagsField.defaultProps = { addLabel: true };
  */
-export const ArrayField = (props: ArrayFieldProps) => {
+export const ArrayField = memo<ArrayFieldProps>((props: ArrayFieldProps) => {
     const {
         addLabel,
         basePath,
@@ -178,12 +178,13 @@ export const ArrayField = (props: ArrayFieldProps) => {
             })}
         </ListContextProvider>
     );
-};
+});
 
+// @ts-ignore
 ArrayField.defaultProps = {
     addLabel: true,
 };
-
+// @ts-ignore
 ArrayField.propTypes = {
     ...fieldPropTypes,
     fieldKey: PropTypes.string,
@@ -201,4 +202,4 @@ interface State {
 
 ArrayField.displayName = 'ArrayField';
 
-export default memo<ArrayFieldProps>(ArrayField);
+export default ArrayField;

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

@@ -17,7 +17,7 @@ const useStyles = makeStyles(
     { name: 'RaChipField' }
 );
 
-export const ChipField = (props: ChipFieldProps) => {
+export const ChipField = memo<ChipFieldProps>((props: ChipFieldProps) => {
     const {
         className,
         classes: classesOverride,
@@ -49,13 +49,15 @@ export const ChipField = (props: ChipFieldProps) => {
             {...sanitizeFieldRestProps(rest)}
         />
     );
-};
+});
 
+// @ts-ignore
 ChipField.defaultProps = {
     addLabel: true,
 };
-
+// @ts-ignore
 ChipField.propTypes = {
+    // @ts-ignore
     ...ChipField.propTypes,
     ...fieldPropTypes,
 };
@@ -65,4 +67,4 @@ export interface ChipFieldProps
         InjectedFieldProps,
         Omit<ChipProps, 'label'> {}
 
-export default memo<ChipFieldProps>(ChipField);
+export default ChipField;

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

@@ -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 = (props: DateFieldProps) => {
+export const DateField = memo<DateFieldProps>((props: DateFieldProps) => {
     const {
         className,
         emptyText,
@@ -89,12 +89,13 @@ export const DateField = (props: DateFieldProps) => {
             {dateString}
         </Typography>
     );
-};
+});
 
+// @ts-ignore
 DateField.defaultProps = {
     addLabel: true,
 };
-
+// @ts-ignore
 DateField.propTypes = {
     // @ts-ignore
     ...Typography.propTypes,
@@ -116,4 +117,4 @@ export interface DateFieldProps
     showTime?: boolean;
 }
 
-export default memo<DateFieldProps>(DateField);
+export default DateField;

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

@@ -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 = (props: EmailFieldProps) => {
+const EmailField = memo<EmailFieldProps>((props: EmailFieldProps) => {
     const { className, source, emptyText, ...rest } = props;
     const record = useRecordContext(props);
     const value = get(record, source);
@@ -39,17 +39,17 @@ const EmailField = (props: EmailFieldProps) => {
             {value}
         </Link>
     );
-};
-
+});
+// @ts-ignore
 EmailField.defaultProps = {
     addLabel: true,
 };
-
+// @ts-ignore
 EmailField.propTypes = fieldPropTypes;
 
 export interface EmailFieldProps
     extends PublicFieldProps,
         InjectedFieldProps,
         AnchorHTMLAttributes<HTMLAnchorElement> {}
 
-export default memo<EmailFieldProps>(EmailField);
+export default EmailField;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import Typography, { TypographyProps } from '@material-ui/core/Typography';
@@ -42,58 +42,55 @@ const hasNumberFormat = !!(
  * // renders the record { id: 1234, price: 25.99 } as
  * <span>25,99 $US</span>
  */
-export const NumberField: FC<NumberFieldProps> = memo<NumberFieldProps>(
-    props => {
-        const {
-            className,
-            emptyText,
-            source,
-            locales,
-            options,
-            textAlign,
-            ...rest
-        } = props;
-        const record = useRecordContext(props);
-        if (!record) {
-            return null;
-        }
-        const value = get(record, source);
-        if (value == null) {
-            return emptyText ? (
-                <Typography
-                    component="span"
-                    variant="body2"
-                    className={className}
-                    {...sanitizeFieldRestProps(rest)}
-                >
-                    {emptyText}
-                </Typography>
-            ) : null;
-        }
-
-        return (
+export const NumberField = memo<NumberFieldProps>((props: NumberFieldProps) => {
+    const {
+        className,
+        emptyText,
+        source,
+        locales,
+        options,
+        textAlign,
+        ...rest
+    } = props;
+    const record = useRecordContext(props);
+    if (!record) {
+        return null;
+    }
+    const value = get(record, source);
+    if (value == null) {
+        return emptyText ? (
             <Typography
-                variant="body2"
                 component="span"
+                variant="body2"
                 className={className}
                 {...sanitizeFieldRestProps(rest)}
             >
-                {hasNumberFormat
-                    ? value.toLocaleString(locales, options)
-                    : value}
+                {emptyText}
             </Typography>
-        );
+        ) : null;
     }
-);
+
+    return (
+        <Typography
+            variant="body2"
+            component="span"
+            className={className}
+            {...sanitizeFieldRestProps(rest)}
+        >
+            {hasNumberFormat ? value.toLocaleString(locales, options) : value}
+        </Typography>
+    );
+});
 
 // 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,

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

@@ -67,7 +67,7 @@ import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
  *
  * **Tip**: <ReferenceField> sets `translateChoice` to false by default.
  */
-export const SelectField = (props: SelectFieldProps) => {
+export const SelectField = memo<SelectFieldProps>((props: SelectFieldProps) => {
     const {
         className,
         emptyText,
@@ -113,18 +113,19 @@ export const SelectField = (props: SelectFieldProps) => {
             {choiceText}
         </Typography>
     );
-};
+});
 
+// @ts-ignore
 SelectField.defaultProps = {
     optionText: 'name',
     optionValue: 'id',
     translateChoice: true,
 };
-
+// @ts-ignore
 SelectField.defaultProps = {
     addLabel: true,
 };
-
+// @ts-ignore
 SelectField.propTypes = {
     // @ts-ignore
     ...Typography.propTypes,
@@ -147,4 +148,4 @@ export interface SelectFieldProps
 
 SelectField.displayName = 'SelectField';
 
-export default memo<SelectFieldProps>(SelectField);
+export default SelectField;

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { FC, memo, ElementType } from 'react';
+import { memo, 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: FC<TextFieldProps> = memo<TextFieldProps>(props => {
+const TextField = memo<TextFieldProps>((props: TextFieldProps) => {
     const { className, source, emptyText, ...rest } = props;
     const record = useRecordContext(props);
     const value = get(record, source);
@@ -28,11 +28,11 @@ const TextField: FC<TextFieldProps> = memo<TextFieldProps>(props => {
 
 // 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,

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

@@ -6,7 +6,7 @@ import { Typography, Link } from '@material-ui/core';
 import { useRecordContext } from 'ra-core';
 import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 
-const UrlField = (props: UrlFieldProps) => {
+const UrlField = memo<UrlFieldProps>((props: UrlFieldProps) => {
     const { className, emptyText, source, ...rest } = props;
     const record = useRecordContext(props);
     const value = get(record, source);
@@ -33,12 +33,13 @@ const UrlField = (props: UrlFieldProps) => {
             {value}
         </Link>
     );
-};
+});
 
+// @ts-ignore
 UrlField.defaultProps = {
     addLabel: true,
 };
-
+// @ts-ignore
 UrlField.propTypes = fieldPropTypes;
 UrlField.displayName = 'UrlField';
 
@@ -47,4 +48,4 @@ export interface UrlFieldProps
         InjectedFieldProps,
         AnchorHTMLAttributes<HTMLAnchorElement> {}
 
-export default memo<UrlFieldProps>(UrlField);
+export default UrlField;