Added clear and reset buttons.

Added clear and reset tests and fixed component errors.

Author: Martynas Žilinskas

packages/simplr-forms-dom/__tests__/components/clear.test.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import * as Sinon from "sinon";
+
+import { FormStore } from "simplr-forms-core/stores";
+
+import { Form } from "../../src/components/form";
+import { Text } from "../../src/components/text";
+import { Clear } from "../../src/components/clear";
+
+describe("Clear button", () => {
+    let sandbox: Sinon.SinonSandbox;
+
+    beforeEach(() => {
+        sandbox = Sinon.sandbox.create();
+    });
+
+    afterEach(function () {
+        sandbox.restore();
+    });
+
+    it("clears all fields", () => {
+        const callback = sandbox.spy(FormStore.prototype, "ClearFields");
+
+        const wrapper = mount(<Form>
+            <Text name="field" />
+            <Clear>Clear form</Clear>
+        </Form>);
+
+        wrapper.find("button").simulate("click");
+
+        expect(callback.called).toBe(true);
+    });
+
+    it("clears fields by fieldsIds", () => {
+        const callback = sandbox.spy(FormStore.prototype, "ClearFields");
+        let fieldsIds: string[] = [];
+        for (let i = 0; i < 5; i++) {
+            fieldsIds.push(`text-${i}`);
+        }
+        let fields: JSX.Element[] = [];
+        fieldsIds.forEach(value => {
+            fields.push(<Text name={value} key={value} />);
+        });
+
+        const wrapper = mount(<Form>
+            {fields}
+            <Clear fieldIds={fieldsIds}>Clear form</Clear>
+        </Form>);
+
+        wrapper.find("button").simulate("click");
+
+        expect(callback.called).toBe(true);
+        // first click, first argument(fieldIds)
+        expect(callback.args[0][0]).toBe(fieldsIds);
+    });
+});

packages/simplr-forms-dom/__tests__/components/form.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { mount } from "enzyme";
-import * as sinon from "sinon";
+import * as Sinon from "sinon";
 
 import { FormStore, FSHContainer, FormStoresHandler } from "simplr-forms-core/stores";
 
