Revert "Revert "✨ Add support for generic components using `FieldPath…

…WithValue` (#6562)" (#6717)" This reverts commit 08883bb.
react-hook-form · Oct 8, 2021 · 65e1836 · 65e1836
1 parent c190993
commit 65e1836
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 29 deletions.
diff --git a/src/__tests__/useController.test.tsx b/src/__tests__/useController.test.tsx
@@ -8,7 +8,12 @@ import {
 } from '@testing-library/react';
 
 import { Controller } from '../controller';
-import { Control } from '../types';
+import {
+  Control,
+  FieldPathWithValue,
+  FieldValues,
+  NestedValue,
+} from '../types';
 import { useController } from '../useController';
 import { useForm } from '../useForm';
 import { FormProvider, useFormContext } from '../useFormContext';
@@ -33,6 +38,98 @@ describe('useController', () => {
     render(<Component />);
   });
 
+  it('should render generic component correctly', () => {
+    type ExpectedType = { test: string };
+
+    const Generic = <FormValues extends FieldValues>({
+      name,
+      control,
+    }: {
+      name: FieldPathWithValue<FormValues, ExpectedType>;
+      control: Control<FormValues>;
+    }) => {
+      const {
+        field: { value, ...fieldProps },
+        fieldState: { error },
+      } = useController<FormValues, ExpectedType>({
+        name,
+        control,
+        defaultValue: { test: 'value' },
+      });
+
+      if (error?.test?.message) {
+        return null;
+      }
+
+      return <input type="text" value={value.test} {...fieldProps} />;
+    };
+
+    const Component = () => {
+      const { control } = useForm<{
+        test: string;
+        key: ExpectedType[];
+      }>({
+        defaultValues: { test: 'test', key: [{ test: 'input value' }] },
+      });
+
+      return <Generic name="key.0" control={control} />;
+    };
+
+    render(<Component />);
+
+    const input = screen.queryByRole('textbox') as HTMLInputElement | null;
+    expect(input).toBeInTheDocument();
+    expect(input?.value).toEqual('input value');
+  });
+
+  it('should be able to access values and error in generic components using NestedValue', () => {
+    type ExpectedType = NestedValue<{ test: string }>;
+
+    const Generic = <FormValues extends FieldValues>({
+      name,
+      control,
+    }: {
+      name: FieldPathWithValue<FormValues, ExpectedType>;
+      control: Control<FormValues>;
+    }) => {
+      const {
+        field: { value, ...fieldProps },
+        fieldState: { error },
+      } = useController<FormValues, ExpectedType>({
+        name,
+        control,
+        defaultValue: { test: 'value' },
+      });
+
+      if (error?.message) {
+        return <>There was an error</>;
+      }
+
+      return <input type="text" value={value.test} {...fieldProps} />;
+    };
+
+    const Component = () => {
+      const { control } = useForm<{
+        test: string;
+        key: ExpectedType[];
+      }>({
+        defaultValues: {
+          test: 'test',
+          key: [{ test: 'input value' }],
+        },
+      });
+
+      return <Generic name="key.0" control={control} />;
+    };
+
+    render(<Component />);
+
+    const input = screen.queryByRole('textbox') as HTMLInputElement | null;
+
+    expect(input).toBeInTheDocument();
+    expect(input?.value).toEqual('input value');
+  });
+
   it('should only subscribe to formState at each useController level', async () => {
     const renderCounter = [0, 0];
     type FormValues = {
@@ -509,6 +606,12 @@ describe('useController', () => {
   });
 
   it('should return defaultValues when component is not yet mounted', async () => {
+    type FormValues = {
+      test: {
+        deep: { test: string; test1: string }[];
+      };
+    };
+
     const defaultValues = {
       test: {
         deep: [
@@ -521,15 +624,11 @@ describe('useController', () => {
     };
 
     const App = () => {
-      const { control, getValues } = useForm<{
-        test: {
-          deep: { test: string; test1: string }[];
-        };
-      }>({
+      const { control, getValues } = useForm<FormValues>({
         defaultValues,
       });
 
-      const { field } = useController({
+      const { field } = useController<FormValues, string>({
         control,
         name: 'test.deep.0.test',
       });

diff --git a/src/controller.tsx b/src/controller.tsx
@@ -1,11 +1,15 @@
-import { ControllerProps, FieldPath, FieldValues } from './types';
+import { ControllerProps, FieldPathWithValue, FieldValues } from './types';
 import { useController } from './useController';
 
 const Controller = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 >(
-  props: ControllerProps<TFieldValues, TName>,
-) => props.render(useController<TFieldValues, TName>(props));
+  props: ControllerProps<TFieldValues, TResult, TName>,
+) => props.render(useController<TFieldValues, TResult, TName>(props));
 
 export { Controller };
diff --git a/src/types/controller.ts b/src/types/controller.ts
@@ -1,70 +1,107 @@
 import * as React from 'react';
 
+import { FieldErrors } from '..';
+
 import { RegisterOptions } from './validator';
 import {
   Control,
   FieldError,
-  FieldPath,
   FieldPathValue,
+  FieldPathWithValue,
   FieldValues,
+  IsAny,
+  NestedValue,
   Noop,
+  Primitive,
   RefCallBack,
   UnpackNestedValue,
   UseFormStateReturn,
 } from './';
 
-export type ControllerFieldState = {
+export type ControllerFieldState<
+  TFieldValues extends FieldValues = FieldValues,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
+  FieldValuesAtPath = IsAny<TResult> extends true
+    ? FieldPathValue<TFieldValues, TName>
+    : TResult,
+> = {
   invalid: boolean;
   isTouched: boolean;
   isDirty: boolean;
-  error?: FieldError;
+  error?: FieldValuesAtPath extends NestedValue | Primitive
+    ? FieldError
+    : FieldErrors<FieldValuesAtPath>;
 };
 
 export type ControllerRenderProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 > = {
   onChange: (...event: any[]) => void;
   onBlur: Noop;
-  value: UnpackNestedValue<FieldPathValue<TFieldValues, TName>>;
+  value: IsAny<TResult> extends true
+    ? UnpackNestedValue<FieldPathValue<TFieldValues, TName>>
+    : UnpackNestedValue<TResult>;
   name: TName;
   ref: RefCallBack;
 };
 
 export type UseControllerProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 > = {
   name: TName;
   rules?: Omit<
     RegisterOptions<TFieldValues, TName>,
     'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
   >;
   shouldUnregister?: boolean;
-  defaultValue?: UnpackNestedValue<FieldPathValue<TFieldValues, TName>>;
+  defaultValue?: IsAny<TResult> extends true
+    ? UnpackNestedValue<FieldPathValue<TFieldValues, TName>>
+    : UnpackNestedValue<TResult>;
   control?: Control<TFieldValues>;
 };
 
 export type UseControllerReturn<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 > = {
-  field: ControllerRenderProps<TFieldValues, TName>;
+  field: ControllerRenderProps<TFieldValues, TResult, TName>;
   formState: UseFormStateReturn<TFieldValues>;
-  fieldState: ControllerFieldState;
+  fieldState: ControllerFieldState<TFieldValues, TResult, TName>;
 };
 
 export type ControllerProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 > = {
   render: ({
     field,
     fieldState,
     formState,
   }: {
-    field: ControllerRenderProps<TFieldValues, TName>;
-    fieldState: ControllerFieldState;
+    field: ControllerRenderProps<TFieldValues, TResult, TName>;
+    fieldState: ControllerFieldState<TFieldValues, TResult, TName>;
     formState: UseFormStateReturn<TFieldValues>;
   }) => React.ReactElement;
-} & UseControllerProps<TFieldValues, TName>;
+} & UseControllerProps<TFieldValues, TResult, TName>;
diff --git a/src/types/utils.ts b/src/types/utils.ts
@@ -172,3 +172,13 @@ export type UnionLike<T> = [T] extends [Date | FileList | File | NestedValue]
       Exclude<UnionKeys<T>, keyof T> | OptionalKeys<T>
     >
   : T;
+
+export type FieldPathWithValue<
+  TFieldValues extends FieldValues,
+  TResult = unknown,
+  FieldPaths extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  [key in FieldPaths]: FieldPathValue<TFieldValues, key> extends TResult
+    ? key
+    : never;
+}[FieldPaths];
diff --git a/src/useController.ts b/src/useController.ts
@@ -6,7 +6,7 @@ import get from './utils/get';
 import { EVENTS } from './constants';
 import {
   Field,
-  FieldPath,
+  FieldPathWithValue,
   FieldValues,
   InternalFieldName,
   UseControllerProps,
@@ -18,10 +18,14 @@ import { useSubscribe } from './useSubscribe';
 
 export function useController<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 >(
-  props: UseControllerProps<TFieldValues, TName>,
-): UseControllerReturn<TFieldValues, TName> {
+  props: UseControllerProps<TFieldValues, TResult, TName>,
+): UseControllerReturn<TFieldValues, TResult, TName> {
   const methods = useFormContext<TFieldValues>();
   const { name, control = methods.control, shouldUnregister } = props;
   const [value, setInputStateValue] = React.useState(