Refs #5529 @0.5h; Refactor buttons5529-prevent-double-submitting-of-react-forms

1 files changed, 47 insertions, 0 deletions

diff --git a/app/javascript/helpers/save_button.js b/app/javascript/helpers/save_button.js
new file mode 100644
index 000000000..7e0bd5bbe
--- /dev/null
+++ b/app/javascript/helpers/save_button.js
@@ -0,0 +1,47 @@
+import React, { PropTypes, Component } from 'react'
+
+export default class SaveButton extends Component{
+  constructor(props){
+    super(props)
+  }
+
+  btnDisabled(){
+    return !this.props.status.fetchSuccess || this.props.status.isFetching
+  }
+
+  btnClass(){
+    let className = ['btn btn-default']
+    if(this.btnDisabled()){
+      className.push('disabled')
+    }
+    return className.join(' ')
+  }
+
+  render() {
+    if (!this.hasPolicy()) {
+      return false
+    }else{
+      return (
+        <div className='row mt-md'>
+          <div className='col-lg-12 text-right'>
+            <form className={this.formClassName() + ' formSubmitr ml-xs'} onSubmit={e => {e.preventDefault()}}>
+              <div className="btn-group sticky-actions">
+                <button
+                  className={this.btnClass()}
+                  type='button'
+                  disabled={this.btnDisabled()}
+                  onClick={e => {
+                    e.preventDefault()
+                    this.props.editMode ? this.submitForm() : this.props.onEnterEditMode()
+                  }}
+                >
+                  {this.props.editMode ? "Valider" : "Editer"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )
+    }
+  }
+}