107 lines
3.0 KiB
JavaScript
107 lines
3.0 KiB
JavaScript
/*jshint nomen:true */
|
|
/*globals React, App */
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
/**
|
|
* Modal for displaying Error objects
|
|
*
|
|
* @prop {title: string} Error title, category or extra data
|
|
* @prop {error: Error} Error object to format
|
|
* @prop {canRetry: bool} Whether the user can ask to recover from this error
|
|
* @prop {open: func} Called to open the window
|
|
* @prop {close: func} Called to close the window
|
|
* @prop {onRetry: func} Called when the user asks for retrying
|
|
*/
|
|
App.components.modal({
|
|
displayName: 'Error',
|
|
mixins: [React.addons.PureRenderMixin],
|
|
|
|
modal: {
|
|
showCloseButton: false
|
|
},
|
|
|
|
propTypes: {
|
|
title: React.PropTypes.string,
|
|
error: React.PropTypes.object,
|
|
canRetry: React.PropTypes.bool,
|
|
|
|
open: React.PropTypes.func,
|
|
close: React.PropTypes.func,
|
|
onRetry: React.PropTypes.func
|
|
},
|
|
|
|
getDefaultProps: function () {
|
|
return {
|
|
title: 'Erreur',
|
|
error: new Error('Erreur'),
|
|
canRetry: false,
|
|
|
|
open: function () {},
|
|
close: function () {},
|
|
onRetry: function () {}
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Retry handler
|
|
*/
|
|
retry: function (e) {
|
|
this.props.onRetry();
|
|
e.preventDefault();
|
|
},
|
|
|
|
/**
|
|
* Close handler
|
|
*/
|
|
close: function (e) {
|
|
this.props.close();
|
|
e.preventDefault();
|
|
},
|
|
|
|
/**
|
|
* Render modal
|
|
*/
|
|
render: function () {
|
|
var buttons = [];
|
|
|
|
buttons = [
|
|
React.DOM.button({
|
|
key: 'retry',
|
|
className: 'bt primary inverse',
|
|
style: {
|
|
display: (this.props.canRetry) ?
|
|
'inline-block' : 'none'
|
|
},
|
|
onClick: this.retry
|
|
}, 'Réessayer'),
|
|
React.DOM.button({
|
|
key: 'continue',
|
|
className: 'bt secondary inverse',
|
|
onClick: this.close
|
|
}, 'Continuer')
|
|
];
|
|
|
|
return React.DOM.form({
|
|
className: 'vex-dialog-form'
|
|
}, [
|
|
React.DOM.h4({
|
|
key: 'title',
|
|
className: 'main-title'
|
|
}, this.props.title),
|
|
React.DOM.p({
|
|
key: 'description',
|
|
dangerouslySetInnerHTML: {
|
|
__html: this.props.error.message
|
|
}
|
|
}),
|
|
|
|
React.DOM.p({
|
|
key: 'buttons',
|
|
className: 'vex-dialog-buttons'
|
|
}, buttons)
|
|
]);
|
|
}
|
|
});
|
|
}()); |