Feature/transitional value (#67)

* Updated .gitignore for MacOS. Moved mz package from devDependencies to simplr-mvdir dependencies.

* simplr-forms and simplr-forms-dom packages updated and fixed.

* TransitionalValue added to form-store and modifiers.

* Currency modifier removed.

* mvdir version updated in simplr-validation.

* StringToDecimalModifier added into number field.

* Leading zero solved for string-to-decimal.

Author: DovydasNavickas

.gitignore

@@ -257,3 +257,6 @@ packages/simplr-forms-test
 dist
 @types
 package-lock.json
+
+# MacOS
+.DS_Store

package.json

@@ -8,6 +8,6 @@
     "test": "lerna run test-tsc"
   },
   "devDependencies": {
-    "lerna": "2.0.0-rc.2"
+    "lerna": "2.0.0-rc.5"
   }
 }

packages/simplr-forms-dom/package.json

@@ -36,35 +36,33 @@
     "@types/gulp": "^4.0.3",
     "@types/jest": "^19.2.3",
     "@types/sinon": "^2.2.2",
-    "@types/undertaker": "^0.12.28",
+    "@types/undertaker": "^1.1.1",
     "@types/vinyl-fs": "^2.4.5",
     "@types/webpack": "^2.2.15",
     "enzyme": "^2.8.2",
     "gulp": "github:gulpjs/gulp#4.0",
     "jest": "^20.0.3",
     "jest-enzyme": "^3.1.1",
-    "mkdirp": "^0.5.1",
-    "mv": "^2.1.1",
-    "mz": "^2.6.0",
-    "simplr-mvdir": "0.0.1-beta.7",
+    "simplr-mvdir": "0.0.1-beta.8",
     "sinon": "^2.2.0",
     "source-map-loader": "^0.2.1",
     "ts-jest": "^20.0.4",
     "ts-loader": "^2.1.0",
     "tslint": "^5.2.0",
