FunctionField in 3.9.0 TypeScript declaration doesn't allow typed record in render prop

[dejancg]

In version 3.9.0, the FunctionField is declared like this:

declare const FunctionField: FC<FunctionFieldProps>;
export interface FunctionFieldProps<RecordType extends Record = Record> extends PublicFieldProps, InjectedFieldProps<RecordType>, TypographyProps {
    render: (record?: RecordType, source?: string) => any;
}
export default FunctionField;

Shouldn't it be defined as a generic component?
Because now you can't do this:

<FunctionField<MyRecordType> render={(record?: MyRecordType) => {...}} />

and as it's not generic TypeScript doesn't allow this:

<FunctionField render={(record?: MyRecordType) => {...}} />

Which effectively means you can't have typed record in render prop.

Defining the FunctionField like this seems like it would work:

import * as React from "react";
import { memo } from "react";
import { Record } from "ra-core";
import Typography, { TypographyProps } from "@material-ui/core/Typography";

import sanitizeRestProps from "./sanitizeRestProps";
import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from "./types";

/**
 * Field using a render function
 *
 * @example
 * <FunctionField
 *     source="last_name" // used for sorting
 *     label="Name"
 *     render={record => record && `${record.first_name} ${record.last_name}`}
 * />
 */
const FunctionField = <RecordType extends Record = Record>({
  className,
  record,
  source = "",
  render,
  ...rest
}: FunctionFieldProps<RecordType>) =>
  record ? (
    <Typography
      component="span"
      variant="body2"
      className={className}
      {...sanitizeRestProps(rest)}
    >
      {render(record, source)}
    </Typography>
  ) : null;

FunctionField.defaultProps = {
  addLabel: true,
};

FunctionField.propTypes = {
  // @ts-ignore
  ...Typography.propTypes,
  ...fieldPropTypes,
};

export interface FunctionFieldProps<RecordType extends Record = Record>
  extends PublicFieldProps,
    InjectedFieldProps<RecordType>,
    TypographyProps {
  render: (record?: RecordType, source?: string) => any;
}

const typedMemo: <T>(c: T) => T = memo;
export default typedMemo(FunctionField);

[dejancg]

In the meanwhile, I was able to work around this by using a HOC to wrap the FunctionField:

import React, { FC } from "react";
import { FunctionFieldProps, Record, FunctionField } from "react-admin";

export const GenericFunctionField = <RecordType extends Record = Record>(
  props: FunctionFieldProps<RecordType>
) => {
  const Component = FunctionField as FC<FunctionFieldProps<RecordType>>;
  return <Component {...props} />;
};

[dejancg]

Actually, the HOC I used above didn't work out well. Using the field like this with a View component caued labels for GenericFunctionField not be shown. So I removed the HOC and just settled with any for now.

[fzaninotto]

Fixed by #5370