Form Touched, UpdateFieldProps custom diffing added.

Author: DovydasNavickas

packages/simplr-forms-core/package.json

@@ -1,82 +1,82 @@
-{
-  "name": "simplr-forms-core",
-  "version": "4.0.0-pre-alpha.18",
-  "description": "Shared simplr-forms logic.",
-  "repository": "SimplrJS/simplr-forms",
-  "homepage": "https://github.com/SimplrJS/simplr-forms",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "author": "simplrjs <[email protected]> (https://github.com/simplrjs)",
-  "scripts": {
-    "build": "webpack && npm run tslint",
-    "watch": "webpack -w",
-    "tslint": "tslint --config ./tslint.json --project . --exclude __tests__/**/* && echo TsLint test successfully passed.",
-    "uglifyjs": "uglifyjs ./dist/simplr-forms-core.js -o ./dist/simplr-forms-core.min.js --compress --mangle",
-    "release": "npm run build && npm run uglifyjs",
-    "test": "jest",
-    "test-watch": "jest --watchAll",
-    "test-coverage": "npm test -- --coverage",
-    "gulp-build": "tsc -p ./tools/tsconfig.gulp.json",
-    "gulp-watch": "npm run gulp-build -- -w"
-  },
-  "license": "AGPL-3.0",
-  "files": [
-    "**/*.md",
-    "*.js",
-    "**/*.d.ts",
-    "!*.config.js",
-    "!gulpfile.js",
-    "!node_modules/**"
-  ],
-  "devDependencies": {
-    "@types/chokidar": "^1.6.0",
-    "@types/enzyme": "^2.7.9",
-    "@types/gulp": "^4.0.2",
-    "@types/jest": "^19.2.2",
-    "@types/sinon": "^2.1.2",
-    "@types/undertaker": "^0.12.28",
-    "@types/vinyl-fs": "^2.4.5",
-    "@types/webpack": "^2.2.15",
-    "enzyme": "^2.8.2",
-    "gulp": "github:gulpjs/gulp#4.0",
-    "jest": "^19.0.2",
-    "jest-enzyme": "^3.0.1",
-    "on-build-webpack": "^0.1.0",
-    "react-dom": "^15.5.4",
-    "react-test-renderer": "^15.5.4",
-    "simplr-mvdir": "0.0.1-beta.7",
-    "sinon": "^2.1.0",
-    "ts-jest": "^19.0.10",
-    "ts-loader": "^2.0.3",
-    "tslint": "^5.1.0",
-    "typescript": "2.3.0",
-    "uglify-js": "^2.8.22",
-    "webpack": "^2.4.1"
-  },
-  "dependencies": {
-    "@types/fbemitter": "^2.0.32",
-    "@types/flux": "^3.0.1",
-    "@types/prop-types": "^15.5.1",
-    "@types/react": "^15.0.22",
-    "@types/react-dom": "^15.5.0",
-    "action-emitter": "^0.2.1",
-    "fbemitter": "^2.1.1",
-    "immutable": "^3.8.1",
-    "prop-types": "^15.5.8",
-    "react": "15.5.4",
-    "react-dom": "^15.5.4",
-    "typed-immutable-record": "^0.0.6"
-  },
-  "jest": {
-    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
-    "transform": {
-      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
-    },
-    "testRegex": "/__tests__/.*\\.(test|spec).(ts|tsx|js)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ]
-  }
-}
+{
+  "name": "simplr-forms-core",
+  "version": "4.0.0-pre-alpha.18",
+  "description": "Shared simplr-forms logic.",
+  "repository": "SimplrJS/simplr-forms",
+  "homepage": "https://github.com/SimplrJS/simplr-forms",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "author": "simplrjs <[email protected]> (https://github.com/simplrjs)",
+  "scripts": {
+    "build": "webpack && npm run tslint",
+    "watch": "webpack -w",
+    "tslint": "tslint --config ./tslint.json --project . --exclude __tests__/**/* && echo TsLint test successfully passed.",
+    "uglifyjs": "uglifyjs ./dist/simplr-forms-core.js -o ./dist/simplr-forms-core.min.js --compress --mangle",
+    "release": "npm run build && npm run uglifyjs",
+    "test": "jest",
+    "test-watch": "jest --watchAll",
+    "test-coverage": "npm test -- --coverage",
+    "gulp-build": "tsc -p ./tools/tsconfig.gulp.json",
+    "gulp-watch": "npm run gulp-build -- -w"
+  },
+  "license": "AGPL-3.0",
+  "files": [
+    "**/*.md",
+    "*.js",
+    "**/*.d.ts",
+    "!*.config.js",
+    "!gulpfile.js",
+    "!node_modules/**"
+  ],
+  "devDependencies": {
+    "@types/chokidar": "^1.6.0",
+    "@types/enzyme": "^2.7.9",
+    "@types/gulp": "^4.0.2",
+    "@types/jest": "^19.2.2",
+    "@types/sinon": "^2.1.2",
+    "@types/undertaker": "^0.12.28",
+    "@types/vinyl-fs": "^2.4.5",
+    "@types/webpack": "^2.2.15",
+    "enzyme": "^2.8.2",
+    "gulp": "github:gulpjs/gulp#4.0",
+    "jest": "^19.0.2",
+    "jest-enzyme": "^3.0.1",
+    "on-build-webpack": "^0.1.0",
+    "react-dom": "^15.5.4",
+    "react-test-renderer": "^15.5.4",
+    "simplr-mvdir": "0.0.1-beta.7",
+    "sinon": "^2.1.0",
+    "ts-jest": "^19.0.10",
+    "ts-loader": "^2.0.3",
+    "tslint": "^5.1.0",
+    "typescript": "2.3.0",
+    "uglify-js": "^2.8.22",
+    "webpack": "^2.4.1"
+  },
+  "dependencies": {
+    "@types/fbemitter": "^2.0.32",
+    "@types/flux": "^3.0.1",
+    "@types/prop-types": "^15.5.1",
+    "@types/react": "^15.0.22",
+    "@types/react-dom": "^15.5.0",
+    "action-emitter": "^0.2.1",
+    "fbemitter": "^2.1.1",
+    "immutable": "^3.8.1",
+    "prop-types": "^15.5.8",
+    "react": "15.5.4",
+    "react-dom": "^15.5.4",
+    "typed-immutable-record": "^0.0.6"
+  },
+  "jest": {
+    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
+    "transform": {
+      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+    },
+    "testRegex": "/__tests__/.*\\.(test|spec).(ts|tsx|js)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ]
+  }
+}

