FieldsGroup and FieldsArray implemented.

Author: DovydasNavickas

packages/simplr-forms-dom/src/components/fields-array.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import {
+    FieldsArrayProps as CoreProps,
+    FieldsArrayState as CoreState
+} from "simplr-forms/contracts";
+import { BaseFieldsArray } from "simplr-forms";
+
+export interface FieldsArrayProps extends CoreProps {
+}
+
+export interface FieldsArrayState extends CoreState {
+}
+
+interface Dictionary {
+    [key: string]: any;
+}
+
+export class FieldsArray extends BaseFieldsArray<FieldsArrayProps, FieldsArrayState> {
+    public Element: HTMLDivElement;
+
+    private setElementRef = (element: HTMLDivElement) => {
+        this.Element = element;
+    }
+
+    protected HTMLProps() {
+        let notHTMLProps = ["name", "index", "destroyOnUnmount"];
+        let newProps: { [id: string]: any } = {};
+
+        for (let key in this.props) {
+            if ((this.props as Dictionary)[key] != null && notHTMLProps.indexOf(key) === -1) {
+                newProps[key] = (this.props as Dictionary)[key];
+            }
+        }
+
+        return newProps;
+    }
+
+    render() {
+        return <div
+            ref={this.setElementRef}
+            {...this.HTMLProps() }
+        >
+            {this.props.children}
+        </div>;
+    }
+}

packages/simplr-forms-dom/src/components/fields-group.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import {
+    FieldsGroupProps as CoreProps,
+    FieldsGroupState as CoreState
+} from "simplr-forms/contracts";
+import { BaseFieldsGroup } from "simplr-forms";
+
+export interface FieldsGroupProps extends CoreProps {
+}
+
+export interface FieldsGroupState extends CoreState {
+}
+
+interface Dictionary {
+    [key: string]: any;
+}
+
+export class FieldsGroup extends BaseFieldsGroup<FieldsGroupProps, FieldsGroupState> {
+    public Element: HTMLDivElement;
+
+    private setElementRef = (element: HTMLDivElement) => {
+        this.Element = element;
+    }
+
+    protected HTMLProps() {
+        let notHTMLProps = ["name", "destroyOnUnmount"];
+        let newProps: { [id: string]: any } = {};
+
+        for (let key in this.props) {
+            if ((this.props as Dictionary)[key] != null && notHTMLProps.indexOf(key) === -1) {
+                newProps[key] = (this.props as Dictionary)[key];
+            }
+        }
+
+        return newProps;
+    }
+
+    render() {
+        return <div
+            ref={this.setElementRef}
+            {...this.HTMLProps() }
+        >
+            {this.props.children}
+        </div>;
+    }
+}

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

@@ -3,3 +3,5 @@ export * from "./components/text";
 export * from "./components/submit";
 export * from "./components/reset";
 export * from "./components/clear";
+export * from "./components/fields-group";
+export * from "./components/fields-array";

packages/simplr-forms/__tests__/abstractions/base-fields-group.test.tsx

@@ -0,0 +1,5 @@
+describe("Fields Group Base", () => {
+    xit("throws when registering an already existing id", () => {
+
+    });
+});

