fastlion-amis
Version:
一种MIS页面生成工具
167 lines (166 loc) • 14 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 InfinteSroll_1 = (0, tslib_1.__importDefault)(require("../Lion/components/InfinteSroll"));
var tooltip_1 = (0, tslib_1.__importDefault)(require("antd/lib/tooltip"));
var icons_1 = require("../../components/icons");
var TableContent = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TableContent, _super);
function TableContent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_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) {
var _a, _b, _c, _d, _e, _f, _g, _h;
var _j = this.props, store = _j.store, render = _j.render, cx = _j.classnames, handleMultiColumnSort = _j.handleMultiColumnSort;
var column = item.has[0];
var order = (_a = store.getOrderColumn) === null || _a === void 0 ? void 0 : _a.call(store, (_b = column.name) !== null && _b !== void 0 ? _b : '');
var title = order === 'asc' ? '点击降序' : order === 'desc' ? '点击取消排序' : '点击升序';
var hasData = ((_c = store.data.items) === null || _c === void 0 ? void 0 : _c.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'), key: index, "data-index": item.index, colSpan: item.colSpan, rowSpan: item.rowSpan, onClick: function (e) { return handleMultiColumnSort(item.has[0].name, e.ctrlKey); },
// 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', ((_d = store.orderColumns) === null || _d === void 0 ? void 0 : _d.has(column.name)) && ((_e = store.getOrderColumn) === null || _e === void 0 ? void 0 : _e.call(store, column.name)) === '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', ((_f = store.orderColumns) === null || _f === void 0 ? void 0 : _f.has(column.name)) && ((_g = store.getOrderColumn) === null || _g === void 0 ? void 0 : _g.call(store, column.name)) === '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', ((_h = store.orderColumns) === null || _h === void 0 ? void 0 : _h.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;
var _c = this.props, placeholder = _c.placeholder, cx = _c.classnames, render = _c.render, className = _c.className, columns = _c.columns, columnsGroup = _c.columnsGroup, onMouseMove = _c.onMouseMove, onScroll = _c.onScroll, tableRef = _c.tableRef, rows = _c.rows, renderHeadCell = _c.renderHeadCell, renderCell = _c.renderCell, onCheck = _c.onCheck, rowClassName = _c.rowClassName, onQuickChange = _c.onQuickChange, footable = _c.footable, footableColumns = _c.footableColumns, checkOnItemClick = _c.checkOnItemClick, buildItemProps = _c.buildItemProps, onAction = _c.onAction, rowClassNameExpr = _c.rowClassNameExpr, data = _c.data, prefixRow = _c.prefixRow, locale = _c.locale, translate = _c.translate, itemAction = _c.itemAction, affixRow = _c.affixRow, store = _c.store, position = _c.position, primaryField = _c.primaryField, infinteLoad = _c.infinteLoad, onLoadMore = _c.onLoadMore, loadHasMore = _c.loadHasMore, mobileLayout = _c.mobileLayout, tableType = _c.tableType;
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 = (_a = leftFixedColumns[leftFixedColumns.length - 1]) === null || _a === void 0 ? void 0 : _a.index;
var rightFixedColumns = store.rightFixedColumns;
var firstRightFixedIndex = (_b = rightFixedColumns[0]) === null || _b === void 0 ? void 0 : _b.index;
var _d = this.props, autoFillHeight = _d.autoFillHeight, loading = _d.loading;
return (react_1.default.createElement("div", { onMouseMove: onMouseMove, className: cx('Table-content', className), onScroll: onScroll },
store.hoverRow ? this.renderItemActions() : null,
react_1.default.createElement("table", { onMouseLeave: this.handleMouseLeave, ref: tableRef, className: tableClassName },
!(store.mobileUI && mobileLayout === 'vertical') ? ( // Aug 移动端隐藏头部
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, index);
}
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["" + index]),
right: item.fixed === 'right' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + index]),
top: 0,
zIndex: item.fixed && 2,
borderLeft: item.has[0].type === 'operation' ? '1px solid #eceff8' : 'none'
} }, 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
}
});
})))) : null,
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 },
react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', flexDirection: "column", width: '100%' } },
react_1.default.createElement("div", { style: { width: 200 } },
react_1.default.createElement("img", { style: { width: '100%' }, alt: "", src: './public/images/nodata.png' })),
react_1.default.createElement("span", { style: { color: '#999', fontSize: 13 } }, translate(placeholder || 'placeholder.noData'))))))) : (react_1.default.createElement(TableBody_1.TableBody, { 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, handleRowClick: this.props.handleRowClick,
// Jay
store: store, stickyWidths: stickyWidths, position: position, primaryField: primaryField, contextMenuVisible: this.props.contextMenuVisible, onContextMenuVisibleChange: this.props.onContextMenuVisibleChange, mobileLayout: mobileLayout }))),
!loading && infinteLoad && tableType !== 'input-table' && react_1.default.createElement(InfinteSroll_1.default, { loadMore: onLoadMore, hasMore: loadHasMore })));
};
TableContent = (0, tslib_1.__decorate)([
mobx_react_1.observer
], TableContent);
return TableContent;
}(react_1.default.Component));
exports.TableContent = TableContent;
//# sourceMappingURL=./renderers/MobileTableHorizontal/TableContent.js.map