packages/simplr-forms-core/src/contracts/form.ts

@@ -22,6 +22,7 @@ export interface FormState {
     Pristine: boolean;
     Error?: FormError;
     Submitting: boolean;
+    Touched: boolean;
     SuccessfullySubmitted: boolean;
     SubmitCallback?: () => void;
     ActiveFieldId?: string;

packages/simplr-forms-core/src/stores/form-store.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import * as Immutable from "immutable";
 import { recordify } from "typed-immutable-record";
 import { ActionEmitter } from "action-emitter";
@@ -162,7 +163,70 @@ export class FormStore extends ActionEmitter {
         const propsRecord = recordify<FieldStateProps, FieldStatePropsRecord>(props);
         const fieldState = this.State.Fields.get(fieldId);
 
-        if (fieldState.Props == null || fieldState.Props.equals(propsRecord)) {
+        if (fieldState.Props == null) {
+            return;
+        }
+
+        // Custom props diff, because Immutable.Reacord.equals always returns false
+        // (because of children always changing?..)
+        let changed = false;
+        propsRecord.toSeq().forEach((value, key) => {
+            if (key == null) {
+                return;
+            }
+            const oldValue = fieldState.Props!.get(key);
+            if (key !== "children") {
+                if (!this.ObjectsEqualDeepCheck(oldValue, value)) {
+                    changed = true;
+                    return false;
+                }
+            } else {
+                // Take old children
+                const oldChildren = fieldState.Props!.get(key) as React.ReactNode | undefined;
+                if (oldChildren != null) {
+                    // Take new children and convert them to an array with React.Children.toArray
+                    const newChildren = React.Children.toArray(value);
+
+                    // For each oldChildren
+                    React.Children.forEach(oldChildren, (child: React.ReactChild, index) => {
+                        // If a child is a text component and no new children is equal to it
+                        if (typeof child === "string" && !newChildren.some(x => x === child)) {
+                            // Props have changed
+                            changed = true;
+                            return false;
+                        }
+
+                        const childElement = child as React.ReactElement<any>;
+
+                        // Try to find best a match for an old child in the newChildren array
+                        const newChildElement = newChildren.find(x => {
+                            // String case has been checked before
+                            if (typeof x !== "string") {
+                                const xElement = x as React.ReactElement<any>;
+                                // If type and key properties match
+                                // Children should be the same
+                                if (xElement.type === childElement.type &&
+                                    xElement.key === childElement.key) {
+                                    return true;
+                                }
+                            }
+                            // Return false explicitly by default
+                            return false;
+                        }) as React.ReactElement<any>;
+
+                        // If newChildElement was found and its props are different
+                        if (newChildElement != null &&
+                            !this.ObjectsEqualDeepCheck(childElement.props, newChildElement.props)) {
+                            // Props have changed
+                            changed = true;
+                            return false;
+                        }
+                    });
+                }
+            }
+        });
+
+        if (!changed) {
             return;
         }
 
@@ -177,37 +241,29 @@ export class FormStore extends ActionEmitter {
     }
 
     public UpdateFieldValue(fieldId: string, newValue: FieldValue): void {
+        const fieldState = this.State.Fields.get(fieldId);
+        if (fieldState.Value === newValue) {
+            return;
+        }
+
         this.State = this.State.withMutations(state => {
-            const fieldState = state.Fields.get(fieldId);
-            const fieldPristine = (newValue === fieldState.InitialValue);
+            const newPristine = (newValue === fieldState.InitialValue);
             state.Fields = state.Fields.set(fieldId, fieldState.merge({
                 Value: newValue,
-                Pristine: fieldPristine
+                Pristine: newPristine,
+                Touched: true
             } as FieldState));
 
-            if (!fieldPristine) {
-                state.Form = state.Form.merge({
-                    Pristine: false
-                } as FormState);
-            } else {
-                let allFieldsPristine = true;
-                state.Fields.forEach(field => {
-                    if (field != null && !field.Pristine) {
-                        allFieldsPristine = false;
-                        return false;
-                    }
-                });
-
-                state.Form = state.Form.merge({
-                    Pristine: allFieldsPristine
-                });
-            }
+            state.Form = this.RecalculateDependentFormState(state, {
+                Pristine: newPristine,
+                Touched: true
+            });
         });
 
         this.emit(new Actions.ValueChanged(fieldId, newValue));
     }
 
-    public async ValidateiField(fieldId: string, validationPromise: Promise<never>): Promise<void> {
+    public async ValidateField(fieldId: string, validationPromise: Promise<never>): Promise<void> {
         const field = this.State.Fields.get(fieldId);
         const fieldValue = field.Value;
 
@@ -329,11 +385,12 @@ export class FormStore extends ActionEmitter {
                 const fieldState = state.Fields.get(fieldId);
 
                 if (fieldState != null) {
+                    const oldValue = fieldState.Value;
                     state.Fields = state.Fields.set(fieldId, fieldState.merge({
                         Error: undefined,
                         Value: fieldState.DefaultValue,
                         Pristine: (fieldState.InitialValue === fieldState.DefaultValue),
-                        Touched: false
+                        Touched: oldValue !== fieldState.DefaultValue
                     } as FieldState));
                 }
             });
@@ -397,6 +454,7 @@ export class FormStore extends ActionEmitter {
             Pristine: true,
             SuccessfullySubmitted: false,
             ActiveFieldId: undefined,
+            Touched: false,
             Error: undefined,
             SubmitCallback: undefined
         };
@@ -431,7 +489,65 @@ export class FormStore extends ActionEmitter {
         return formStoreObject;
     }
 
+    protected RecalculateDependentFormState(
+        formStoreState: FormStoreStateRecord,
+        newStatePartial: Partial<FormState>): FormStateRecord {
+        let updater = {
+            Pristine: true,
+            Touched: false,
+            ...newStatePartial
+        } as FormState;
+
+        // TODO: might build curried function for more efficient checking
+
+        this.State.Fields.forEach(field => {
+            if (field != null) {
+                if (updater.Pristine && !field.Pristine) {
+                    updater.Pristine = false;
+                }
+                if (!updater.Touched && field.Touched) {
+                    updater.Touched = true;
+                }
+
+                // Short circuit if both Pristine and Touched are already resolved
+                if (!updater.Pristine && updater.Touched) {
+                    return false;
+                }
+            }
+        });
+
+        return formStoreState.Form.merge(updater);
+    }
+
     protected IsPromise<T>(value: any): value is Promise<T> {
         return value != null && value.then != null && value.catch != null;
     }
+
+    protected ObjectsEqualDeepCheck(obj: { [key: string]: any }, obj2: { [key: string]: any }) {
+        if (typeof obj !== "object" && typeof obj !== typeof obj2) {
+            console.warn("Object Deep Check: Variable given is not an object!");
+            return false;
+        }
+
+        if ((obj == null && obj2 != null) || (obj != null && obj2 == null)) {
+            return false;
+        } else if (obj == null && obj2 == null) {
+            return true;
+        }
+
+        if (Object.keys(obj2).length !== Object.keys(obj).length) {
+            return false;
+        }
+
+        for (let key in obj) {
+            if (typeof obj[key] === "object" && typeof obj2[key] === "object") {
+                if (!this.ObjectsEqualDeepCheck(obj[key], obj2[key])) {
+                    return false;
+                }
+            } else if (obj[key] !== obj2[key]) {
+                return false;
+            }
+        }
+        return true;
+    }
 }