From b4116672cd6dc64e382003ce6b7729c40e01168f Mon Sep 17 00:00:00 2001
From: Belmin Bedak <belmoo996@hotmail.com>
Date: Mon, 23 Sep 2019 10:33:56 +0200
Subject: [PATCH] Introduce `additionalButtonRenderers` prop for Form component
 (#36)

* Introduce `additionalButtonRenderers` prop for Form component
---
 package-lock.json  |  2 +-
 src/form/form.tsx  | 20 +++++++++++++++++++-
 src/form/index.tsx |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2f1c52c..8ce9ba4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ampel-ui",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/form/form.tsx b/src/form/form.tsx
index c158117..47630db 100644
--- a/src/form/form.tsx
+++ b/src/form/form.tsx
@@ -77,6 +77,13 @@ interface ValidationOptions {
 
 type ViolationMessageResolver = (key: string, context: object | null) => string;
 
+interface FormButtonProps {
+    key: number;
+    isSubmitting: boolean;
+    isDirty: boolean;
+    isValid: boolean;
+}
+
 interface Props<MODEL> {
     model: MODEL;
     onCancel?: () => void;
@@ -88,6 +95,7 @@ interface Props<MODEL> {
     validationSchema?: any;
     validationOptions?: ValidationOptions;
     resolveViolationMessage?: ViolationMessageResolver;
+    additionalButtonRenderers?: Array<(buttonProps: FormButtonProps) => React.ReactNode>;
 }
 
 interface State<MODEL> {
@@ -143,6 +151,16 @@ class Form<MODEL extends object> extends React.Component<Props<MODEL>, State<MOD
                     <div className="col-xs-12">
                         {this.props.onCancel && this.getCancelButton()}
 
+                        {this.props.additionalButtonRenderers &&
+                            this.props.additionalButtonRenderers.map((buttonRenderer, index) =>
+                                buttonRenderer({
+                                    key: index,
+                                    isSubmitting: this.state.isSubmitting,
+                                    isDirty: this.state.isDirty,
+                                    isValid: this.state.isValid,
+                                })
+                            )}
+
                         <Button
                             id="submit"
                             text={this.props.submitButtonText}
@@ -466,4 +484,4 @@ class Form<MODEL extends object> extends React.Component<Props<MODEL>, State<MOD
     }
 }
 
-export { Form, SectionType, FieldType, FieldContext, ViolationMessageResolver };
+export { Form, SectionType, FieldType, FieldContext, ViolationMessageResolver, FormButtonProps };
diff --git a/src/form/index.tsx b/src/form/index.tsx
index 5b07f9a..76927fa 100644
--- a/src/form/index.tsx
+++ b/src/form/index.tsx
@@ -1,3 +1,3 @@
-export { FieldContext, FieldType, Form, SectionType } from './form';
+export { FormButtonProps, FieldContext, FieldType, Form, SectionType } from './form';
 export { FormField } from './form-field';
 export { Editor, Field } from './types';