fastlion-amis
Version:
一种MIS页面生成工具
144 lines (143 loc) • 7.08 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 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();
};
//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
};
// 如果还能放得下就放这一行
if (columnLeft >= 0) {
row.push(rowItem);
}
else {
rows.push(row);
columnLeft = column - span;
row = [rowItem];
}
// 最后一行将最后的数据 push
if (index === filteredItems.length) {
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.separator, separator = _b === void 0 ? ': ' : _b, _c = _a.mode, mode = _c === void 0 ? 'table' : _c, cx = _a.classnames, //Aug
_d = _a.column //Aug
, //Aug
column = _d === void 0 ? 3 : _d //Aug
;
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 = property.ellipsis, ellipsis = _a === void 0 ? true : _a; //Aug
var colSpan = property.span + property.span - 1;
return mode === 'table' ? (react_1.default.createElement(react_1.default.Fragment, { key: "item-" + index },
react_1.default.createElement("th", null,
react_1.default.createElement("div", { className: cx('cell', { 'ellipsis': ellipsis }), style: Object.assign({ width: 120 }, labelStyle) }, render('label', property.label))),
react_1.default.createElement("td", { colSpan: colSpan },
react_1.default.createElement("div", { className: cx('cell', { 'ellipsis-cell': ellipsis }),
// 减去label 以及 th td > border的宽度
style: Object.assign({ width: baseW * property.span - 122 }, contentStyle) }, render('content', property.content, {
data: _this.props.data,
key: property.content.name + "-" + property.content.type + "-" + index,
labelName: property.label
}))))) : (react_1.default.createElement("td", { colSpan: property.span, style: contentStyle, key: "item-" + index },
react_1.default.createElement("span", { style: labelStyle }, render('label', property.label)),
separator,
render('content', property.content)));
})));
});
};
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();
return (react_1.default.createElement("div", { className: cx('Property', "Property--" + mode, className), style: style, 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/Property.js.map