packages/simplr-forms/src/abstractions/base-fields-array.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import {
+    FieldsArrayProps,
+    FieldsArrayState,
+    FieldsArrayPropsObject
+} from "../contracts/fields-array";
+import { FieldsGroupChildContext } from "../contracts/fields-group";
+import { FieldContext } from "../contracts/field";
+import { FSHContainer } from "../stores/form-stores-handler";
+import { FormStore } from "../stores/form-store";
+import * as PropTypes from "prop-types";
+
+export class BaseFieldsArray<TProps extends FieldsArrayProps,
+    TState extends FieldsArrayState>
+    extends React.Component<TProps, TState> {
+
+    public context: FieldContext;
+    protected FieldsArrayId: string;
+    protected get FieldsArrayPropsContext(): FieldsArrayPropsObject {
+        return {};
+    }
+
+    static contextTypes: PropTypes.ValidationMap<FieldContext> = {
+        FormId: PropTypes.string,
+        FormProps: PropTypes.object,
+        FieldsGroupId: PropTypes.string,
+        FieldsGroupProps: PropTypes.object
+    };
+
+    protected get FormId(): string {
+        return this.context.FormId;
+    }
+
+    protected get FormStore(): FormStore {
+        return FSHContainer.FormStoresHandler.GetStore(this.FormId);
+    }
+
+    static childContextTypes: PropTypes.ValidationMap<FieldsGroupChildContext> = {
+        FieldsGroupId: PropTypes.string,
+        FieldsGroupProps: PropTypes.object
+    };
+
+    getChildContext(): FieldsGroupChildContext {
+        return {
+            FieldsGroupId: this.FieldsArrayId,
+            FieldsGroupProps: this.FieldsArrayPropsContext
+        };
+    }
+
+    componentWillMount() {
+        this.FieldsArrayId = this.FormStore.GetFieldsGroupId(`${this.props.name}${this.props.index}`, this.context.FieldsGroupId);
+        if (this.FormStore.GetState().FieldsGroups.has(this.FieldsArrayId)) {
+            throw new Error(`simplr-forms: FieldsArray '${this.FieldsArrayId}' already exists in form '${this.FormId}'.`);
+        }
+
+        this.FormStore.RegisterFieldsArray(this.FieldsArrayId, this.props.name, this.props.index, this.context.FieldsGroupId);
+    }
+}

packages/simplr-forms/src/abstractions/base-fields-group.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import {
+    FieldsGroupProps,
+    FieldsGroupState,
+    FieldsGroupChildContext,
+    FieldsGroupPropsObject
+} from "../contracts/fields-group";
+import { FieldContext } from "../contracts/field";
+import { FSHContainer } from "../stores/form-stores-handler";
+import { FormStore } from "../stores/form-store";
+import * as PropTypes from "prop-types";
+
+export class BaseFieldsGroup<TProps extends FieldsGroupProps,
+    TState extends FieldsGroupState>
+    extends React.Component<TProps, TState> {
+
+    public context: FieldContext;
+    protected FieldsGroupId: string;
+    protected get FieldsGroupPropsContext(): FieldsGroupPropsObject {
+        return {};
+    }
+
+    static contextTypes: PropTypes.ValidationMap<FieldContext> = {
+        FormId: PropTypes.string,
+        FormProps: PropTypes.object,
+        FieldsGroupId: PropTypes.string,
+        FieldsGroupProps: PropTypes.object
+    };
+
+    protected get FormId(): string {
+        return this.context.FormId;
+    }
+
+    protected get FormStore(): FormStore {
+        return FSHContainer.FormStoresHandler.GetStore(this.FormId);
+    }
+
+    static childContextTypes: PropTypes.ValidationMap<FieldsGroupChildContext> = {
+        FieldsGroupId: PropTypes.string,
+        FieldsGroupProps: PropTypes.object
+    };
+
+    getChildContext(): FieldsGroupChildContext {
+        return {
+            FieldsGroupId: this.FieldsGroupId,
+            FieldsGroupProps: this.FieldsGroupPropsContext
+        };
+    }
+
+    componentWillMount() {
+        this.FieldsGroupId = this.FormStore.GetFieldsGroupId(this.props.name, this.context.FieldsGroupId);
+        if (this.FormStore.GetState().FieldsGroups.has(this.FieldsGroupId)) {
+            throw new Error(`simplr-forms: FieldsGroup '${this.FieldsGroupId}' already exists in form '${this.FormId}'.`);
+        }
+
+        this.FormStore.RegisterFieldsGroup(this.FieldsGroupId, this.props.name, this.context.FieldsGroupId);
+    }
+}

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

@@ -8,7 +8,8 @@ import {
     FieldFormatValueCallback,
     FieldNormalizeValueCallback,
     FieldParseValueCallback,
-    FieldStateRecord
+    FieldStoreStateRecord,
+    FieldContext
 } from "../contracts/field";
 import * as ValueHelpers from "../utils/value-helpers";
 import { FormContextPropsObject } from "../contracts/form";
@@ -20,28 +21,20 @@ import { FSHContainer } from "../stores/form-stores-handler";
 import { FieldValidationType } from "../contracts/validation";
 
 export interface CoreFieldState {
-    Field?: FieldStateRecord;
+    Field?: FieldStoreStateRecord;
     Form?: FormStoreStateRecord;
     Value?: FieldValue;
 }
 
