diff --git a/README.md b/README.md index 6e33e87..22c1cc9 100755 --- 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 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": { diff --git a/react-progress-button.js b/react-progress-button.js index 870a07f..f5deeca 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,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,16 +85,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 +99,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); },