Merge pull request #104 from SimplrJS/master

DovydasNavickas · web-flow · commit c752cd138f2c · 2017-06-21T18:37:42.000+03:00
Master to dev (fixing tree)
diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json
diff --git a/packages/react-forms-dom/src/abstractions/base-dom-field.tsx b/packages/react-forms-dom/src/abstractions/base-dom-field.tsx
@@ -11,7 +11,7 @@ export type BaseDomFieldState = BaseFieldState;
 
 export abstract class BaseDomField<TProps extends DomFieldProps, TState extends BaseDomFieldState, TUnderlyingElement = any>
     extends BaseField<TProps, TState> {
-    public Element: TUnderlyingElement | undefined;
+    public Element: TUnderlyingElement | null;
 
     protected OnFocus = (event: React.FocusEvent<any>): void => {
         const props = this.props as DomFieldProps;
@@ -63,7 +63,7 @@ export abstract class BaseDomField<TProps extends DomFieldProps, TState extends
         return restProps;
     }
 
-    protected SetElementRef = (element: TUnderlyingElement | undefined): void => {
+    protected SetElementRef = (element: TUnderlyingElement | null): void => {
         this.Element = element;
     }
 
diff --git a/packages/react-forms-dom/src/abstractions/base-errors-container.ts b/packages/react-forms-dom/src/abstractions/base-errors-container.ts
@@ -0,0 +1,57 @@
+import * as Immutable from "immutable";
+import { BaseContainer, BaseContainerParentContext } from "@simplr/react-forms";
+import { FormStore } from "@simplr/react-forms/stores";
+import { FormError, FieldValidationStatus } from "@simplr/react-forms/contracts";
+
+export type BaseErrorsContainerProps = {};
+
+export type FieldErrors = Immutable.Map<string, FormError>;
+
+export interface BaseErrorsContainerState {
+    FieldErrors: FieldErrors;
+    FormError?: FormError;
+}
+
+export abstract class BaseErrorsContainer<TProps extends BaseErrorsContainerProps, TState extends BaseErrorsContainerState>
+    extends BaseContainer<TProps, TState> {
+    public state: TState = {
+        FieldErrors: Immutable.Map<string, FormError>()
+    } as TState;
+
+    protected OnStoreUpdated(): void {
+        const storeState = this.FormStore.GetState();
+
+        if (!storeState.HasError) {
+            this.setState(state => {
+                state.FieldErrors = Immutable.Map<string, FormError>();
+                state.FormError = undefined;
+                return state;
+            });
+            return;
+        }
+        const formError = storeState.Form.Error;
+        const fieldsWithError = storeState
+            .FieldsValidationStatuses
+            .filter(x => x != null && x === FieldValidationStatus.HasError)
+            .keySeq()
+            .toArray();
+
+        const fieldsErrors: { [id: string]: FormError } = {};
+
+        fieldsWithError.forEach(fieldId => {
+            const fieldError = storeState.Fields.get(fieldId).Error;
+            if (fieldError != null) {
+                fieldsErrors[fieldId] = fieldError;
+            }
+        });
+
+        this.setState(state => {
+            state.FormError = formError;
+            state.FieldErrors = Immutable.Map<string, FormError>(fieldsErrors);
+
+            return state;
+        });
+    }
+
+    public abstract render(): JSX.Element | null;
+}
diff --git a/packages/react-forms-dom/src/abstractions/index.ts b/packages/react-forms-dom/src/abstractions/index.ts
@@ -1,2 +1,3 @@
 export * from "./base-dom-field";
+export * from "./base-errors-container";
 export * from "./base-form-button";
diff --git a/packages/react-forms-dom/src/components/errors-container.ts b/packages/react-forms-dom/src/components/errors-container.ts
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { FormStore } from "@simplr/react-forms/stores";
+import { FormError, FieldValidationStatus } from "@simplr/react-forms/contracts";
+
+import {
+    BaseErrorsContainer,
+    BaseErrorsContainerState,
+    FieldErrors
+} from "../abstractions/base-errors-container";
+
+export type ErrorsTemplate = (fieldErrors: FieldErrors, formError: FormError | undefined, formStore: FormStore) => JSX.Element | null;
+
+export interface ErrorsContainerProps {
+    template: ErrorsTemplate;
+}
+
+export type ErrorsContainerState = BaseErrorsContainerState;
+
+export class ErrorsContainer extends BaseErrorsContainer<ErrorsContainerProps, ErrorsContainerState> {
+    public render(): JSX.Element | null {
+        return this.props.template(this.state.FieldErrors, this.state.FormError, this.FormStore);
+    }
+}
diff --git a/packages/react-forms-dom/src/components/fields-array.tsx b/packages/react-forms-dom/src/components/fields-array.tsx
@@ -14,9 +14,9 @@ interface Dictionary {
 }
 
 export class FieldsArray extends BaseFieldsArray<FieldsArrayProps, FieldsArrayState> {
-    public Element: HTMLDivElement | undefined;
+    public Element: HTMLDivElement | null;
 
-    protected SetElementRef = (element: HTMLDivElement | undefined): void => {
+    protected SetElementRef = (element: HTMLDivElement | null): void => {
         this.Element = element;
     }
 
diff --git a/packages/react-forms-dom/src/components/fields-group.tsx b/packages/react-forms-dom/src/components/fields-group.tsx
@@ -14,9 +14,9 @@ interface Dictionary {
 }
 
 export class FieldsGroup extends BaseFieldsGroup<FieldsGroupProps, FieldsGroupState> {
-    public Element: HTMLDivElement | undefined;
+    public Element: HTMLDivElement | null;
 
-    protected SetElementRef = (element: HTMLDivElement | undefined): void => {
+    protected SetElementRef = (element: HTMLDivElement | null): void => {
         this.Element = element;
     }
 
diff --git a/packages/react-forms-dom/src/components/form.tsx b/packages/react-forms-dom/src/components/form.tsx
@@ -4,9 +4,9 @@ import { BaseForm } from "@simplr/react-forms";
 import { FormProps } from "../contracts/form";
 
 export class Form extends BaseForm<FormProps, {}> {
-    public Element: HTMLFormElement | undefined;
+    public Element: HTMLFormElement | null;
 
-    protected SetElementRef = (element: HTMLFormElement | undefined) => {
+    protected SetElementRef = (element: HTMLFormElement | null) => {
         this.Element = element;
         if (this.FormStore != null && element != null) {
             this.FormStore.SetFormSubmitCallback(() => {
diff --git a/packages/react-forms-dom/src/components/radio.tsx b/packages/react-forms-dom/src/components/radio.tsx
@@ -34,7 +34,7 @@ export interface RadioState {
 export type RadioParentContext = RadioGroupChildContext & BaseContainerParentContext;
 
 export class Radio extends BaseContainer<RadioProps, RadioState> {
-    public Element: HTMLInputElement | undefined;
+    public Element: HTMLInputElement | null;
     public state: RadioState = {};
     public context: RadioParentContext;
 
@@ -139,7 +139,7 @@ export class Radio extends BaseContainer<RadioProps, RadioState> {
         return otherProps;
     }
 
-    protected SetElementRef = (element: HTMLInputElement | undefined) => {
+    protected SetElementRef = (element: HTMLInputElement | null) => {
         this.Element = element;
     }
 
diff --git a/packages/react-forms-dom/src/index.ts b/packages/react-forms-dom/src/index.ts
@@ -4,6 +4,7 @@ export * from "./components/reset";
 export * from "./components/clear";
 export * from "./components/fields-group";
 export * from "./components/fields-array";
+export * from "./components/errors-container";
 
 // Fields
 export * from "./components/text";
diff --git a/packages/react-forms/__tests__/stores/form-store.test.ts b/packages/react-forms/__tests__/stores/form-store.test.ts
@@ -5,6 +5,7 @@ import * as Sinon from "sinon";
 import { FormStore } from "../../src/stores/form-store";
 import { FormError } from "../../src/contracts/error";
 import { FieldStorePropsRecord, FieldStoreProps } from "../../src/contracts/field";
+import { FieldValidationStatus } from "../../src/contracts/validation";
 import { FormStoreHelpers } from "../../src/stores/form-store-helpers";
 
 import { MyFieldProps } from "../test-components/test-field";
@@ -429,6 +430,47 @@ describe("Form store", () => {
         });
     });
 
+    describe("FieldValidationStatuses", () => {
+        it("add field to list if it is validating", () => {
+            const fieldId = "field id";
+            formStore.RegisterField(fieldId, "field-name", "");
+            expect(formStore.GetState().FieldsValidationStatuses.has(fieldId)).toBe(false);
+
+            formStore.ValidateField(fieldId, new Promise<void>((resolve, reject) => {
+                reject("error message");
+            }));
+
+            const validationStatuses = formStore.GetState().FieldsValidationStatuses;
+
+            expect(validationStatuses.has(fieldId)).toBe(true);
+            expect(validationStatuses.get(fieldId)).toBe(FieldValidationStatus.Validating);
+        });
+
+        it("field validation status is error", async done => {
+            const fieldId = "field id";
+            try {
+                formStore.RegisterField(fieldId, "field-name", "");
+
+                const errorPromise = new Promise<void>((resolve, reject) => {
+                    reject("error message");
+                });
+
+                formStore.ValidateField(fieldId, errorPromise);
+                try {
+                    await errorPromise;
+                    // tslint:disable-next-line:no-empty
+                } catch (validationErr) { }
+
+                const validationStatuses = formStore.GetState().FieldsValidationStatuses;
+                expect(validationStatuses.get(fieldId)).toBe(FieldValidationStatus.HasError);
+
+                done();
+            } catch (error) {
+                done.fail(error);
+            }
+        });
+    });
+
     describe("action tests", () => {
         it("FieldBlurred action", async done => {
             try {
diff --git a/packages/react-forms/src/contracts/form-store.ts b/packages/react-forms/src/contracts/form-store.ts
@@ -4,10 +4,12 @@ import { TypedRecord } from "typed-immutable-record";
 import { FieldStoreStateRecord } from "../contracts/field";
 import { FieldsGroupStoreState } from "../contracts/fields-group";
 import { FormStateRecord } from "../contracts/form";
+import { FieldValidationStatus } from "./validation";
 
 export interface FormStoreState extends FormStoreStateStatus {
     Fields: Immutable.Map<string, FieldStoreStateRecord>;
     FieldsGroups: Immutable.Map<string, FieldsGroupStoreState>;
+    FieldsValidationStatuses: Immutable.Map<string, FieldValidationStatus>;
     Form: FormStateRecord;
 }
 
diff --git a/packages/react-forms/src/contracts/validation.ts b/packages/react-forms/src/contracts/validation.ts
@@ -5,3 +5,8 @@ export enum FieldValidationType {
     OnPropsChange = 1 << 3,
     OnBlur = 1 << 4
 }
+
+export enum FieldValidationStatus {
+    Validating = 8,
+    HasError = 16
+}
diff --git a/packages/react-forms/src/stores/form-store.ts b/packages/react-forms/src/stores/form-store.ts
@@ -28,6 +28,7 @@ import {
     FieldsGroupStoreState,
     FieldsGroupStoreStateRecord
 } from "../contracts/fields-group";
+import { FieldValidationStatus } from "../contracts/validation";
 import { ConstructFormError } from "../utils/form-error-helpers";
 import { FormError, FormErrorRecord, FormErrorOrigin } from "../contracts/error";
 import { ModifierValue } from "../contracts/value";
@@ -284,18 +285,19 @@ export class FormStore extends ActionEmitter {
         const field = this.State.Fields.get(fieldId);
         const fieldValue = field.Value;
 
-        // Skip if it's already validating
+        // If field is not validating
         if (!field.Validating) {
             this.State = this.State.withMutations(state => {
                 state.merge({
-                    Validating: true,
-                    HasError: false
+                    FieldsValidationStatuses: state.FieldsValidationStatuses.set(fieldId, FieldValidationStatus.Validating)
                 } as Partial<FormStoreState>);
                 const fieldState = state.Fields.get(fieldId);
                 state.Fields = state.Fields.set(fieldId, fieldState.merge({
                     Validating: true,
                     Error: undefined
                 } as FieldStoreState));
+
+                return this.RecalculateDependentFormStatuses(state);
             });
         }
 
@@ -311,6 +313,9 @@ export class FormStore extends ActionEmitter {
 
             this.State = this.State.withMutations(state => {
                 const fieldState = state.Fields.get(fieldId);
+                state.merge({
+                    FieldsValidationStatuses: state.FieldsValidationStatuses.delete(fieldId)
+                } as Partial<FormStoreState>);
                 state.Fields = state.Fields.set(fieldId, fieldState.merge({
                     Validating: false
                 } as FieldStoreState));
@@ -330,6 +335,10 @@ export class FormStore extends ActionEmitter {
             }
 
             this.State = this.State.withMutations(state => {
+                state.merge({
+                    FieldsValidationStatuses: state.FieldsValidationStatuses.set(fieldId, FieldValidationStatus.HasError)
+                } as Partial<FormStoreState>);
+
                 const fieldState = state.Fields.get(fieldId);
                 state.Fields = state.Fields.set(fieldId, fieldState.merge({
                     Validating: false,
@@ -429,18 +438,15 @@ export class FormStore extends ActionEmitter {
     public async ValidateForm(validationPromise: Promise<never>): Promise<void> {
         const form = this.State.Form;
 
-        // Skip if it's already validating
+        // If form is not validating
         if (!form.Validating) {
             this.State = this.State.withMutations(state => {
-                state.merge({
-                    Validating: true,
-                    HasError: false
-                } as Partial<FormStoreState>);
-
                 state.Form = state.Form.merge({
                     Validating: false,
                     Error: undefined
                 } as FormState);
+
+                return this.RecalculateDependentFormStatuses(state);
             });
         }
 
@@ -616,6 +622,7 @@ export class FormStore extends ActionEmitter {
     protected GetInitialFormStoreState(): FormStoreState {
         return {
             Fields: Immutable.Map<string, FieldStoreStateRecord>(),
+            FieldsValidationStatuses: Immutable.Map<string, FieldValidationStatus>(),
             FieldsGroups: Immutable.Map<string, FieldsGroupStoreStateRecord>(),
             Form: recordify<FormState, FormStateRecord>(this.GetInitialFormState()),
             // MUST be identical with GetInitialFieldState method.

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export type BaseDomFieldState = BaseFieldState;`
`11`	`11`
`12`	`12`	`export abstract class BaseDomField<TProps extends DomFieldProps, TState extends BaseDomFieldState, TUnderlyingElement = any>`
`13`	`13`	`extends BaseField<TProps, TState> {`
`14`		`- public Element: TUnderlyingElement \| undefined;`
	`14`	`+ public Element: TUnderlyingElement \| null;`
`15`	`15`
`16`	`16`	`protected OnFocus = (event: React.FocusEvent<any>): void => {`
`17`	`17`	`const props = this.props as DomFieldProps;`
`@@ -63,7 +63,7 @@ export abstract class BaseDomField<TProps extends DomFieldProps, TState extends`
`63`	`63`	`return restProps;`
`64`	`64`	`}`
`65`	`65`
`66`		`- protected SetElementRef = (element: TUnderlyingElement \| undefined): void => {`
	`66`	`+ protected SetElementRef = (element: TUnderlyingElement \| null): void => {`
`67`	`67`	`this.Element = element;`
`68`	`68`	`}`
`69`	`69`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export * from "./base-dom-field";`
	`2`	`+export * from "./base-errors-container";`
`2`	`3`	`export * from "./base-form-button";`
Original file line number	Diff line number	Diff line change
`@@ -14,9 +14,9 @@ interface Dictionary {`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`export class FieldsArray extends BaseFieldsArray<FieldsArrayProps, FieldsArrayState> {`
`17`		`- public Element: HTMLDivElement \| undefined;`
	`17`	`+ public Element: HTMLDivElement \| null;`
`18`	`18`
`19`		`- protected SetElementRef = (element: HTMLDivElement \| undefined): void => {`
	`19`	`+ protected SetElementRef = (element: HTMLDivElement \| null): void => {`
`20`	`20`	`this.Element = element;`
`21`	`21`	`}`
`22`	`22`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export interface RadioState {`
`34`	`34`	`export type RadioParentContext = RadioGroupChildContext & BaseContainerParentContext;`
`35`	`35`
`36`	`36`	`export class Radio extends BaseContainer<RadioProps, RadioState> {`
`37`		`- public Element: HTMLInputElement \| undefined;`
	`37`	`+ public Element: HTMLInputElement \| null;`
`38`	`38`	`public state: RadioState = {};`
`39`	`39`	`public context: RadioParentContext;`
`40`	`40`
`@@ -139,7 +139,7 @@ export class Radio extends BaseContainer<RadioProps, RadioState> {`
`139`	`139`	`return otherProps;`
`140`	`140`	`}`
`141`	`141`
`142`		`- protected SetElementRef = (element: HTMLInputElement \| undefined) => {`
	`142`	`+ protected SetElementRef = (element: HTMLInputElement \| null) => {`
`143`	`143`	`this.Element = element;`
`144`	`144`	`}`
`145`	`145`