-export interface ParentContext {
-    FormId: string;
-    FormProps: FormContextPropsObject;
-    FieldsGroupId: string;
-    // FieldsGroupProps: FieldsGroupContextProps;
-}
-
-
 export abstract class CoreField<TProps extends CoreFieldProps, TState extends CoreFieldState>
     extends React.Component<TProps, TState> {
-    public context: ParentContext;
+    public context: FieldContext;
 
-    static contextTypes: PropTypes.ValidationMap<ParentContext> = {
+    static contextTypes: PropTypes.ValidationMap<FieldContext> = {
         FormId: PropTypes.string,
         FormProps: PropTypes.object,
         FieldsGroupId: PropTypes.string,
-        // FieldsGroupProps: PropTypes.object
+        FieldsGroupProps: PropTypes.object
     };
 
     static defaultProps: CoreFieldProps = {
@@ -269,6 +262,7 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
         const value = this.ProcessValueBeforeStore(this.RawValue);
         this.FormStore.RegisterField(
             this.FieldId,
+            this.props.name,
             defaultValue,
             initialValue,
             value,

packages/simplr-forms/src/abstractions/index.ts

@@ -2,3 +2,5 @@ export * from "./core-field";
 export * from "./base-field";
 export * from "./base-form";
 export * from "./base-container";
+export * from "./base-fields-group";
+export * from "./base-fields-array";

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

@@ -3,27 +3,35 @@ import { FieldValue } from "../contracts/field";
 export class StateChanged { }
 
 export class FieldRegistered {
-    constructor(private fieldId: string, private initialValue: FieldValue) { }
+    constructor(private fieldId: string) { }
 
     public get FieldId() {
         return this.fieldId;
     }
+}
+
+export class FieldsGroupRegistered {
+    constructor(private fieldsGroupId: string) { }
+
+    public get FieldsGroupId() {
+        return this.fieldsGroupId;
+    }
+}
+
+export class FieldsArrayRegistered {
+    constructor(private fieldsGroupId: string) { }
 
-    public get InitialValue() {
-        return this.initialValue;
+    public get FieldsArrayId() {
+        return this.fieldsGroupId;
     }
 }
 
 export class ValueChanged {
-    constructor(private fieldId: string, private newValue: FieldValue) { }
+    constructor(private fieldId: string) { }
 
     public get FieldId() {
         return this.fieldId;
     }
-
-    public get NewValue() {
-        return this.newValue;
-    }
 }
 
 export class FieldPropsChanged {

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

@@ -1,6 +1,8 @@
 import { TypedRecord } from "typed-immutable-record";
 import { FormErrorRecord } from "./error";
 import { FieldValidationType } from "./validation";
+import { FormContextPropsObject } from "./form";
+import { FieldsGroupContextProps } from "./fields-group";
 
 // Field value can be of any type or undefined
 export type FieldValue = any | undefined;
@@ -26,7 +28,8 @@ export interface FieldProps extends CoreFieldProps {
     value?: FieldValue;
 }
 
-export interface FieldState {
+export interface FieldStoreState {
+    Name: string;
     DefaultValue: FieldValue;
     InitialValue: FieldValue;
     Value: FieldValue;
@@ -37,10 +40,18 @@ export interface FieldState {
     FieldsGroup?: {
         Id: string;
     };
-    Props?: FieldStatePropsRecord;
+    Props?: FieldStorePropsRecord;
 }
 
-export type FieldStateProps = CoreFieldProps & React.Props<any>;
+export type FieldStoreProps = CoreFieldProps & React.Props<any>;
 
-export interface FieldStateRecord extends TypedRecord<FieldStateRecord>, FieldState { }
-export interface FieldStatePropsRecord extends TypedRecord<FieldStatePropsRecord>, FieldStateProps { }
+export interface FieldStoreStateRecord extends TypedRecord<FieldStoreStateRecord>, FieldStoreState { }
+
+export interface FieldStorePropsRecord extends TypedRecord<FieldStorePropsRecord>, FieldStoreProps { }
+
+export interface FieldContext {
+    FormId: string;
+    FormProps: FormContextPropsObject;
+    FieldsGroupId: string;
+    FieldsGroupProps: FieldsGroupContextProps;
+}