fastlion-amis
Version:
一种MIS页面生成工具
197 lines (196 loc) • 12.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TplRenderer = exports.Tpl = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../factory");
var tpl_1 = require("../utils/tpl");
var helper_1 = require("../utils/helper");
var tpl_builtin_1 = require("../utils/tpl-builtin");
var Badge_1 = require("../components/Badge");
var icons_1 = require("../components/icons");
var popover_1 = (0, tslib_1.__importDefault)(require("antd/lib/popover"));
var antd_1 = require("antd");
var antdCompoentsProxy_1 = require("../components/antdCompoentsProxy");
var utils_1 = require("../utils/utils");
var lodash_1 = require("lodash");
var setting_1 = require("../utils/setting");
var Tpl = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Tpl, _super);
function Tpl(props) {
var _this = _super.call(this, props) || this;
_this.state = {
contents: '',
visible: false,
openHtml: false
};
_this.removeHtmlTags = function (html) {
if (!html)
return "";
var tempDiv = document.createElement("div");
tempDiv.innerHTML = html;
return tempDiv.textContent || tempDiv.innerText || "";
};
_this.htmlRef = _this.htmlRef.bind(_this);
_this.htmlPopovers = _this.htmlPopovers.bind(_this);
return _this;
}
Tpl.prototype.componentDidUpdate = function (prevProps) {
var _this = this;
if ((0, helper_1.anyChanged)(['data', 'tpl', 'html', 'text', 'raw', 'value'], this.props, prevProps)) {
requestAnimationFrame(function () {
_this._render();
_this._poprender();
});
}
};
Tpl.prototype.htmlRef = function (dom) {
this.dom = dom;
this._render();
};
Tpl.prototype.htmlPopovers = function (pop) {
this.pop = pop;
this._poprender();
};
Tpl.prototype.getContent = function () {
var _a = this.props, tpl = _a.tpl, html = _a.html, text = _a.text, raw = _a.raw, data = _a.data, placeholder = _a.placeholder, biGroupIndex = _a.biGroupIndex, name = _a.name;
var value = (0, helper_1.getPropValue)(this.props);
if (raw) {
return raw;
}
else if (html) {
return (0, tpl_1.filter)(html, data);
}
else if (tpl) {
if (biGroupIndex) {
return String(value);
}
return (0, tpl_1.filter)(tpl, data);
}
else if (text) {
return (0, tpl_builtin_1.escapeHtml)((0, tpl_1.filter)(text, data));
}
else {
return value == null || value === ''
? "<span class=\"text-muted\">" + placeholder + "</span>"
: typeof value === 'string'
? value
: JSON.stringify(value);
}
};
Tpl.prototype._render = function () {
if (!this.dom) {
return;
}
var _a = this.props, defaultOpen = _a.defaultOpen, formItem = _a.formItem, type = _a.type, detailsTitle = _a.detailsTitle, isTableContent = _a.isTableContent;
var Html = (formItem === null || formItem === void 0 ? void 0 : formItem.type) == 'static-html' || type == 'html';
var prpovertit = Html || detailsTitle;
var value = this.props.env.filterHtml(this.getContent());
this.dom.firstChild.innerHTML = (defaultOpen || prpovertit) ? !isTableContent ? this.getContent() : this.removeHtmlTags(value) : value;
};
Tpl.prototype._poprender = function () {
if (!this.pop) {
return;
}
this.pop.innerHTML = this.props.env.filterHtml(this.getContent());
};
Tpl.prototype.tplPopover = function () {
var _this = this;
var _a = this.props, cx = _a.classnames, formItem = _a.formItem, type = _a.type, name = _a.name;
var Html = (0, helper_1.isMobile)() && ((formItem === null || formItem === void 0 ? void 0 : formItem.type) == 'static-html' || type == 'html');
var style = {};
if (!(0, helper_1.isMobile)() && (formItem === null || formItem === void 0 ? void 0 : formItem.type) == 'static-html' || type == 'html' && localStorage.getItem('textControlHtml') && typeof localStorage.getItem('textControlHtml') == 'string') {
var textControlHtml = JSON.parse(localStorage.getItem('textControlHtml'));
if (textControlHtml && Array.isArray(textControlHtml) && textControlHtml.some(function (item) { return item.name == name; })) {
style = textControlHtml.find(function (item) { return item.name == name; }).style;
}
}
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { onClick: function (e) { return e.stopPropagation(); }, ref: this.htmlPopovers, className: cx('TplPopover', Html && 'TplStaticHtml'), style: style }),
!Html &&
react_1.default.createElement("div", { className: cx('Footer-tplPop'), onClick: function (e) { return e.stopPropagation(); } },
react_1.default.createElement(antd_1.Button, { size: 'small', style: { borderRadius: 5 }, onClick: function () { return _this.setState({ visible: false, }); } }, this.props.translate('Dialog.close')))));
};
Tpl.prototype.tplrender = function () {
var _this = this;
var _a;
var _b = this.props, className = _b.className, wrapperComponent = _b.wrapperComponent, inline = _b.inline, cx = _b.classnames, style = _b.style, defaultOpen = _b.defaultOpen, detailsTitle = _b.detailsTitle, formItem = _b.formItem, type = _b.type, linkUrl = _b.linkUrl, linkId = _b.linkId, linkTitle = _b.linkTitle, linkType = _b.linkType, env = _b.env, data = _b.data;
var Component = wrapperComponent || (inline ? 'span' : 'div');
var value = this.getContent();
var Html = (formItem === null || formItem === void 0 ? void 0 : formItem.type) == 'static-html' || type == 'html';
var prpovertit = Html || detailsTitle;
var open = (0, helper_1.isMobile)() && Html;
var privateStyle = (0, tslib_1.__assign)({}, style);
privateStyle.width = '';
var title = (!prpovertit && !defaultOpen) ? (value.includes('</font>') ? (_a = value.split('</font>')) === null || _a === void 0 ? void 0 : _a[1] : (value.includes('</') ? this.props.value : value)) : "";
return react_1.default.createElement(Component, { ref: this.htmlRef, className: cx('TplField', defaultOpen && 'TplOpen', className, open && 'OpenExpandBtn', prpovertit && 'Static-Html-TplOpen'), style: (0, tslib_1.__assign)({}, privateStyle), onClick: function () {
open && _this.setState({ openHtml: true });
if (linkUrl && linkId && linkTitle) {
var handleJump = _this.props.handleJump;
(0, utils_1.ModleHandleClick)({
classnames: cx,
env: env,
linkUrl: linkUrl,
linkType: linkType !== null && linkType !== void 0 ? linkType : (handleJump ? undefined : 1),
linkTitle: linkTitle,
linkId: linkId,
data: data,
value: true,
handleJump: handleJump
});
}
} },
react_1.default.createElement("span", { title: title }, prpovertit ? this.removeHtmlTags(value) : value));
};
Tpl.prototype.render = function () {
var _this = this;
var _a, _b, _c, _d, _e;
var _f = this.props, cx = _f.classnames, defaultOpen = _f.defaultOpen, domicile = _f.domicile, formItem = _f.formItem, type = _f.type, env = _f.env;
var _g = this.state, visible = _g.visible, openHtml = _g.openHtml;
var placement = !(0, helper_1.isMobile)() ? 'rightTop' : 'bottomRight';
var primaryField = (_a = this.props.store) === null || _a === void 0 ? void 0 : _a.primaryField;
var primaryVlaue = domicile ? (_c = (_b = domicile === null || domicile === void 0 ? void 0 : domicile.data) === null || _b === void 0 ? void 0 : _b[primaryField]) !== null && _c !== void 0 ? _c : '' : '';
var primarylable = domicile ? domicile.label : '';
var open = (0, helper_1.isMobile)() && defaultOpen && (formItem === null || formItem === void 0 ? void 0 : formItem.type) == 'static-html' || type == 'html';
return (react_1.default.createElement(react_1.default.Fragment, null,
defaultOpen ?
react_1.default.createElement("div", { className: cx('Tpltab') },
this.tplrender(),
!(0, helper_1.isMobile)() &&
react_1.default.createElement(popover_1.default, { content: this.tplPopover(), trigger: 'click', visible: visible, overlayClassName: cx('TplPop'), getPopupContainer: env.getModalContainer, autoAdjustOverflow: true, destroyTooltipOnHide: true, placement: placement, onVisibleChange: function (visible) { _this.setState({ visible: visible }); }, title: react_1.default.createElement("div", { className: cx('Title-tplPop'), onClick: function (e) { return e.stopPropagation(); } },
react_1.default.createElement("div", null, primarylable + ": " + ((0, lodash_1.isNil)(primaryVlaue) ? '' : primaryVlaue)),
react_1.default.createElement("div", null,
" ",
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon", style: { cursor: 'pointer' }, onClick: function () { return _this.setState({ visible: false }); } }))) },
react_1.default.createElement(icons_1.Icon, { onClick: function (e) { return e.stopPropagation(); }, icon: "provincial", className: [cx('TplSaving'), 'icon'] })))
:
this.tplrender(),
open &&
react_1.default.createElement(antdCompoentsProxy_1.Drawer, { visible: openHtml, width: "100%", className: "textarea-drawer", closeIcon: react_1.default.createElement(icons_1.Icon, { icon: 'title-left', className: "icon", style: { width: '16px', height: '16px' } }), onClose: function () { return _this.setState({ openHtml: false }); }, destroyOnClose: true, mask: false, getContainer: this.props.env.getModalContainer, zIndex: 1011, title: (_e = (_d = domicile === null || domicile === void 0 ? void 0 : domicile.label) !== null && _d !== void 0 ? _d : formItem === null || formItem === void 0 ? void 0 : formItem.labelName) !== null && _e !== void 0 ? _e : '', extra: react_1.default.createElement(react_1.default.Fragment, null), footer: react_1.default.createElement("div", { className: 'textarea-drawer-footer' },
react_1.default.createElement(antd_1.Button, { type: "primary", onClick: function () { return _this.setState({ openHtml: false }); } }, this.props.translate('Dialog.close'))) }, this.tplPopover())));
};
Tpl.defaultProps = {
inline: true,
placeholder: setting_1.UserSetting.tableEmptyValueSetting
};
return Tpl;
}(react_1.default.Component));
exports.Tpl = Tpl;
var TplRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TplRenderer, _super);
function TplRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
TplRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
test: /(^|\/)(?:tpl|html)$/,
name: 'tpl'
})
// @ts-ignore 类型没搞定
,
Badge_1.withBadge
], TplRenderer);
return TplRenderer;
}(Tpl));
exports.TplRenderer = TplRenderer;
//# sourceMappingURL=./renderers/Tpl.js.map