fastlion-amis
Version:
一种MIS页面生成工具
247 lines (246 loc) • 13.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldRenderer = exports.TableCellRenderer = exports.SimpleTableCellRenderer = exports.TableCell = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var factory_1 = require("../../factory");
var QuickEdit_1 = tslib_1.__importDefault(require("../QuickEdit"));
var Copyable_1 = tslib_1.__importDefault(require("../Copyable"));
var PopOver_1 = tslib_1.__importDefault(require("../PopOver"));
var mobx_react_1 = require("mobx-react");
var omit = require("lodash/omit");
var tpl_1 = require("../../utils/tpl");
var Badge_1 = require("../../components/Badge");
var utils_1 = require("../../utils/utils");
var helper_1 = require("../../utils/helper");
var TableCell = /** @class */ (function (_super) {
tslib_1.__extends(TableCell, _super);
function TableCell(props) {
var _this = _super.call(this, props) || this;
_this.state = {
tdVisialbe: false
};
_this.tdRef = react_1.default.createRef();
_this.intersection = {}; // 元素可见性观察器
_this.state.tdVisialbe = false;
return _this;
}
// componentDidMount() {
// // 自动聚焦观察器
// // 如果需要保持focus状态 - 再元素第一次发生 不可见-> 可见状态时自动聚焦
// if (this.props.style?.position !== 'fixed')
// this.intersection.observer = new IntersectionObserver(([entry]) => {
// // this.intersection.preIntersectionRatio = this.intersection.curIntersectionRatio || 0 // 默认值适用
// // this.intersection.curIntersectionRatio = entry.intersectionRatio
// // 意为出现了部分元素聚焦 并且没有定时器 适用自动聚焦
// console.log(this.tdRef, entry)
// if (entry.isIntersecting) {
// // 如果需要持续聚焦，只要没有值就取消聚焦-可见状态才适用聚焦
// this.setState({ tdVisialbe: true })
// } else {
// this.setState({ tdVisialbe: false })
// }
// })
// if (this.tdRef.current)
// this.intersection.observer.observe(this.tdRef.current)
// }
// componentWillUnmount() {
// // 用完销毁
// if (this.intersection.observer) this.intersection.observer?.disconnect?.()
// }
TableCell.prototype.render = function () {
var _this = this;
var _a, _b;
var _c = this.props, cx = _c.classnames, className = _c.className, classNameExpr = _c.classNameExpr, render = _c.render, style = _c.style, Component = _c.wrapperComponent, column = _c.column, value = _c.value, data = _c.data, children = _c.children, align = _c.align, innerClassName = _c.innerClassName, label = _c.label, tabIndex = _c.tabIndex, onKeyUp = _c.onKeyUp, rowSpan = _c.rowSpan, _body = _c.body, tpl = _c.tpl, remark = _c.remark, prefixContent = _c.prefixContent, affix = _c.affix, isHead = _c.isHead, rowIndex = _c.rowIndex, colIndex = _c.colIndex, row = _c.row, showBadge = _c.showBadge, itemBadge = _c.itemBadge, $path = _c.$path, ellipsis = _c.ellipsis, fold = _c.fold,
// showContextMenu,
name = _c.name, setBorder = _c.setBorder, defaultOpen = _c.defaultOpen, linkUrl = _c.linkUrl, linkId = _c.linkId, quickEdit = _c.quickEdit, tableLayout = _c.tableLayout, tableCtxMenuStore = _c.tableCtxMenuStore, tableId = _c.tableId,
// store,
rest = tslib_1.__rest(_c, ["classnames", "className", "classNameExpr", "render", "style", "wrapperComponent", "column", "value", "data", "children", "align", "innerClassName", "label", "tabIndex", "onKeyUp", "rowSpan", "body", "tpl", "remark", "prefixContent", "affix", "isHead", "rowIndex", "colIndex", "row", "showBadge", "itemBadge", "$path", "ellipsis", "fold", "name", "setBorder", "defaultOpen", "linkUrl", "linkId", "quickEdit", "tableLayout", "tableCtxMenuStore", "tableId"]);
// 宽度兼容取法，
var width = this.props.width;
var schema = tslib_1.__assign(tslib_1.__assign({}, column), { className: innerClassName, type: (column && column.type) || 'plain' });
// 如果本来就是 type 为 button，不要删除，其他情况下都应该删除。
if (schema.type !== 'button' && schema.type !== 'dropdown-button') {
delete schema.label;
}
// Jay
// 对于input-table-dynamic组件的原始数据做判断
var isInputTableDynamic = /(input-table-dynamic)/.test($path);
var isOrigin = data.isOrigin && isInputTableDynamic;
var domicile = {
column: column,
data: data,
label: label,
};
schema.className = '';
var body = children
? children
:
render('field', tslib_1.__assign(tslib_1.__assign({}, schema), { classNameExpr: '' }), tslib_1.__assign(tslib_1.__assign({ fold: fold }, omit(rest, Object.keys(schema))), {
// inputOnly: true,
style: {}, value: value, data: data,
// Jay
// data.isOrigin是针对于input-table-dynamic组件的原始数据不能修改
inputOnly: data.isOrigin ? !isOrigin : true, disabled: isOrigin, className: cx(innerClassName, { 'text-secondary': isOrigin }), domicile: domicile }));
//字段分组
if ((_a = column.group) === null || _a === void 0 ? void 0 : _a.length) {
body =
react_1.default.createElement("div", { className: 'column-cell' }, column.group.map(function (item) {
var _a, _b, _c, _d, _e, _f;
var ass = (0, factory_1.render)({
type: (_a = item.type) !== null && _a !== void 0 ? _a : '',
name: item.name,
body: item === null || item === void 0 ? void 0 : item.body
}, { data: data });
var showTitle = !!data[(_b = item.name) !== null && _b !== void 0 ? _b : ''] && typeof data[(_c = item.name) !== null && _c !== void 0 ? _c : ''] === ('string' || 'number');
var canJump = (0, utils_1.linkJump)((_d = item.linkId) !== null && _d !== void 0 ? _d : '', data, item.jumpDisabledOn);
var textRowStyle = item.textRow ? {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
'-webkit-box-orient': 'vertical',
'WebkitLineClamp': item.textRow + '',
} : {};
return (react_1.default.createElement("div", { key: item.name, className: "group-field-container ".concat(item.linkUrl && canJump ? 'is-linkUrl' : ''), title: showTitle ? data[(_e = item.name) !== null && _e !== void 0 ? _e : ''] : null, style: tslib_1.__assign({ textAlign: item.align, whiteSpace: item.format === 'autoHeight' ? 'pre-wrap' : undefined }, textRowStyle), onClick: function (e) {
if (canJump) {
e.stopPropagation();
(0, utils_1.ModleHandleClick)(tslib_1.__assign(tslib_1.__assign({}, _this.props), item), e.target);
}
} },
(item === null || item === void 0 ? void 0 : item.hideLabel) ? '' : item.label + '：',
item.type ? ass : data[(_f = item.name) !== null && _f !== void 0 ? _f : '']));
}));
}
if (width) {
style = tslib_1.__assign(tslib_1.__assign({}, style), { width: (style && style.width) || width });
if (!/%$/.test(String(style.width))) {
body = (react_1.default.createElement("div", { className: "".concat(cx('Tpltab'), " ").concat(ellipsis ? 'ellipsis' : '') },
prefixContent,
body,
affix));
prefixContent = null;
affix = null;
// delete style.width;
}
}
if ((!width || !column.type) && column.type !== 'operation') {
style = tslib_1.__assign(tslib_1.__assign({}, style), { maxWidth: ((0, helper_1.isMobile)() && tableLayout && tableLayout == 'vertical') ? '' : width || 200 });
}
else {
// 把最大宽度一起设置了
style = tslib_1.__assign(tslib_1.__assign({}, style), { maxWidth: ((0, helper_1.isMobile)() && tableLayout && tableLayout == 'vertical') ? '' : width });
}
if (align) {
style = tslib_1.__assign(tslib_1.__assign({}, style), { textAlign: ((0, helper_1.isMobile)() && tableLayout && tableLayout == 'vertical') ? "left" : align });
}
if (!Component) {
return body;
}
if (isHead) {
Component = 'th';
}
var canJumpUrl = (0, utils_1.linkJump)(linkId, data, column.jumpDisabledOn);
return (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(Component
// ref={this.tdRef}
, { "table-name": (_b = this.props.tableName) !== null && _b !== void 0 ? _b : this.props.crudName, "column-name": name, "column-index": colIndex, onContextMenu: function (e) {
e.preventDefault();
if (tableCtxMenuStore === null || tableCtxMenuStore === void 0 ? void 0 : tableCtxMenuStore.showContextMenu) {
tableCtxMenuStore.showContextMenu(rowIndex, name || column.name, tableId);
}
else {
_this.props.showContextMenu(rowIndex, name || column.name, tableId);
}
}, rowSpan: rowSpan > 1 ? rowSpan : undefined, style: style, className: cx(className, column.classNameExpr ? (0, tpl_1.filter)(column.classNameExpr, data) : null, setBorder ? 'td-border' : '', linkUrl && canJumpUrl ? 'is-linkUrl' : ''),
// onMouseLeave={() => {
// setTimeout(() => { (this.props.store as any)?.removeVisitMap?.(`${rowIndex}/${colIndex}`) }, 200)
// }}
tabIndex: tabIndex, onKeyUp: onKeyUp,
// title={!defaultOpen ? null : (data[column.name || ''] || null)}
onClick: function (e) {
if (canJumpUrl) {
e.stopPropagation();
!quickEdit && (0, utils_1.ModleHandleClick)(_this.props, e.target);
}
} },
showBadge ? (react_1.default.createElement(Badge_1.Badge, { classnames: cx, badge: tslib_1.__assign(tslib_1.__assign({}, itemBadge), { className: cx("Table-badge", itemBadge === null || itemBadge === void 0 ? void 0 : itemBadge.className) }), data: row.data })) : null,
prefixContent,
body,
affix)));
};
TableCell.defaultProps = {
wrapperComponent: 'td'
};
TableCell.propsList = [
'type',
'label',
'column',
'body',
'tpl',
'rowSpan',
'remark'
];
return TableCell;
}(react_1.default.Component));
exports.TableCell = TableCell;
var SimpleTableCellRenderer = /** @class */ (function (_super) {
tslib_1.__extends(SimpleTableCellRenderer, _super);
function SimpleTableCellRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
SimpleTableCellRenderer.propsList = TableCell.propsList;
SimpleTableCellRenderer = tslib_1.__decorate([
(0, factory_1.Renderer)({
type: 'simple-table-cell',
name: 'simple-table-cell'
}),
(0, mobx_react_1.inject)('tableCtxMenuStore'),
mobx_react_1.observer
], SimpleTableCellRenderer);
return SimpleTableCellRenderer;
}(TableCell));
exports.SimpleTableCellRenderer = SimpleTableCellRenderer;
var TableCellRenderer = /** @class */ (function (_super) {
tslib_1.__extends(TableCellRenderer, _super);
function TableCellRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
TableCellRenderer.propsList = tslib_1.__spreadArray([
'quickEdit',
'quickEditEnabledOn',
'popOver',
'copyable',
'inline'
], TableCell.propsList, true);
TableCellRenderer = tslib_1.__decorate([
(0, factory_1.Renderer)({
test: /(^|\/)(table|cross|field-table-horizontal)\/(?:.*\/)?cell$/,
name: 'table-cell'
}),
(0, QuickEdit_1.default)(),
(0, PopOver_1.default)({
targetOutter: true
}),
(0, Copyable_1.default)(),
mobx_react_1.observer
], TableCellRenderer);
return TableCellRenderer;
}(TableCell));
exports.TableCellRenderer = TableCellRenderer;
var FieldRenderer = /** @class */ (function (_super) {
tslib_1.__extends(FieldRenderer, _super);
function FieldRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
FieldRenderer.defaultProps = tslib_1.__assign(tslib_1.__assign({}, TableCell.defaultProps), { wrapperComponent: 'div' });
FieldRenderer = tslib_1.__decorate([
(0, factory_1.Renderer)({
type: 'field',
name: 'field'
}),
(0, PopOver_1.default)(),
(0, Copyable_1.default)()
], FieldRenderer);
return FieldRenderer;
}(TableCell));
exports.FieldRenderer = FieldRenderer;
//# sourceMappingURL=./renderers/Table/TableCell.js.map