ActiveFieldId resetting fixed.

DovydasNavickas · DovydasNavickas · commit 1ee7ff74066f · 2017-05-16T23:26:04.000+03:00
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
@@ -18,24 +18,21 @@ interface Dictionary {
 export class FieldsArray extends BaseFieldsArray<FieldsArrayProps, FieldsArrayState> {
     public Element: HTMLDivElement;
 
-    private setElementRef = (element: HTMLDivElement) => {
+    private setElementRef = (element: HTMLDivElement): void => {
         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;
+    protected HTMLProps(): {} {
+        const {
+            name,
+            index,
+            destroyOnUnmount,
+            children,
+            ...rest } = this.props;
+        return rest;
     }
 
-    render() {
+    render(): JSX.Element | null {
         return <div
             ref={this.setElementRef}
             {...this.HTMLProps() }
diff --git a/packages/simplr-forms-dom/src/components/fields-group.tsx b/packages/simplr-forms-dom/src/components/fields-group.tsx
@@ -18,24 +18,20 @@ interface Dictionary {
 export class FieldsGroup extends BaseFieldsGroup<FieldsGroupProps, FieldsGroupState> {
     public Element: HTMLDivElement;
 
-    private setElementRef = (element: HTMLDivElement) => {
+    private setElementRef = (element: HTMLDivElement): void => {
         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;
+    protected HTMLProps(): {} {
+        const {
+            name,
+            destroyOnUnmount,
+            children,
+            ...rest } = this.props;
+        return rest;
     }
 
-    render() {
+    render(): JSX.Element | null {
         return <div
             ref={this.setElementRef}
             {...this.HTMLProps() }
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/src/abstractions/base-fields-array.ts b/packages/simplr-forms/src/abstractions/base-fields-array.ts
@@ -48,7 +48,8 @@ export class BaseFieldsArray<TProps extends FieldsArrayProps,
     }
 
     componentWillMount() {
-        this.FieldsArrayId = this.FormStore.GetFieldsGroupId(`${this.props.name}${this.props.index}`, this.context.FieldsGroupId);
+        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}'.`);
         }
diff --git a/packages/simplr-forms/src/actions/form-store.ts b/packages/simplr-forms/src/actions/form-store.ts
@@ -5,39 +5,39 @@ export class StateChanged { }
 export class FieldRegistered {
     constructor(private fieldId: string) { }
 
-    public get FieldId() {
+    public get FieldId(): string {
         return this.fieldId;
     }
 }
 
 export class FieldsGroupRegistered {
     constructor(private fieldsGroupId: string) { }
 
-    public get FieldsGroupId() {
+    public get FieldsGroupId(): string {
         return this.fieldsGroupId;
     }
 }
 
 export class FieldsArrayRegistered {
     constructor(private fieldsGroupId: string) { }
 
-    public get FieldsArrayId() {
+    public get FieldsArrayId(): string {
         return this.fieldsGroupId;
     }
 }
 
 export class ValueChanged {
     constructor(private fieldId: string) { }
 
-    public get FieldId() {
+    public get FieldId(): string {
         return this.fieldId;
     }
 }
 
 export class FieldPropsChanged {
     constructor(private fieldId: string) { }
 
-    public get FieldId() {
+    public get FieldId(): string {
         return this.fieldId;
     }
 }
diff --git a/packages/simplr-forms/src/contracts/fields-array.ts b/packages/simplr-forms/src/contracts/fields-array.ts
@@ -5,9 +5,9 @@ import { FieldsGroupPropsObject } from "./fields-group";
 export interface FieldsArrayProps {
     name: string;
     index: number;
+    destroyOnUnmount?: boolean;
 }
 
-export interface FieldsArrayState {
-}
+export interface FieldsArrayState { }
 
 export interface FieldsArrayPropsObject { }
diff --git a/packages/simplr-forms/src/contracts/fields-group.ts b/packages/simplr-forms/src/contracts/fields-group.ts
@@ -3,6 +3,7 @@ import { FormContextPropsObject } from "./form";
 
 export interface FieldsGroupProps {
     name: string;
+    destroyOnUnmount?: boolean;
 }
 
 export interface FieldsGroupState { }
diff --git a/packages/simplr-forms/src/stores/form-store.ts b/packages/simplr-forms/src/stores/form-store.ts
@@ -32,6 +32,8 @@ import { FormError, FormErrorRecord, FormErrorOrigin } from "../contracts/error"
 
 export const FG_SEPARATOR = ".";
 
+export type Dictionary<TItem = any> = { [key: string]: TItem };
+
 export class FormStore extends ActionEmitter {
     constructor(formId: string) {
         super();
@@ -100,7 +102,7 @@ export class FormStore extends ActionEmitter {
         fieldsGroupId?: string
     ): void {
         // Construct field state
-        let fieldState = {
+        const fieldState: FieldStoreState = {
             Name: name,
             // Set default value without fallbacks
             DefaultValue: defaultValue,
@@ -112,7 +114,7 @@ export class FormStore extends ActionEmitter {
             Error: undefined,
             FieldsGroup: undefined,
             Props: undefined
-        } as FieldStoreState;
+        };
 
 
         // (initialValue) (value)
@@ -158,10 +160,10 @@ export class FormStore extends ActionEmitter {
     }
 
     public RegisterFieldsGroup(id: string, name: string, parentId?: string): void {
-        const fgState = {
+        const fgState: FieldsGroupStoreState = {
             Name: name,
             Parent: parentId
-        } as FieldsGroupStoreState;
+        };
 
         const fgStateRecord = recordify<FieldsGroupStoreState, FieldsGroupStoreStateRecord>(fgState);
         this.State = this.State.withMutations(state => {
@@ -172,11 +174,11 @@ export class FormStore extends ActionEmitter {
     }
 
     public RegisterFieldsArray(id: string, name: string, index: number, parentId?: string): void {
-        const fgState = {
+        const fgState: FieldsGroupStoreState = {
             Name: name,
             ArrayName: name,
             Parent: parentId
-        } as FieldsGroupStoreState;
+        };
 
         const fgStateRecord = recordify<FieldsGroupStoreState, FieldsGroupStoreStateRecord>(fgState);
         this.State = this.State.withMutations(state => {
@@ -326,29 +328,30 @@ export class FormStore extends ActionEmitter {
     public SetActiveField(fieldId: string | undefined): void {
         this.State = this.State.withMutations(state => {
             if (fieldId == null) {
-                return state.Form.merge({
+                state.Form = state.Form.merge({
                     ActiveFieldId: undefined
                 } as FormState);
+                return state;
             }
 
             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({
+                // Reset ActiveFieldId to an undefined
+                state.Form = state.Form.merge({
                     ActiveFieldId: undefined
                 } as FormState);
+                return state;
             }
 
             state.Form = state.Form.merge({
                 ActiveFieldId: fieldId
             } as FormState);
 
-            state.Fields = state.Fields.withMutations(fields => {
-                fields.set(fieldId, fieldState.merge({
-                    Touched: true
-                } as FieldStoreState));
-            });
+            state.Fields = state.Fields.set(fieldId, fieldState.merge({
+                Touched: true
+            } as FieldStoreState));
 
             return this.RecalculateDependentFormStatuses(state);
         });
@@ -564,8 +567,8 @@ export class FormStore extends ActionEmitter {
         } as FormStoreStateStatus;
     }
 
-    protected BuildFormObject(fieldsGroupId?: string): { [key: string]: any } {
-        const result: { [key: string]: any } = {};
+    protected BuildFormObject(fieldsGroupId?: string): Dictionary {
+        const result: Dictionary = {};
 
         const groupFields = this.State.Fields.filter(x =>
             x != null &&

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 number	Diff line change
`@@ -48,7 +48,8 @@ export class BaseFieldsArray<TProps extends FieldsArrayProps,`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`componentWillMount() {`
`51`		- this.FieldsArrayId = this.FormStore.GetFieldsGroupId(`${this.props.name}${this.props.index}`, this.context.FieldsGroupId);
	`51`	+ const idBase = `${this.props.name}[${this.props.index}]`;
	`52`	`+ this.FieldsArrayId = this.FormStore.GetFieldsGroupId(idBase, this.context.FieldsGroupId);`
`52`	`53`	`if (this.FormStore.GetState().FieldsGroups.has(this.FieldsArrayId)) {`
`53`	`54`	throw new Error(`simplr-forms: FieldsArray '${this.FieldsArrayId}' already exists in form '${this.FormId}'.`);
`54`	`55`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,39 +5,39 @@ export class StateChanged { }`
`5`	`5`	`export class FieldRegistered {`
`6`	`6`	`constructor(private fieldId: string) { }`
`7`	`7`
`8`		`- public get FieldId() {`
	`8`	`+ public get FieldId(): string {`
`9`	`9`	`return this.fieldId;`
`10`	`10`	`}`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`export class FieldsGroupRegistered {`
`14`	`14`	`constructor(private fieldsGroupId: string) { }`
`15`	`15`
`16`		`- public get FieldsGroupId() {`
	`16`	`+ public get FieldsGroupId(): string {`
`17`	`17`	`return this.fieldsGroupId;`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`export class FieldsArrayRegistered {`
`22`	`22`	`constructor(private fieldsGroupId: string) { }`
`23`	`23`
`24`		`- public get FieldsArrayId() {`
	`24`	`+ public get FieldsArrayId(): string {`
`25`	`25`	`return this.fieldsGroupId;`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`export class ValueChanged {`
`30`	`30`	`constructor(private fieldId: string) { }`
`31`	`31`
`32`		`- public get FieldId() {`
	`32`	`+ public get FieldId(): string {`
`33`	`33`	`return this.fieldId;`
`34`	`34`	`}`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`export class FieldPropsChanged {`
`38`	`38`	`constructor(private fieldId: string) { }`
`39`	`39`
`40`		`- public get FieldId() {`
	`40`	`+ public get FieldId(): string {`
`41`	`41`	`return this.fieldId;`
`42`	`42`	`}`
`43`	`43`	`}`