feat: Form & FormInstance support generic (#172)

* feat: Form support generic

* update example

* setFieldsValue should be a type to extend

* useForm support generic

* Form auto FormInstance types

Author: zombieJ

examples/basic.tsx

@@ -1,17 +1,33 @@
 import React from 'react';
-import Form, { Field } from '../src';
+import Form, { Field, FormInstance } from '../src';
 import Input from './components/Input';
 
 const list = new Array(1111).fill(() => null);
 
+interface FormValues {
+  username?: string;
+  password?: string;
+  path1?: {
+    path2?: string;
+  };
+}
+
 export default class Demo extends React.Component {
-  public state = {};
+  formRef = React.createRef<FormInstance<FormValues>>();
+
+  onFinish = (values: FormValues) => {
+    console.log('Submit:', values);
+
+    setTimeout(() => {
+      this.formRef.current.setFieldsValue({ path1: { path2: '2333' } });
+    }, 500);
+  };
 
   public render() {
     return (
       <div>
         <h3>State Form ({list.length} inputs)</h3>
-        <Form>
+        <Form<FormValues> ref={this.formRef} onFinish={this.onFinish}>
           <Field name="username">
             <Input placeholder="Username" />
           </Field>
@@ -33,6 +49,8 @@ export default class Demo extends React.Component {
             )}
           </Field>
 
+          <button type="submit">Submit</button>
+
           <h4>Show additional field when `username` is `111`</h4>
           <Field dependencies={['username']}>
             {(control, meta, context) => {

examples/useForm.tsx

@@ -6,8 +6,16 @@ const { Field, useForm } = Form;
 
 const list = new Array(0).fill(() => undefined);
 
+interface FormValues {
+  username?: string;
+  password?: string;
+  path1?: {
+    path2?: string;
+  };
+}
+
 export default () => {
-  const [form] = useForm();
+  const [form] = useForm<FormValues>();
 
   return (
     <div>

src/Form.tsx

@@ -16,19 +16,19 @@ type BaseFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'>
 
 type RenderProps = (values: Store, form: FormInstance) => JSX.Element | React.ReactNode;
 
-export interface FormProps extends BaseFormProps {
+export interface FormProps<Values = any> extends BaseFormProps {
   initialValues?: Store;
-  form?: FormInstance;
+  form?: FormInstance<Values>;
   children?: RenderProps | React.ReactNode;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   component?: false | string | React.FC<any> | React.ComponentClass<any>;
   fields?: FieldData[];
   name?: string;
   validateMessages?: ValidateMessages;
-  onValuesChange?: Callbacks['onValuesChange'];
-  onFieldsChange?: Callbacks['onFieldsChange'];
-  onFinish?: Callbacks['onFinish'];
-  onFinishFailed?: Callbacks['onFinishFailed'];
+  onValuesChange?: Callbacks<Values>['onValuesChange'];
+  onFieldsChange?: Callbacks<Values>['onFieldsChange'];
+  onFinish?: Callbacks<Values>['onFinish'];
+  onFinishFailed?: Callbacks<Values>['onFinishFailed'];
   validateTrigger?: string | string[] | false;
   preserve?: boolean;
 }

src/index.tsx

@@ -6,7 +6,9 @@ import useForm from './useForm';
 import FieldForm, { FormProps } from './Form';
 import { FormProvider } from './FormContext';
 
-const InternalForm = React.forwardRef<FormInstance, FormProps>(FieldForm);
+const InternalForm = React.forwardRef<FormInstance, FormProps>(FieldForm) as <Values = any>(
+  props: React.PropsWithChildren<FormProps<Values>> & { ref?: React.Ref<FormInstance> },
+) => React.ReactElement;
 
 type InternalForm = typeof InternalForm;
 interface RefForm extends InternalForm {

src/interface.ts

@@ -76,8 +76,8 @@ export type RuleObject = BaseRule | ArrayRule;
 
 export type Rule = RuleObject | RuleRender;
 
-export interface ValidateErrorEntity {
-  values: Store;
+export interface ValidateErrorEntity<Values = any> {
+  values: Values;
   errorFields: { name: InternalNamePath; errors: string[] }[];
   outOfDate: boolean;
 }
@@ -159,11 +159,11 @@ export type ValuedNotifyInfo = NotifyInfo & {
   store: Store;
 };
 
-export interface Callbacks {
-  onValuesChange?: (changedValues: Store, values: Store) => void;
+export interface Callbacks<Values = any> {
+  onValuesChange?: (changedValues: any, values: Values) => void;
   onFieldsChange?: (changedFields: FieldData[], allFields: FieldData[]) => void;
-  onFinish?: (values: Store) => void;
-  onFinishFailed?: (errorInfo: ValidateErrorEntity) => void;
+  onFinish?: (values: Values) => void;
+  onFinishFailed?: (errorInfo: ValidateErrorEntity<Values>) => void;
 }
 
 export interface InternalHooks {
@@ -177,10 +177,20 @@ export interface InternalHooks {
   setPreserve: (preserve?: boolean) => void;
 }
 
-export interface FormInstance {
+/** Only return partial when type is not any */
+type RecursivePartial<T> = T extends object
+  ? {
+      [P in keyof T]?: RecursivePartial<T[P]>;
+    }
+  : any;
+
+export interface FormInstance<Values = any> {
   // Origin Form API
   getFieldValue: (name: NamePath) => StoreValue;
-  getFieldsValue: (nameList?: NamePath[] | true, filterFunc?: (meta: Meta) => boolean) => Store;
+  getFieldsValue: (
+    nameList?: NamePath[] | true,
+    filterFunc?: (meta: Meta) => boolean,
+  ) => Values | any;
   getFieldError: (name: NamePath) => string[];
   getFieldsError: (nameList?: NamePath[]) => FieldError[];
   isFieldsTouched(nameList?: NamePath[], allFieldsTouched?: boolean): boolean;
@@ -190,7 +200,7 @@ export interface FormInstance {
   isFieldsValidating: (nameList: NamePath[]) => boolean;
   resetFields: (fields?: NamePath[]) => void;
   setFields: (fields: FieldData[]) => void;
-  setFieldsValue: (value: Store) => void;
+  setFieldsValue: (value: RecursivePartial<Values>) => void;
   validateFields: ValidateFields;
 
   // New API

src/useForm.ts

@@ -778,7 +778,7 @@ export class FormStore {
   };
 }
 
-function useForm(form?: FormInstance): [FormInstance] {
+function useForm<Values = any>(form?: FormInstance<Values>): [FormInstance<Values>] {
   const formRef = React.useRef<FormInstance>();
   const [, forceUpdate] = React.useState();