Add option to disable confirm or abort buttons in modals
Adds new confirmButtonDisabled and abortButtonDisabled props to Modal component. Mainly useful when you have a "confirm" button that performs some operation before closing the modal and you need the confirm button to disable after it's clicked.
This commit is contained in:
parent
57b953ba69
commit
f34fca11a8
|
@ -5,12 +5,16 @@ var Modal = React.createClass({
|
||||||
onAborted: React.PropTypes.func,
|
onAborted: React.PropTypes.func,
|
||||||
confirmButtonLabel: React.PropTypes.string,
|
confirmButtonLabel: React.PropTypes.string,
|
||||||
abortButtonLabel: React.PropTypes.string,
|
abortButtonLabel: React.PropTypes.string,
|
||||||
|
confirmButtonDisabled: React.PropTypes.bool,
|
||||||
|
abortButtonDisabled: React.PropTypes.bool,
|
||||||
},
|
},
|
||||||
getDefaultProps: function() {
|
getDefaultProps: function() {
|
||||||
return {
|
return {
|
||||||
type: 'alert',
|
type: 'alert',
|
||||||
confirmButtonLabel: 'OK',
|
confirmButtonLabel: 'OK',
|
||||||
abortButtonLabel: 'Cancel',
|
abortButtonLabel: 'Cancel',
|
||||||
|
confirmButtonDisabled: false,
|
||||||
|
abortButtonDisabled: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
|
@ -36,9 +40,9 @@ var Modal = React.createClass({
|
||||||
var buttons = (
|
var buttons = (
|
||||||
<div className="modal__buttons">
|
<div className="modal__buttons">
|
||||||
{this.props.type == 'confirm'
|
{this.props.type == 'confirm'
|
||||||
? <Link button="alt" label={props.abortButtonLabel} className="modal__button" onClick={props.onAborted} />
|
? <Link button="alt" label={props.abortButtonLabel} className="modal__button" disabled={this.props.abortButtonDisabled} onClick={props.onAborted} />
|
||||||
: null}
|
: null}
|
||||||
<Link button="primary" label={props.confirmButtonLabel} className="modal__button" onClick={props.onConfirmed} />
|
<Link button="primary" label={props.confirmButtonLabel} className="modal__button" disabled={this.props.confirmButtonDisabled} onClick={props.onConfirmed} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue