Feature/active field and errors (#46)

* Webpack index file source fixed.
* Error construction updated to add origin. Focus and Blur events now set ActiveFieldId.
* Field becomes touched on focus. RecalculateDependentFormState -> RecalculateDependentFormStatuses.
* Missing return types added.
* OnFocus and OnBlur moved into base-dom-field. onFocus and onBlur props are now called if they are defined.
* Missing return types defined in core-field.

Author: DovydasNavickas

packages/simplr-forms-dom/src/abstractions/base-dom-field.tsx

@@ -7,6 +7,24 @@ export interface BaseDomFieldState extends BaseFieldState {
 
 export abstract class BaseDomField<TProps extends FieldProps, TState extends BaseDomFieldState>
     extends BaseField<TProps, TState> {
+    protected OnFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+        const props = this.props as FieldProps;
+        if (props.onFocus != null) {
+            props.onFocus(event);
+        }
+
+        this.Focus();
+    }
+
+    protected OnBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+        const props = this.props as FieldProps;
+        if (props.onBlur != null) {
+            props.onBlur(event);
+        }
+
+        this.Blur();
+    }
+
     public abstract renderField(): JSX.Element | null;
 
     public render() {

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

@@ -33,8 +33,10 @@ export class Form extends BaseForm<FormProps, {}> {
             return;
         }
 
+        // Persist synthetic event, because it's passed into another method
         event.persist();
 
+        // Pass onSubmit result to FormStore for further processing
         const result = this.props.onSubmit(event, this.FormStore);
         this.FormStore.SubmitForm(result);
     }

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

@@ -66,6 +66,8 @@ export class Text extends BaseDomField<TextProps, BaseDomFieldState> {
             value={this.Value}
             onChange={this.OnChangeHandler}
             disabled={this.IsDisabled}
+            onFocus={this.OnFocus}
+            onBlur={this.OnBlur}
         />;
     }
 }

packages/simplr-forms/src/abstractions/core-field.ts

@@ -69,7 +69,7 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
 
     protected StoreEventSubscription: actionEmitter.EventSubscription;
 
-    componentWillMount() {
+    componentWillMount(): void {
         // props.name MUST have a proper value
         if (this.props.name == null || this.props.name === "") {
             throw new Error("simplr-forms: A proper field name must be given (undefined and empty string are not valid).");
@@ -85,7 +85,7 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
         this.registerFieldInFormStore();
     }
 
-    componentWillReceiveProps(nextProps: CoreFieldProps) {
+    componentWillReceiveProps(nextProps: CoreFieldProps): void {
         // Check if field name has not been changed
         if (this.props.name !== nextProps.name) {
             throw new Error(`simplr-forms: Field name must be constant`);
@@ -94,7 +94,7 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
         this.FormStore.UpdateFieldProps(this.FieldId, nextProps);
     }
 
-    componentWillUnmount() {
+    componentWillUnmount(): void {
         if (this.StoreEventSubscription != null) {
             this.StoreEventSubscription.remove();
         }
@@ -112,7 +112,7 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
     /**
      * Is field currently controlled.
      */
-    protected get IsControlled() {
+    protected get IsControlled(): boolean {
         return false;
     }
 
@@ -138,7 +138,7 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
         return value;
     }
 
-    protected ProcessValueFromStore(value: FieldValue) {
+    protected ProcessValueFromStore(value: FieldValue): FieldValue {
         return this.FormatValue(value);
     }
 
@@ -177,11 +177,11 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
         );
     }
 
-    protected ChildrenToRender() {
+    protected ChildrenToRender(): void {
         throw new Error("simplr-forms: Not implemented. Needs to filter out Validators, Modifiers and Normalizers.");
     }
 
-    protected OnStoreUpdated() {
+    protected OnStoreUpdated(): void {
         const newFormState = this.FormStore.GetState();
         const newFieldState = this.FormStore.GetField(this.FieldId);
 
@@ -202,7 +202,7 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
         }
     }
 
-    protected OnValueChange(newValue: FieldValue, processValue: boolean = true) {
+    protected OnValueChange(newValue: FieldValue, processValue: boolean = true): void {
         // Noop if the component is controlled from outside
         if (this.IsControlled) {
             return;
@@ -215,6 +215,14 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
         this.FormStore.UpdateFieldValue(this.FieldId, newValue);
     }
 
+    protected Focus(): void {
+        this.FormStore.SetActiveField(this.FieldId);
+    }
+
+    protected Blur(): void {
+        this.FormStore.SetActiveField(undefined);
+    }
+
     /**
      * ========================
      *  Abstract methods
@@ -251,7 +259,7 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
     /**
      * Registers a field in FormStore or throws if the field was already registered
      */
-    private registerFieldInFormStore() {
+    private registerFieldInFormStore(): void {
         if (this.FormStore.HasField(this.FieldId)) {
             throw new Error(`simplr-forms: Duplicate field id '${this.FieldId}'`);
         }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as Immutable from "immutable";
-import { recordify } from "typed-immutable-record";
+import { recordify, TypedRecord } from "typed-immutable-record";
 import { ActionEmitter } from "action-emitter";
 
 import * as Actions from "../actions/form-store";
@@ -25,7 +25,7 @@ import {
 } from "../contracts/form-store";
 import { FieldsGroupStateRecord } from "../contracts/fields-group";
 import { ConstructFormError } from "../utils/form-error-helpers";
-import { FormError, FormErrorRecord } from "../contracts/error";
+import { FormError, FormErrorRecord, FormErrorOrigin } from "../contracts/error";
 
 export class FormStore extends ActionEmitter {
     constructor(formId: string) {
@@ -194,7 +194,12 @@ export class FormStore extends ActionEmitter {
                 Touched: true
             } as FieldState));
 
-            return this.RecalculateDependentFormState(state);
+            state.Form = state.Form.merge({
+                SuccessfullySubmitted: false,
+                Error: undefined
+            } as FormState);
+
+            return this.RecalculateDependentFormStatuses(state);
         });
 
         this.emit(new Actions.ValueChanged(fieldId, newValue));
@@ -235,7 +240,7 @@ export class FormStore extends ActionEmitter {
                     Validating: false
                 } as FieldState));
 
-                return this.RecalculateDependentFormState(state);
+                return this.RecalculateDependentFormStatuses(state);
             });
         } catch (error) {
             // Skip validation if the value has changed again
@@ -244,7 +249,7 @@ export class FormStore extends ActionEmitter {
                 return;
             }
 
-            const formError = ConstructFormError(error);
+            const formError = ConstructFormError(error, FormErrorOrigin.Validation);
             if (formError == null) {
                 throw Error(error);
             }
@@ -256,11 +261,42 @@ export class FormStore extends ActionEmitter {
                     Error: recordify<FormError, FormErrorRecord>(formError!)
                 } as FieldState));
 
-                return this.RecalculateDependentFormState(state);
+                return this.RecalculateDependentFormStatuses(state);
             });
         }
     }
 
