github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-22 01:48:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

common: use AlertState for Alert component data - pass this to AlertManager

Browse Source 
app.alerts.show() now can take plain object OR AlertState instance - will return AlertState.prototype.key
app.alerts.dismiss() takes AlertState or state key (returned by show())
This commit is contained in:
David Sevilla Martin 2020-05-03 17:45:55 -04:00
parent 4a5a5a9ef0
commit 4c8af1cdf8
No known key found for this signature in database
GPG Key ID: F764F1417E16B15F
12 changed files with 277 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
js/dist/admin.js vendored
View File

@ -13301,14 +13301,12 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _babel_runtime_helpers_esm_inheritsLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/inheritsLoose */ "./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js");
/* harmony import */ var _app__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../app */ "./src/admin/app.ts");
/* harmony import */ var _Page__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Page */ "./src/admin/components/Page.tsx");
/* harmony import */ var _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../common/components/FieldSet */ "./src/common/components/FieldSet.tsx");
/* harmony import */ var _common_components_Select__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../common/components/Select */ "./src/common/components/Select.tsx");
/* harmony import */ var _common_components_Button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../common/components/Button */ "./src/common/components/Button.tsx");
/* harmony import */ var _common_components_Alert__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../common/components/Alert */ "./src/common/components/Alert.tsx");
/* harmony import */ var _common_components_Button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../common/components/Button */ "./src/common/components/Button.tsx");
/* harmony import */ var _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../common/components/FieldSet */ "./src/common/components/FieldSet.tsx");
/* harmony import */ var _common_components_Select__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../common/components/Select */ "./src/common/components/Select.tsx");
/* harmony import */ var _common_components_Switch__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../common/components/Switch */ "./src/common/components/Switch.tsx");
/* harmony import */ var _utils_saveSettings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/saveSettings */ "./src/admin/utils/saveSettings.ts");
/* harmony import */ var _common_utils_ItemList__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../common/utils/ItemList */ "./src/common/utils/ItemList.ts");
/* harmony import */ var _common_components_Switch__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../common/components/Switch */ "./src/common/components/Switch.tsx");
@ -13367,14 +13365,14 @@ var BasicsPage = /*#__PURE__*/function (_Page) {
className: "container"
}, m("form", {
onsubmit: this.onsubmit.bind(this)
}, _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_3__["default"].component({
}, _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_4__["default"].component({
label: _app__WEBPACK_IMPORTED_MODULE_1__["default"].translator.trans('core.admin.basics.forum_title_heading'),
children: [m("input", {
className: "FormControl",
value: this.values.forum_title(),
oninput: m.withAttr('value', this.values.forum_title)
})]
}), _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_3__["default"].component({
}), _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_4__["default"].component({
label: _app__WEBPACK_IMPORTED_MODULE_1__["default"].translator.trans('core.admin.basics.forum_description_heading'),
children: [m("div", {
className: "helpText"
@ -13383,18 +13381,18 @@ var BasicsPage = /*#__PURE__*/function (_Page) {
value: this.values.forum_description(),
oninput: m.withAttr('value', this.values.forum_description)
})]
}), Object.keys(this.localeOptions).length > 1 ? _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_3__["default"].component({
}), Object.keys(this.localeOptions).length > 1 ? _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_4__["default"].component({
label: _app__WEBPACK_IMPORTED_MODULE_1__["default"].translator.trans('core.admin.basics.default_language_heading'),
children: [_common_components_Select__WEBPACK_IMPORTED_MODULE_4__["default"].component({
children: [_common_components_Select__WEBPACK_IMPORTED_MODULE_5__["default"].component({
options: this.localeOptions,
value: this.values.default_locale(),
onchange: this.values.default_locale
}), _common_components_Switch__WEBPACK_IMPORTED_MODULE_9__["default"].component({
}), _common_components_Switch__WEBPACK_IMPORTED_MODULE_6__["default"].component({
state: this.values.show_language_selector(),
onchange: this.values.show_language_selector,
children: _app__WEBPACK_IMPORTED_MODULE_1__["default"].translator.trans('core.admin.basics.show_language_selector_label')
})]
}) : '', _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_3__["default"].component({
}) : '', _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_4__["default"].component({
label: _app__WEBPACK_IMPORTED_MODULE_1__["default"].translator.trans('core.admin.basics.home_page_heading'),
className: 'BasicsPage-homePage',
children: [m("div", {
@ -13412,7 +13410,7 @@ var BasicsPage = /*#__PURE__*/function (_Page) {
onclick: m.withAttr('value', _this3.values.default_route)
}), label);
})]
}), _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_3__["default"].component({
}), _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_4__["default"].component({
label: _app__WEBPACK_IMPORTED_MODULE_1__["default"].translator.trans('core.admin.basics.welcome_banner_heading'),
className: 'BasicsPage-welcomeBanner',
children: [m("div", {
@ -13428,7 +13426,7 @@ var BasicsPage = /*#__PURE__*/function (_Page) {
value: this.values.welcome_message(),
oninput: m.withAttr('value', this.values.welcome_message)
}))]
}), _common_components_Button__WEBPACK_IMPORTED_MODULE_5__["default"].component({
}), _common_components_Button__WEBPACK_IMPORTED_MODULE_3__["default"].component({
type: 'submit',
className: 'Button Button--primary',
children: _app__WEBPACK_IMPORTED_MODULE_1__["default"].translator.trans('core.admin.basics.submit_button'),
@ -13474,10 +13472,10 @@ var BasicsPage = /*#__PURE__*/function (_Page) {
return settings[key] = _this5.values[key]();
});
Object(_utils_saveSettings__WEBPACK_IMPORTED_MODULE_7__["default"])(settings).then(function () {
_app__WEBPACK_IMPORTED_MODULE_1__["default"].alerts.show(_this5.successAlert = _common_components_Alert__WEBPACK_IMPORTED_MODULE_6__["default"].component({
_this5.successAlert = _app__WEBPACK_IMPORTED_MODULE_1__["default"].alerts.show({
type: 'success',
children: _app__WEBPACK_IMPORTED_MODULE_1__["default"].translator.trans('core.admin.basics.saved_message')
}));
});
}).catch(function () {}).then(function () {
_this5.loading = false;
m.redraw();
@ -14252,11 +14250,11 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _babel_runtime_helpers_esm_inheritsLoose__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/inheritsLoose */ "./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js");
/* harmony import */ var _app__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../app */ "./src/admin/app.ts");
/* harmony import */ var _Page__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Page */ "./src/admin/components/Page.tsx");
/* harmony import */ var _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../common/components/FieldSet */ "./src/common/components/FieldSet.tsx");
/* harmony import */ var _common_components_Alert__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../common/components/Alert */ "./src/common/components/Alert.tsx");
/* harmony import */ var _common_components_Button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../common/components/Button */ "./src/common/components/Button.tsx");
/* harmony import */ var _common_components_Alert__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../common/components/Alert */ "./src/common/components/Alert.tsx");
/* harmony import */ var _common_components_Select__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../common/components/Select */ "./src/common/components/Select.tsx");
/* harmony import */ var _common_components_LoadingIndicator__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../common/components/LoadingIndicator */ "./src/common/components/LoadingIndicator.tsx");
/* harmony import */ var _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../common/components/FieldSet */ "./src/common/components/FieldSet.tsx");
/* harmony import */ var _common_components_LoadingIndicator__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../common/components/LoadingIndicator */ "./src/common/components/LoadingIndicator.tsx");
/* harmony import */ var _common_components_Select__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../common/components/Select */ "./src/common/components/Select.tsx");
/* harmony import */ var _utils_saveSettings__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils/saveSettings */ "./src/admin/utils/saveSettings.ts");
@ -14340,7 +14338,7 @@ var MailPage = /*#__PURE__*/function (_Page) {
className: "MailPage"
}, m("div", {
className: "container"
}, m(_common_components_LoadingIndicator__WEBPACK_IMPORTED_MODULE_8__["default"], null)));
}, m(_common_components_LoadingIndicator__WEBPACK_IMPORTED_MODULE_7__["default"], null)));
}
var fields = this.driverFields[this.values.mail_driver()];
@ -14353,7 +14351,7 @@ var MailPage = /*#__PURE__*/function (_Page) {
onsubmit: this.onsubmit.bind(this)
}, m("h2", null, _app__WEBPACK_IMPORTED_MODULE_2__["default"].translator.trans('core.admin.email.heading')), m("div", {
className: "helpText"
}, _app__WEBPACK_IMPORTED_MODULE_2__["default"].translator.trans('core.admin.email.text')), _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_4__["default"].component({
}, _app__WEBPACK_IMPORTED_MODULE_2__["default"].translator.trans('core.admin.email.text')), _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_6__["default"].component({
label: _app__WEBPACK_IMPORTED_MODULE_2__["default"].translator.trans('core.admin.email.addresses_heading'),
className: 'MailPage-MailSettings',
children: [m("div", {
@ -14363,12 +14361,12 @@ var MailPage = /*#__PURE__*/function (_Page) {
value: this.values.mail_from() || '',
oninput: m.withAttr('value', this.values.mail_from)
})))]
}), _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_4__["default"].component({
}), _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_6__["default"].component({
label: _app__WEBPACK_IMPORTED_MODULE_2__["default"].translator.trans('core.admin.email.driver_heading'),
className: 'MailPage-MailSettings',
children: [m("div", {
className: "MailPage-MailSettings-input"
}, m("label", null, _app__WEBPACK_IMPORTED_MODULE_2__["default"].translator.trans('core.admin.email.driver_label'), m(_common_components_Select__WEBPACK_IMPORTED_MODULE_7__["default"], {
}, m("label", null, _app__WEBPACK_IMPORTED_MODULE_2__["default"].translator.trans('core.admin.email.driver_label'), m(_common_components_Select__WEBPACK_IMPORTED_MODULE_8__["default"], {
value: this.values.mail_driver(),
options: Object.keys(this.driverFields).reduce(function (memo, val) {
var _extends2;
@ -14377,10 +14375,10 @@ var MailPage = /*#__PURE__*/function (_Page) {
}, {}),
onchange: this.values.mail_driver
})))]
}), this.status.sending || _common_components_Alert__WEBPACK_IMPORTED_MODULE_6__["default"].component({
}), this.status.sending || _common_components_Alert__WEBPACK_IMPORTED_MODULE_4__["default"].component({
children: _app__WEBPACK_IMPORTED_MODULE_2__["default"].translator.trans('core.admin.email.not_sending_message'),
dismissible: false
}), fieldKeys.length > 0 && _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_4__["default"].component({
}), fieldKeys.length > 0 && _common_components_FieldSet__WEBPACK_IMPORTED_MODULE_6__["default"].component({
label: _app__WEBPACK_IMPORTED_MODULE_2__["default"].translator.trans("core.admin.email." + this.values.mail_driver() + "_heading"),
className: 'MailPage-MailSettings',
children: [m("div", {
@ -14412,7 +14410,7 @@ var MailPage = /*#__PURE__*/function (_Page) {
oninput: m.withAttr('value', prop)
});
} else {
return m(_common_components_Select__WEBPACK_IMPORTED_MODULE_7__["default"], {
return m(_common_components_Select__WEBPACK_IMPORTED_MODULE_8__["default"], {
value: prop(),
options: field,
onchange: prop
@ -14440,10 +14438,10 @@ var MailPage = /*#__PURE__*/function (_Page) {
return settings[key] = _this5.values[key]();
});
Object(_utils_saveSettings__WEBPACK_IMPORTED_MODULE_9__["default"])(settings).then(function () {
_app__WEBPACK_IMPORTED_MODULE_2__["default"].alerts.show(_this5.successAlert = _common_components_Alert__WEBPACK_IMPORTED_MODULE_6__["default"].component({
_this5.successAlert = _app__WEBPACK_IMPORTED_MODULE_2__["default"].alerts.show({
type: 'success',
children: _app__WEBPACK_IMPORTED_MODULE_2__["default"].translator.trans('core.admin.basics.saved_message')
}));
});
}).catch(function () {}).then(function () {
_this5.saving = false;
@ -15594,11 +15592,11 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _models_Post__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./models/Post */ "./src/common/models/Post.ts");
/* harmony import */ var _models_Group__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./models/Group */ "./src/common/models/Group.ts");
/* harmony import */ var _models_Notification__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./models/Notification */ "./src/common/models/Notification.ts");
/* harmony import */ var _components_Alert__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./components/Alert */ "./src/common/components/Alert.tsx");
/* harmony import */ var _components_AlertManager__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./components/AlertManager */ "./src/common/components/AlertManager.tsx");
/* harmony import */ var _components_Button__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./components/Button */ "./src/common/components/Button.tsx");
/* harmony import */ var _components_ModalManager__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./components/ModalManager */ "./src/common/components/ModalManager.tsx");
/* harmony import */ var _components_RequestErrorModal__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./components/RequestErrorModal */ "./src/common/components/RequestErrorModal.tsx");
/* harmony import */ var _components_AlertManager__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./components/AlertManager */ "./src/common/components/AlertManager.tsx");
/* harmony import */ var _components_Button__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./components/Button */ "./src/common/components/Button.tsx");
/* harmony import */ var _components_ModalManager__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./components/ModalManager */ "./src/common/components/ModalManager.tsx");
/* harmony import */ var _components_RequestErrorModal__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./components/RequestErrorModal */ "./src/common/components/RequestErrorModal.tsx");
/* harmony import */ var _states_AlertState__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./states/AlertState */ "./src/common/states/AlertState.ts");
/* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! lodash/flattenDeep */ "./node_modules/lodash/flattenDeep.js");
/* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_22___default = /*#__PURE__*/__webpack_require__.n(lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_22__);
@ -15709,8 +15707,8 @@ var Application = /*#__PURE__*/function () {
var $modal = document.getElementById('modal');
var $alerts = document.getElementById('alerts');
var $content = document.getElementById('content');
if ($modal) m.mount($modal, this.modal = new _components_ModalManager__WEBPACK_IMPORTED_MODULE_20__["default"]());
if ($alerts) m.mount($alerts, this.alerts = new _components_AlertManager__WEBPACK_IMPORTED_MODULE_18__["default"]({
if ($modal) m.mount($modal, this.modal = new _components_ModalManager__WEBPACK_IMPORTED_MODULE_19__["default"]());
if ($alerts) m.mount($alerts, this.alerts = new _components_AlertManager__WEBPACK_IMPORTED_MODULE_17__["default"]({
oninit: function oninit(vnode) {
return _this3.alerts = vnode.state;
}
@ -15899,10 +15897,10 @@ var Application = /*#__PURE__*/function () {
}
var isDebug = app.forum.attribute('debug');
error.alert = _components_Alert__WEBPACK_IMPORTED_MODULE_17__["default"].component({
error.alert = new _states_AlertState__WEBPACK_IMPORTED_MODULE_21__["default"]({
type: 'error',
children: children,
controls: isDebug && [_components_Button__WEBPACK_IMPORTED_MODULE_19__["default"].component({
controls: isDebug && [_components_Button__WEBPACK_IMPORTED_MODULE_18__["default"].component({
className: 'Button Button--link',
onclick: _this4.showDebug.bind(_this4, error),
children: 'DEBUG' // TODO make translatable
@ -15924,7 +15922,7 @@ var Application = /*#__PURE__*/function () {
_proto.showDebug = function showDebug(error) {
this.alerts.dismiss(this.requestError.alert);
this.modal.show(_components_RequestErrorModal__WEBPACK_IMPORTED_MODULE_21__["default"], {
this.modal.show(_components_RequestErrorModal__WEBPACK_IMPORTED_MODULE_20__["default"], {
error: error
});
};
@ -17143,14 +17141,6 @@ __webpack_require__.r(__webpack_exports__);
* The `Alert` component represents an alert box, which contains a message,
* some controls, and may be dismissible.
*
* The alert may have the following special props:
*
* - `type` The type of alert this is. Will be used to give the alert a class
* name of `Alert--{type}`.
* - `controls` An array of controls to show in the alert.
* - `dismissible` Whether or not the alert can be dismissed.
* - `ondismiss` A callback to run when the alert is dismissed.
*
* All other props will be assigned as attributes on the alert element.
*/
var Alert = /*#__PURE__*/function (_Component) {
@ -17163,7 +17153,11 @@ var Alert = /*#__PURE__*/function (_Component) {
var _proto = Alert.prototype;
_proto.view = function view() {
var attrs = Object(_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__["default"])({}, this.props);
var _this$props$state;
var data = ((_this$props$state = this.props.state) === null || _this$props$state === void 0 ? void 0 : _this$props$state.data) || this.props;
var attrs = Object(_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__["default"])({}, data);
var type = Object(_utils_extract__WEBPACK_IMPORTED_MODULE_5__["default"])(attrs, 'type');
attrs.className = "Alert Alert--" + type + " " + (attrs.className || '');
@ -17210,6 +17204,9 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return AlertManager; });
/* harmony import */ var _babel_runtime_helpers_esm_inheritsLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/inheritsLoose */ "./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js");
/* harmony import */ var _Component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Component */ "./src/common/Component.ts");
/* harmony import */ var _states_AlertState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../states/AlertState */ "./src/common/states/AlertState.ts");
/* harmony import */ var _Alert__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Alert */ "./src/common/components/Alert.tsx");
@ -17217,6 +17214,7 @@ __webpack_require__.r(__webpack_exports__);
* The `AlertManager` component provides an area in which `Alert` components can
* be shown and dismissed.
*/
var AlertManager = /*#__PURE__*/function (_Component) {
Object(_babel_runtime_helpers_esm_inheritsLoose__WEBPACK_IMPORTED_MODULE_0__["default"])(AlertManager, _Component);
@ -17228,19 +17226,24 @@ var AlertManager = /*#__PURE__*/function (_Component) {
}
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
_this.components = [];
_this.states = [];
return _this;
}
var _proto = AlertManager.prototype;
_proto.view = function view() {
var _this2 = this;
return m("div", {
className: "AlertManager"
}, this.components.map(function (vnode) {
}, this.states.map(function (state) {
return m("div", {
className: "AlertManager-alert"
}, vnode);
}, m(_Alert__WEBPACK_IMPORTED_MODULE_3__["default"], {
state: state,
ondismiss: _this2.dismiss.bind(_this2)
}));
}));
}
/**
@ -17248,21 +17251,26 @@ var AlertManager = /*#__PURE__*/function (_Component) {
*/
;
_proto.show = function show(vnode) {
vnode.attrs.ondismiss = this.dismiss.bind(this, vnode);
this.components.push(vnode);
_proto.show = function show(state) {
if (!(state instanceof _states_AlertState__WEBPACK_IMPORTED_MODULE_2__["default"])) state = new _states_AlertState__WEBPACK_IMPORTED_MODULE_2__["default"](state);
this.states.push(state);
m.redraw();
return state.key;
}
/**
* Dismiss an alert.
*/
;
_proto.dismiss = function dismiss(vnode) {
var index = this.components.indexOf(vnode);
_proto.dismiss = function dismiss(keyOrState) {
if (!keyOrState) return;
var key = keyOrState instanceof _states_AlertState__WEBPACK_IMPORTED_MODULE_2__["default"] ? keyOrState.key : keyOrState;
var index = this.states.indexOf(this.states.filter(function (a) {
return a.key == key;
})[0]);
if (index !== -1) {
this.components.splice(index, 1);
this.states.splice(index, 1);
m.redraw();
}
}
@ -17272,7 +17280,7 @@ var AlertManager = /*#__PURE__*/function (_Component) {
;
_proto.clear = function clear() {
this.components = [];
this.states = [];
m.redraw();
};
@ -19704,6 +19712,31 @@ var User = /*#__PURE__*/function (_Model) {
/***/ }),
/***/ "./src/common/states/AlertState.ts":
/*!*****************************************!*\
!*** ./src/common/states/AlertState.ts ***!
\*****************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return AlertState; });
var AlertState = function AlertState(data, key) {
if (key === void 0) {
key = Date.now();
}
this.data = void 0;
this.key = void 0;
this.data = data;
this.key = key;
};
/***/ }),
/***/ "./src/common/utils/Drawer.ts":

2
js/dist/admin.js.map vendored
View File

File diff suppressed because one or more lines are too long

169
js/dist/forum.js vendored
View File

@ -13152,11 +13152,11 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _models_Post__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./models/Post */ "./src/common/models/Post.ts");
/* harmony import */ var _models_Group__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./models/Group */ "./src/common/models/Group.ts");
/* harmony import */ var _models_Notification__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./models/Notification */ "./src/common/models/Notification.ts");
/* harmony import */ var _components_Alert__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./components/Alert */ "./src/common/components/Alert.tsx");
/* harmony import */ var _components_AlertManager__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./components/AlertManager */ "./src/common/components/AlertManager.tsx");
/* harmony import */ var _components_Button__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./components/Button */ "./src/common/components/Button.tsx");
/* harmony import */ var _components_ModalManager__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./components/ModalManager */ "./src/common/components/ModalManager.tsx");
/* harmony import */ var _components_RequestErrorModal__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./components/RequestErrorModal */ "./src/common/components/RequestErrorModal.tsx");
/* harmony import */ var _components_AlertManager__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./components/AlertManager */ "./src/common/components/AlertManager.tsx");
/* harmony import */ var _components_Button__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./components/Button */ "./src/common/components/Button.tsx");
/* harmony import */ var _components_ModalManager__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./components/ModalManager */ "./src/common/components/ModalManager.tsx");
/* harmony import */ var _components_RequestErrorModal__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./components/RequestErrorModal */ "./src/common/components/RequestErrorModal.tsx");
/* harmony import */ var _states_AlertState__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./states/AlertState */ "./src/common/states/AlertState.ts");
/* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! lodash/flattenDeep */ "./node_modules/lodash/flattenDeep.js");
/* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_22___default = /*#__PURE__*/__webpack_require__.n(lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_22__);
@ -13267,8 +13267,8 @@ var Application = /*#__PURE__*/function () {
var $modal = document.getElementById('modal');
var $alerts = document.getElementById('alerts');
var $content = document.getElementById('content');
if ($modal) m.mount($modal, this.modal = new _components_ModalManager__WEBPACK_IMPORTED_MODULE_20__["default"]());
if ($alerts) m.mount($alerts, this.alerts = new _components_AlertManager__WEBPACK_IMPORTED_MODULE_18__["default"]({
if ($modal) m.mount($modal, this.modal = new _components_ModalManager__WEBPACK_IMPORTED_MODULE_19__["default"]());
if ($alerts) m.mount($alerts, this.alerts = new _components_AlertManager__WEBPACK_IMPORTED_MODULE_17__["default"]({
oninit: function oninit(vnode) {
return _this3.alerts = vnode.state;
}
@ -13457,10 +13457,10 @@ var Application = /*#__PURE__*/function () {
}
var isDebug = app.forum.attribute('debug');
error.alert = _components_Alert__WEBPACK_IMPORTED_MODULE_17__["default"].component({
error.alert = new _states_AlertState__WEBPACK_IMPORTED_MODULE_21__["default"]({
type: 'error',
children: children,
controls: isDebug && [_components_Button__WEBPACK_IMPORTED_MODULE_19__["default"].component({
controls: isDebug && [_components_Button__WEBPACK_IMPORTED_MODULE_18__["default"].component({
className: 'Button Button--link',
onclick: _this4.showDebug.bind(_this4, error),
children: 'DEBUG' // TODO make translatable
@ -13482,7 +13482,7 @@ var Application = /*#__PURE__*/function () {
_proto.showDebug = function showDebug(error) {
this.alerts.dismiss(this.requestError.alert);
this.modal.show(_components_RequestErrorModal__WEBPACK_IMPORTED_MODULE_21__["default"], {
this.modal.show(_components_RequestErrorModal__WEBPACK_IMPORTED_MODULE_20__["default"], {
error: error
});
};
@ -14701,14 +14701,6 @@ __webpack_require__.r(__webpack_exports__);
* The `Alert` component represents an alert box, which contains a message,
* some controls, and may be dismissible.
*
* The alert may have the following special props:
*
* - `type` The type of alert this is. Will be used to give the alert a class
* name of `Alert--{type}`.
* - `controls` An array of controls to show in the alert.
* - `dismissible` Whether or not the alert can be dismissed.
* - `ondismiss` A callback to run when the alert is dismissed.
*
* All other props will be assigned as attributes on the alert element.
*/
var Alert = /*#__PURE__*/function (_Component) {
@ -14721,7 +14713,11 @@ var Alert = /*#__PURE__*/function (_Component) {
var _proto = Alert.prototype;
_proto.view = function view() {
var attrs = Object(_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__["default"])({}, this.props);
var _this$props$state;
var data = ((_this$props$state = this.props.state) === null || _this$props$state === void 0 ? void 0 : _this$props$state.data) || this.props;
var attrs = Object(_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__["default"])({}, data);
var type = Object(_utils_extract__WEBPACK_IMPORTED_MODULE_5__["default"])(attrs, 'type');
attrs.className = "Alert Alert--" + type + " " + (attrs.className || '');
@ -14768,6 +14764,9 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return AlertManager; });
/* harmony import */ var _babel_runtime_helpers_esm_inheritsLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/inheritsLoose */ "./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js");
/* harmony import */ var _Component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Component */ "./src/common/Component.ts");
/* harmony import */ var _states_AlertState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../states/AlertState */ "./src/common/states/AlertState.ts");
/* harmony import */ var _Alert__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Alert */ "./src/common/components/Alert.tsx");
@ -14775,6 +14774,7 @@ __webpack_require__.r(__webpack_exports__);
* The `AlertManager` component provides an area in which `Alert` components can
* be shown and dismissed.
*/
var AlertManager = /*#__PURE__*/function (_Component) {
Object(_babel_runtime_helpers_esm_inheritsLoose__WEBPACK_IMPORTED_MODULE_0__["default"])(AlertManager, _Component);
@ -14786,19 +14786,24 @@ var AlertManager = /*#__PURE__*/function (_Component) {
}
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
_this.components = [];
_this.states = [];
return _this;
}
var _proto = AlertManager.prototype;
_proto.view = function view() {
var _this2 = this;
return m("div", {
className: "AlertManager"
}, this.components.map(function (vnode) {
}, this.states.map(function (state) {
return m("div", {
className: "AlertManager-alert"
}, vnode);
}, m(_Alert__WEBPACK_IMPORTED_MODULE_3__["default"], {
state: state,
ondismiss: _this2.dismiss.bind(_this2)
}));
}));
}
/**
@ -14806,21 +14811,26 @@ var AlertManager = /*#__PURE__*/function (_Component) {
*/
;
_proto.show = function show(vnode) {
vnode.attrs.ondismiss = this.dismiss.bind(this, vnode);
this.components.push(vnode);
_proto.show = function show(state) {
if (!(state instanceof _states_AlertState__WEBPACK_IMPORTED_MODULE_2__["default"])) state = new _states_AlertState__WEBPACK_IMPORTED_MODULE_2__["default"](state);
this.states.push(state);
m.redraw();
return state.key;
}
/**
* Dismiss an alert.
*/
;
_proto.dismiss = function dismiss(vnode) {
var index = this.components.indexOf(vnode);
_proto.dismiss = function dismiss(keyOrState) {
if (!keyOrState) return;
var key = keyOrState instanceof _states_AlertState__WEBPACK_IMPORTED_MODULE_2__["default"] ? keyOrState.key : keyOrState;
var index = this.states.indexOf(this.states.filter(function (a) {
return a.key == key;
})[0]);
if (index !== -1) {
this.components.splice(index, 1);
this.states.splice(index, 1);
m.redraw();
}
}
@ -14830,7 +14840,7 @@ var AlertManager = /*#__PURE__*/function (_Component) {
;
_proto.clear = function clear() {
this.components = [];
this.states = [];
m.redraw();
};
@ -17262,6 +17272,31 @@ var User = /*#__PURE__*/function (_Model) {
/***/ }),
/***/ "./src/common/states/AlertState.ts":
/*!*****************************************!*\
!*** ./src/common/states/AlertState.ts ***!
\*****************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return AlertState; });
var AlertState = function AlertState(data, key) {
if (key === void 0) {
key = Date.now();
}
this.data = void 0;
this.key = void 0;
this.data = data;
this.key = key;
};
/***/ }),
/***/ "./src/common/utils/Drawer.ts":
@ -20066,9 +20101,9 @@ __webpack_require__.r(__webpack_exports__);
/**
* The `DiscussionsUserPage` component shows a discussion list inside of a user
* page.
/**
* The `DiscussionsUserPage` component shows a discussion list inside of a user
* page.
*/
var DiscussionsUserPage = /*#__PURE__*/function (_UserPage) {
@ -23505,9 +23540,9 @@ __webpack_require__.r(__webpack_exports__);
/**
* The `PostsUserPage` component shows a user's activity feed inside of their
* profile.
/**
* The `PostsUserPage` component shows a user's activity feed inside of their
* profile.
*/
var PostsUserPage = /*#__PURE__*/function (_UserPage) {
Object(_babel_runtime_helpers_esm_inheritsLoose__WEBPACK_IMPORTED_MODULE_0__["default"])(PostsUserPage, _UserPage);
@ -23582,9 +23617,9 @@ var PostsUserPage = /*#__PURE__*/function (_UserPage) {
className: "PostsUserPage-loadMore"
}, footer));
}
/**
* Initialize the component with a user, and trigger the loading of their
* activity feed.
/**
* Initialize the component with a user, and trigger the loading of their
* activity feed.
*/
;
@ -23593,8 +23628,8 @@ var PostsUserPage = /*#__PURE__*/function (_UserPage) {
this.refresh();
}
/**
* Clear and reload the user's activity feed.
/**
* Clear and reload the user's activity feed.
*/
;
@ -23604,10 +23639,10 @@ var PostsUserPage = /*#__PURE__*/function (_UserPage) {
m.redraw();
this.loadResults().then(this.parseResults.bind(this));
}
/**
* Load a new page of the user's activity feed.
*
* @param offset The position to start getting results from.
/**
* Load a new page of the user's activity feed.
*
* @param offset The position to start getting results from.
*/
;
@ -23624,8 +23659,8 @@ var PostsUserPage = /*#__PURE__*/function (_UserPage) {
sort: '-createdAt'
});
}
/**
* Load the next page of results.
/**
* Load the next page of results.
*/
;
@ -23633,8 +23668,8 @@ var PostsUserPage = /*#__PURE__*/function (_UserPage) {
this.loading = true;
this.loadResults(this.posts.length).then(this.parseResults.bind(this));
}
/**
* Parse results and append them to the activity feed.
/**
* Parse results and append them to the activity feed.
*/
;
@ -25233,8 +25268,8 @@ __webpack_require__.r(__webpack_exports__);
component: _components_IndexPage__WEBPACK_IMPORTED_MODULE_0__["default"]
}
};
/**
* Generate a URL to a discussion.
/**
* Generate a URL to a discussion.
*/
app.route.discussion = function (discussion, near) {
@ -25245,16 +25280,16 @@ __webpack_require__.r(__webpack_exports__);
near: hasNear && near
});
};
/**
* Generate a URL to a post.
/**
* Generate a URL to a post.
*/
app.route.post = function (post) {
return app.route.discussion(post.discussion(), post.number());
};
/**
* Generate a URL to a user.
/**
* Generate a URL to a user.
*/
@ -26309,7 +26344,7 @@ __webpack_require__.r(__webpack_exports__);
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _common_components_Alert__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../common/components/Alert */ "./src/common/components/Alert.tsx");
/* harmony import */ var _app__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../app */ "./src/forum/app.ts");
/* harmony import */ var _common_components_Button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../common/components/Button */ "./src/common/components/Button.tsx");
/* harmony import */ var _common_components_Separator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../common/components/Separator */ "./src/common/components/Separator.tsx");
/* harmony import */ var _components_EditUserModal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/EditUserModal */ "./src/forum/components/EditUserModal.tsx");
@ -26367,7 +26402,7 @@ __webpack_require__.r(__webpack_exports__);
if (user.canEdit()) {
items.add('edit', _common_components_Button__WEBPACK_IMPORTED_MODULE_1__["default"].component({
icon: 'fas fa-pencil-alt',
children: app.translator.trans('core.forum.user_controls.edit_button'),
children: _app__WEBPACK_IMPORTED_MODULE_0__["default"].translator.trans('core.forum.user_controls.edit_button'),
onclick: this.editAction.bind(this, user)
}));
}
@ -26384,7 +26419,7 @@ __webpack_require__.r(__webpack_exports__);
if (user.id() !== '1' && user.canDelete()) {
items.add('delete', _common_components_Button__WEBPACK_IMPORTED_MODULE_1__["default"].component({
icon: 'fas fa-times',
children: app.translator.trans('core.forum.user_controls.delete_button'),
children: _app__WEBPACK_IMPORTED_MODULE_0__["default"].translator.trans('core.forum.user_controls.delete_button'),
onclick: this.deleteAction.bind(this, user)
}));
}
@ -26398,15 +26433,15 @@ __webpack_require__.r(__webpack_exports__);
deleteAction: function deleteAction(user) {
var _this2 = this;
if (!confirm(app.translator.transText('core.forum.user_controls.delete_confirmation'))) {
if (!confirm(_app__WEBPACK_IMPORTED_MODULE_0__["default"].translator.transText('core.forum.user_controls.delete_confirmation'))) {
return;
}
user.delete().then(function () {
_this2.showDeletionAlert(user, 'success');
if (app.current instanceof _components_UserPage__WEBPACK_IMPORTED_MODULE_4__["default"] && app.current.user === user) {
app.history.back();
if (_app__WEBPACK_IMPORTED_MODULE_0__["default"].current instanceof _components_UserPage__WEBPACK_IMPORTED_MODULE_4__["default"] && _app__WEBPACK_IMPORTED_MODULE_0__["default"].current.user === user) {
_app__WEBPACK_IMPORTED_MODULE_0__["default"].history.back();
} else {
window.location.reload();
}
@ -26419,24 +26454,24 @@ __webpack_require__.r(__webpack_exports__);
* Show deletion alert of user.
*/
showDeletionAlert: function showDeletionAlert(user, type) {
var _user$data$attributes = user.data.attributes,
username = _user$data$attributes.username,
email = _user$data$attributes.email;
var _ref = user.data.attributes,
username = _ref.username,
email = _ref.email;
var message = "core.forum.user_controls.delete_" + type + "_message";
app.alerts.show(_common_components_Alert__WEBPACK_IMPORTED_MODULE_0__["default"].component({
_app__WEBPACK_IMPORTED_MODULE_0__["default"].alerts.show({
type: type,
children: app.translator.trans(message, {
children: _app__WEBPACK_IMPORTED_MODULE_0__["default"].translator.trans(message, {
username: username,
email: email
})
}));
});
},
/**
* Edit the user.
*/
editAction: function editAction(user) {
app.modal.show(_components_EditUserModal__WEBPACK_IMPORTED_MODULE_3__["default"], {
_app__WEBPACK_IMPORTED_MODULE_0__["default"].modal.show(_components_EditUserModal__WEBPACK_IMPORTED_MODULE_3__["default"], {
user: user
});
}

2
js/dist/forum.js.map vendored
View File

File diff suppressed because one or more lines are too long

12
js/src/admin/components/BasicsPage.tsx
View File

@ -1,13 +1,13 @@
import app from '../app';
import Page from './Page';
import Button from '../../common/components/Button';
import FieldSet from '../../common/components/FieldSet';
import Select from '../../common/components/Select';
import Button from '../../common/components/Button';
import Alert from '../../common/components/Alert';
import Switch from '../../common/components/Switch';
import saveSettings from '../utils/saveSettings';
import ItemList from '../../common/utils/ItemList';
import Switch from '../../common/components/Switch';
import AlertState from '../../common/states/AlertState';
import Stream from 'mithril/stream';
@ -27,7 +27,7 @@ export default class BasicsPage extends Page {
localeOptions: object = {};
successAlert: Alert;
successAlert?: number;
oninit(vnode) {
super.oninit(vnode);
@ -180,9 +180,7 @@ export default class BasicsPage extends Page {
saveSettings(settings)
.then(() => {
app.alerts.show(
(this.successAlert = Alert.component({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') }))
);
this.successAlert = app.alerts.show({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') });
})
.catch(() => {})
.then(() => {

13
js/src/admin/components/MailPage.tsx
View File

@ -1,12 +1,13 @@
import app from '../app';
import Page from './Page';
import FieldSet from '../../common/components/FieldSet';
import Button from '../../common/components/Button';
import Alert from '../../common/components/Alert';
import Select from '../../common/components/Select';
import Button from '../../common/components/Button';
import FieldSet from '../../common/components/FieldSet';
import LoadingIndicator from '../../common/components/LoadingIndicator';
import Select from '../../common/components/Select';
import saveSettings from '../utils/saveSettings';
import AlertState from '../../common/states/AlertState';
import Stream from 'mithril/stream';
@ -21,7 +22,7 @@ export default class MailPage extends Page {
status = { sending: false, errors: {} };
successAlert: Alert;
successAlert?: number;
oninit(vnode) {
super.oninit(vnode);
@ -179,9 +180,7 @@ export default class MailPage extends Page {
saveSettings(settings)
.then(() => {
app.alerts.show(
(this.successAlert = Alert.component({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') }))
);
this.successAlert = app.alerts.show({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') });
})
.catch(() => {})
.then(() => {

5
js/src/common/Application.ts
View File

@ -19,13 +19,14 @@ import Post from './models/Post';
import Group from './models/Group';
import Notification from './models/Notification';
import Alert from './components/Alert';
import AlertManager from './components/AlertManager';
import Button from './components/Button';
import ModalManager from './components/ModalManager';
import Page from './components/Page';
import RequestErrorModal from './components/RequestErrorModal';
import AlertState from './states/AlertState';
import flattenDeep from 'lodash/flattenDeep';
export type ApplicationData = {
@ -330,7 +331,7 @@ export default abstract class Application {
const isDebug = app.forum.attribute('debug');
error.alert = Alert.component({
error.alert = new AlertState({
type: 'error',
children,
controls: isDebug && [

38
js/src/common/components/Alert.tsx
View File

@ -1,34 +1,48 @@
import * as Mithril from 'mithril';
import Component, { ComponentProps } from '../Component';
import Button from './Button';
import listItems from '../helpers/listItems';
import extract from '../utils/extract';
import * as Mithril from 'mithril';
import AlertState from '../states/AlertState';
export interface AlertProps extends ComponentProps {
export interface AlertData extends ComponentProps {
/**
* An array of controls to show in the alert.
*/
controls?: Mithril.ChildArray;
/**
* The type of alert this is. Will be used to give the alert a class
* name of `Alert--{type}`.
*/
type?: string;
/**
* Whether or not the alert can be dismissed.
*/
dismissible?: boolean;
/**
* A callback to run when the alert is dismissed.
*/
ondismiss?: () => any;
}
export interface AlertProps extends AlertData {
state: AlertState;
}
/**
* The `Alert` component represents an alert box, which contains a message,
* some controls, and may be dismissible.
*
* The alert may have the following special props:
*
* - `type` The type of alert this is. Will be used to give the alert a class
* name of `Alert--{type}`.
* - `controls` An array of controls to show in the alert.
* - `dismissible` Whether or not the alert can be dismissed.
* - `ondismiss` A callback to run when the alert is dismissed.
*
* All other props will be assigned as attributes on the alert element.
*/
export default class Alert extends Component<AlertProps> {
view() {
const attrs: AlertProps = Object.assign({}, this.props);
const data = this.props.state?.data || this.props;
const attrs: AlertData = Object.assign({}, data);
const type: string = extract(attrs, 'type');
attrs.className = `Alert Alert--${type} ${attrs.className || ''}`;
@ -41,7 +55,7 @@ export default class Alert extends Component<AlertProps> {
// the alert.
const dismissible: boolean | undefined = extract(attrs, 'dismissible');
const ondismiss: () => any = extract(attrs, 'ondismiss');
const dismissControl = [];
const dismissControl: JSX.Element[] = [];
if (dismissible || dismissible === undefined) {
dismissControl.push(<Button icon="fas fa-times" className="Button Button--link Button--icon Alert-dismiss" onclick={ondismiss} />);

34
js/src/common/components/AlertManager.tsx
View File

@ -1,6 +1,6 @@
import Component, { ComponentProps } from '../Component';
import Alert from './Alert';
import { Vnode } from 'mithril';
import Component from '../Component';
import AlertState from '../states/AlertState';
import Alert, { AlertData } from './Alert';
/**
* The `AlertManager` component provides an area in which `Alert` components can
@ -10,13 +10,15 @@ export default class AlertManager extends Component {
/**
* An array of Alert components which are currently showing.
*/
protected components: Vnode<ComponentProps, Alert>[] = [];
protected states: AlertState[] = [];
view() {
return (
<div className="AlertManager">
{this.components.map((vnode) => (
<div className="AlertManager-alert">{vnode}</div>
{this.states.map((state) => (
<div className="AlertManager-alert">
<Alert state={state} ondismiss={this.dismiss.bind(this)} />
</div>
))}
</div>
);
@ -25,21 +27,27 @@ export default class AlertManager extends Component {
/**
* Show an Alert in the alerts area.
*/
public show(vnode: Vnode<ComponentProps, Alert>) {
vnode.attrs.ondismiss = this.dismiss.bind(this, vnode);
public show(state: AlertState | AlertData): number {
if (!(state instanceof AlertState)) state = new AlertState(state);
this.components.push(vnode);
this.states.push(state as AlertState);
m.redraw();
return state.key;
}
/**
* Dismiss an alert.
*/
public dismiss(vnode) {
const index = this.components.indexOf(vnode);
public dismiss(keyOrState?: AlertState | number) {
if (!keyOrState) return;
const key = keyOrState instanceof AlertState ? keyOrState.key : keyOrState;
let index = this.states.indexOf(this.states.filter((a) => a.key == key)[0]);
if (index !== -1) {
this.components.splice(index, 1);
this.states.splice(index, 1);
m.redraw();
}
}
@ -48,7 +56,7 @@ export default class AlertManager extends Component {
* Clear all alerts.
*/
public clear() {
this.components = [];
this.states = [];
m.redraw();
}
}

11
js/src/common/states/AlertState.ts Normal file
View File

@ -0,0 +1,11 @@
import { AlertData } from '../components/Alert';
export default class AlertState {
data: AlertData;
key: number;
constructor(data: AlertData, key = Date.now()) {
this.data = data;
this.key = key;
}
}

4
js/src/common/utils/RequestError.ts
View File

@ -1,5 +1,7 @@
import Mithril from 'mithril';
import AlertState from '../states/AlertState';
export interface RequestErrorResponse extends JSON {
errors?: {
code: string;
@ -15,7 +17,7 @@ export default class RequestError {
options: Mithril.RequestOptions;
xhr: XMLHttpRequest;
response?: RequestErrorResponse;
alert?: Mithril.Vnode;
alert?: AlertState;
constructor(status, responseText, options, xhr) {
this.status = status;

15
js/src/forum/utils/UserControls.ts
View File

@ -1,4 +1,5 @@
import Alert from '../../common/components/Alert';
import app from '../app';
import Button from '../../common/components/Button';
import Separator from '../../common/components/Separator';
import EditUserModal from '../components/EditUserModal';
@ -103,15 +104,13 @@ export default {
* Show deletion alert of user.
*/
showDeletionAlert(user: User, type: string) {
const { username, email } = user.data.attributes;
const { username, email } = user.data.attributes!;
const message = `core.forum.user_controls.delete_${type}_message`;
app.alerts.show(
Alert.component({
type,
children: app.translator.trans(message, { username, email }),
})
);
app.alerts.show({
type,
children: app.translator.trans(message, { username, email }),
});
},
/**