[TypeScript] Fix FunctionField render function type expects a nullable record

[elstgav]

When using Typescript, the FunctionField render prop currently requires redundant null checks, as it claims record can be undefined. However it’s guaranteed not to, thanks to the null check on line 30:

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

Lines 30 to 39 in bbec8d9

	record ? (
	<Typography
	component="span"
	variant="body2"
	className={className}
	{...sanitizeFieldRestProps(rest)}
	>
	{render(record, source)}
	</Typography>
	) : null,

This same guarantee applies to <WithRecord>, which is documented here:

react-admin/docs/WithRecord.md

Line 26 in 964310e

Note that if `record` is undefined, `<WithRecord>` doesn't call the `render` callback and renders nothing, so you don't have to worry about this case in your render callback.

This PR updates the render prop type to clarify that record will be defined, eliminating the need for redundant null checks:

  <FunctionField
    source='user'
-   render={(record) => record && record.first_name}
+   render={(record) => record.first_name}
  />

The PR also:

• creates a RenderResourcesFunction type, that can be used when creating custom render methods
• Clarifies that the render method must return a valid ReactNode, not any.
• Updates example docs to remove redundant null checks (this was previously inconsistent across FunctionField examples)

[elstgav]

ContactType is already set by line 134

[elstgav]

I was unsure on what to name this 🤔. It may be helpful to further abstract this into a type that’s shared by <WithRecord>

[fzaninotto]

Great PR, thanks!

I think we can safely merge it to master, as it's more a fix of the existing type. Besides, the current type has just changed (see #8964), so you'll need to adjust your code a bit.

Would you mind rebasing the PR on master?

[elstgav]

Updated these to match #8964

[elstgav]

@fzaninotto @slax57 it might be helpful to create a “strict” RaRecord type that we can share/extend from? Could name it StrictRaRecord, or TypedRaRecord, etc

e.g.

// ra-core/src/types.ts

export interface StrictRaRecord<IdentifierType extends Identifier = Identifier> {
    id: IdentifierType;
}

export interface RaRecord<IdentifierType extends Identifier = Identifier> extends StrictRaRecord {
    [key: string]: any;
}

// in other files…

export interface WithRecordProps<RecordType extends StrictRaRecord = RaRecord> { … }
export interface FunctionFieldProps<RecordType extends StrictRaRecord = RaRecord> { … }

// When typing field components…

interface Post extends StrictRaRecord<number> {
    title: string;
    teaser: string;
    body: string;
    published_at: string;
}

export const PostShow = () => (
    <Show>
        <SimpleShowLayout>
            <TextField<Post> source="title" />
            <TextField<Post> source="teaser" />
            {/* Here TS will show an error because a teasr field does not exist */}
            <TextField<Post> source="teasr" />
            <RichTextField<Post> source="body" />
            <DateField<Post> label="Publication date" source="published_at" />
        </SimpleShowLayout>
    </Show>
);

[fzaninotto]

I'm not sure of the added value (extending a StrictRaRecord vs adding an Identifier by hand is about the same). Besides, it's a more general reflexion about struct null checks that we're working on in the long term.

[elstgav]

Let me know if there’s a more appropriate place to put this. Named to match the existing RenderResourcesFunction:

react-admin/packages/ra-core/src/types.ts

Line 303 in b007f35

export type RenderResourcesFunction = (

[elstgav]

@fzaninotto rebased, and created a shared RenderRecordFunction type that is shared with the WithRecord component.

[fzaninotto]

Thanks!