+    public SetActiveField(fieldId: string | undefined): void {
+        this.State = this.State.withMutations(state => {
+            if (fieldId == null) {
+                return state.Form.merge({
+                    ActiveFieldId: undefined
+                } as FormState);
+            }
+
+            const fieldState = this.State.Fields.get(fieldId);
+            if (fieldState == null) {
+                console.warn(`simplr-forms: Given field '${fieldId}' does not exist in form '${this.FormId}', `
+                    + `therefore field cannot be focused. Form.ActiveFieldId was reset to an undefined.`);
+                return state.Form.merge({
+                    ActiveFieldId: undefined
+                } as FormState);
+            }
+
+            state.Form = state.Form.merge({
+                ActiveFieldId: fieldId
+            } as FormState);
+
+            state.Fields = state.Fields.withMutations(fields => {
+                fields.set(fieldId, fieldState.merge({
+                    Touched: true
+                } as FieldState));
+            });
+
+            return this.RecalculateDependentFormStatuses(state);
+        });
+    }
+
     public async ValidateForm(validationPromise: Promise<never>): Promise<void> {
         const form = this.State.Form;
 
@@ -288,10 +324,10 @@ export class FormStore extends ActionEmitter {
                     Validating: false
                 } as FormState);
 
-                return this.RecalculateDependentFormState(state);
+                return this.RecalculateDependentFormStatuses(state);
             });
         } catch (error) {
-            const formError = ConstructFormError(error);
+            const formError = ConstructFormError(error, FormErrorOrigin.Validation);
             if (formError == null) {
                 throw Error(error);
             }
@@ -302,7 +338,7 @@ export class FormStore extends ActionEmitter {
                     Error: recordify<FormError, FormErrorRecord>(formError!)
                 } as FormState);
 
-                return this.RecalculateDependentFormState(state);
+                return this.RecalculateDependentFormStatuses(state);
             });
         }
     }
