Merge pull request #15 from RiccardoCampitelli/master-setValue-register-optional-#13

fix #13 setValue, register and unregister should be optional

Author: bluebill1049

src/index.test.tsx

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { RHFInput } from './index';
+import { FormContext } from 'react-hook-form';
+import { FormStateProxy } from 'react-hook-form/dist/types';
 
 describe('React Hook Form Input', () => {
   it('should render correctly', () => {
     const setValue = () => {};
     const register = () => () => {};
+    const unregister = () => {};
     const { asFragment } = render(
       <RHFInput
         setValue={setValue}
         register={register}
+        unregister={unregister}
         name="test"
         as={<input />}
       />,
@@ -21,10 +25,12 @@ describe('React Hook Form Input', () => {
   it('should register input when component mount', () => {
     const setValue = () => {};
     const register = jest.fn();
+    const unregister = () => {};
     render(
       <RHFInput
         setValue={setValue}
         register={register}
+        unregister={unregister}
         name="test"
         rules={{ required: true }}
         as={<input />}
@@ -82,10 +88,12 @@ describe('React Hook Form Input', () => {
   it('should update internal value when onChange fired', () => {
     const setValue = jest.fn();
     const register = () => () => {};
+    const unregister = () => {};
     const { getByPlaceholderText } = render(
       <RHFInput
         setValue={setValue}
         register={register}
+        unregister={unregister}
         name="test"
         as={<input placeholder="test" />}
       />,
@@ -100,4 +108,144 @@ describe('React Hook Form Input', () => {
 
     expect(setValue).toBeCalledWith('test', 'test', false);
   });
+
+  it('should use formContext when setValue prop not provided', () => {
+    const record: Record<string, any> = {};
+    const formState: FormStateProxy = {
+      dirty: true,
+      isSubmitted: true,
+      isSubmitting: false,
+      isValid: true,
+      submitCount: 1,
+      touched: [],
+    };
+    const methods = {
+      setValue: jest.fn(),
+      register: () => () => {},
+      unregister: () => {},
+      watch: () => () => {},
+      reset: () => {},
+      clearError: () => {},
+      setError: () => {},
+      triggerValidation: () => new Promise<boolean>(resolve => resolve(true)),
+      getValues: () => record,
+      handleSubmit: () => () => new Promise<void>(resolve => resolve()),
+      errors: {},
+      formState: formState,
+    };
+
+    const register = () => () => {};
+    const unregister = () => {};
+
+    const { getByPlaceholderText } = render(
+      <FormContext {...methods}>
+        <RHFInput
+          name="test"
+          as={<input placeholder="test" />}
+          register={register}
+          unregister={unregister}
+        />
+      </FormContext>,
+    );
+
+    const input = getByPlaceholderText('test');
+    fireEvent.change(input, {
+      target: {
+        value: 'test',
+      },
+    });
+
+    expect(methods.setValue).toBeCalledWith('test', 'test', false);
+  });
+
+  it('should use formContext when register prop not provided', () => {
+    const record: Record<string, any> = {};
+    const formState: FormStateProxy = {
+      dirty: true,
+      isSubmitted: true,
+      isSubmitting: false,
+      isValid: true,
+      submitCount: 1,
+      touched: [],
+    };
+    const methods = {
+      setValue: () => {},
+      register: jest.fn(),
+      unregister: () => {},
+      watch: () => () => {},
+      reset: () => {},
+      clearError: () => {},
+      setError: () => {},
+      triggerValidation: () => new Promise<boolean>(resolve => resolve(true)),
+      getValues: () => record,
+      handleSubmit: () => () => new Promise<void>(resolve => resolve()),
+      errors: {},
+      formState: formState,
+    };
+
+    const setValue = () => {};
+    const unregister = () => {};
+
+    render(
+      <FormContext {...methods}>
+        <RHFInput
+          name="test"
+          as={<input placeholder="test" />}
+          setValue={setValue}
+          rules={{ required: true }}
+          unregister={unregister}
+        />
+      </FormContext>,
+    );
+
+    expect(methods.register).toBeCalledWith(
+      { name: 'test' },
+      { required: true },
+    );
+  });
+
+  it('should use formContext when unregister prop not provided', () => {
+    const record: Record<string, any> = {};
+    const formState: FormStateProxy = {
+      dirty: true,
+      isSubmitted: true,
+      isSubmitting: false,
+      isValid: true,
+      submitCount: 1,
+      touched: [],
+    };
+    const methods = {
+      setValue: () => {},
+      register: () => () => {},
+      unregister: jest.fn(),
+      watch: () => () => {},
+      reset: () => {},
+      clearError: () => {},
+      setError: () => {},
+      triggerValidation: () => new Promise<boolean>(resolve => resolve(true)),
+      getValues: () => record,
+      handleSubmit: () => () => new Promise<void>(resolve => resolve()),
+      errors: {},
+      formState: formState,
+    };
+
+    const setValue = () => {};
+    const register = () => () => {};
+
+    const { unmount } = render(
+      <FormContext {...methods}>
+        <RHFInput
+          name="test"
+          as={<input placeholder="test" />}
+          setValue={setValue}
+          rules={{ required: true }}
+          register={register}
+        />
+      </FormContext>,
+    );
+
+    unmount();
+
+    expect(methods.unregister).toBeCalledWith('test');
+  });
 });

src/index.tsx

@@ -40,9 +40,30 @@ const RHFInput = React.memo(
     const [inputValue, setInputValue] = React.useState(defaultData);
     const valueRef = React.useRef(defaultData);
     const methods = useFormContext();
-    const setValue = methods ? methods.setValue : setValueFromProp;
-    const register = methods ? methods.register : registerFromProp;
-    const unregister = methods ? methods.unregister : unregisterFromProp;
+    const setValue =
+      setValueFromProp !== undefined
+        ? setValueFromProp
+        : methods
+        ? methods.setValue
+        : () => {
+            throw Error('Must provide setValue prop or formContext');
+          };
+    const register =
+      registerFromProp !== undefined
+        ? registerFromProp
+        : methods
+        ? methods.register
+        : () => {
+            throw Error('Must provide register prop or formContext');
+          };
+    const unregister =
+      unregisterFromProp !== undefined
+        ? unregisterFromProp
+        : methods
+        ? methods.unregister
+        : () => {
+            throw Error('Must provide unregister prop or formContext');
+          };
 
     const commonTask = (target: any) => {
       const data = getValue(target, { isCheckbox });

src/types.ts

@@ -29,8 +29,8 @@ export type EventFunction = (
 };
 
 export type Props = {
-  setValue: (name: string, value: any, trigger?: boolean) => void;
-  register: (ref: any, rules: ValidationOptions) => (name: string) => void;
+  setValue?: (name: string, value: any, trigger?: boolean) => void;
+  register?: (ref: any, rules: ValidationOptions) => (name: string) => void;
   unregister?: (name: string) => void;
   name: string;
   as: React.ReactElement<any>;