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:
Alex Liebowitz 2016-10-26 03:22:05 -04:00
parent 57b953ba69
commit f34fca11a8

View file

@ -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>
); );
} }