@@ -320,7 +356,7 @@ export class FormStore extends ActionEmitter {
             promise = result;
         } else {
             promise = new Promise<void>((resolve, reject) => {
-                const error = ConstructFormError(result);
+                const error = ConstructFormError(result, FormErrorOrigin.Submit);
                 if (error !== undefined) {
                     reject(result);
                     return;
@@ -334,24 +370,34 @@ export class FormStore extends ActionEmitter {
             state.Form = state.Form.merge({
                 Submitting: true
             } as FormState);
+            return state;
         });
-
         // Try submitting
         try {
             await promise;
             // No error and submitting -> false
             this.State = this.State.withMutations(state => {
                 state.Form = state.Form.merge({
                     Submitting: false,
+                    SuccessfullySubmitted: true,
                     Error: undefined
                 } as FormState);
+                return state;
             });
-        } catch (err) {
+        } catch (caughtError) {
+            // Set error origin
+            const constructedError = ConstructFormError(caughtError, FormErrorOrigin.Submit);
+            let error: FormErrorRecord;
+            if (constructedError != null) {
+                error = recordify<FormError, FormErrorRecord>(constructedError);
+            }
+
             // Error and submitting -> false
             this.State = this.State.withMutations(state => {
                 state.Form = state.Form.merge({
                     Submitting: false,
-                    Error: err
+                    SuccessfullySubmitted: false,
+                    Error: error
                 } as FormState);
             });
         }
@@ -380,7 +426,7 @@ export class FormStore extends ActionEmitter {
                 }
             });
 
-            return this.RecalculateDependentFormState(state);
+            return this.RecalculateDependentFormStatuses(state);
         });
     }
 
@@ -406,7 +452,7 @@ export class FormStore extends ActionEmitter {
                 }
             });
 
-            return this.RecalculateDependentFormState(state);
+            return this.RecalculateDependentFormStatuses(state);
         });
     }
 
@@ -490,7 +536,7 @@ export class FormStore extends ActionEmitter {
         return formStoreObject;
     }
 
-    protected RecalculateDependentFormState(formStoreState: FormStoreStateRecord): FormStoreStateRecord {
+    protected RecalculateDependentFormStatuses(formStoreState: FormStoreStateRecord): FormStoreStateRecord {
         let updater: FormStoreStateStatus = this.GetInitialStoreStatus();
 
         // TODO: might build curried function for more efficient checking.
@@ -664,7 +710,7 @@ export class FormStore extends ActionEmitter {
         return result;
     }
 
-    protected RemoveValues<T>(array: T[], valuesToRemove: T[], concat: boolean = true) {
+    protected RemoveValues<T>(array: T[], valuesToRemove: T[], concat: boolean = true): T[] {
         let result = concat ? array.concat() : array;
         for (const value of valuesToRemove) {
             let index;

packages/simplr-forms/src/utils/form-error-helpers.ts

@@ -1,16 +1,27 @@
-import { FormError } from "../contracts/error";
+import { FormError, FormErrorOrigin } from "../contracts/error";
 
 export function IsFormError(error: any): error is FormError {
     return (error != null && (error as FormError).Message != null);
 }
 
-export function ConstructFormError(error: any): FormError | undefined {
+export function ConstructFormError(error: any, origin: FormErrorOrigin): FormError | undefined {
     if (IsFormError(error)) {
+        if (error.Origin != null && error.Origin !== origin) {
+            console.warn(`simplr-forms: Given error contains property Origin, which is reserved and is always set by FormStore.`);
+        }
+        error.Origin = origin;
         return error;
     }
     if (typeof error === "string") {
         return {
-            Message: error
+            Message: error,
+            Origin: origin
+        };
+    }
+    if (error instanceof Error) {
+        return {
+            Message: error.message,
+            Origin: origin
         };
     }
     return undefined;

packages/simplr-forms/src/utils/value-helpers.ts

@@ -29,12 +29,12 @@ export function ProcessValue<TProcessor, TProcessedResult>(
         return value;
     }
 
-    const modifiers = components.filter(x => IsComponentOfType(x, processorTypeFunctionName));
+    const processors = components.filter(x => IsComponentOfType(x, processorTypeFunctionName));
 
-    const renderedModifiers = RenderComponents<TProcessor>(modifiers);
+    const renderedProcessors = RenderComponents<TProcessor>(processors);
 
-    for (const modifier of renderedModifiers) {
-        value = process(modifier, value);
+    for (const processor of renderedProcessors) {
+        value = process(processor, value);
     }
     return value;
 }

packages/simplr-forms/tools/webpack.config.ts

@@ -53,7 +53,7 @@ const externalsResolver = [
 
 module.exports = {
     entry: {
-        index: "./src/index.ts",
+        index: "./src/abstractions/index.ts",
         modifiers: "./src/modifiers/index.ts",
         normalizers: "./src/normalizers/index.ts",
         stores: "./src/stores/index.ts",