Merge pull request #23441 from TiuSh/react-form-typings

[react-form] Updated typings with react-form 2.16.1

types/react-form/index.d.ts

@@ -1,6 +1,7 @@
-// Type definitions for react-form 2.12
+// Type definitions for react-form 2.16
 // Project: https://github.com/tannerlinsley/react-form#readme
 // Definitions by: Cameron McAteer <https://github.com/cameron-mcateer>
+//                 Mathieu Masy <https://github.com/TiuSh>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.6
 
@@ -18,7 +19,7 @@ export interface FormErrors {
     [key: string]: FormError;
 }
 export type NestedErrors = Nested<FormErrors>;
-export type RenderReturn = JSX.Element | false | null;
+export type RenderReturn = JSX.Element | false | null | never[];
 
 export interface FormState {
     values: FormValues;
@@ -29,7 +30,10 @@ export interface FormState {
 }
 
 export interface FormProps {
+    component?: React.ReactType<{ formApi: FormApi }>;
+    render?: (formApi: FormApi) => RenderReturn;
     dontValidateOnMount?: boolean;
+    validateOnSubmit?: boolean;
     defaultValues?: FormValues;
     onSubmit?(values: FormValues, submissionEvent: React.SyntheticEvent<any>, formApi: FormApi): void;
     preSubmit?(values: FormValues, formApi: FormApi): FormValues;
@@ -43,6 +47,7 @@ export interface FormProps {
         [field: string]: (value: FormValue) => Promise<any>
     };
     dontPreventDefault?: boolean;
+    getApi?: (formApi: FormApi) => void;
 }
 
 export interface FormApi {
@@ -137,6 +142,7 @@ export type SelectOptions = Array<{
 
 export interface SelectProps extends FieldProps, React.SelectHTMLAttributes<HTMLSelectElement> {
     options: SelectOptions;
+    placeholder?: string;
 }
 
 export const Select: React.StatelessComponent<SelectProps>;

types/react-form/react-form-tests.tsx

@@ -21,6 +21,50 @@ import {
 	FormApi
 } from 'react-form';
 
+// Form Api
+class FormApiMethods extends React.Component {
+	constructor(props: {}) {
+		super(props);
+		this.state = {};
+	}
+
+	render() {
+		const FormContent = (props: { formApi?: FormApi }) => (
+			<form onSubmit={props.formApi ? props.formApi.submitForm : () => {}}>
+				<Text field="hello" id="hello" />
+				<button type="submit">Submit</button>
+			</form>
+		);
+
+		return (
+			<div>
+				<Form>
+					{ formApi => (
+						<form onSubmit={formApi.submitForm}>
+							<Text field="hello" id="hello" />
+							<button type="submit">Submit</button>
+						</form>
+					)}
+				</Form>
+
+				<Form render={ formApi => (
+					<form onSubmit={formApi.submitForm}>
+						<Text field="hello" id="hello" />
+						<button type="submit">Submit</button>
+					</form>
+				)}>
+				</Form>
+
+				<Form>
+					<FormContent />
+				</Form>
+
+				<Form component={FormContent} />
+			</div>
+		);
+	}
+}
+
 // Basic Form Example
 const statusOptions = [
 	{

types/react-form/tsconfig.json

@@ -22,4 +22,4 @@
         "index.d.ts",
         "react-form-tests.tsx"
     ]
-}
+}