es-grid-template
Version:
es-grid-template
231 lines (222 loc) • 7.81 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.HtmlTable = HtmlTable;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _internals = require("./../internals");
var _colgroup = require("./colgroup");
var _SpanManager = _interopRequireDefault(require("./helpers/SpanManager"));
var _styles = require("./styles");
var _hooks = require("../../grid-component/hooks");
var _rcMasterUi = require("rc-master-ui");
var _Command = _interopRequireDefault(require("../../table-component/components/command/Command"));
var _useColumns = require("../../table-component/hook/useColumns");
function HtmlTable({
tbodyHtmlTag,
getRowProps,
primaryKey,
data,
originData,
format,
commandClick,
id,
verticalRenderInfo: verInfo,
horizontalRenderInfo: hozInfo,
components: {
Row,
Cell,
TableBody
}
}) {
const {
flat,
horizontalRenderRange: hoz
} = hozInfo;
const spanManager = new _SpanManager.default();
const fullFlatCount = flat.full.length;
const leftFlatCount = flat.left.length;
const rightFlatCount = flat.right.length;
const tbody = TableBody != null && tbodyHtmlTag === 'tbody' ? /*#__PURE__*/_react.default.createElement(TableBody, {
tbodyProps: {
children: data.map(renderRow)
}
}) : ( /*#__PURE__*/_react.default.createElement(tbodyHtmlTag, null, data.map(renderRow)));
return /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement(_colgroup.Colgroup, {
descriptors: hozInfo.visible
}), tbody);
function renderRow(row, i) {
const rowIndex = verInfo.offset + i;
spanManager.stripUpwards(rowIndex);
const rowProps = getRowProps(row, rowIndex);
const rowClass = (0, _classnames.default)(_styles.Classes.tableRow, {
first: rowIndex === verInfo.first,
last: rowIndex === verInfo.last,
even: rowIndex % 2 === 0,
odd: rowIndex % 2 === 1
}, rowProps?.className);
const onContextMenu = rowProps?.onContextMenu;
const trProps = {
...rowProps,
className: rowClass,
onContextMenu: tbodyHtmlTag === 'tbody' ? onContextMenu : undefined,
'data-rowindex': rowIndex,
children: hozInfo.visible.map(descriptor => {
if (descriptor.type === 'blank') {
return /*#__PURE__*/_react.default.createElement("td", {
key: descriptor.blankSide
});
}
return renderBodyCell(row, rowIndex, descriptor.col, descriptor.colIndex);
})
};
const key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
if (Row != null && tbodyHtmlTag === 'tbody') {
return /*#__PURE__*/_react.default.createElement(Row, {
key,
row,
rowIndex,
trProps
});
} else {
return /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({
key: key
}, trProps));
}
}
function renderBodyCell(row, rowIndex, column, colIndex) {
if (spanManager.testSkip(rowIndex, colIndex)) {
return null;
}
const value = _internals.internals.safeGetValue(column, row, rowIndex);
const cellProps = column.getCellProps?.(value, row, rowIndex) ?? {};
const a = (0, _useColumns.renderValueCell)(column, value, row, rowIndex, colIndex, format, false);
// let cellContent: ReactNode = value
let cellContent = a;
// if (column.render) {
// cellContent = column.render(value, row, rowIndex)
// }
// if (column.field === '#') {
// cellContent = findItemPath(originData, row, primaryKey)
// }
if (column.field === 'command') {
const commands = column.commandItems ? column.commandItems.map(it => {
return {
...it,
visible: typeof it.visible === 'function' ? it.visible?.(row) : it.visible
};
}) : [];
cellContent = /*#__PURE__*/_react.default.createElement("div", {
className: "ui-rc_cell-content"
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Space, null, commands.filter(it => it.visible !== false).map(item => {
return /*#__PURE__*/_react.default.createElement(_Command.default, {
id: id,
key: item.id,
item: item,
record: row,
onClick: () => {
commandClick?.({
id: item.id,
// rowId: getRowKey(record, index) as any,
rowId: row.rowId,
rowData: row,
index: rowIndex,
rows: [...originData]
});
}
});
})));
}
if (column.template) {
cellContent = column.template({
value,
rowData: row,
index: rowIndex,
field: column.field ?? ''
});
}
//
let colSpan = 1;
let rowSpan = 1;
if (column.getSpanRect) {
const spanRect = column.getSpanRect(value, row, rowIndex);
colSpan = spanRect == null ? 1 : spanRect.right - colIndex;
rowSpan = spanRect == null ? 1 : spanRect.bottom - rowIndex;
} else {
if (cellProps.colSpan != null) {
colSpan = cellProps.colSpan;
}
if (cellProps.rowSpan != null) {
rowSpan = cellProps.rowSpan;
}
}
// rowSpan/colSpan should not be too large to avoid affecting cells that are not rendered due to virtual scrolling
rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
colSpan = Math.min(colSpan, leftFlatCount + hoz.rightIndex - colIndex);
const hasSpan = colSpan > 1 || rowSpan > 1;
if (hasSpan) {
spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
}
const positionStyle = {};
if (colIndex < leftFlatCount) {
positionStyle.position = 'sticky';
positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
} else if (colIndex >= fullFlatCount - rightFlatCount) {
positionStyle.position = 'sticky';
positionStyle.right = hozInfo.stickyRightMap.get(colIndex);
}
const tdProps = {
...cellProps,
className: (0, _classnames.default)(_styles.Classes.tableCell, cellProps.className, {
first: colIndex === 0,
last: colIndex + colSpan === fullFlatCount,
'lock-left': colIndex < leftFlatCount,
'lock-right': colIndex >= fullFlatCount - rightFlatCount
}),
...(hasSpan ? {
colSpan,
rowSpan
} : null),
style: {
textAlign: column.textAlign,
...cellProps.style,
...positionStyle
},
// children: <div className='ui-rc_cell-content'>{cellContent}</div>
children: cellContent
// children: () => {
// return (
// <span className='abcccc'>{cellContent}</span>
// )
// },
};
if (tbodyHtmlTag === 'tfoot') {
if (!_hooks.nonActionColumn.includes(column.field) && column.isSummary !== false) {
return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
key: colIndex
}, tdProps));
} else {
return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
key: colIndex
}, tdProps), '');
}
}
if (Cell != null && tbodyHtmlTag === 'tbody') {
return /*#__PURE__*/_react.default.createElement(Cell, {
key: colIndex,
tdProps: tdProps,
row: row,
rowIndex: rowIndex,
column: column,
colIndex: colIndex
});
} else {
return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
key: colIndex
}, tdProps));
}
}
}