import React from "react" ; import { ConfigProps , FormErrors , FormInstance , InjectedFormProps , reduxForm as wrappedReduxForm , } from "redux-form" ; const identity = ( thing ) => thing ; interface IProps < ExternalValues > { onSubmit ? : ( values : ExternalValues ) => void ; initialValues ? : Partial < ExternalValues > ; } interface IConfig < ExternalValues , InternalValues > { form : string ; touchOnBlur ? : boolean ; validate ? : ( values : InternalValues ) => FormErrors < InternalValues > ; toInternal ? : ( values : any ) => InternalValues ; toExternal ? : ( values : InternalValues ) => ExternalValues ; } export interface IConverterForm < ExternalValues > { submit : ( ) => Promise < any > ; isValid : ( ) => boolean ; getValues : ( ) => ExternalValues ; } export function reduxForm < ExternalValues , InternalValues , AdditionalProps = { } > ( config ) { const toInternal = config . toInternal || identity ; const toExternal = config . toExternal || identity ; return ( Form ) => { const DecoratedForm = wrappedReduxForm ( { form : config . form , validate : config . validate , touchOnBlur : config . touchOnBlur !== false , } ) ( Form as any ) ; return class ConverterForm extends React . Component < IProps < ExternalValues > & AdditionalProps > implements IConverterForm < ExternalValues > { private form ! : FormInstance < InternalValues , Partial < ConfigProps < InternalValues , { } > > > ; submit ( ) { return this . form . submit ( ) ; } isValid ( ) { return this . form . valid ; } getValues ( ) { return toExternal ( this . form . values ) ; } render ( ) { const { initialValues , onSubmit , ... rest } = this . props ; return ( < DecoratedForm { ... rest } ref = { ( form ) => ( this . form = form ! ) } initialValues = { toInternal ( initialValues ) } onSubmit = { ( values ) => onSubmit && onSubmit ( toExternal ( values ) ) } />); } } ; } ; }