From 5c14a4c38450cc05208cfc9e33ffc3e3574b12f0 Mon Sep 17 00:00:00 2001
From: Henrik Lang <henrik.lang@diva-e.com>
Date: Wed, 12 Feb 2020 14:55:07 +0100
Subject: [PATCH 1/2] extended `Form` component with form reset functionality -
 this functionality is needed by new Pharos component `FilterBar` and is also
 very useful in general when using this Form component

---
 src/components/Form/Example.md | 75 +++++++++++++++++++++++++++++++++-
 src/components/Form/index.tsx  | 51 ++++++++++++++++++++++-
 2 files changed, 123 insertions(+), 3 deletions(-)

diff --git a/src/components/Form/Example.md b/src/components/Form/Example.md
index 01d98b89..4379455e 100644
--- a/src/components/Form/Example.md
+++ b/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>
+```
diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
index 18f5a852..5842bfc1 100644
--- a/src/components/Form/index.tsx
+++ b/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,6 +321,39 @@ 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,
@@ -313,13 +361,14 @@ export class Form<Values extends FormValuesData> extends React.Component<FormPro
       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>

From b0ab93dce6308f984509d0844f4f4419adadc282 Mon Sep 17 00:00:00 2001
From: Henrik Lang <henrik.lang@diva-e.com>
Date: Wed, 12 Feb 2020 16:28:42 +0100
Subject: [PATCH 2/2] fixed typo

---
 src/components/Form/Example.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Form/Example.md b/src/components/Form/Example.md
index 4379455e..50841bbf 100644
--- a/src/components/Form/Example.md
+++ b/src/components/Form/Example.md
@@ -188,9 +188,9 @@ const filterDefinitions = {
       { content: 'Credit', key: 'Credit' },
     ],
   },
-  statis: {
+  statuses: {
     label: 'Status',
-    name: 'statis',
+    name: 'statuses',
     data: [
       { content: 'Open', key: 'Open' },
       { content: 'Paid', key: 'Paid' },
@@ -198,7 +198,7 @@ const filterDefinitions = {
   }
 };
 
-<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'); }}>
+<Form defaultValue={{first: 'My Firstname', statuses: [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>
@@ -219,7 +219,7 @@ const filterDefinitions = {
     <hr/>
   </div>
   <div>
-    <DropdownField {...filterDefinitions.statis} />
+    <DropdownField {...filterDefinitions.statuses} />
     <hr/>
   </div>
   <div>