Merge pull request mathieudutour#2 from mathieudutour/f/no-click-on-l…

…oading F/no click on loading
jamesjjk · Sep 2, 2015 · d3cfa40 · d3cfa40
2 parents afc0f37 + 5f37361
commit d3cfa40
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -82,6 +82,17 @@ Function to call when going back to the normal state after a success
 
 State of the button if you do not want to use the functions. Can be '', 'loading', 'success' or 'error'.
 
+##### type
+
+Type of the button (can be 'submit' for example).
+
+##### form
+
+Id of the form to submit (useful if the button is not directly inside the form).
+
+##### shouldAllowClickOnLoading
+
+Wether click event should bubble when in loading state
 
 ### Methods
 
@@ -93,7 +104,7 @@ Put the button in the loading state.
 
 Put the button in the normal state.
 
-##### success([callback, goBackToNormal])
+##### success([callback, dontGoBackToNormal])
 
 Put the button in the success state. Call the callback or the onSuccess prop when going back to the normal state.
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-progress-button",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "description": "Simple react.js component for a inline progress indicator",
   "main": "react-progress-button.js",
   "dependencies": {

diff --git a/react-progress-button.js b/react-progress-button.js
@@ -19,15 +19,19 @@
       onError: React.PropTypes.func,
       onSuccess: React.PropTypes.func,
       state: React.PropTypes.string,
-      type: React.PropTypes.string
+      type: React.PropTypes.string,
+      shouldAllowClickOnLoading: React.PropTypes.bool,
     },
 
     getDefaultProps: function() {
       return {
         classNamespace: 'pb-',
         durationError: 1200,
         durationSuccess: 500,
-        onClick: function() {}
+        onClick: function() {},
+        onError: function() {},
+        onSuccess: function() {},
+        shouldAllowClickOnLoading: false,
       };
     },
 
@@ -40,7 +44,7 @@
     render: function() {
       return (
         React.createElement("div", {className: this.props.classNamespace + "container " + this.state.currentState,
-          onClick: this.props.onClick},
+          onClick: this.handleClick},
           React.createElement("button", {type: this.props.type, form: this.props.form,
             className: this.props.classNamespace + "button"},
             React.createElement("span", null, this.props.children),
@@ -65,6 +69,14 @@
       );
     },
 
+    handleClick: function(e) {
+      if (this.props.shouldAllowClickOnLoading || this.state.currentState !== 'loading') {
+        this.props.onClick(e);
+      } else {
+        e.preventDefault();
+      }
+    },
+
     loading: function() {
       this.setState({currentState: 'loading'});
     },
@@ -73,26 +85,21 @@
       this.setState({currentState: ''});
     },
 
-    success: function(callback, remove) {
+    success: function(callback, dontRemove) {
       this.setState({currentState: 'success'});
       this._timeout = setTimeout(function() {
         callback = callback || this.props.onSuccess;
-        if (callback && typeof callback === "function") {
-          callback();
-          if (remove) { this.setState({currentState: ''}); }
-        } else {
-          this.setState({currentState: ''});
-        }
+        callback();
+        if (dontRemove === true) { return; }
+        this.setState({currentState: ''});
       }.bind(this), this.props.durationSuccess);
     },
 
     error: function(callback) {
       this.setState({currentState: 'error'});
       this._timeout = setTimeout(function() {
         callback = callback || this.props.onError;
-        if (callback && typeof callback === "function") {
-          callback();
-        }
+        callback();
         this.setState({currentState: ''});
       }.bind(this), this.props.durationError);
     },