2015-07-15 12:30:11 +08:00
|
|
|
import Component from 'flarum/Component';
|
|
|
|
import Alert from 'flarum/components/Alert';
|
2015-07-17 13:17:49 +08:00
|
|
|
import Button from 'flarum/components/Button';
|
2015-07-15 12:30:11 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* The `Modal` component displays a modal dialog, wrapped in a form. Subclasses
|
|
|
|
* should implement the `className`, `title`, and `content` methods.
|
|
|
|
*
|
|
|
|
* @abstract
|
|
|
|
*/
|
|
|
|
export default class Modal extends Component {
|
2015-10-13 14:25:56 +08:00
|
|
|
init() {
|
2015-07-15 12:30:11 +08:00
|
|
|
/**
|
|
|
|
* An alert component to show below the header.
|
|
|
|
*
|
|
|
|
* @type {Alert}
|
|
|
|
*/
|
|
|
|
this.alert = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
view() {
|
|
|
|
if (this.alert) {
|
|
|
|
this.alert.props.dismissible = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2015-07-17 13:17:49 +08:00
|
|
|
<div className={'Modal modal-dialog ' + this.className()}>
|
|
|
|
<div className="Modal-content">
|
2015-08-07 07:21:03 +08:00
|
|
|
{this.isDismissible() ? (
|
|
|
|
<div className="Modal-close App-backControl">
|
|
|
|
{Button.component({
|
|
|
|
icon: 'times',
|
|
|
|
onclick: this.hide.bind(this),
|
|
|
|
className: 'Button Button--icon Button--link'
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
) : ''}
|
2015-07-15 12:30:11 +08:00
|
|
|
|
|
|
|
<form onsubmit={this.onsubmit.bind(this)}>
|
2015-07-17 13:17:49 +08:00
|
|
|
<div className="Modal-header">
|
2015-07-22 08:26:01 +08:00
|
|
|
<h3 className="App-titleControl App-titleControl--text">{this.title()}</h3>
|
2015-07-15 12:30:11 +08:00
|
|
|
</div>
|
|
|
|
|
2015-07-17 13:17:49 +08:00
|
|
|
{alert ? <div className="Modal-alert">{this.alert}</div> : ''}
|
2015-07-15 12:30:11 +08:00
|
|
|
|
|
|
|
{this.content()}
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-08-07 07:21:03 +08:00
|
|
|
/**
|
|
|
|
* Determine whether or not the modal should be dismissible via an 'x' button.
|
|
|
|
*
|
|
|
|
* @return {Boolean}
|
|
|
|
*/
|
|
|
|
isDismissible() {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2015-07-15 12:30:11 +08:00
|
|
|
/**
|
|
|
|
* Get the class name to apply to the modal.
|
|
|
|
*
|
|
|
|
* @return {String}
|
|
|
|
* @abstract
|
|
|
|
*/
|
|
|
|
className() {
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get the title of the modal dialog.
|
|
|
|
*
|
|
|
|
* @return {String}
|
|
|
|
* @abstract
|
|
|
|
*/
|
|
|
|
title() {
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get the content of the modal.
|
|
|
|
*
|
|
|
|
* @return {VirtualElement}
|
|
|
|
* @abstract
|
|
|
|
*/
|
|
|
|
content() {
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handle the modal form's submit event.
|
|
|
|
*
|
|
|
|
* @param {Event} e
|
|
|
|
*/
|
|
|
|
onsubmit() {
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Focus on the first input when the modal is ready to be used.
|
|
|
|
*/
|
|
|
|
onready() {
|
2015-08-05 14:37:43 +08:00
|
|
|
this.$('form :input:first').focus().select();
|
2015-07-15 12:30:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Hide the modal.
|
|
|
|
*/
|
|
|
|
hide() {
|
|
|
|
app.modal.close();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Show an alert describing errors returned from the API, and give focus to
|
|
|
|
* the first relevant field.
|
|
|
|
*
|
2015-07-17 13:17:49 +08:00
|
|
|
* @param {Object} response
|
2015-07-15 12:30:11 +08:00
|
|
|
*/
|
2015-07-17 13:17:49 +08:00
|
|
|
handleErrors(response) {
|
|
|
|
const errors = response && response.errors;
|
|
|
|
|
2015-07-15 12:30:11 +08:00
|
|
|
if (errors) {
|
2015-08-05 10:19:37 +08:00
|
|
|
this.alert = new Alert({
|
|
|
|
type: 'error',
|
|
|
|
children: errors.map((error, k) => [error.detail, k < errors.length - 1 ? m('br') : ''])
|
|
|
|
});
|
2015-07-15 12:30:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
m.redraw();
|
|
|
|
|
|
|
|
if (errors) {
|
2015-09-14 14:10:07 +08:00
|
|
|
this.$('form [name=' + errors[0].source.pointer.replace('/data/attributes/', '') + ']').select();
|
2015-07-15 12:30:11 +08:00
|
|
|
} else {
|
2015-07-17 13:17:49 +08:00
|
|
|
this.$('form :input:first').select();
|
2015-07-15 12:30:11 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|