feat(redux-form): add typings

Author: paibamboo

src/app/components/Form.tsx

@@ -1,36 +1,31 @@
 import * as React from "react";
-import { Field, reduxForm } from "redux-form";
-import { aol, email, maxLength, minValue, numberType, renderField, required, tooOld } from "../helpers/FormHelper";
+import { Field, FormProps, reduxForm } from "redux-form";
+import {
+  aol, email, maxLength, minLength, minValue,
+  numberType, renderField, required, tooOld
+} from "../helpers/FormHelper";
 
-class Form extends React.Component<any, any> {
+export interface IFormData {
+  username: string;
+  password: string;
+  email: string;
+  age: number;
+}
+
+interface IProps {
+  onSubmit: (values: IFormData) => Promise<any>;
+}
+
+class Form extends React.Component<FormProps<IFormData, IProps, void> & IProps, void> {
   public render(): JSX.Element {
     const {handleSubmit, pristine, reset, submitting} = this.props;
 
     return (
       <form onSubmit={handleSubmit}>
-        <Field
-          name="username"
-          type="text"
-          component={renderField}
-          label="Username"
-          validate={[required, maxLength(15)]}
-        />
-        <Field
-          name="email"
-          type="email"
-          component={renderField}
-          label="Email"
-          validate={email}
-          warn={aol}
-        />
-        <Field
-          name="age"
-          type="number"
-          component={renderField}
-          label="Age"
-          validate={[required, numberType, minValue(18)]}
-          warn={tooOld}
-        />
+        <Field name="username" type="text" component={renderField} label="Username" validate={[required, maxLength(15)]}/>
+        <Field name="password" type="password" component={renderField} label="Password" validate={[required, minLength(8)]}/>
+        <Field name="email" type="email" component={renderField} label="Email" validate={email} warn={aol}/>
+        <Field name="age" type="number" component={renderField} label="Age" validate={[required, numberType, minValue(18)]} warn={tooOld}/>
         <div>
           <button type="submit" disabled={submitting}>Submit</button>
           <button type="button" disabled={pristine || submitting} onClick={reset}>

src/app/containers/FormPage.tsx

@@ -1,13 +1,14 @@
 import {Promise} from "es6-promise";
 import * as React from "react";
 import {Form} from "../components";
+import {IFormData} from "../components/Form";
 
 class FormPage extends React.Component<void, void> {
   constructor() {
     super();
     this.showResults = this.showResults.bind(this);
   }
-  public showResults(values: any): Promise<any> {
+  public showResults(values: IFormData): Promise<any> {
     return new Promise((resolve) => {
       setTimeout(
         () => {

src/app/helpers/FormHelper.tsx

@@ -1,9 +1,16 @@
 import * as React from "react";
+import {WrappedFieldProps} from "redux-form";
+interface IRenderFieldProps<T> extends WrappedFieldProps<T> {
+  label?: string;
+  type?: string;
+}
 
 export const required = (value) => (value ? undefined : "Required");
 
 export const maxLength = (max) => (value) => value && value.length > max ? `Must be ${max} characters or less` : undefined;
 
+export const minLength = (min) => (value) => value && value.length < min ? `Must be ${min} characters or more` : undefined;
+
 export const numberType = (value) => value && isNaN(Number(value)) ? "Must be a number" : undefined;
 
 export const minValue = (min) => (value) => value && value < min ? `Must be at least ${min}` : undefined;
@@ -14,12 +21,15 @@ export const tooOld = (value) => value && value > 65 ? "You might be too old for
 
 export const aol = (value) => value && /.+@aol\.com/.test(value) ? "Really? You still use AOL for your email?" : undefined;
 
-export const renderField = ({input, label, type, meta: {touched, error, warning}}) => (
-  <div>
-    <label>{label}</label>
+export const renderField = (props: IRenderFieldProps<any>) => {
+  const {input, label, type, meta: {active, touched, error, warning}} = props;
+  return (
     <div>
-      <input {...input} placeholder={label} type={type} />
-      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
+      <label>{props.label}</label>
+      <div>
+        <input {...input} placeholder={label} type={type} />
+        {(active || touched) && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
+      </div>
     </div>
-  </div>
-);
+  );
+};