enhancement: add generic type

Author: Gabriel-Malenowitch

packages/ra-core/src/form/FormDataConsumer.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 import { useWatch, useFormContext, FieldValues } from 'react-hook-form';
 import get from 'lodash/get';
-
 import warning from '../util/warning';
 /**
  * Get the current (edited) value of the record from the form and pass it
@@ -12,7 +11,7 @@ import warning from '../util/warning';
  *
  * const PostEdit = (props) => (
  *     <Edit {...props}>
- *         <SimpleForm>
+ *         <SimpleForm<FieldValues>>
  *             <BooleanInput source="hasEmail" />
  *             <FormDataConsumer>
  *                 {({ formData, ...rest }) => formData.hasEmail &&
@@ -29,7 +28,7 @@ import warning from '../util/warning';
  *     <Edit {...props}>
  *         <SimpleForm>
  *             <SelectInput source="country" choices={countries} />
- *             <FormDataConsumer>
+ *             <FormDataConsumer<FieldValues>>
  *                 {({ formData, ...rest }) =>
  *                      <SelectInput
  *                          source="city"
@@ -42,20 +41,26 @@ import warning from '../util/warning';
  *     </Edit>
  * );
  */
-const FormDataConsumer = (props: ConnectedProps) => {
+const FormDataConsumer = <TFieldValues extends FieldValues = FieldValues>(
+    props: ConnectedProps<TFieldValues>
+) => {
     const { getValues } = useFormContext();
-    let formData = useWatch();
+    const formData = useWatch<TFieldValues>();
 
     //useWatch will initially return the provided defaultValues of the form.
     //We must get the initial formData from getValues
     if (Object.keys(formData).length === 0) {
         (formData as FieldValues) = getValues();
     }
 
-    return <FormDataConsumerView formData={formData} {...props} />;
+    return <FormDataConsumerView<TFieldValues> formData={formData} {...props} />
 };
-
-export const FormDataConsumerView = (props: Props) => {
+export const FormDataConsumerView = <
+    TFieldValues extends FieldValues = FieldValues,
+    TPathValue = PathValue<TFieldValues, Path<TFieldValues>>[]
+>(
+    props: Props<TPathValue>
+) => {
     const { children, form, formData, source, index, ...rest } = props;
     let getSourceHasBeenCalled = false;
     let ret;
@@ -104,26 +109,24 @@ export const FormDataConsumerView = (props: Props) => {
 };
 
 export default FormDataConsumer;
-
-export interface FormDataConsumerRenderParams {
-    formData: any;
+export interface FormDataConsumerRenderParams<
+    TFieldValues extends FieldValues = FieldValues
+> {
+    formData: TFieldValues;
     scopedFormData?: any;
     getSource?: (source: string) => string;
 }
-
-export type FormDataConsumerRender = (
-    params: FormDataConsumerRenderParams
-) => ReactNode;
-
-interface ConnectedProps {
-    children: FormDataConsumerRender;
+export type FormDataConsumerRender<
+    TFieldValues extends FieldValues = FieldValues
+> = (params: FormDataConsumerRenderParams<TFieldValues>) => ReactNode;
+interface ConnectedProps<TFieldValues extends FieldValues = FieldValues> {
+    children: FormDataConsumerRender<TFieldValues>;
     form?: string;
     record?: any;
     source?: string;
     [key: string]: any;
 }
-
-interface Props extends ConnectedProps {
-    formData: any;
+interface Props<TFieldValues extends FieldValues> extends ConnectedProps {
+    formData: TFieldValues;
     index?: number;
 }