Controlled mechanism implemented and onChange types for Field and Form updated.

Author: DovydasNavickas

packages/simplr-forms-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplr-forms-dom",
-  "version": "4.0.1-alpha.2",
+  "version": "4.0.1-alpha.3",
   "description": "DOM components for simplr-forms.",
   "repository": "SimplrJS/simplr-forms",
   "homepage": "https://github.com/SimplrJS/simplr-forms",
@@ -57,11 +57,12 @@
     "@types/react": "^15.0.24",
     "@types/prop-types": "^15.5.1",
     "immutable": "^3.8.1",
-    "simplr-forms": "^4.0.1-alpha.2",
+    "simplr-forms": "^4.0.1-alpha.3",
     "typed-immutable-record": "0.0.6",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.5.8",
+    "tslib": "^1.7.1"
   },
   "jest": {
     "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",

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

@@ -2,22 +2,25 @@ import * as React from "react";
 import { FieldValue } from "simplr-forms/contracts";
 import { DomFieldProps } from "../contracts/field";
 
-import { BaseDomField, BaseDomFieldState } from "../abstractions/base-dom-field";
-import { FieldOnChangeCallback } from "../contracts/field";
+import {
+    BaseDomField,
+    BaseDomFieldState
+} from "../abstractions/base-dom-field";
+import {
+    FieldOnChangeCallback,
+    FieldOnChangeInternalCallback
+} from "../contracts/field";
+
+export type TextOnChangeCallback = FieldOnChangeCallback<HTMLInputElement>;
 
 /**
  * Override the differences between extended interfaces.
- *
- * @export
- * @interface Props
- * @extends {CoreContracts.FieldProps}
- * @extends {React.HTMLProps<HTMLInputElement>}
  */
 export interface TextProps extends DomFieldProps, React.HTMLProps<HTMLInputElement> {
     name: string;
     onFocus?: React.EventHandler<React.FocusEvent<HTMLInputElement>>;
     onBlur?: React.EventHandler<React.FocusEvent<HTMLInputElement>>;
-    onChange?: FieldOnChangeCallback<HTMLInputElement>;
+    onChange?: TextOnChangeCallback & FieldOnChangeInternalCallback;
     ref?: any;
 
     defaultValue?: FieldValue;
@@ -30,9 +33,13 @@ export class Text extends BaseDomField<TextProps, BaseDomFieldState> {
     }
 
     protected OnChangeHandler: React.FormEventHandler<HTMLInputElement> = (event) => {
-        this.OnValueChange(this.GetValueFromEvent(event));
-
-        const newValue = this.FormStore.GetField(this.FieldId).Value;
+        let newValue: string | undefined;
+        if (!this.IsControlled) {
+            this.OnValueChange(this.GetValueFromEvent(event));
+            newValue = this.FormStore.GetField(this.FieldId).Value;
+        } else {
+            newValue = this.GetValueFromEvent(event);
+        }
 
         if (this.props.onChange != null) {
             this.props.onChange(event, newValue, this.FieldId, this.FormId);

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

@@ -6,8 +6,12 @@ import {
 } from "simplr-forms/contracts";
 import { FormStore } from "simplr-forms/stores";
 
-export interface FieldOnChangeCallback<TElement> extends React.EventHandler<React.FormEvent<TElement>> {
-    (event: React.FormEvent<TElement> | undefined, newValue: FieldValue, fieldId: string, formId: string): void;
+export interface FieldOnChangeInternalCallback {
+    (event: React.FormEvent<any>, ...parameters: any[]): void;
+}
+
+export interface FieldOnChangeCallback<TElement> {
+    (event: React.FormEvent<TElement>, newValue: FieldValue, fieldId: string, formId: string): void;
 }
 
 export interface DomFieldProps extends FieldProps {

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

@@ -4,16 +4,21 @@ import { FormProps as CoreFormProps } from "simplr-forms/contracts";
 import { FormStore } from "simplr-forms/stores";
 import {
     FieldOnChangeCallback,
+    FieldOnChangeInternalCallback,
     DomFieldTemplateCallback
 } from "../contracts/field";
 
-export interface FormOnSubmitCallback extends React.FormEventHandler<HTMLFormElement> {
+export interface FormOnSubmitInternalCallback {
+    (event: React.FormEvent<HTMLFormElement>, ...parameters: any[]): void | Promise<never> | FormError | string;
+}
+
+export interface FormOnSubmitCallback {
     (event: React.FormEvent<HTMLFormElement>, store: FormStore): void | Promise<never> | FormError | string;
 }
 
 export interface FormProps extends CoreFormProps, React.HTMLProps<HTMLFormElement> {
-    onSubmit?: FormOnSubmitCallback;
-    onChange?: FieldOnChangeCallback<any>;
+    onSubmit?: FormOnSubmitCallback & FormOnSubmitInternalCallback;
+    onChange?: FieldOnChangeCallback<any> & FieldOnChangeInternalCallback;
     preventSubmitDefaultAndPropagation?: boolean;
     template?: DomFieldTemplateCallback;
     // tslint:disable-next-line:max-line-length

packages/simplr-forms-dom/tsconfig.json

@@ -11,6 +11,7 @@
         "declaration": true,
         "pretty": true,
         "strict": true,
+        "noEmitHelpers": true,
         "lib": [
             "dom",
             "dom.iterable",

packages/simplr-forms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplr-forms",
-  "version": "4.0.1-alpha.2",
+  "version": "4.0.1-alpha.3",
   "description": "Shared simplr-forms logic.",
   "repository": "SimplrJS/simplr-forms",
   "homepage": "https://github.com/SimplrJS/simplr-forms",
@@ -53,18 +53,19 @@
     "webpack": "^2.5.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",
-    "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",
-    "@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"
+    "tslib": "^1.7.1",
+    "typed-immutable-record": "^0.0.6"
   },
   "jest": {
     "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",

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

@@ -9,6 +9,15 @@ export interface BaseFieldState extends CoreFieldState {
 }
 
 export abstract class BaseField<TProps extends FieldProps, TState extends BaseFieldState> extends CoreField<TProps, TState> {
+    componentWillReceiveProps(nextProps: FieldProps): void {
+        super.componentWillReceiveProps(nextProps);
+
+        if (this.IsControlled) {
+            const newValue = this.ProcessValueBeforeStore(this.props.value);
+            this.FormStore.UpdateFieldValue(this.FieldId, newValue);
+        }
+    }
+
     protected abstract get RawDefaultValue(): FieldValue;
 
     protected get RawInitialValue(): FieldValue {
@@ -19,6 +28,29 @@ export abstract class BaseField<TProps extends FieldProps, TState extends BaseFi
         return this.props.value;
     }
 
+    protected get IsControlled(): boolean {
+        return this.props.value !== undefined;
+    }
+
+    protected get ControlledValue(): FieldValue {
+        return this.props.value;
+    }
+
+    protected get Value(): FieldValue {
+        if (this.IsControlled) {
+            return this.ControlledValue;
+        }
+
+        // If state is defined
+        if (this.state != null && this.state.Value != null) {
+            // Return its value
+            return this.state.Value;
+        }
+
+        // Return default value
+        return this.RawDefaultValue;
+    }
+
     protected get Disabled(): boolean | undefined {
         // FormStore can only enforce disabling
         if (this.FormStore.GetState().Disabled === true) {

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

@@ -115,15 +115,13 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
     /**
      * Is field currently controlled.
      */
-    protected get IsControlled(): boolean {
-        return false;
-    }
+    protected abstract get IsControlled(): boolean;
 
     /**
      * Current or default field value.
      */
     protected get Value(): FieldValue {
-        // If field is defined
+        // If state is defined
         if (this.state != null && this.state.Value != null) {
             // Return its value
             return this.state.Value;
@@ -133,6 +131,8 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
         return this.RawDefaultValue;
     }
 
+    protected abstract get ControlledValue(): FieldValue;
+
     protected ProcessValueBeforeStore(value: FieldValue): FieldValue {
         // Parse and normalize value
         if (value != null) {

packages/simplr-forms/tsconfig.json

@@ -11,6 +11,7 @@
         "declaration": true,
         "pretty": true,
         "strict": true,
+        "noEmitHelpers": true,
         "lib": [
             "dom",
             "dom.iterable",