Skip to content

Commit

Permalink
add stayInSuccessState and stayInErrorState props
Browse files Browse the repository at this point in the history
  • Loading branch information
monkeydri committed Apr 29, 2019
1 parent 23f8e83 commit e195abc
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 10 deletions.
19 changes: 15 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,16 @@ Id of the form to submit (useful if the button is not directly inside the form).

Whether click event should bubble when in loading state

##### stayInSuccessState

Keep the button in success state after setting state to "success" or calling `success()` method (regardless of `stayInSuccessState` argument value).
default is `false`

##### stayInErrorState

Keep the button in error state after setting state to "error" or calling `error()` method (regardless of `stayInErrorState` argument value).
default is `false`

### Methods

##### loading()
Expand All @@ -153,15 +163,16 @@ Put the button in the disabled state.

Put the button in the normal state.

##### success([callback, dontGoBackToNormal])
##### success([callback, stayInSuccessState])

Put the button in the success state. Call the callback or the onSuccess prop when going back to the normal state.
Use `dontGoBackToNormal` flag to keep the button in success state (default is `false` so the button goes back to normal state after `durationSuccess`).
Use `stayInSuccessState` flag to keep the button in success state (default is `false` so the button goes back to normal state after `durationSuccess`).

##### error([callback, error, dontGoBackToNormal])
##### error([callback, error, stayInErrorState])

Put the button in the error state. Call the callback or the onError prop (with `error` argument) when going back to the normal state.
Use `dontGoBackToNormal` flag to keep the button in error state (default is `false` so the button goes back to normal state after `durationError`).
Use `stayInErrorState` flag to keep the button in error state (default is `false` so the button goes back to normal state after `durationError`).


## Styles

Expand Down
16 changes: 10 additions & 6 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ const ProgressButton = createReactClass({
onSuccess: PropTypes.func,
state: PropTypes.oneOf(Object.keys(STATE).map(k => STATE[k])),
type: PropTypes.string,
shouldAllowClickOnLoading: PropTypes.bool
shouldAllowClickOnLoading: PropTypes.bool,
stayInSuccessState: PropTypes.bool,
stayInErrorState: PropTypes.bool
},

getDefaultProps () {
Expand All @@ -34,7 +36,9 @@ const ProgressButton = createReactClass({
onClick () {},
onError () {},
onSuccess () {},
shouldAllowClickOnLoading: false
shouldAllowClickOnLoading: false,
stayInSuccessState: false,
stayInErrorState: false
}
},

Expand Down Expand Up @@ -159,19 +163,19 @@ const ProgressButton = createReactClass({
this.setState({currentState: STATE.DISABLED})
},

success (callback, dontRemove = false) {
success (callback, stayInSuccessState = false) {
this.setState({currentState: STATE.SUCCESS})
this._timeout = setTimeout(() => {
if (!dontRemove) { this.setState({currentState: STATE.NOTHING}) }
if (!stayInSuccessState || !this.props.stayInSuccessState) { this.setState({currentState: STATE.NOTHING}) }
callback = callback || this.props.onSuccess
if (typeof callback === 'function') { callback() }
}, this.props.durationSuccess)
},

error (callback, err, dontRemove = false) {
error (callback, err, stayInErrorState = false) {
this.setState({currentState: STATE.ERROR})
this._timeout = setTimeout(() => {
if (!dontRemove) { this.setState({currentState: STATE.NOTHING}) }
if (!stayInErrorState || !this.props.stayInErrorState) { this.setState({currentState: STATE.NOTHING}) }
callback = callback || this.props.onError
if (typeof callback === 'function') { callback(err) }
}, this.props.durationError)
Expand Down

0 comments on commit e195abc

Please sign in to comment.