fastlion-amis
Version:
一种MIS页面生成工具
209 lines (208 loc) • 13.5 kB
JavaScript
;
/**
* @file 表格的方式显示只读信息，比如产品详情
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../factory");
var tpl_builtin_1 = require("../utils/tpl-builtin");
var helper_1 = require("../utils/helper");
var throttle_1 = (0, tslib_1.__importDefault)(require("lodash/throttle")); // Aug
var tpl_1 = require("../utils/tpl");
var Property = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Property, _super);
function Property(props) {
var _this = _super.call(this, props) || this;
//Aug
_this.contentRef = react_1.default.createRef();
_this.state = {
wrapperWidth: 0
};
_this.updateWrapperWidth = (0, throttle_1.default)(_this.updateWrapperWidth.bind(_this), 500);
return _this;
}
//Aug
Property.prototype.componentDidMount = function () {
this.updateWrapperWidth();
window.addEventListener('resize', this.updateWrapperWidth);
};
//Aug
Property.prototype.componentDidUpdate = function () {
this.updateWrapperWidth();
};
Property.prototype.componentWillUnmount = function () {
var _a, _b;
window.removeEventListener('resize', this.updateWrapperWidth);
if (!((_b = (_a = this.props.items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.inheritWidth)) {
sessionStorage.removeItem('computedWidth');
sessionStorage.removeItem('computedWidth2');
sessionStorage.removeItem('computedWidth3');
}
};
//Aug
Property.prototype.updateWrapperWidth = function () {
var _a;
var wrapperWidth = (_a = this.contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
if (!wrapperWidth)
return;
if (Math.abs(wrapperWidth - this.state.wrapperWidth) < 10)
return;
this.setState({ wrapperWidth: wrapperWidth });
};
/**
* 算好每行的分布情况，方便后续渲染
*/
Property.prototype.prepareRows = function () {
var _a = this.props, items = _a.items, source = _a.source, data = _a.data, useMobileUI = _a.useMobileUI;
// Aug 移动端适配 始终一行
var _b = this.props.column, column = _b === void 0 ? 3 : _b;
if (useMobileUI && (0, helper_1.isMobile)()) {
column = 1;
}
var propertyItems = (items
? items
: (0, tpl_builtin_1.resolveVariableAndFilter)(source, data, '| raw')) || [];
var rows = [];
var row = [];
var columnLeft = column;
var index = 0;
var filteredItems = (0, helper_1.visibilityFilter)(propertyItems, data);
for (var _i = 0, filteredItems_1 = filteredItems; _i < filteredItems_1.length; _i++) {
var item = filteredItems_1[_i];
index = index + 1;
var span = Math.min(item.span || 1, column);
columnLeft = columnLeft - span;
var rowItem = {
label: item.label,
content: item.content,
span: span,
mode: item.mode,
remark: item.remark,
inheritWidth: item === null || item === void 0 ? void 0 : item.inheritWidth,
classNameExpr: item === null || item === void 0 ? void 0 : item.classNameExpr
};
// 如果还能放得下就放这一行
if (columnLeft >= 0) {
row.push(rowItem);
}
else {
rows.push(row);
columnLeft = column - span;
row = [rowItem];
}
// 最后一行将最后的数据 push
if (index === filteredItems.length) {
rows.push(row);
}
// if (index === filteredItems.length) {
// const columnLength = row?.flatMap?.(item => item.span).reduce((prev: number, curr: number) => prev + curr, 0)
// if (columnLength < column) {
// const rowItem = {
// label: '',
// content: '',
// span: column - columnLength,
// mode: undefined,
// remark: '',
// inheritWidth: undefined
// };
// row.push(rowItem);
// }
// rows.push(row);
// }
}
return rows;
};
Property.prototype.renderRow = function (rows) {
var _this = this;
var _a = this.props, render = _a.render, contentStyle = _a.contentStyle, labelStyle = _a.labelStyle, _b = _a.mode, mode = _b === void 0 ? 'table' : _b, cx = _a.classnames, //Aug
_c = _a.column, //Aug
column = _c === void 0 ? 3 : _c, //Aug
env = _a.env, popOverContainer = _a.popOverContainer;
var baseW = this.state.wrapperWidth / column;
return rows.map(function (row, key) {
return (react_1.default.createElement("tr", { key: key }, row.map(function (property, index) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
var itemMode = (((_a = property.content) === null || _a === void 0 ? void 0 : _a.type) === 'input-table-field' && ((_b = property.content) === null || _b === void 0 ? void 0 : _b.tableLayout) === 'vertical') || ((_c = property.content) === null || _c === void 0 ? void 0 : _c.type) == 'matrix-checkboxes' ? 'simple' : property.mode || mode;
var _s = property.ellipsis, ellipsis = _s === void 0 ? true : _s, remark = property.remark; //Aug
var isLastFillCell = (property.span == 1 && row.length != column && property.label === ((_d = row[row.length - 1]) === null || _d === void 0 ? void 0 : _d.label));
var colSpan = isLastFillCell ? column * 2 - (index * 2 + 1) : property.span + property.span - 1;
var fillCell = property.content.type === 'lion-upload' && property.span == 1 && key == rows.length - 1;
if (property.span === 1) {
var getWidth = sessionStorage.getItem('computedWidth');
if (!getWidth && (baseW * property.span - 130 > 0) && !property.inheritWidth && !(((_e = property.content) === null || _e === void 0 ? void 0 : _e.type) === 'input-table-field' && ((_f = property.content) === null || _f === void 0 ? void 0 : _f.tableLayout) === 'vertical')) {
sessionStorage.setItem('computedWidth', baseW * property.span - 130 + 'px');
}
}
if (property.span === 2) {
var getWidth = sessionStorage.getItem('computedWidth2');
if (!getWidth && (baseW * property.span - 130 > 0) && !property.inheritWidth && !(((_g = property.content) === null || _g === void 0 ? void 0 : _g.type) === 'input-table-field' && ((_h = property.content) === null || _h === void 0 ? void 0 : _h.tableLayout) === 'vertical')) {
sessionStorage.setItem('computedWidth2', baseW * property.span - 130 + 'px');
}
}
if (property.span === 3) {
var getWidth = sessionStorage.getItem('computedWidth3');
if (!getWidth && (baseW * property.span - 130 > 0) && !property.inheritWidth && !(((_j = property.content) === null || _j === void 0 ? void 0 : _j.type) === 'input-table-field' && ((_k = property.content) === null || _k === void 0 ? void 0 : _k.tableLayout) === 'vertical')) {
sessionStorage.setItem('computedWidth3', baseW * property.span - 130 + 'px');
}
}
return itemMode === 'table' ? (react_1.default.createElement(react_1.default.Fragment, { key: "item-" + index },
!(((_l = property.content) === null || _l === void 0 ? void 0 : _l.tableLayout) === 'horizontal' && !(0, helper_1.isMobile)()) && react_1.default.createElement("th", null,
react_1.default.createElement("div", { className: cx('cell', { 'ellipsis': ellipsis }), style: Object.assign({ width: 120, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, labelStyle) },
render('label', property.label),
remark && render('label-remark', {
type: 'remark',
icon: (_m = property.content) === null || _m === void 0 ? void 0 : _m.icon,
tooltip: remark,
style: { display: 'flex' },
container: popOverContainer ? popOverContainer : env.getModalContainer ? env.getModalContainer : undefined
}))),
react_1.default.createElement("td", { style: { height: fillCell ? '100%' : undefined }, colSpan: ((_o = property.content) === null || _o === void 0 ? void 0 : _o.tableLayout) === 'horizontal' && !(0, helper_1.isMobile)() ? column * 2 : colSpan, className: property.classNameExpr ? (0, tpl_1.filter)(property.classNameExpr, _this.props.data) : '' },
((_p = property.content) === null || _p === void 0 ? void 0 : _p.tableLayout) === 'horizontal' && !(0, helper_1.isMobile)() ? react_1.default.createElement("div", { className: 'fieldTable-block' }) : null,
react_1.default.createElement("div", { className: cx('cell', { 'ellipsis-cell': ellipsis }, isLastFillCell && 'full-cell'),
// 减去label 以及 th td > border的宽度
style: Object.assign({
height: fillCell ? '100%' : undefined,
width: isLastFillCell ? '100%' : property.inheritWidth && [1, 2, 3].includes(property.span) ? (((property.span == 1 || property.span == 2) ? property.span == 2 ? sessionStorage.getItem('computedWidth2') : sessionStorage.getItem('computedWidth') : sessionStorage.getItem('computedWidth3')) || baseW * property.span - 130) : baseW * property.span - (((_q = property.content) === null || _q === void 0 ? void 0 : _q.tableLayout) === 'horizontal' && !(0, helper_1.isMobile)() ? 0 : 130)
}, contentStyle, ((_r = property.content) === null || _r === void 0 ? void 0 : _r.tableLayout) === 'horizontal' && !(0, helper_1.isMobile)() ? { padding: 0 } : {}) }, render('content', property.content, {
data: _this.props.data,
key: property.content.name + "-" + property.content.type + "-" + index,
labelName: property.label,
isProperty: true,
fillCell: fillCell
}))))) : (react_1.default.createElement("td", { colSpan: property.span * 2, style: contentStyle, key: "item-" + index },
react_1.default.createElement("div", { className: 'fieldTable-block' }),
render('content', property.content, { labelName: property.label, isProperty: true, span: column })));
})));
});
};
Property.prototype.render = function () {
var _a = this.props, style = _a.style, title = _a.title, _b = _a.column, column = _b === void 0 ? 3 : _b, cx = _a.classnames, className = _a.className, titleStyle = _a.titleStyle, _c = _a.mode, mode = _c === void 0 ? 'table' : _c;
var rows = this.prepareRows();
//判断是否有符合条件撑满图片
var fillImage = rows.find(function (row, key) { return row.find(function (col) { return col.content.type === 'lion-upload' && col.span == 1 && key == rows.length - 1; }); });
return (react_1.default.createElement("div", { className: cx('Property', "Property--" + mode, className), style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, style), { height: !!fillImage ? '100%' : undefined }), ref: this.contentRef },
react_1.default.createElement("table", null,
title ? (react_1.default.createElement("thead", null,
react_1.default.createElement("tr", null,
react_1.default.createElement("th", { colSpan: mode === 'table' ? column + column : column, style: titleStyle }, title)))) : null,
react_1.default.createElement("tbody", null, this.renderRow(rows)))));
};
return Property;
}(react_1.default.Component));
exports.default = Property;
var PropertyRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(PropertyRenderer, _super);
function PropertyRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
PropertyRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'property'
})
], PropertyRenderer);
return PropertyRenderer;
}(Property));
exports.PropertyRenderer = PropertyRenderer;
//# sourceMappingURL=./renderers/PropertyOld.js.map