-    "typescript": "2.3.2",
+    "typescript": "^2.3.2",
+    "uglify-js": "^3.0.15",
     "webpack": "^2.5.1"
   },
   "dependencies": {
-    "@types/react": "^15.0.24",
     "@types/prop-types": "^15.5.1",
+    "@types/react": "^15.0.24",
     "immutable": "^3.8.1",
-    "simplr-forms": "^4.0.1-alpha.3",
-    "typed-immutable-record": "0.0.6",
+    "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "prop-types": "^15.5.8",
-    "tslib": "^1.7.1"
+    "simplr-forms": "^4.0.1-alpha.3",
+    "tslib": "^1.7.1",
+    "typed-immutable-record": "0.0.6"
   },
   "jest": {
     "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",

packages/simplr-forms-dom/src/components/number.tsx

@@ -10,7 +10,7 @@ import {
 import {
     FormProps
 } from "../contracts/form";
-import { NumericToStringModifier } from "simplr-forms/modifiers";
+import { StringToDecimalModifier } from "simplr-forms/modifiers";
 
 export type NumberOnChangeCallback = FieldOnChangeCallback<HTMLInputElement>;
 
@@ -30,7 +30,7 @@ export interface NumberProps extends DomFieldProps, HTMLElementProps<HTMLInputEl
 
 export class Number extends BaseDomField<NumberProps, BaseDomFieldState> {
     protected get DefaultModifiers(): JSX.Element[] {
-        return [/*<NumericToStringModifier />*/];
+        return [<StringToDecimalModifier />];
     }
 
     protected GetValueFromEvent(event: React.ChangeEvent<HTMLInputElement>): FieldValue {

packages/simplr-forms-dom/src/components/text.tsx

@@ -31,7 +31,7 @@ export interface TextProps extends DomFieldProps, HTMLElementProps<HTMLInputElem
     ref?: React.Ref<Text>;
 }
 
-export class Text extends BaseDomField<TextProps, BaseDomFieldState> {
+export class Text extends BaseDomField<TextProps, BaseDomFieldState, HTMLInputElement> {
     protected GetValueFromEvent(event: React.ChangeEvent<HTMLInputElement>): string {
         return event.currentTarget.value;
     }

packages/simplr-forms/package.json

@@ -17,6 +17,7 @@
     "test-tsc": "tsc -p . --noEmit",
     "test-watch": "jest --watchAll",
     "test-coverage": "npm test -- --coverage",
+    "prepublishOnly": "npm run build",
     "gulp-build": "tsc -p ./tools/tsconfig.gulp.json",
     "gulp-watch": "npm run gulp-build -- -w"
   },
@@ -35,23 +36,21 @@
     "@types/gulp": "^4.0.3",
     "@types/jest": "^19.2.3",
     "@types/sinon": "^2.2.2",
-    "@types/undertaker": "^0.12.28",
+    "@types/undertaker": "^1.1.1",
     "@types/vinyl-fs": "^2.4.5",
     "@types/webpack": "^2.2.15",
     "enzyme": "^2.8.2",
     "gulp": "github:gulpjs/gulp#4.0",
     "jest": "^20.0.3",
     "jest-enzyme": "^3.1.1",
-    "on-build-webpack": "^0.1.0",
-    "react-test-renderer": "^15.5.4",
-    "simplr-mvdir": "0.0.1-beta.7",
+    "simplr-mvdir": "0.0.1-beta.8",
     "sinon": "^2.2.0",
     "source-map-loader": "^0.2.1",
     "ts-jest": "^20.0.4",
     "ts-loader": "^2.1.0",
     "tslint": "^5.2.0",
     "typescript": "^2.3.2",
-    "uglify-js": "^3.0.10",
+    "uglify-js": "^3.0.15",
     "webpack": "^2.5.1"
   },
   "dependencies": {

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

@@ -23,6 +23,7 @@ import * as FormStoreActions from "../actions/form-store";
 import { FSHContainer } from "../stores/form-stores-handler";
 import { FieldValidationType } from "../contracts/validation";
 import { FormStoreStateRecord } from "../contracts/form-store";
+import { ModifierValue } from "../contracts/value";
 
 export interface CoreFieldState {
     FormStoreState: FormStoreStateRecord;
@@ -141,7 +142,7 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
      * Current or default field value.
      */
     protected get Value(): FieldValue {
-        // If state is defined
+        // If state is defined and Value is set
         if (this.state != null && this.state.Value != null) {
             // Return its value
             return this.state.Value;
@@ -153,10 +154,23 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
 
     protected abstract get ControlledValue(): FieldValue;
 
-    protected ProcessValueBeforeStore(value: FieldValue): FieldValue {
+    protected ProcessValueBeforeStore(value: FieldValue): ModifierValue {
         // Parse and normalize value
         if (value != null) {
-            return this.NormalizeValue(this.ParseValue(value));
+            const modifierValue: ModifierValue = {
+                Value: value
+            };
+            const parsedValue = this.ParseValue(modifierValue);
+
+            const result: ModifierValue = {
+                Value: this.NormalizeValue(parsedValue.Value)
+            };
+
+            if (parsedValue.TransitionalValue != null) {
+                result.TransitionalValue = this.NormalizeValue(parsedValue.TransitionalValue);
+            }
+
+            return result;
         }
         return value;
     }
@@ -165,7 +179,7 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
         return this.FormatValue(value);
     }
 
-    protected ParseValue(value: FieldValue): FieldValue {
+    protected ParseValue(value: ModifierValue): ModifierValue {
         if (this.props.parseValue != null) {
             const parser = this.props.parseValue as FieldParseValueCallback;
             value = parser(value);
@@ -222,7 +236,8 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
                     state.FormStoreState = newFormStoreState;
                 }
                 const newFieldState = this.FormStore.GetField(this.FieldId);
-                state.Value = this.ProcessValueFromStore(newFieldState.Value);
+                const value = newFieldState.TransitionalValue != null ? newFieldState.TransitionalValue : newFieldState.Value;
+                state.Value = this.ProcessValueFromStore(value);
                 return state;
             });
         }
@@ -282,19 +297,29 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
      * ========================
      */
 
+    private processedOrEmptyModifierValue(value: FieldValue, processor: (value: FieldValue) => ModifierValue): ModifierValue {
+        if (value != null) {
+            return processor(value);
+        }
+        return {
+            Value: value
+        };
+    }
+
     /**
      * Registers a field in FormStore or throws if the field was already registered
      */
     private registerFieldInFormStore(): void {
-        const defaultValue = this.ProcessValueBeforeStore(this.RawDefaultValue);
-        const initialValue = this.ProcessValueBeforeStore(this.RawInitialValue);
-        const value = this.ProcessValueBeforeStore(this.RawValue);
+        const defaultValue = this.processedOrEmptyModifierValue(this.RawDefaultValue, this.ProcessValueBeforeStore.bind(this));
+        const initialValue = this.processedOrEmptyModifierValue(this.RawInitialValue, this.ProcessValueBeforeStore.bind(this));
+        const value = this.processedOrEmptyModifierValue(this.RawValue, this.ProcessValueBeforeStore.bind(this));
         this.FormStore.RegisterField(
             this.FieldId,
             this.props.name,
-            defaultValue,
-            initialValue,
-            value,
+            defaultValue.Value,
+            initialValue.Value,
+            value.Value,
+            value.TransitionalValue,
             this.props,
             this.FieldsGroupId
         );

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

@@ -3,12 +3,13 @@ import { FormErrorRecord } from "./error";
 import { FieldValidationType } from "./validation";
 import { FormContextPropsObject } from "./form";
 import { FieldsGroupContextProps } from "./fields-group";
+import { ModifierValue } from "./value";
 
 // Field value can be of any type or undefined
 export type FieldValue = any | undefined;
 
 export type FieldFormatValueCallback = (value: FieldValue) => FieldValue;
-export type FieldParseValueCallback = (value: FieldValue) => FieldValue;
+export type FieldParseValueCallback = (value: ModifierValue) => ModifierValue;
 export type FieldNormalizeValueCallback = (value: FieldValue) => FieldValue;
 
 export interface CoreFieldProps {
@@ -32,6 +33,7 @@ export interface FieldStoreState {
     DefaultValue: FieldValue;
     InitialValue: FieldValue;
     Value: FieldValue;
+    TransitionalValue?: FieldValue;
     Error?: FormErrorRecord;
     Touched: boolean;
     Pristine: boolean;

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

@@ -1,8 +1,13 @@
 import { FieldValue } from "./field";
 
+export interface ModifierValue {
+    Value: FieldValue;
+    TransitionalValue?: FieldValue;
+}
+
 export interface Modifier {
     Format(value: FieldValue): FieldValue;
-    Parse(value: FieldValue): FieldValue;
+    Parse(value: ModifierValue): ModifierValue;
 }
 
 export interface Normalizer {

packages/simplr-forms/src/modifiers/base-modifier.ts

@@ -1,13 +1,16 @@
 import * as React from "react";
-import { Modifier } from "../contracts/value";
+import {
+    Modifier,
+    ModifierValue
+} from "../contracts/value";
 import { FieldValue } from "../contracts/field";
 import { ValueOfType } from "../utils/value-helpers";
 
 export abstract class BaseModifier<TProps, TState> extends React.Component<TProps, TState> implements Modifier {
     // Indentifier function
     static SimplrFormsCoreModifier() { }
     abstract Format(value: FieldValue): FieldValue;
-    abstract Parse(value: FieldValue): FieldValue;
+    abstract Parse(value: ModifierValue): ModifierValue;
     render() {
         return null;
     }