@doreamonjs/gate
Version:
gate for doreamonjs
159 lines • 6.99 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const dva_1 = require("dva");
const doreamon_1 = tslib_1.__importDefault(require("@zodash/doreamon"));
const antd_1 = require("antd");
const components_1 = require("@doreamonjs/components");
const utils = tslib_1.__importStar(require("../../utils"));
require("./index.less");
const componentName = 'doreamonjs-design-gate-layout-alert';
const mapState = ({ alert, router }) => {
var _a;
return {
...alert,
current_path: (_a = router === null || router === void 0 ? void 0 : router.location) === null || _a === void 0 ? void 0 : _a.pathname,
};
// // mock test
// return {
// type: 'warning',
// message: 'IDP 将于 2024.01.23 19:00 - 20:00 系统维护，问题排查，服务暂时不可用，如遇紧急问题，请和值班开发或者 @黄锦华 / @杨旭联系。',
// // detail_url: 'http://www.baidu.com',
// active_paths: [
// '/flows/te-docker-envs',
// ],
// };
};
let LayoutAlert = class LayoutAlert extends react_1.Component {
constructor() {
super(...arguments);
this.state = {
isDialogVisible: false,
//
current: 0,
// 存储自动关闭后的 ID，这个在下一次刷新页面时会再现
closed_ids_by_auto_close: [],
// 存储手动关闭后的 ID，存在 local stirage，这个在页面 local storage 清空时会浮现
closed_ids_by_hand_close: [],
};
this.onDetailClick = () => {
const { current } = this.state;
const data = this.data;
const currentAlert = data === null || data === void 0 ? void 0 : data[current];
if (!currentAlert)
return;
const { detail_url } = currentAlert;
if (!!detail_url) {
window === null || window === void 0 ? void 0 : window.open(detail_url);
return;
}
this.setState({
isDialogVisible: true,
});
};
this.onNextClick = () => {
const data = this.data;
const total = (data === null || data === void 0 ? void 0 : data.length) || 0;
const { current } = this.state;
return this.setState({
current: (current + 1) % total,
});
};
}
get data() {
const { current_path } = this.props;
return this.props.data.filter(e => {
var _a, _b, _c;
// closed by hand
if ((_a = this.state.closed_ids_by_hand_close) === null || _a === void 0 ? void 0 : _a.includes(e.id)) {
return false;
}
// closed by auto
if ((_b = this.state.closed_ids_by_auto_close) === null || _b === void 0 ? void 0 : _b.includes(e.id)) {
return false;
}
// not valid
if (!e.active_paths || e.active_paths === '' || ((_c = e.active_paths) === null || _c === void 0 ? void 0 : _c.trim()) === '') {
return true;
}
// array
if (Array.isArray(e.active_paths)) {
return e.active_paths.some(e => {
const te = e.trim();
if (!te)
return false;
return new RegExp(te).test(current_path);
});
}
// string: 支持 , 或者 \n 分割
const active_paths = e.active_paths.split(/,|\n/).map((item) => item.trim());
return active_paths.some(e => {
const te = e.trim();
if (!te)
return false;
return new RegExp(te).test(current_path);
});
});
}
async componentDidMount() {
const closed_ids_by_hand_close = await doreamon_1.default.storage.get('doreamonjs-alert-closed-ids') || [];
if ((closed_ids_by_hand_close === null || closed_ids_by_hand_close === void 0 ? void 0 : closed_ids_by_hand_close.length) > 0) {
this.setState({
closed_ids_by_hand_close,
});
}
}
async componentDidUpdate(prevProps) {
const { data } = this.props;
const { closed_ids_by_auto_close = [] } = this.state;
const filteredData = data.filter(e => e.is_auto_close);
if (filteredData.length <= 0) {
return;
}
// @TODO trigger detect
for (const item of data) {
if (item.is_auto_close && !closed_ids_by_auto_close.includes(item.id)) {
setTimeout(() => {
// close
this.setState({
closed_ids_by_auto_close: [...closed_ids_by_auto_close, item.id],
});
}, item.auto_close_delay || 5000);
}
}
}
render() {
const { className, current_path } = this.props;
const { isDialogVisible, current } = this.state;
const data = this.data;
const total = (data === null || data === void 0 ? void 0 : data.length) || 0;
if (total <= 0) {
return null;
}
const currentAlert = data === null || data === void 0 ? void 0 : data[current];
const { type = 'warning', title, content } = currentAlert;
// check message is not empty
if (!title && !content) {
return null;
}
const contentWithoutHTML = content === null || content === void 0 ? void 0 : content.replace(/<[^>]*>/g, '');
const multipleLineContent = content === null || content === void 0 ? void 0 : content.split('\n').join('<br />');
return (react_1.default.createElement("div", { className: doreamon_1.default.classnames(componentName, className) },
react_1.default.createElement(components_1.Alert, { type: type, message: `${title}: ${contentWithoutHTML}`, onDetailClick: this.onDetailClick, current: current, total: total, onNextClick: this.onNextClick, closable: currentAlert.is_hand_close }),
react_1.default.createElement(antd_1.Modal, { title: title, width: 800, bodyStyle: {
minHeight: '80vh',
}, visible: isDialogVisible, onCancel: () => this.setState({ isDialogVisible: false }), footer: null },
react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: multipleLineContent } }))));
}
};
LayoutAlert = tslib_1.__decorate([
dva_1.connect(mapState)
], LayoutAlert);
exports.default = LayoutAlert;
function getNavTags(menus, nav) {
const indexMenus = utils.getMenus('nest', menus).index;
const pickedMenus = doreamon_1.default.object.pick(indexMenus, nav.history);
return Object.values(pickedMenus);
}
//# sourceMappingURL=index.js.map