extended Form component with form reset functionality

src/components/Form/Example.md

@@ -137,8 +137,8 @@ The `Form` with validation rules
 ```jsx
 const { Form, Button, TextField } = require('precise-ui');
 
-<Form 
-  onSubmit={e => alert(JSON.stringify(e))} 
+<Form
+  onSubmit={e => alert(JSON.stringify(e))}
   validationRules={{
     first: (value) => value && value.length > 10 ? 'Should be less than 10' : undefined,
     last: () => 'Always some error',
@@ -160,3 +160,74 @@ const { Form, Button, TextField } = require('precise-ui');
   </div>
 </Form>
 ```
+
+Managed `Form` with default value and reset button
+
+```jsx
+const { Form, Button, TextField, DropdownField } = require('precise-ui');
+
+const filterDefinitions = {
+  timeRanges: {
+    label: 'Time Range',
+    name: 'timeRanges',
+    data: [
+      { content: 'Last 7 days', key: '7' },
+      { content: 'Last 30 days', key: '30' },
+      { content: 'Last 60 days', key: '60' },
+      { content: 'Last 90 days', key: '90' },
+      { content: 'Last year', key: '365' },
+    ],
+  },
+  types: {
+    label: 'Types',
+    name: 'types',
+    multiple: true,
+    data: [
+      { content: 'Statement', key: 'Statement' },
+      { content: 'Invoice', key: 'Invoice' },
+      { content: 'Credit', key: 'Credit' },
+    ],
+  },
+  statis: {
+    label: 'Status',
+    name: 'statis',
+    data: [
+      { content: 'Open', key: 'Open' },
+      { content: 'Paid', key: 'Paid' },
+    ],
+  }
+};
+
+<Form defaultValue={{first: 'My Firstname', statis: [1], types: [1, 2] }} onSubmit={e => alert(JSON.stringify(e.data))} onReset={e => { console.info(e, 'reset'); }} onChange={e => { console.info(e, 'CHANGE'); }}>
+  <div>
+    First:
+  </div>
+  <div>
+    <TextField name="first" />
+  </div>
+  <div>
+    Last:
+  </div>
+  <div>
+    <TextField name="last" />
+  </div>
+  <div>
+    Filters:
+  </div>
+  <div>
+    <DropdownField {...filterDefinitions.timeRanges} />
+    <hr/>
+  </div>
+  <div>
+    <DropdownField {...filterDefinitions.statis} />
+    <hr/>
+  </div>
+  <div>
+    <DropdownField {...filterDefinitions.types} />
+  </div>
+  <div>
+    <Button>Submit</Button>
+    <Button type="reset" buttonStyle="secondary">Reset</Button>
+  </div>
+</Form>
+```

src/components/Form/index.tsx

@@ -19,6 +19,17 @@ export interface FormSubmitEvent {
   changed: boolean;
 }
 
+export interface FormResetEvent {
+  /**
+   * The current resetted values of the form fields.
+   */
+  value: FormValuesData;
+  /**
+   * Indicates whether the data has changed from the initial state.
+   */
+  changed: boolean;
+}
+
 export interface FormChangeEvent {
   /**
    * The current values of the form fields.
@@ -61,6 +72,10 @@ export interface FormProps<FormValues> extends StandardProps {
    * Event emitted when a field of the form changed.
    */
   onChange?(e: FormChangeEvent): void;
+  /**
+   * Event emitted when the form is reset.
+   */
+  onReset?(e: FormResetEvent): void;
   /**
    * Event emitted when the form is submitted.
    */
@@ -306,20 +321,54 @@ export class Form<Values extends FormValuesData> extends React.Component<FormPro
     return false;
   };
 
+  private reset = (e: React.FormEvent<HTMLFormElement>) => {
+    const { onChange, onReset, disabled } = this.props;
+    const { initial, controlled } = this.state;
+    const changed = true;
+
+    if (!disabled) {
+      const proposed = {
+        ...initial,
+      };
+
+      if (!controlled) {
+        this.setValues(proposed, changed);
+      }
+
+      if (typeof onChange === 'function') {
+        onChange({
+          changed,
+          value: proposed,
+        });
+      }
+
+      if (typeof onReset === 'function') {
+        onReset({
+          changed,
+          value: proposed,
+        });
+      }
+    }
+
+    e.preventDefault();
+    return false;
+  };
+
   render() {
     const {
       value: _0,
       defaultValue: _1,
       onChange: _2,
       onSubmit: _3,
       disabled: _4,
+      onReset: _5,
       children,
       prompt,
       ...rest
     } = this.props;
     const { changed } = this.state;
     return (
-      <StyledForm {...rest} onSubmit={this.submit}>
+      <StyledForm {...rest} onSubmit={this.submit} onReset={this.reset}>
         {prompt && <Prompt when={changed} message={prompt} />}
         <FormContext.Provider value={this.ctx}>{children}</FormContext.Provider>
       </StyledForm>