fastlion-amis/lib/renderers/Property.js

一种MIS页面生成工具

"use strict";
/**
 * @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 tpl_1 = require("../utils/tpl");
var Property = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(Property, _super);
    function Property() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    /**
     * 算好每行的分布情况，方便后续渲染
     */
    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);
            }
        }
        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;
        return rows.map(function (row, key) {
            //判断是否有符合条件撑满图片
            var fillImage = row.find(function (col) { return col.content.type === 'lion-upload' && col.span == 1 && key == rows.length - 1; });
            return (react_1.default.createElement("div", { key: key, className: cx('Property-wrapper-content-row'), style: { height: !!fillImage ? '100%' : undefined } }, row.map(function (property, index) {
                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                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' : ((_d = property.content) === null || _d === void 0 ? void 0 : _d.type) === 'progress' ? mode : property.mode || mode;
                var _m = property.ellipsis, ellipsis = _m === void 0 ? true : _m, remark = property.remark; //Aug
                var isLastFillCell = (property.span == 1 && row.length != column && property.label === ((_e = row[row.length - 1]) === null || _e === void 0 ? void 0 : _e.label));
                var fillCell = property.content.type === 'lion-upload' && property.span == 1 && key == rows.length - 1;
                var labelSpan = (isLastFillCell ? column - index : property.span) / column;
                return itemMode === 'table' ? (react_1.default.createElement("div", { style: { width: ((isLastFillCell ? column - index : property.span) / column * 100) + '%', flex: isLastFillCell ? '1' : '' }, key: "item-" + index, className: cx('Property-wrapper-content-row-table-item') },
                    !(((_f = property.content) === null || _f === void 0 ? void 0 : _f.tableLayout) === 'horizontal' && !(0, helper_1.isMobile)()) &&
                        react_1.default.createElement("div", { style: { width: (0.1 / labelSpan * 100) + '%', minWidth: '120px' }, className: 'property-formitem-label' },
                            react_1.default.createElement("div", { className: cx('cell', { 'ellipsis': ellipsis }), style: Object.assign({ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, labelStyle) }, render('label', property.label)),
                            remark && render('label-remark', {
                                type: 'remark',
                                icon: (_g = property.content) === null || _g === void 0 ? void 0 : _g.icon,
                                tooltip: remark,
                                style: { display: 'flex' },
                                container: popOverContainer ? popOverContainer : env.getModalContainer ? env.getModalContainer : undefined
                            })),
                    react_1.default.createElement("div", { style: { padding: ((_h = property.content) === null || _h === void 0 ? void 0 : _h.type) === 'input-table-field' ? 0 : undefined, height: fillCell ? '100%' : undefined, width: ((_j = property.content) === null || _j === void 0 ? void 0 : _j.tableLayout) === 'horizontal' && !(0, helper_1.isMobile)() ? '100%' : 'unset' }, className: (property.classNameExpr ? (0, tpl_1.filter)(property.classNameExpr, _this.props.data) : '') + ' property-formitem-value' },
                        ((_k = property.content) === null || _k === void 0 ? void 0 : _k.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 ? '97%' : undefined,
                            }, contentStyle, ((_l = property.content) === null || _l === void 0 ? void 0 : _l.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,
                            fieldTableRemark: property.remark
                        }))))) : (react_1.default.createElement("div", { style: contentStyle, key: "item-" + index, className: cx('Property-wrapper-content-row-normal-item') },
                    react_1.default.createElement("div", { className: 'fieldTable-block' }),
                    render('content', property.content, { labelName: property.label, isProperty: true, span: column, fieldTableRemark: property.remark })));
            })));
        });
    };
    Property.prototype.render = function () {
        var _a = this.props, style = _a.style, title = _a.title, cx = _a.classnames, className = _a.className, titleStyle = _a.titleStyle, _b = _a.mode, mode = _b === void 0 ? 'table' : _b, _c = _a.items, items = _c === void 0 ? [] : _c;
        // 如果有items数据，但是又配置了所有选项隐藏，那么就直接返回null, 否则会出现空的div样式污染问题
        var hasItemButAllHidden = items.every(function (item) { return item['hidden']; });
        if (hasItemButAllHidden) {
            return null;
        }
        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 }) },
            react_1.default.createElement("div", { className: cx('Property-wrapper'), style: { height: !!fillImage ? '100%' : undefined } },
                title ? react_1.default.createElement("div", { className: cx('Property-wrapper-title'), style: titleStyle }) : null,
                react_1.default.createElement("div", { className: cx('Property-wrapper-content'), style: { height: !!fillImage ? '100%' : undefined } }, 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