nest-parrot
Version:
Parrot built on react
119 lines (118 loc) • 3.23 kB
JSX
/**
* on request modal dialog.
* z-index is 9899 and 9898, less than exception dialog, more than any other.
*/
(function (window, $, React, ReactDOM, $pt) {
var NOnRequestModal = React.createClass({
displayName: 'NOnRequestModal',
statics: {
getOnRequestModal: function (className) {
if ($pt.onRequestDialog === undefined || $pt.onRequestDialog === null) {
var onRequestContainer = $("#onrequest_modal_container");
if (onRequestContainer.length == 0) {
$("<div id='onrequest_modal_container' />").appendTo($(document.body));
}
$pt.onRequestDialog = ReactDOM.render(
<$pt.Components.NOnRequestModal className={className}/>, document.getElementById("onrequest_modal_container"));
}
return $pt.onRequestDialog;
},
WAITING_MESSAGE: 'Send request to server and waiting for response...',
Z_INDEX: 9898
},
getInitialState: function () {
return {
visible: false
};
},
/**
* set z-index
*/
fixDocumentPadding: function () {
document.body.style.paddingRight = 0;
},
/**
* did update
* @param prevProps
* @param prevState
*/
componentDidUpdate: function (prevProps, prevState) {
this.fixDocumentPadding();
if (this.state.visible) {
$(document).on('keydown', this.onDocumentKeyDown);
} else {
$(document).off('keydown', this.onDocumentKeyDown);
}
},
componentWillUpdate: function() {
$(document).off('keydown', this.onDocumentKeyDown);
},
/**
* did mount
*/
componentDidMount: function () {
this.fixDocumentPadding();
if (this.state.visible) {
$(document).on('keydown', this.onDocumentKeyDown);
} else {
$(document).off('keydown', this.onDocumentKeyDown);
}
},
componentWillUnmount: function() {
$(document).off('keydown', this.onDocumentKeyDown);
},
render: function () {
if (!this.state.visible) {
return null;
}
var css = {
'n-on-request': true,
modal: true,
fade: true,
in: true
};
if (this.props.className) {
css[this.props.className] = true;
}
return (<div>
<div className="modal-backdrop fade in" style={{zIndex: NOnRequestModal.Z_INDEX}}></div>
<div className={$pt.LayoutHelper.classSet(css)}
tabIndex="-1"
role="dialog"
ref="container"
style={{display: 'block', zIndex: NOnRequestModal.Z_INDEX + 1}}>
<div className="modal-danger modal-dialog" tabIndex='0'>
<div className="modal-content" role="document">
<div className="modal-body" ref='body'>
<span className='fa fa-fw fa-lg fa-spin fa-spinner'/> {NOnRequestModal.WAITING_MESSAGE}
</div>
</div>
</div>
</div>
</div>);
},
/**
* hide dialog
*/
hide: function () {
this.setState({visible: false});
},
/**
* show dialog
*/
show: function () {
this.setState({visible: true});
},
onDocumentKeyDown: function(evt) {
if (evt.keyCode === 9) { // tab
// evt.preventDefault();
var target = $(evt.target);
var container = $(this.refs.container);
if (target.closest(container).length == 0) {
container.focus();
}
}
}
});
$pt.Components.NOnRequestModal = NOnRequestModal;
}(window, jQuery, React, ReactDOM, $pt));