DOM components (#60)

* Added password field.

* Added email field.

* Added search field.

* Added TextArea component.

* Updated Numeric modifier.

* Core field NormalizeValue, ParseValue and FormatValue props callbacks will be called before components.

* Added DefaultModifiers and DefaultNormalizers to core field. Updated value helpers to filter out duplications.

* Fixed onChange props interface errors.

* Fixed import.

* Externals fix webpack in simplr-forms-dom.

* Webpack externals fix in simplr-forms-dom.

* Number is still WIP.

* Removed onFocus, onBlur from CoreFieldProps.

* Added HTMLElementProps for extending. Added onFocus and onBlur to DomFieldProps.

* Updated Email field. Comment out DefaultModifiers in Number field.

* Added hidden field.

* Added Select and checkbox fields.

* Added GetHTMLProps.

* Added FieldId in Field child context.

* Added FieldId getter in base-container.

* Added OnFocus, OnBlur and IsDisabled in Radio button.

* Added children to DomFieldProps.

* Changed FormEventHandler -> ChangeEventHandler.

* Fixed return types, prop types.

* Fixed checkbox: value -> checked.

* Fixed GetHTMLProps in BaseDomField and Radio button.

* Added Element property to all fields.

Closes #38

Author: Martynas Žilinskas

.gitignore

@@ -255,4 +255,5 @@ yarn.lock
 packages/simplr-forms-test
 
 dist
-@types
+@types
+package-lock.json

.travis.yml

@@ -0,0 +1,15 @@
+language: node_js
+notifications:
+  email:
+    on_success: never
+    on_failure: change
+node_js:
+- stable
+before_install:
+- "npm install -g npm@^4.6.1"
+- "npm install -g typescript@^2.3"
+script:
+- npm run bootstrap
+- npm run tools-build
+- npm run source-build
+- npm test

package.json

@@ -1,9 +1,13 @@
 {
   "name": "simplr-forms",
   "private": true,
-  "scripts": {},
+  "scripts": {
+    "bootstrap": "lerna bootstrap",
+    "tools-build": "lerna run gulp-build",
+    "source-build": "lerna run build",
+    "test": "lerna run test-tsc"
+  },
   "devDependencies": {
-    "lerna": "2.0.0-rc.1",
-    "typescript": "2.3.0"
+    "lerna": "2.0.0-rc.2"
   }
 }

packages/simplr-forms-dom/package.json

@@ -8,12 +8,13 @@
   "types": "index.d.ts",
   "author": "simplrjs <[email protected]> (https://github.com/simplrjs)",
   "scripts": {
-    "build": "webpack && npm run tslint",
+    "build": "gulp",
     "watch": "webpack -w",
-    "tslint": "tslint --config ./tslint.json --project . --exclude __tests__/**/* && echo TsLint test successfully passed.",
     "uglifyjs": "uglifyjs ./dist/simplr-forms-dom.js -o ./dist/simplr-forms-dom.min.js --compress --mangle",
     "release": "npm run build && npm run uglifyjs",
     "test": "jest",
+    "test-tslint": "tslint --config ./tslint.json --project . --exclude ./__tests__/* && echo TsLint test successfully passed.",
+    "test-tsc": "tsc -p . --noEmit",
     "test-watch": "jest --watchAll",
     "test-coverage": "npm test -- --coverage",
     "prepublishOnly": "npm run build",

packages/simplr-forms-dom/src/abstractions/base-dom-field.tsx

@@ -13,19 +13,20 @@ export interface BaseDomFieldState extends BaseFieldState {
 
 }
 
-export abstract class BaseDomField<TProps extends DomFieldProps, TState extends BaseDomFieldState>
+export abstract class BaseDomField<TProps extends DomFieldProps, TState extends BaseDomFieldState, TUnderlyingElement = any>
     extends BaseField<TProps, TState> {
-    protected OnFocus = (event: React.FocusEvent<HTMLInputElement>): void => {
-        const props = this.props as FieldProps;
+    public Element: TUnderlyingElement | undefined;
+
+    protected OnFocus = (event: React.FocusEvent<any>): void => {
+        const props = this.props as DomFieldProps;
         if (props.onFocus != null) {
             props.onFocus(event);
         }
-
         this.Focus();
     }
 
-    protected OnBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
-        const props = this.props as FieldProps;
+    protected OnBlur = (event: React.FocusEvent<any>): void => {
+        const props = this.props as DomFieldProps;
         if (props.onBlur != null) {
             props.onBlur(event);
         }
@@ -35,13 +36,39 @@ export abstract class BaseDomField<TProps extends DomFieldProps, TState extends
 
     protected get FieldTemplate(): DomFieldTemplateCallback | undefined {
         const formProps = this.FormStore.GetState().Form.Props as FormProps;
+        if (this.props.template != null) {
+            return this.props.template;
+        }
+
         if (formProps.template) {
             return formProps.template;
         }
+    }
 
-        if (this.props.template != null) {
-            return this.props.template;
-        }
+    protected GetHTMLProps(props: DomFieldProps): {} {
+        const {
+            defaultValue,
+            destroyOnUnmount,
+            disabled,
+            formatValue,
+            initialValue,
+            name,
+            normalizeValue,
+            onBlur,
+            onFocus,
+            parseValue,
+            template,
+            validationType,
+            value,
+            children,
+            ...restProps
+        } = props;
+
+        return restProps;
+    }
+
+    protected SetElementRef = (element: TUnderlyingElement): void => {
+        this.Element = element;
     }
 
     public abstract renderField(): JSX.Element | null;

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

@@ -0,0 +1,74 @@
+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 {
+    HTMLElementProps
+} from "../contracts/field";
+import {
+    FormProps
+} from "../contracts/form";
+
+export type CheckBoxOnChangeCallback = FieldOnChangeCallback<HTMLInputElement>;
+
+/**
+ * Override the differences between extended interfaces.
+ */
+export interface CheckBoxProps extends DomFieldProps, HTMLElementProps<HTMLInputElement> {
+    name: string;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: CheckBoxOnChangeCallback;
+
+    defaultValue?: boolean;
+    initialValue?: boolean;
+    value?: boolean;
+    ref?: React.Ref<CheckBox>;
+}
+
+export class CheckBox extends BaseDomField<CheckBoxProps, BaseDomFieldState, HTMLInputElement> {
+    protected GetValueFromEvent(event: React.ChangeEvent<HTMLInputElement>): FieldValue {
+        return event.currentTarget.checked;
+    }
+
+    protected OnChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+        this.OnValueChange(this.GetValueFromEvent(event));
+
+        const newValue = this.FormStore.GetField(this.FieldId).Value;
+
+        if (this.props.onChange != null) {
+            event.persist();
+            this.props.onChange(event, newValue, this.FieldId, this.FormId);
+        }
+
+        const formStoreState = this.FormStore.GetState();
+        const formProps = formStoreState.Form.Props as FormProps;
+        if (formProps.onChange != null) {
+            event.persist();
+            formProps.onChange(event, newValue, this.FieldId, this.FormId);
+        }
+    }
+
+    protected get RawDefaultValue(): boolean {
+        if (this.props.defaultValue != null) {
+            return this.props.defaultValue;
+        }
+        return false;
+    }
+
+    renderField(): JSX.Element | null {
+        return <input
+            ref={this.SetElementRef}
+            type="checkbox"
+            name={this.FieldId}
+            checked={this.Value}
+            onChange={this.OnChangeHandler}
+            disabled={this.Disabled}
+            onFocus={this.OnFocus}
+            onBlur={this.OnBlur}
+            {...this.GetHTMLProps(this.props) }
+        />;
+    }
+}

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

@@ -0,0 +1,73 @@
+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 {
+    HTMLElementProps
+} from "../contracts/field";
+import {
+    FormProps
+} from "../contracts/form";
+
+export type EmailOnChangeCallback = FieldOnChangeCallback<HTMLInputElement>;
+
+/**
+ * Override the differences between extended interfaces.
+ */
+export interface EmailProps extends DomFieldProps, HTMLElementProps<HTMLInputElement> {
+    name: string;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: EmailOnChangeCallback;
+
+    defaultValue?: FieldValue;
+    value?: FieldValue;
+    ref?: React.Ref<Email>;
+}
+
+export class Email extends BaseDomField<EmailProps, BaseDomFieldState, HTMLInputElement> {
+    protected GetValueFromEvent(event: React.ChangeEvent<HTMLInputElement>): FieldValue {
+        return event.currentTarget.value;
+    }
+
+    protected OnChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+        this.OnValueChange(this.GetValueFromEvent(event));
+
+        const newValue = this.FormStore.GetField(this.FieldId).Value;
+
+        if (this.props.onChange != null) {
+            event.persist();
+            this.props.onChange(event, newValue, this.FieldId, this.FormId);
+        }
+
+        const formStoreState = this.FormStore.GetState();
+        const formProps = formStoreState.Form.Props as FormProps;
+        if (formProps.onChange != null) {
+            event.persist();
+            formProps.onChange(event, newValue, this.FieldId, this.FormId);
+        }
+    }
+
+    protected get RawDefaultValue(): string {
+        if (this.props.defaultValue != null) {
+            return this.props.defaultValue;
+        }
+        return "";
+    }
+
+    renderField(): JSX.Element | null {
+        return <input
+            ref={this.SetElementRef}
+            type="email"
+            name={this.FieldId}
+            value={this.Value}
+            onChange={this.OnChangeHandler}
+            disabled={this.Disabled}
+            onFocus={this.OnFocus}
+            onBlur={this.OnBlur}
+            {...this.GetHTMLProps(this.props) }
+        />;
+    }
+}

packages/simplr-forms-dom/src/components/fields-array.tsx

@@ -22,20 +22,20 @@ export class FieldsArray extends BaseFieldsArray<FieldsArrayProps, FieldsArraySt
         this.Element = element;
     }
 
-    protected HTMLProps(): {} {
+    protected GetHTMLProps(props: FieldsArrayProps): {} {
         const {
             name,
             index,
             destroyOnUnmount,
             children,
-            ...rest } = this.props;
-        return rest;
+            ...restProps } = this.props;
+        return restProps;
     }
 
     render(): JSX.Element | null {
         return <div
             ref={this.setElementRef}
-            {...this.HTMLProps() }
+            {...this.GetHTMLProps(this.props) }
         >
             {this.props.children}
         </div>;

packages/simplr-forms-dom/src/components/fields-group.tsx

@@ -22,19 +22,19 @@ export class FieldsGroup extends BaseFieldsGroup<FieldsGroupProps, FieldsGroupSt
         this.Element = element;
     }
 
-    protected HTMLProps(): {} {
+    protected GetHTMLProps(props: FieldsGroupProps): {} {
         const {
             name,
             destroyOnUnmount,
             children,
-            ...rest } = this.props;
-        return rest;
+            ...restProps } = this.props;
+        return restProps;
     }
 
     render(): JSX.Element | null {
         return <div
             ref={this.setElementRef}
-            {...this.HTMLProps() }
+            {...this.GetHTMLProps(this.props) }
         >
             {this.props.children}
         </div>;

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { BaseField, BaseFieldState } from "simplr-forms";
+import { FieldProps, FieldValue } from "simplr-forms/contracts";
+
+export interface HiddenProps extends FieldProps {
+    defaultValue: FieldValue;
+    value: FieldValue;
+}
+
+export class Hidden extends BaseField<HiddenProps, BaseFieldState> {
+    protected get IsControlled(): boolean {
+        return true;
+    }
+
+    protected get RawDefaultValue(): FieldValue {
+        return this.props.defaultValue;
+    }
+
+    render(): null {
+        return null;
+    }
+}