Merge pull request #52 from SimplrJS/feature/fields-group and fields-array

DovydasNavickas · web-flow · commit c309a4d5e21c · 2017-05-16T23:26:47.000+03:00
Feature/fields group and fields array
diff --git a/packages/simplr-forms-dom/package.json b/packages/simplr-forms-dom/package.json
@@ -41,20 +41,20 @@
     "@types/webpack": "^2.2.15",
     "enzyme": "^2.8.0",
     "gulp": "github:gulpjs/gulp#4.0",
-    "jest": "^19.0.2",
+    "jest": "^20.0.1",
     "jest-enzyme": "^3.0.0",
     "mkdirp": "^0.5.1",
     "mv": "^2.1.1",
     "mz": "^2.6.0",
     "on-build-webpack": "^0.1.0",
     "react-dom": "^15.5.4",
     "react-test-renderer": "^15.5.4",
-    "simplr-mvdir": "0.0.1-beta.6",
+    "simplr-mvdir": "0.0.1-beta.7",
     "sinon": "^2.1.0",
-    "ts-jest": "^19.0.8",
+    "ts-jest": "^20.0.3",
     "ts-loader": "^2.0.3",
     "tslint": "^5.0.0",
-    "typescript": "2.3.0",
+    "typescript": "2.3.2",
     "webpack": "^2.4.1"
   },
   "dependencies": {
diff --git a/packages/simplr-forms-dom/src/abstractions/base-dom-field.tsx b/packages/simplr-forms-dom/src/abstractions/base-dom-field.tsx
@@ -7,7 +7,7 @@ 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>) => {
+    protected OnFocus = (event: React.FocusEvent<HTMLInputElement>): void => {
         const props = this.props as FieldProps;
         if (props.onFocus != null) {
             props.onFocus(event);
@@ -16,7 +16,7 @@ export abstract class BaseDomField<TProps extends FieldProps, TState extends Bas
         this.Focus();
     }
 
-    protected OnBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    protected OnBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
         const props = this.props as FieldProps;
         if (props.onBlur != null) {
             props.onBlur(event);
@@ -27,7 +27,7 @@ export abstract class BaseDomField<TProps extends FieldProps, TState extends Bas
 
     public abstract renderField(): JSX.Element | null;
 
-    public render() {
+    public render(): JSX.Element | null {
         // TODO: FieldTemplate
         return this.renderField();
     }
diff --git a/packages/simplr-forms-dom/src/components/clear.tsx b/packages/simplr-forms-dom/src/components/clear.tsx
@@ -41,7 +41,7 @@ export class Clear extends BaseContainer<ClearProps, ClearStateRecord> {
         return this.state.Submitting;
     }
 
-    protected OnButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    protected OnButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event): void => {
         event.persist();
         this.FormStore.ClearFields(this.props.fieldIds);
 
@@ -50,7 +50,7 @@ export class Clear extends BaseContainer<ClearProps, ClearStateRecord> {
         }
     }
 
-    render() {
+    render(): JSX.Element | null {
         // TODO: Pass all other props.
         return <button
             type="button"
diff --git a/packages/simplr-forms-dom/src/components/fields-array.tsx b/packages/simplr-forms-dom/src/components/fields-array.tsx
@@ -0,0 +1,43 @@
+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): void => {
+        this.Element = element;
+    }
+
+    protected HTMLProps(): {} {
+        const {
+            name,
+            index,
+            destroyOnUnmount,
+            children,
+            ...rest } = this.props;
+        return rest;
+    }
+
+    render(): JSX.Element | null {
+        return <div
+            ref={this.setElementRef}
+            {...this.HTMLProps() }
+        >
+            {this.props.children}
+        </div>;
+    }
+}
diff --git a/packages/simplr-forms-dom/src/components/fields-group.tsx b/packages/simplr-forms-dom/src/components/fields-group.tsx
@@ -0,0 +1,42 @@
+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): void => {
+        this.Element = element;
+    }
+
+    protected HTMLProps(): {} {
+        const {
+            name,
+            destroyOnUnmount,
+            children,
+            ...rest } = this.props;
+        return rest;
+    }
+
+    render(): JSX.Element | null {
+        return <div
+            ref={this.setElementRef}
+            {...this.HTMLProps() }
+        >
+            {this.props.children}
+        </div>;
+    }
+}
diff --git a/packages/simplr-forms-dom/src/components/form.tsx b/packages/simplr-forms-dom/src/components/form.tsx
@@ -41,7 +41,7 @@ export class Form extends BaseForm<FormProps, {}> {
         this.FormStore.SubmitForm(result);
     }
 
-    render() {
+    render(): JSX.Element | null {
         return <form
             ref={this.SetElementRef}
             onSubmit={this.FormSubmitHandler}
diff --git a/packages/simplr-forms-dom/src/components/reset.tsx b/packages/simplr-forms-dom/src/components/reset.tsx
@@ -41,7 +41,7 @@ export class Reset extends BaseContainer<ResetProps, ResetStateRecord> {
         return this.state.Submitting;
     }
 
-    protected OnButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    protected OnButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event): void => {
         event.persist();
         this.FormStore.ResetFields(this.props.fieldIds);
 
@@ -50,7 +50,7 @@ export class Reset extends BaseContainer<ResetProps, ResetStateRecord> {
         }
     }
 
-    render() {
+    render(): JSX.Element | null {
         // TODO: Pass all other props.
         return <button
             type="button"
diff --git a/packages/simplr-forms-dom/src/components/submit.tsx b/packages/simplr-forms-dom/src/components/submit.tsx
@@ -102,7 +102,7 @@ export class Submit extends BaseContainer<SubmitProps, SubmitStateRecord> {
                 this.state.Submitting);
     }
 
-    protected get InlineStyles() {
+    protected get InlineStyles(): React.CSSProperties {
         let inlineStyles: React.CSSProperties = {};
 
         if (this.props.style != null) {
@@ -116,7 +116,7 @@ export class Submit extends BaseContainer<SubmitProps, SubmitStateRecord> {
         return inlineStyles;
     }
 
-    render() {
+    render(): JSX.Element | null {
         return <button
             type="submit"
             disabled={this.Disabled}
diff --git a/packages/simplr-forms-dom/src/index.ts b/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";
diff --git a/packages/simplr-forms/__tests__/abstractions/base-fields-group.test.tsx b/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", () => {
+
+    });
+});
diff --git a/packages/simplr-forms/src/abstractions/base-fields-array.ts b/packages/simplr-forms/src/abstractions/base-fields-array.ts
@@ -0,0 +1,59 @@
+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() {
+        const idBase = `${this.props.name}[${this.props.index}]`;
+        this.FieldsArrayId = this.FormStore.GetFieldsGroupId(idBase, 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);
+    }
+}
diff --git a/packages/simplr-forms/src/abstractions/base-fields-group.ts b/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);
+    }
+}
diff --git a/packages/simplr-forms/src/abstractions/core-field.ts b/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,
diff --git a/packages/simplr-forms/src/abstractions/index.ts b/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";
diff --git a/packages/simplr-forms/src/actions/form-store.ts b/packages/simplr-forms/src/actions/form-store.ts
diff --git a/packages/simplr-forms/src/contracts/field.ts b/packages/simplr-forms/src/contracts/field.ts
diff --git a/packages/simplr-forms/src/contracts/fields-array.ts b/packages/simplr-forms/src/contracts/fields-array.ts
diff --git a/packages/simplr-forms/src/contracts/fields-group.ts b/packages/simplr-forms/src/contracts/fields-group.ts
diff --git a/packages/simplr-forms/src/contracts/form-store.ts b/packages/simplr-forms/src/contracts/form-store.ts
diff --git a/packages/simplr-forms/src/contracts/index.ts b/packages/simplr-forms/src/contracts/index.ts
diff --git a/packages/simplr-forms/src/stores/form-store.ts b/packages/simplr-forms/src/stores/form-store.ts

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export class Clear extends BaseContainer<ClearProps, ClearStateRecord> {`
`41`	`41`	`return this.state.Submitting;`
`42`	`42`	`}`
`43`	`43`
`44`		`- protected OnButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {`
	`44`	`+ protected OnButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event): void => {`
`45`	`45`	`event.persist();`
`46`	`46`	`this.FormStore.ClearFields(this.props.fieldIds);`
`47`	`47`
`@@ -50,7 +50,7 @@ export class Clear extends BaseContainer<ClearProps, ClearStateRecord> {`
`50`	`50`	`}`
`51`	`51`	`}`
`52`	`52`
`53`		`- render() {`
	`53`	`+ render(): JSX.Element \| null {`
`54`	`54`	`// TODO: Pass all other props.`
`55`	`55`	`return <button`
`56`	`56`	`type="button"`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export class Form extends BaseForm<FormProps, {}> {`
`41`	`41`	`this.FormStore.SubmitForm(result);`
`42`	`42`	`}`
`43`	`43`
`44`		`- render() {`
	`44`	`+ render(): JSX.Element \| null {`
`45`	`45`	`return <form`
`46`	`46`	`ref={this.SetElementRef}`
`47`	`47`	`onSubmit={this.FormSubmitHandler}`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export class Reset extends BaseContainer<ResetProps, ResetStateRecord> {`
`41`	`41`	`return this.state.Submitting;`
`42`	`42`	`}`
`43`	`43`
`44`		`- protected OnButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {`
	`44`	`+ protected OnButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event): void => {`
`45`	`45`	`event.persist();`
`46`	`46`	`this.FormStore.ResetFields(this.props.fieldIds);`
`47`	`47`
`@@ -50,7 +50,7 @@ export class Reset extends BaseContainer<ResetProps, ResetStateRecord> {`
`50`	`50`	`}`
`51`	`51`	`}`
`52`	`52`
`53`		`- render() {`
	`53`	`+ render(): JSX.Element \| null {`
`54`	`54`	`// TODO: Pass all other props.`
`55`	`55`	`return <button`
`56`	`56`	`type="button"`
Original file line number	Diff line number	Diff line change
`@@ -102,7 +102,7 @@ export class Submit extends BaseContainer<SubmitProps, SubmitStateRecord> {`
`102`	`102`	`this.state.Submitting);`
`103`	`103`	`}`
`104`	`104`
`105`		`- protected get InlineStyles() {`
	`105`	`+ protected get InlineStyles(): React.CSSProperties {`
`106`	`106`	`let inlineStyles: React.CSSProperties = {};`
`107`	`107`
`108`	`108`	`if (this.props.style != null) {`
`@@ -116,7 +116,7 @@ export class Submit extends BaseContainer<SubmitProps, SubmitStateRecord> {`
`116`	`116`	`return inlineStyles;`
`117`	`117`	`}`
`118`	`118`
`119`		`- render() {`
	`119`	`+ render(): JSX.Element \| null {`
`120`	`120`	`return <button`
`121`	`121`	`type="submit"`
`122`	`122`	`disabled={this.Disabled}`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +describe("Fields Group Base", () => {
 +    xit("throws when registering an already existing id", () => {
++
 +    });
 +});