Merge pull request #109 from SimplrJS/dev

Dev to master.

Author: DovydasNavickas

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://github.com/SimplrJS">
-    <img width="200" src="https://user-images.githubusercontent.com/7989797/27303346-34a5d6fa-5543-11e7-91e8-5b34287d0bc8.png" />
+    <img width="200" src="https://user-images.githubusercontent.com/7989797/27446299-b93aa76c-5785-11e7-8ef6-475f858e3291.png" />
   </a>
 </div>
 <h1 align="center">@simplr/react-forms</h1>

packages/react-forms-dom/README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://github.com/SimplrJS">
-    <img width="200" src="https://user-images.githubusercontent.com/7989797/27303346-34a5d6fa-5543-11e7-91e8-5b34287d0bc8.png" />
+    <img width="200" src="https://user-images.githubusercontent.com/7989797/27446299-b93aa76c-5785-11e7-8ef6-475f858e3291.png" />
   </a>
 </div>
 <p align="center">

packages/react-forms-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplr/react-forms-dom",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "DOM components for @simplr/react-forms.",
   "repository": "SimplrJS/react-forms",
   "homepage": "https://github.com/SimplrJS/react-forms",

packages/react-forms-dom/src/abstractions/base-form-button.tsx

@@ -4,13 +4,15 @@ import { Iterable } from "immutable";
 
 import { BaseContainer, BaseContainerProps } from "@simplr/react-forms";
 
-export interface BaseFormButtonProps extends BaseContainerProps, React.HTMLProps<HTMLButtonElement> {
+export interface BaseFormButtonProps extends BaseContainerProps {
     disableOnError?: boolean;
     disableOnBusy?: boolean;
     disableOnPristine?: boolean;
     busy?: boolean;
     disabled?: boolean;
     busyClassName?: string;
+    style?: React.CSSProperties;
+    className?: string;
 }
 
 export interface BaseFormButtonState {
@@ -117,5 +119,19 @@ export abstract class BaseFormButton<TProps extends BaseFormButtonProps, TState
         return className.length > 0 ? className : undefined;
     }
 
+    protected GetHTMLProps(props: BaseFormButtonProps): {} {
+        const {
+            disableOnError,
+            disableOnBusy,
+            disableOnPristine,
+            busy,
+            busyClassName,
+            formId,
+            ...restProps
+        } = props;
+
+        return restProps;
+    }
+
     public abstract render(): JSX.Element | null;
 }

packages/react-forms-dom/src/components/clear.tsx

@@ -5,9 +5,12 @@ import {
     BaseFormButtonProps,
     BaseFormButtonStateRecord
 } from "../abstractions/base-form-button";
+import { HTMLElementProps } from "../contracts/field";
 
-export interface ClearProps extends BaseFormButtonProps {
+export interface ClearProps extends BaseFormButtonProps, HTMLElementProps<HTMLButtonElement> {
     fieldIds?: string[];
+
+    ref?: React.Ref<Clear>;
 }
 
 export class Clear extends BaseFormButton<ClearProps, BaseFormButtonStateRecord> {
@@ -20,14 +23,24 @@ export class Clear extends BaseFormButton<ClearProps, BaseFormButtonStateRecord>
         }
     }
 
+    protected GetHTMLProps(props: ClearProps): {} {
+        const filteredProps = super.GetHTMLProps(props) as ClearProps;
+        const {
+            fieldIds,
+            ...restProps
+        } = filteredProps;
+
+        return restProps;
+    }
+
     public render(): JSX.Element {
-        // TODO: Pass all other props.
         return <button
             type="button"
             className={this.ClassName}
             style={this.InlineStyles}
             disabled={this.Disabled}
             onClick={this.OnButtonClick}
+            {...this.GetHTMLProps(this.props) }
         >
             {this.props.children}
         </button>;

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

@@ -4,8 +4,13 @@ import {
     FieldsArrayState as CoreState
 } from "@simplr/react-forms/contracts";
 import { BaseFieldsArray } from "@simplr/react-forms";
+import { HTMLElementProps } from "../contracts/field";
 
-export type FieldsArrayProps = CoreProps;
+export interface FieldsArrayProps extends CoreProps, HTMLElementProps<HTMLDivElement> {
+    name: string;
+
+    ref?: React.Ref<FieldsArray>;
+}
 
 export type FieldsArrayState = CoreState;
 

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

@@ -4,8 +4,13 @@ import {
     FieldsGroupState as CoreState
 } from "@simplr/react-forms/contracts";
 import { BaseFieldsGroup } from "@simplr/react-forms";
+import { HTMLElementProps } from "../contracts/field";
 
-export type FieldsGroupProps = CoreProps;
+export interface FieldsGroupProps extends CoreProps, HTMLElementProps<HTMLDivElement> {
+    name: string;
+
+    ref?: React.Ref<FieldsGroup>;
+}
 
 export type FieldsGroupState = CoreState;
 

packages/react-forms-dom/src/components/reset.tsx

@@ -5,9 +5,12 @@ import {
     BaseFormButtonProps,
     BaseFormButtonStateRecord
 } from "../abstractions/base-form-button";
+import { HTMLElementProps } from "../contracts/field";
 
-export interface ResetProps extends BaseFormButtonProps {
+export interface ResetProps extends BaseFormButtonProps, HTMLElementProps<HTMLButtonElement> {
     fieldIds?: string[];
+
+    ref?: React.Ref<Reset>;
 }
 
 export class Reset extends BaseFormButton<ResetProps, BaseFormButtonStateRecord> {
@@ -20,14 +23,24 @@ export class Reset extends BaseFormButton<ResetProps, BaseFormButtonStateRecord>
         }
     }
 
+    protected GetHTMLProps(props: ResetProps): {} {
+        const filteredProps = super.GetHTMLProps(props) as ResetProps;
+        const {
+            fieldIds,
+            ...restProps
+        } = filteredProps;
+
+        return restProps;
+    }
+
     public render(): JSX.Element {
-        // TODO: Pass all other props.
         return <button
             type="button"
             className={this.ClassName}
             style={this.InlineStyles}
             disabled={this.Disabled}
             onClick={this.OnButtonClick}
+            {...this.GetHTMLProps(this.props) }
         >
             {this.props.children}
         </button>;

packages/react-forms-validation/README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://github.com/SimplrJS">
-    <img width="200" src="https://user-images.githubusercontent.com/7989797/27303346-34a5d6fa-5543-11e7-91e8-5b34287d0bc8.png" />
+    <img width="200" src="https://user-images.githubusercontent.com/7989797/27446299-b93aa76c-5785-11e7-8ef6-475f858e3291.png" />
   </a>
 </div>
 <p align="center">

packages/react-forms-validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplr/react-forms-validation",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Validation library for @simplr/react-forms.",
   "repository": "SimplrJS/react-forms",
   "homepage": "https://github.com/SimplrJS/react-forms",