fastlion-amis
Version:
一种MIS页面生成工具
203 lines (202 loc) • 13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PanelRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../factory");
var helper_1 = require("../utils/helper");
var resize_sensor_1 = require("../utils/resize-sensor");
// Jay
var components_1 = require("../components");
var utils_1 = require("../utils/utils");
var icons_1 = require("../components/icons");
var manager_1 = require("../store/manager");
var Modal_1 = (0, tslib_1.__importDefault)(require("../components/Modal"));
var Drawer_1 = (0, tslib_1.__importDefault)(require("../components/Drawer"));
var Panel = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Panel, _super);
// Jay
function Panel(props) {
var _this = _super.call(this, props) || this;
_this.affixDom = react_1.default.createRef();
_this.footerDom = react_1.default.createRef();
_this.dom = react_1.default.createRef();
_this.setPanelLoading = _this.setPanelLoading.bind(_this);
_this.handleLink = _this.handleLink.bind(_this);
_this.state = {
loading: false,
visible: false
};
return _this;
}
Panel.prototype.setPanelLoading = function (loading) {
this.setState({
loading: loading
});
};
Panel.prototype.componentDidMount = function () {
var _a;
var dom = (_a = this.dom) === null || _a === void 0 ? void 0 : _a.current;
var parent = dom ? (0, helper_1.getScrollParent)(dom) : null;
if (!parent || parent === document.body) {
parent = window;
}
this.parentNode = parent;
parent.addEventListener('scroll', this.affixDetect);
this.unSensor = (0, resize_sensor_1.resizeSensor)(dom, this.affixDetect);
this.affixDetect();
};
Panel.prototype.componentWillUnmount = function () {
var parent = this.parentNode;
this.parentNode = null;
parent && parent.removeEventListener('scroll', this.affixDetect);
this.unSensor && this.unSensor();
clearTimeout(this.timer);
};
Panel.prototype.affixDetect = function () {
var _a, _b;
if (!this.props.affixFooter ||
!this.affixDom.current ||
!this.footerDom.current) {
return;
}
var affixDom = this.affixDom.current;
var footerDom = this.footerDom.current;
var offsetBottom = (_b = (_a = this.props.affixOffsetBottom) !== null && _a !== void 0 ? _a : this.props.env.affixOffsetBottom) !== null && _b !== void 0 ? _b : 0;
var affixed = false;
if (footerDom.offsetWidth) {
affixDom.style.cssText = "bottom: " + offsetBottom + "px;width: " + footerDom.offsetWidth + "px";
}
else {
this.timer = setTimeout(this.affixDetect, 250);
return;
}
if (this.props.affixFooter === 'always') {
affixed = true;
footerDom.classList.add('invisible2');
}
else {
var clip = footerDom.getBoundingClientRect();
var clientHeight = window.innerHeight;
// affixed = clip.top + clip.height / 2 > clientHeight;
affixed = clip.bottom > clientHeight - offsetBottom;
}
affixed ? affixDom.classList.add('in') : affixDom.classList.remove('in');
};
Panel.prototype.renderBody = function () {
var _a = this.props, type = _a.type, className = _a.className, data = _a.data, header = _a.header, body = _a.body, render = _a.render, bodyClassName = _a.bodyClassName, headerClassName = _a.headerClassName, actionsClassName = _a.actionsClassName, footerClassName = _a.footerClassName, children = _a.children, title = _a.title, actions = _a.actions, footer = _a.footer, ns = _a.classPrefix, formMode = _a.formMode, formHorizontal = _a.formHorizontal, subFormMode = _a.subFormMode, subFormHorizontal = _a.subFormHorizontal, rest = (0, tslib_1.__rest)(_a, ["type", "className", "data", "header", "body", "render", "bodyClassName", "headerClassName", "actionsClassName", "footerClassName", "children", "title", "actions", "footer", "classPrefix", "formMode", "formHorizontal", "subFormMode", "subFormHorizontal"]);
var subProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({ data: data }, rest), { formMode: subFormMode || formMode, formHorizontal: subFormHorizontal || formHorizontal, setPanelLoading: this.setPanelLoading // Jay
});
return children
? typeof children === 'function'
? children(this.props)
: children
: body
? render('body', body, subProps)
: null;
};
Panel.prototype.renderActions = function () {
var _a = this.props, actions = _a.actions, render = _a.render, btnMapdisable = _a.btnMapdisable, isDialogMode = _a.isDialogMode, wrapWithPanel = _a.wrapWithPanel;
if (Array.isArray(actions) && actions.length && !(isDialogMode && wrapWithPanel)) {
return actions.map(function (action, key) { return render('action', action, {
type: action.type || 'button',
key: key,
disabled: action.api && btnMapdisable
}); });
}
return null;
};
Panel.prototype.handleLink = function (linkSelf) {
var _a = this.props, classnames = _a.classnames, title = _a.title, env = _a.env, linkUrl = _a.linkUrl, body = _a.body;
var id = (0, utils_1.getHashCode)(title).toString();
if (linkSelf) {
var stores = (0, manager_1.getStores)();
var data_1 = {};
Object.values(stores).forEach(function (store) {
if (store.data) {
data_1 = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, data_1), store.data);
}
});
this.modalData = data_1;
this.setState({ visible: true });
// env.onPageLink?.(id, id, title || 'title', { schema: { type: 'page', className: 'page-link', body: body } }, data)
}
else {
(0, utils_1.ModleHandleClick)({ classnames: classnames, env: env, linkUrl: linkUrl, linkType: 1, linkTitle: title, linkId: (0, utils_1.getHashCode)(title), value: true });
}
};
Panel.prototype.render = function () {
var _this = this;
var _a, _b;
var _c = this.props, type = _c.type, className = _c.className, data = _c.data, header = _c.header, body = _c.body, render = _c.render, bodyClassName = _c.bodyClassName, headerClassName = _c.headerClassName, actionsClassName = _c.actionsClassName, footerClassName = _c.footerClassName, footerWrapClassName = _c.footerWrapClassName, children = _c.children, title = _c.title, footer = _c.footer, affixFooter = _c.affixFooter, ns = _c.classPrefix, cx = _c.classnames, __ = _c.translate, isDetail = _c.isDetail, flowProcess = _c.flowProcess, linkUrl = _c.linkUrl, inModal = _c.inModal, rest = (0, tslib_1.__rest)(_c, ["type", "className", "data", "header", "body", "render", "bodyClassName", "headerClassName", "actionsClassName", "footerClassName", "footerWrapClassName", "children", "title", "footer", "affixFooter", "classPrefix", "classnames", "translate", "isDetail", "flowProcess", "linkUrl", "inModal"]);
var inCombination = (_a = className === null || className === void 0 ? void 0 : className.includes('Panel-Combination')) !== null && _a !== void 0 ? _a : false;
var subProps = (0, tslib_1.__assign)({ data: data }, rest);
var footerDoms = [];
var actions = this.renderActions();
actions &&
footerDoms.push(react_1.default.createElement("div", { key: "actions", className: cx("Panel-btnToolbar", actionsClassName || "Panel-footer") }, actions));
footer &&
footerDoms.push(react_1.default.createElement("div", { key: "footer", className: cx(footerClassName || "Panel-footer") }, render('footer', footer, subProps)));
// console.log(header, footerDoms)
var footerDom = (footerDoms.length || (Array.isArray(header) ? header.length : header)) ? (react_1.default.createElement("div", { className: cx('Panel-footerWrap', footerWrapClassName), ref: this.footerDom }, footerDoms.length > 0 && footerDoms)) : null;
return (react_1.default.createElement("div", { ref: this.dom, className: cx("Panel", className || "Panel--default", inModal && 'in-modal', isDetail && !flowProcess && 'detail-form-panel', footerDoms.length && 'with-fix-footer'), style: { height: (className === null || className === void 0 ? void 0 : className.includes('h-')) ? 'none' : '100%' } },
title ? (react_1.default.createElement("div", { className: cx(headerClassName || "Panel-heading", inCombination ? 'Panel-heading--combination' : '') },
react_1.default.createElement("h3", { className: cx("Panel-title", inCombination ? 'Panel-title--combination' : '') }, render('title', title, subProps)),
react_1.default.createElement("div", { className: cx('Panel-extra') },
(inCombination && !!linkUrl) && react_1.default.createElement("h3", { onClick: function (e) { e.stopPropagation(); _this.handleLink(false); }, style: { color: '#1890ff', cursor: 'pointer', fontSize: 14 } }, __('ViewMore')),
this.props.body && react_1.default.createElement(icons_1.Icon, { symbol: true, icon: '#icon-tooltool_max', onClick: function () { _this.handleLink(true); } })))) : null,
react_1.default.createElement("div", { className: bodyClassName || ns + "Panel-body" }, this.renderBody()),
footerDom,
affixFooter && footerDoms.length ? (react_1.default.createElement("div", { ref: this.affixDom, className: cx('Panel-fixedBottom Panel-footerWrap', footerWrapClassName) }, footerDoms)) : null,
react_1.default.createElement(components_1.Spinner, { size: "md", overlay: true, key: "info", style: { top: '45%', left: '45%' }, show: this.state.loading }),
(0, helper_1.isMobile)() ?
react_1.default.createElement(Drawer_1.default, { show: this.state.visible, position: 'right', className: "page-link", container: this.props.env.getTopModalContainer },
react_1.default.createElement("div", { className: cx('Drawer-header') },
react_1.default.createElement(icons_1.Icon, { icon: "title-left", style: { width: 20, height: 20, marginRight: 8 }, onClick: function () { return _this.setState({ visible: false }); } }),
react_1.default.createElement("div", { className: cx('Drawer-title') }, title)),
render('body', this.props.body, { data: this.modalData })) :
react_1.default.createElement(Modal_1.default, { show: this.state.visible, size: 'full', className: "page-link", container: (_b = this.props.env) === null || _b === void 0 ? void 0 : _b.getModalContainer },
react_1.default.createElement(Modal_1.default.Header, { onClose: function () { return _this.setState({ visible: false }); } },
react_1.default.createElement(Modal_1.default.Title, null, title)),
react_1.default.createElement(Modal_1.default.Body, null, render('body', this.props.body, { data: this.modalData })))));
};
Panel.propsList = [
'header',
'actions',
'children',
'headerClassName',
'footerClassName',
'footerWrapClassName',
'actionsClassName',
'bodyClassName'
];
Panel.defaultProps = {
// className: 'Panel--default',
// headerClassName: 'Panel-heading',
// footerClassName: 'Panel-footer bg-light lter Wrapper',
// actionsClassName: 'Panel-footer',
// bodyClassName: 'Panel-body'
};
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], Panel.prototype, "affixDetect", null);
return Panel;
}(react_1.default.Component));
exports.default = Panel;
var PanelRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(PanelRenderer, _super);
function PanelRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
PanelRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'panel'
})
], PanelRenderer);
return PanelRenderer;
}(Panel));
exports.PanelRenderer = PanelRenderer;
//# sourceMappingURL=./renderers/Panel.js.map