Component: ErrorsContainer and BaseErrorsContainer (#103)

* Updated npm shrinkwrap. * Added FieldValidationStatus. * Added tests for FIeldsValidationStatuses. * Added BaseErrorsContainer and ErrorsContainer. * Updated SetElementRef. * From Dictionary to Immutable.Map.

Author: Martynas Žilinskas

common/config/rush/npm-shrinkwrap.json

@@ -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;
  }
 

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

@@ -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;
+}

packages/react-forms-dom/src/abstractions/base-errors-container.ts

@@ -1,2 +1,3 @@
 export * from "./base-dom-field";
+export * from "./base-errors-container";
 export * from "./base-form-button";

packages/react-forms-dom/src/abstractions/index.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);
+ }
+}

packages/react-forms-dom/src/components/errors-container.ts

@@ -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;
  }
 

packages/react-forms-dom/src/components/fields-array.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;
  }
 

packages/react-forms-dom/src/components/fields-group.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(() => {

packages/react-forms-dom/src/components/form.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;
  }
 

packages/react-forms-dom/src/components/radio.tsx

@@ -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";