From c53574296ee51ab490b886a0251f2326e0f1049a Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Tue, 1 Sep 2015 12:53:09 +0100 Subject: [PATCH 1/6] no click when loading by default --- react-progress-button.js | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/react-progress-button.js b/react-progress-button.js index 870a07f..31a5714 100644 --- a/react-progress-button.js +++ b/react-progress-button.js @@ -19,7 +19,8 @@ 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() { @@ -27,7 +28,10 @@ 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,12 @@ ); }, + handleClick: function(e) { + if (shouldAllowClickOnLoading || this.state.currentState !== 'loading') { + this.props.onClick(e); + } + }, + loading: function() { this.setState({currentState: 'loading'}); }, @@ -73,16 +83,13 @@ 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); }, @@ -90,9 +97,7 @@ 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); }, From c60e344baa782d61905ab12b603b66cfb78660d3 Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Tue, 1 Sep 2015 12:53:56 +0100 Subject: [PATCH 2/6] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6e33e87..d4c9ba2 100755 --- a/README.md +++ b/README.md @@ -83,6 +83,7 @@ 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'. + ### Methods ##### loading() @@ -93,7 +94,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. From 1307efef8acb9a9ed5e864214b96efe1767832ff Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Tue, 1 Sep 2015 12:57:42 +0100 Subject: [PATCH 3/6] prevent default when loading --- react-progress-button.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/react-progress-button.js b/react-progress-button.js index 31a5714..54beb8b 100644 --- a/react-progress-button.js +++ b/react-progress-button.js @@ -72,6 +72,8 @@ handleClick: function(e) { if (shouldAllowClickOnLoading || this.state.currentState !== 'loading') { this.props.onClick(e); + } else { + e.preventDefault(); } }, From 13948f0c870bc505ea56fe752613e16866f89c2f Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Tue, 1 Sep 2015 12:58:25 +0100 Subject: [PATCH 4/6] Update README.md --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index d4c9ba2..22c1cc9 100755 --- a/README.md +++ b/README.md @@ -82,7 +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 From 15b66bfe380b15361fdfef41c361e5ebfe0db7db Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Wed, 2 Sep 2015 10:13:37 +0100 Subject: [PATCH 5/6] Update react-progress-button.js --- react-progress-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-progress-button.js b/react-progress-button.js index 54beb8b..f5deeca 100644 --- a/react-progress-button.js +++ b/react-progress-button.js @@ -70,7 +70,7 @@ }, handleClick: function(e) { - if (shouldAllowClickOnLoading || this.state.currentState !== 'loading') { + if (this.props.shouldAllowClickOnLoading || this.state.currentState !== 'loading') { this.props.onClick(e); } else { e.preventDefault(); From 5f373618023277d23948b9c683df54a1fda80e00 Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Wed, 2 Sep 2015 11:32:16 +0100 Subject: [PATCH 6/6] version 0.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index af2dad0..93128ea 100644 --- 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": {