Merge pull request #1372 from stijnvanhulle/master

fix: better generic types for field, FormRenderer and hooks

Author: rvsia

packages/react-form-renderer/src/common-types/field.d.ts

@@ -1,10 +1,10 @@
-import { Validator } from "../validators";
+import { Validator } from '../validators';
 import { ConditionDefinition } from '../condition';
-import { DataType } from "../data-types";
-import { AnyObject } from "../common-types/any-object";
-import { FieldInputProps } from "react-final-form";
-import { FormOptions } from "../renderer-context";
-import { Meta } from "../use-field-api";
+import { DataType } from '../data-types';
+import { AnyObject } from '../common-types/any-object';
+import { FieldInputProps } from 'react-final-form';
+import { FormOptions } from '../renderer-context';
+import { Meta } from '../use-field-api';
 
 export type FieldAction = [string, ...any[]];
 
@@ -17,20 +17,24 @@ export interface FieldApi<FieldValue, T extends HTMLElement = HTMLElement> {
   input: FieldInputProps<FieldValue, T>;
 }
 
-export type ResolvePropsFunction = (props: AnyObject, fieldApi: FieldApi<any>, formOptions: FormOptions) => AnyObject;
+export type ResolvePropsFunction<FormValues = Record<string, any>, FieldValue = FormValues[keyof FormValues]> = (
+  props: AnyObject,
+  fieldApi: FieldApi<FieldValue>,
+  formOptions: FormOptions<FormValues>
+) => AnyObject;
 
-interface Field extends AnyObject {
+interface Field<FormValues = Record<string, any>, FieldValue = FormValues[keyof FormValues]> extends AnyObject {
   name: string;
   component: string;
   validate?: Validator[];
   condition?: ConditionDefinition | ConditionDefinition[];
   initializeOnMount?: boolean;
   dataType?: DataType;
-  initialValue?: any;
-  clearedValue?: any;
+  initialValue?: FieldValue;
+  clearedValue?: FieldValue;
   clearOnUnmount?: boolean;
   actions?: FieldActions;
-  resolveProps?: ResolvePropsFunction;
+  resolveProps?: ResolvePropsFunction<FormValues, FieldValue>;
 }
 
 export default Field;

packages/react-form-renderer/src/form-renderer/form-renderer.d.ts

@@ -1,31 +1,39 @@
-import { ComponentType, FunctionComponent, ReactNode } from 'react';
+import { ComponentType, ReactElement, FunctionComponent, ReactNode } from 'react';
 import { FormProps } from 'react-final-form';
 import Schema from '../common-types/schema';
 import ComponentMapper from '../common-types/component-mapper';
-import { ValidatorMapper} from '../validator-mapper';
+import { ValidatorMapper } from '../validator-mapper';
 import { ActionMapper } from './action-mapper';
 import SchemaValidatorMapper from '../common-types/schema-validator-mapper';
 import { FormTemplateRenderProps } from '../common-types/form-template-render-props';
 import { AnyObject } from '../common-types/any-object';
 
-export interface FormRendererProps extends Omit<FormProps, 'onSubmit'> {
-  initialValues?: object;
-  onCancel?: (values: AnyObject, ...args: any[]) => void;
+export interface FormRendererProps<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>,
+  FormTemplateProps extends FormTemplateRenderProps = FormTemplateRenderProps
+> extends Omit<FormProps<FormValues, InitialFormValues>, 'onSubmit'> {
+  initialValues?: InitialFormValues;
+  onCancel?: (values: FormValues, ...args: any[]) => void;
   onReset?: () => void;
   onError?: (...args: any[]) => void;
-  onSubmit?: FormProps['onSubmit']
+  onSubmit?: FormProps<FormValues, InitialFormValues>['onSubmit'];
   schema: Schema;
   clearOnUnmount?: boolean;
   clearedValue?: any;
   componentMapper: ComponentMapper;
-  FormTemplate?: ComponentType<FormTemplateRenderProps> | FunctionComponent<FormTemplateRenderProps>;
+  FormTemplate?: ComponentType<FormTemplateProps> | FunctionComponent<FormTemplateProps>;
   validatorMapper?: ValidatorMapper;
   actionMapper?: ActionMapper;
   schemaValidatorMapper?: SchemaValidatorMapper;
-  FormTemplateProps?: AnyObject;
-  children?: ReactNode | ((props: FormTemplateRenderProps) => ReactNode)
+  FormTemplateProps?: Partial<FormTemplateProps>;
+  children?: ReactNode | ((props: FormTemplateRenderProps) => ReactNode);
 }
 
-declare const FormRenderer: React.ComponentType<FormRendererProps>;
+declare function FormRenderer<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>,
+  FormTemplateProps extends FormTemplateRenderProps = FormTemplateRenderProps
+>(props: FormRendererProps<FormValues, InitialFormValues, FormTemplateProps>): ReactElement<any, any>;
 
 export default FormRenderer;

packages/react-form-renderer/src/renderer-context/renderer-context.d.ts

@@ -7,20 +7,21 @@ import Field from '../common-types/field';
 import { AnyObject } from '../common-types/any-object';
 import Schema from '../common-types/schema';
 
-export interface FormOptions extends FormApi {
-  registerInputFile?: (name: string) => void;
-  unRegisterInputFile?: (name: string) => void;
-  onCancel?: (values: object, ...args: any[]) => void;
+export interface FormOptions<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>
+  extends FormApi<FormValues, InitialFormValues> {
+  registerInputFile?: (name: keyof FormValues) => void;
+  unRegisterInputFile?: (name: keyof FormValues) => void;
+  onCancel?: (values: FormValues, ...args: any[]) => void;
   onReset?: () => void;
-  handleSubmit: () => Promise<AnyObject | undefined> | undefined;
+  handleSubmit: () => Promise<FormValues | undefined> | undefined;
   clearedValue?: any;
   renderForm: (fields: Field[]) => ReactNode[];
-  internalRegisterField: (name: string) => void;
-  internalUnregisterField: (name: string) => void;
+  internalRegisterField: (name: keyof FormValues) => void;
+  internalUnregisterField: (name: keyof FormValues) => void;
   getRegisteredFields: () => string[];
   ffGetRegisteredFields: () => string[];
-  initialValues: AnyObject;
-  schema: Schema,
+  initialValues: InitialFormValues;
+  schema: Schema;
 }
 
 export interface RendererContextValue {

packages/react-form-renderer/src/use-form-api/use-form-api.d.ts

@@ -1,3 +1,6 @@
 import { FormOptions } from '../renderer-context';
 
-export default function(): FormOptions;
+export default function useFormApi<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>(): FormOptions<
+  FormValues,
+  InitialFormValues
+>;