Create shared RenderRecordFunction type

Author: elstgav

examples/demo/src/orders/NbItemsField.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { FunctionField, FunctionFieldRenderer } from 'react-admin';
+import { FunctionField, RenderRecordFunction } from 'react-admin';
 import { Order } from '../types';
 
-const render: FunctionFieldRenderer<Order> = record => record.basket.length;
+const render: RenderRecordFunction<Order> = record => record.basket.length;
 
 const NbItemsField = () => <FunctionField<Order> render={render} />;
 

packages/ra-core/src/controller/record/WithRecord.tsx

@@ -1,5 +1,4 @@
-import { ReactElement } from 'react';
-import { RaRecord } from '../../types';
+import { RenderRecordFunction } from '../../types';
 import { useRecordContext } from './useRecordContext';
 
 /**
@@ -24,6 +23,6 @@ export const WithRecord = <RecordType extends Record<string, unknown> = any>({
 export interface WithRecordProps<
     RecordType extends Record<string, unknown> = any
 > {
-    render: (record: RecordType) => ReactElement;
+    render: RenderRecordFunction<RecordType>;
     label?: string;
 }

packages/ra-core/src/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactElement, ComponentType } from 'react';
+import { ComponentType, ReactElement, ReactNode } from 'react';
 import { WithPermissionsChildrenParams } from './auth/WithPermissions';
 import { AuthActionType } from './auth/types';
 
@@ -361,6 +361,10 @@ export interface ResourceProps {
     children?: ReactNode;
 }
 
+export type RenderRecordFunction<
+    RecordType extends Record<string, unknown> = any
+> = (record: RecordType, source?: string) => ReactNode;
+
 export type Exporter = (
     data: any,
     fetchRelatedRecords: (

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

@@ -1,6 +1,6 @@
 import Typography, { TypographyProps } from '@mui/material/Typography';
 import PropTypes from 'prop-types';
-import { useRecordContext } from 'ra-core';
+import { RenderRecordFunction, useRecordContext } from 'ra-core';
 import * as React from 'react';
 import { useMemo } from 'react';
 
@@ -46,13 +46,9 @@ FunctionField.propTypes = {
     render: PropTypes.func.isRequired,
 };
 
-export type FunctionFieldRenderer<
-    RecordType extends Record<string, unknown> = any
-> = (record: RecordType, source?: string) => React.ReactNode;
-
 export interface FunctionFieldProps<
     RecordType extends Record<string, unknown> = any
 > extends FieldProps<RecordType>,
         Omit<TypographyProps, 'textAlign'> {
-    render: FunctionFieldRenderer<RecordType>;
+    render: RenderRecordFunction<RecordType>;
 }