@@ -14,7 +14,7 @@ describe("Form", () => {
     });
 
     it("calls submit callback when submit button is clicked", () => {
-        const submitCallback = sinon.stub();
+        const submitCallback = Sinon.stub();
 
         const wrapper = mount(<Form onSubmit={submitCallback}>
             <button type="submit">Submit</button>
@@ -27,7 +27,7 @@ describe("Form", () => {
 
     it("calls submit callback when submit called from FormStore", () => {
         const formId = "form-id";
-        const submitCallback = sinon.stub();
+        const submitCallback = Sinon.stub();
 
         const wrapper = mount(<Form formId={formId} onSubmit={submitCallback}></Form>);
 

packages/simplr-forms-dom/__tests__/components/reset.test.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import * as Sinon from "sinon";
+
+import { FormStore } from "simplr-forms-core/stores";
+
+import { Form } from "../../src/components/form";
+import { Text } from "../../src/components/text";
+import { Reset } from "../../src/components/reset";
+
+describe("Reset button", () => {
+    let sandbox: Sinon.SinonSandbox;
+
+    beforeEach(() => {
+        sandbox = Sinon.sandbox.create();
+    });
+
+    afterEach(function () {
+        sandbox.restore();
+    });
+
+    it("reset all fields", () => {
+        const callback = sandbox.spy(FormStore.prototype, "ResetFields");
+
+        const wrapper = mount(<Form>
+            <Text name="field" />
+            <Reset>Clear form</Reset>
+        </Form>);
+
+        wrapper.find("button").simulate("click");
+
+        expect(callback.called).toBe(true);
+    });
+
+    it("reset fields by fieldsIds", () => {
+        const callback = sandbox.spy(FormStore.prototype, "ResetFields");
+        let fieldsIds: string[] = [];
+        for (let i = 0; i < 5; i++) {
+            fieldsIds.push(`text-${i}`);
+        }
+        let fields: JSX.Element[] = [];
+        fieldsIds.forEach(value => {
+            fields.push(<Text name={value} key={value} />);
+        });
+
+        const wrapper = mount(<Form>
+            {fields}
+            <Reset fieldIds={fieldsIds}>Clear form</Reset>
+        </Form>);
+
+        wrapper.find("button").simulate("click");
+
+        expect(callback.called).toBe(true);
+        // first click, first argument(fieldIds)
+        expect(callback.args[0][0]).toBe(fieldsIds);
+    });
+});

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { recordify, TypedRecord } from "typed-immutable-record";
+
+import { BaseContainer, BaseContainerProps } from "simplr-forms-core";
+import { FormError } from "simplr-forms-core/contracts";
+
+export interface ClearProps extends BaseContainerProps, React.HTMLProps<HTMLButtonElement> {
+    fieldIds?: string[];
+}
+
+export interface ClearState {
+    Submitting: boolean;
+}
+
+export interface ClearStateRecord extends TypedRecord<ClearStateRecord>, ClearState { }
+
+export class Clear extends BaseContainer<ClearProps, ClearStateRecord> {
+    constructor(props: ClearProps) {
+        super(props);
+
+        this.state = recordify<ClearState, ClearStateRecord>({
+            Submitting: false
+        });
+    }
+
+    protected OnStoreUpdated(): void {
+        const formStore = this.FormStore.GetState();
+        const newState = recordify({
+            Submitting: formStore.Form.Submitting,
+        });
+
+        if (!newState.equals(this.state)) {
+            this.setState(() => newState);
+        }
+    }
+
+    protected get Disabled() {
+        if (this.props.disabled != null) {
+            return this.props.disabled;
+        }
+
+        return this.state.Submitting;
+    }
+
+    protected OnButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+        event.persist();
+        this.FormStore.ClearFields(this.props.fieldIds);
+
+        if (this.props.onClick != null) {
+            this.props.onClick(event);
+        }
+    }
+
+    render() {
+        // TODO: Pass all other props.
+        return <button
+            type="button"
+            disabled={this.Disabled}
+            onClick={this.OnButtonClick}
+        >
+            {this.props.children}
+        </button>;
+    }
+}

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { recordify, TypedRecord } from "typed-immutable-record";
+
+import { BaseContainer, BaseContainerProps } from "simplr-forms-core";
+import { FormError } from "simplr-forms-core/contracts";
+
+export interface ResetProps extends BaseContainerProps, React.HTMLProps<HTMLButtonElement> {
+    fieldIds?: string[];
+}
+
+export interface ResetState {
+    Submitting: boolean;
+}
+
+export interface ResetStateRecord extends TypedRecord<ResetStateRecord>, ResetState { }
+
+export class Reset extends BaseContainer<ResetProps, ResetStateRecord> {
+    constructor(props: ResetProps) {
+        super(props);
+
+        this.state = recordify<ResetState, ResetStateRecord>({
+            Submitting: false
+        });
+    }
+
+    protected OnStoreUpdated(): void {
+        const formStore = this.FormStore.GetState();
+        const newState = recordify({
+            Submitting: formStore.Form.Submitting,
+        });
+
+        if (!newState.equals(this.state)) {
+            this.setState(() => newState);
+        }
+    }
+
+    protected get Disabled() {
+        if (this.props.disabled != null) {
+            return this.props.disabled;
+        }
+
+        return this.state.Submitting;
+    }
+
+    protected OnButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+        event.persist();
+        this.FormStore.ResetFields(this.props.fieldIds);
+
+        if (this.props.onClick != null) {
+            this.props.onClick(event);
+        }
+    }
+
+    render() {
+        // TODO: Pass all other props.
+        return <button
+            type="button"
+            disabled={this.Disabled}
+            onClick={this.OnButtonClick}
+        >
+            {this.props.children}
+        </button>;
+    }
+}