fastlion-amis
Version:
一种MIS页面生成工具
185 lines (184 loc) • 15.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableContent = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var TableBody_1 = require("./TableBody");
var mobx_react_1 = require("mobx-react");
var ItemActionsWrapper_1 = (0, tslib_1.__importDefault)(require("./ItemActionsWrapper"));
var tooltip_1 = (0, tslib_1.__importDefault)(require("antd/lib/tooltip"));
var icons_1 = require("../../components/icons");
var antd_1 = require("antd");
var TableContent = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TableContent, _super);
function TableContent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.tableWindowRef = react_1.default.createRef();
_this.handleMouseLeave = function (e) {
e === null || e === void 0 ? void 0 : e.stopPropagation();
var store = _this.props.store;
var row = store.hoverRow;
row === null || row === void 0 ? void 0 : row.setIsHover(false);
};
return _this;
}
TableContent.prototype.renderItemActions = function () {
var _a = this.props, itemActions = _a.itemActions, render = _a.render, store = _a.store, cx = _a.classnames;
var finalActions = Array.isArray(itemActions)
? itemActions.filter(function (action) { return !action.hiddenOnHover; })
: [];
if (!finalActions.length) {
return null;
}
return (react_1.default.createElement(ItemActionsWrapper_1.default, { store: store, classnames: cx },
react_1.default.createElement("div", { className: cx('Table-itemActions') }, finalActions.map(function (action, index) {
return render("itemAction/" + index, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, action), { isMenuItem: true }), {
key: index,
item: store.hoverRow,
data: store.hoverRow.locals,
rowIndex: store.hoverRow.index
});
}))));
};
TableContent.prototype.renderSortCell = function (item, index, classNames) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
var _m = this.props, store = _m.store, render = _m.render, cx = _m.classnames, handleMultiColumnSort = _m.handleMultiColumnSort;
var column = item.has[0];
var order = (_c = (_a = store.getOrderColumn) === null || _a === void 0 ? void 0 : _a.call(store, (_b = column.name) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.order;
var title = order === 'asc' ? '点击降序' : order === 'desc' ? '点击取消排序' : '点击升序';
var hasData = ((_d = store.data.items) === null || _d === void 0 ? void 0 : _d.length) > 0;
var stickyWidths = store.stickyWidths;
return (react_1.default.createElement(tooltip_1.default, { title: title, color: 'white', placement: 'top', overlayInnerStyle: { color: 'black' }, overlayStyle: { visibility: column.sortable && hasData ? 'visible' : 'hidden' } },
react_1.default.createElement("th", { className: cx('TableCell--sortable', classNames), key: index, "data-index": item.index, colSpan: item.colSpan, rowSpan: item.rowSpan, onClick: function (e) { return handleMultiColumnSort(item.has[0].name, e.ctrlKey, column.map); },
// Aug
style: {
cursor: 'pointer',
position: "sticky",
left: item.fixed === 'left' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + index]),
right: item.fixed === 'right' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + index]),
zIndex: item.fixed && 2,
top: 0,
borderLeft: item.has[0].type === 'operation' ? '1px solid #eceff8' : 'none'
} },
render('tpl', item.label),
react_1.default.createElement("span", { className: cx('TableCell-sortBtn') },
react_1.default.createElement("i", { className: cx('TableCell-sortBtn--down', ((_e = store.orderColumns) === null || _e === void 0 ? void 0 : _e.has(column.name)) && ((_g = (_f = store.getOrderColumn) === null || _f === void 0 ? void 0 : _f.call(store, column.name)) === null || _g === void 0 ? void 0 : _g.order) === 'desc'
? 'is-active'
: '') },
react_1.default.createElement(icons_1.Icon, { icon: "sort-desc", className: "icon" })),
react_1.default.createElement("i", { className: cx('TableCell-sortBtn--up', ((_h = store.orderColumns) === null || _h === void 0 ? void 0 : _h.has(column.name)) && ((_k = (_j = store.getOrderColumn) === null || _j === void 0 ? void 0 : _j.call(store, column.name)) === null || _k === void 0 ? void 0 : _k.order) === 'asc'
? 'is-active'
: '') },
react_1.default.createElement(icons_1.Icon, { icon: "sort-asc", className: "icon" })),
react_1.default.createElement("i", { className: cx('TableCell-sortBtn--default', ((_l = store.orderColumns) === null || _l === void 0 ? void 0 : _l.has(column.name))
? '' : 'is-active') })))));
};
TableContent.prototype.componentDidUpdate = function (prevProps) {
var _a;
var _b = this.props, itemAction = _b.itemAction, onAction = _b.onAction, data = _b.data;
if (prevProps.data !== data && !((_a = data === null || data === void 0 ? void 0 : data.items) === null || _a === void 0 ? void 0 : _a.length) && itemAction) {
onAction === null || onAction === void 0 ? void 0 : onAction(null, itemAction, {});
}
};
TableContent.prototype.render = function () {
var _this = this;
var _a, _b, _c, _d, _e, _f;
var _g = this.props, placeholder = _g.placeholder, cx = _g.classnames, render = _g.render, className = _g.className, columns = _g.columns, columnsGroup = _g.columnsGroup, onMouseMove = _g.onMouseMove, onScroll = _g.onScroll, tableRef = _g.tableRef, rows = _g.rows, renderHeadCell = _g.renderHeadCell, renderCell = _g.renderCell, onCheck = _g.onCheck, rowClassName = _g.rowClassName, onQuickChange = _g.onQuickChange, footable = _g.footable, footableColumns = _g.footableColumns, checkOnItemClick = _g.checkOnItemClick, buildItemProps = _g.buildItemProps, onAction = _g.onAction, rowClassNameExpr = _g.rowClassNameExpr, data = _g.data, prefixRow = _g.prefixRow, locale = _g.locale, translate = _g.translate, itemAction = _g.itemAction, affixRow = _g.affixRow, store = _g.store, position = _g.position, primaryField = _g.primaryField, classPrefix = _g.classPrefix;
var emptyWidth = ((_a = this.tableWindowRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || ((_c = (_b = this.tableWindowRef.current) === null || _b === void 0 ? void 0 : _b.closest("." + classPrefix + "Tabs-content")) === null || _c === void 0 ? void 0 : _c.clientWidth);
var tableClassName = cx('Table-table', this.props.tableClassName);
var hideHeader = columns.every(function (column) { return !column.label; });
// Jay
var stickyWidths = store.stickyWidths;
var leftFixedColumns = store.leftFixedColumns;
var lastLeftFixedIndex = (_d = leftFixedColumns[leftFixedColumns.length - 1]) === null || _d === void 0 ? void 0 : _d.index;
var rightFixedColumns = store.rightFixedColumns;
var firstRightFixedIndex = (_e = rightFixedColumns[0]) === null || _e === void 0 ? void 0 : _e.index;
var _h = this.props, autoFillHeight = _h.autoFillHeight, loading = _h.loading;
return (react_1.default.createElement("div", { onMouseMove: onMouseMove, ref: this.tableWindowRef, className: cx('Table-content', className), onScroll: onScroll },
store.hoverRow ? this.renderItemActions() : null,
react_1.default.createElement("table", { onMouseLeave: this.handleMouseLeave, ref: tableRef, className: tableClassName },
react_1.default.createElement("thead", null,
columnsGroup.length ? (react_1.default.createElement("tr", null, columnsGroup.map(function (item, index) {
if (item.has[0].type === '__checkme') {
return renderHeadCell(item.has[0], {
'data-index': item.index,
rowspan: item.rowSpan,
colspan: item.colSpan,
key: item.index,
className: item.index === lastLeftFixedIndex ? 'fixed-left-last'
: item.index === firstRightFixedIndex ? 'fixed-right-first' : null,
style: {
position: "sticky",
left: stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + index],
right: stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + index],
top: 0,
zIndex: 6
}
});
}
if (item.colSpan == 1 && item.has[0].sortable) {
return _this.renderSortCell(item, item.index, (item.index === lastLeftFixedIndex
? 'fixed-left-last ' : '') + " " + (item.index === firstRightFixedIndex
? ' fixed-right-first'
: ''));
}
return (react_1.default.createElement("th", { key: index, "data-index": item.index, colSpan: item.colSpan, rowSpan: item.rowSpan,
// Aug
style: {
position: "sticky",
left: item.fixed === 'left' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + item.index]),
right: item.fixed === 'right' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + item.index]),
top: 0,
zIndex: item.fixed && 2,
borderLeft: item.has[0].type === 'operation' ? '1px solid #eceff8' : 'none'
}, className: (item.index === lastLeftFixedIndex
? 'fixed-left-last ' : '') + " " + (item.index === firstRightFixedIndex
? ' fixed-right-first'
: '') }, render('tpl', item.label)));
}))) : null,
react_1.default.createElement("tr", { className: hideHeader ? 'fake-hide' : '' }, columns.map(function (column) {
var _a;
return ((_a = columnsGroup.find(function (group) { return ~group.has.indexOf(column); })) === null || _a === void 0 ? void 0 : _a.rowSpan) === 2 ? null : renderHeadCell(column, {
'data-index': column.index,
'key': column.index,
// Jay
// 'className': column.index === lastLeftFixedIndex ? 'fixed-left-last'
// : column.index === firstRightFixedIndex ? 'fixed-right-first' : null,
"style": {
position: (column.fixed || autoFillHeight) && "sticky",
left: column.fixed === 'left' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + column.index]),
right: column.fixed === 'right' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + column.index]),
zIndex: autoFillHeight && column.fixed ? 4 : autoFillHeight ? 3 : column.fixed && 2,
top: autoFillHeight ? (columnsGroup.length ? 26 : 0) : undefined
},
'className': column.index === lastLeftFixedIndex
? 'fixed-left-last'
: column.index === firstRightFixedIndex
? 'fixed-right-first'
: ''
});
}))),
loading ? null : !rows.length ? (react_1.default.createElement("tbody", null,
react_1.default.createElement("tr", { className: cx('Table-placeholder') },
react_1.default.createElement("td", { className: "empty-not-hover", colSpan: columns.length, style: { padding: 0 } },
react_1.default.createElement(antd_1.Empty, { style: {
position: 'sticky',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
left: 0,
margin: '-8px',
overflow: 'hidden',
width: (_f = this.tableWindowRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth,
height: '160px'
}, description: translate(placeholder || 'placeholder.noData') }))))) : (react_1.default.createElement(TableBody_1.TableBody, { tableName: this.props.tableName, itemAction: itemAction, classnames: cx, render: render, renderCell: renderCell, onCheck: onCheck, onQuickChange: onQuickChange, footable: footable, footableColumns: footableColumns, checkOnItemClick: checkOnItemClick, buildItemProps: buildItemProps, onAction: onAction, rowClassNameExpr: rowClassNameExpr, rowClassName: rowClassName, rows: rows, columns: columns, locale: locale, translate: translate, prefixRow: prefixRow, affixRow: affixRow, data: data,
// Jay
store: store, stickyWidths: stickyWidths, position: position, primaryField: primaryField, contextMenuVisible: this.props.contextMenuVisible, onContextMenuVisibleChange: this.props.onContextMenuVisibleChange, setBorder: this.props.setBorder, rowItems: this.props.rowItems, env: this.props.env })))));
};
TableContent = (0, tslib_1.__decorate)([
mobx_react_1.observer
], TableContent);
return TableContent;
}(react_1.default.Component));
exports.TableContent = TableContent;
//# sourceMappingURL=./renderers/FieldTableHorizontal/TableContent.js.map