Skip to content

Commit

Permalink
add disabled state
Browse files Browse the repository at this point in the history
  • Loading branch information
mathieudutour committed Sep 4, 2015
1 parent 89b2468 commit 6d2258d
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 9 deletions.
13 changes: 7 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ var App = React.createClass({
</div>
);
},

handleClick() {
this.refs.button.loading();
//make asynchronious call
Expand Down Expand Up @@ -80,7 +80,7 @@ Function to call when going back to the normal state after a success

##### state

State of the button if you do not want to use the functions. Can be '', 'loading', 'success' or 'error'.
State of the button if you do not want to use the functions. Can be `''`, `loading`, `success`, `error` or `disabled`.

##### type

Expand All @@ -100,7 +100,11 @@ Wether click event should bubble when in loading state

Put the button in the loading state.

##### notLoading()
##### disable()

Put the button in the disabled state.

##### notLoading(), enable()

Put the button in the normal state.

Expand All @@ -119,6 +123,3 @@ Look at [react-progress-button.css](https://github.com/mathieudutour/react-progr
---

MIT Licensed



2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"react-progress-button.js",
"react-progress-button.css"
],
"version": "1.0.0",
"version": "1.1.0",
"homepage": "https://github.com/mathieudutour/react-progress-button",
"description": "Simple react.js component for a inline progress indicator",
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-progress-button",
"version": "1.0.0",
"version": "1.1.0",
"description": "Simple react.js component for a inline progress indicator",
"main": "react-progress-button.js",
"dependencies": {
Expand Down
4 changes: 4 additions & 0 deletions react-progress-button.css
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,14 @@
stroke-linecap: round;
stroke-width: 4;
}
.pb-container.disable .pb-button {
cursor: not-allowed;
}
.pb-container.loading .pb-button {
width: 54px;
border-width: 6.5px;
border-color: #ddd;
cursor: wait;
background-color: transparent;
padding: 0;
}
Expand Down
16 changes: 15 additions & 1 deletion react-progress-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,10 @@
},

handleClick: function(e) {
if (this.props.shouldAllowClickOnLoading || this.state.currentState !== 'loading') {
if ((this.props.shouldAllowClickOnLoading ||
this.state.currentState !== 'loading') &&
this.state.currentState !== 'disabled'
) {
this.props.onClick(e);
} else {
e.preventDefault();
Expand All @@ -85,6 +88,14 @@
this.setState({currentState: ''});
},

enable: function() {
this.setState({currentState: ''});
},

disable: function() {
this.setState({currentState: 'disabled'});
},

success: function(callback, dontRemove) {
this.setState({currentState: 'success'});
this._timeout = setTimeout(function() {
Expand Down Expand Up @@ -115,6 +126,9 @@
case 'loading':
this.loading();
return;
case 'disabled':
this.disable();
return;
case '':
this.notLoading();
return;
Expand Down

0 comments on commit 6d2258d

Please sign in to comment.