Merge pull request #8964 from marmelab/FunctionField-TS-regression

[TypeScript] Fix regression in type of `<FunctionField>` `render`
marmelab · Jun 1, 2023 · bf84341 · bf84341
2 parents ee60917 + 8ba0f6f
commit bf84341
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/packages/ra-ui-materialui/src/field/FunctionField.stories.tsx b/packages/ra-ui-materialui/src/field/FunctionField.stories.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { RecordContextProvider } from 'ra-core';
+import { FunctionField } from './FunctionField';
+
+export default { title: 'ra-ui-materialui/fields/FunctionField' };
+
+export const Basic = () => (
+    <RecordContextProvider value={{ firstName: 'John', lastName: 'Doe' }}>
+        <FunctionField
+            render={record => `${record.firstName} ${record.lastName}`}
+        />
+    </RecordContextProvider>
+);
+
+type User = {
+    id: number;
+    firstName: string;
+    lastName: string;
+};
+
+export const Typed = () => (
+    <RecordContextProvider<User>
+        value={{ id: 123, firstName: 'John', lastName: 'Doe' }}
+    >
+        <FunctionField<User>
+            render={record => `${record?.firstName} ${record?.lastName}`}
+        />
+    </RecordContextProvider>
+);
+
+export const NonRegression = () => (
+    <RecordContextProvider value={{ firstName: 'John', lastName: 'Doe' }}>
+        <FunctionField
+            render={(record?: User) =>
+                `${record?.firstName} ${record?.lastName}`
+            }
+        />
+    </RecordContextProvider>
+);
diff --git a/packages/ra-ui-materialui/src/field/FunctionField.tsx b/packages/ra-ui-materialui/src/field/FunctionField.tsx
@@ -18,9 +18,7 @@ import { FieldProps, fieldPropTypes } from './types';
  * />
  */
 
-export const FunctionField = <
-    RecordType extends Record<string, unknown> = Record<string, any>
->(
+export const FunctionField = <RecordType extends Record<string, unknown> = any>(
     props: FunctionFieldProps<RecordType>
 ) => {
     const { className, source = '', render, ...rest } = props;
@@ -49,7 +47,7 @@ FunctionField.propTypes = {
 };
 
 export interface FunctionFieldProps<
-    RecordType extends Record<string, unknown> = Record<string, any>
+    RecordType extends Record<string, unknown> = any
 > extends FieldProps<RecordType>,
         Omit<TypographyProps, 'textAlign'> {
     render: (record?: RecordType, source?: string) => any;