Submit works e2e: goes full cycle and FormStore.ToObject now works too.

Author: DovydasNavickas

packages/simplr-forms-core/src/contracts/form-store.ts

@@ -12,3 +12,8 @@ export interface FormStoreState {
 }
 
 export interface FormStoreStateRecord extends TypedRecord<FormStoreStateRecord>, FormStoreState { }
+
+export interface BuiltFormObject {
+    Fields: Immutable.Map<string, FieldStateRecord>;
+    Object: any;
+}

packages/simplr-forms-core/src/stores/form-store.ts

@@ -12,8 +12,15 @@ import {
     FieldStatePropsRecord,
     FieldStateProps
 } from "../contracts/field";
-import { FormState, FormStateRecord } from "../contracts/form";
-import { FormStoreState, FormStoreStateRecord } from "../contracts/form-store";
+import {
+    FormState,
+    FormStateRecord
+} from "../contracts/form";
+import {
+    FormStoreState,
+    FormStoreStateRecord,
+    BuiltFormObject
+} from "../contracts/form-store";
 import { FieldsGroupStateRecord } from "../contracts/fields-group";
 import { ConstructFormError } from "../utils/form-error-helpers";
 import { FormError } from "../contracts/error";
@@ -26,14 +33,14 @@ export class FormStore extends ActionEmitter {
     }
 
     protected FormId: string;
+    protected BuiltFormObject: BuiltFormObject;
 
     private state: FormStoreStateRecord;
     protected get State(): FormStoreStateRecord {
         return this.state;
     }
     protected set State(newState: FormStoreStateRecord) {
         this.state = newState;
-
         this.emit(new Actions.StateUpdated());
     }
 
@@ -255,6 +262,17 @@ export class FormStore extends ActionEmitter {
         }
     }
 
+    public ToObject<TObject = any>(): TObject {
+        if (this.BuiltFormObject == null ||
+            this.BuiltFormObject.Fields !== this.State.Fields) {
+            this.BuiltFormObject = {
+                Fields: this.State.Fields,
+                Object: this.BuildFormObject(this.State)
+            };
+        }
+        return this.BuiltFormObject.Object;
+    }
+
     /**
      * ========================
      *  Local helper methods
@@ -294,6 +312,21 @@ export class FormStore extends ActionEmitter {
         };
     }
 
+    protected BuildFormObject(state: FormStoreStateRecord) {
+        const formStoreObject: { [id: string]: any } = {};
+
+        this.State.Fields.forEach((field, fieldId) => {
+            if (fieldId == null || field == null) {
+                return;
+            }
+            formStoreObject[fieldId] = field.Value;
+        });
+
+        // TODO: FieldsGroups values
+
+        return formStoreObject;
+    }
+
     protected IsPromise<T>(value: any): value is Promise<T> {
         return value != null && value.then != null && value.catch != null;
     }

packages/simplr-forms-dom/src/components/text.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { FieldProps, FieldValue } from "simplr-forms-core/contracts";
 
 import { BaseDomField, BaseDomFieldState } from "../abstractions/base-dom-field";
-import { OnChangeCallback } from "../contracts/field";
+import { FieldOnChangeCallback } from "../contracts/field";
 
 /**
  * Override the differences between extended interfaces.
@@ -16,7 +16,7 @@ export interface TextProps extends FieldProps, React.HTMLProps<HTMLInputElement>
     name: string;
     onFocus?: React.EventHandler<React.FocusEvent<HTMLInputElement>>;
     onBlur?: React.EventHandler<React.FocusEvent<HTMLInputElement>>;
-    onChange?: OnChangeCallback<HTMLInputElement>;
+    onChange?: FieldOnChangeCallback<HTMLInputElement>;
     ref?: any;
 }
 

packages/simplr-forms-dom/src/contracts.ts

@@ -1 +1,2 @@
 export * from "./contracts/field";
+export * from "./contracts/form";

packages/simplr-forms-dom/src/contracts/field.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { FieldValue } from "simplr-forms-core/contracts";
 
-export interface OnChangeCallback<TElement> extends React.EventHandler<React.FormEvent<TElement>> {
+export interface FieldOnChangeCallback<TElement> extends React.EventHandler<React.FormEvent<TElement>> {
     (event: React.FormEvent<TElement> | undefined, newValue: FieldValue, fieldId: string, formId: string): void;
 }

packages/simplr-forms-dom/src/contracts/form.ts

@@ -2,15 +2,15 @@ import * as React from "react";
 import { FieldValue, FormError } from "simplr-forms-core/contracts";
 import { FormProps as CoreFormProps } from "simplr-forms-core/contracts";
 import { FormStore } from "simplr-forms-core/stores";
-import { OnChangeCallback } from "../contracts/field";
+import { FieldOnChangeCallback } from "../contracts/field";
 
 export interface FormOnSubmitCallback extends React.FormEventHandler<HTMLFormElement> {
     (event: React.FormEvent<HTMLFormElement>, store: FormStore): void | Promise<never> | FormError | string;
 }
 
-export interface FormProps extends CoreFormProps {
+export interface FormProps extends CoreFormProps, React.HTMLProps<HTMLFormElement> {
     onSubmit?: FormOnSubmitCallback;
-    onChange?: OnChangeCallback<any>;
+    onChange?: FieldOnChangeCallback<any>;
     preventSubmitDefaultAndPropagation?: boolean;
     // tslint:disable-next-line:max-line-length
     // More properties at: