es-grid-template
Version:
es-grid-template
224 lines (216 loc) • 7.16 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import cx from 'classnames';
import React from 'react';
import { internals } from "./../internals";
import { Colgroup } from "./colgroup";
import SpanManager from "./helpers/SpanManager";
import { Classes } from "./styles";
import { nonActionColumn } from "../../grid-component/hooks";
import { Space } from 'rc-master-ui';
import Command from "../../table-component/components/command/Command";
import { renderValueCell } from "../../table-component/hook/useColumns";
export 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();
const fullFlatCount = flat.full.length;
const leftFlatCount = flat.left.length;
const rightFlatCount = flat.right.length;
const tbody = TableBody != null && tbodyHtmlTag === 'tbody' ? /*#__PURE__*/React.createElement(TableBody, {
tbodyProps: {
children: data.map(renderRow)
}
}) : ( /*#__PURE__*/React.createElement(tbodyHtmlTag, null, data.map(renderRow)));
return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(Colgroup, {
descriptors: hozInfo.visible
}), tbody);
function renderRow(row, i) {
const rowIndex = verInfo.offset + i;
spanManager.stripUpwards(rowIndex);
const rowProps = getRowProps(row, rowIndex);
const rowClass = cx(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.createElement("td", {
key: descriptor.blankSide
});
}
return renderBodyCell(row, rowIndex, descriptor.col, descriptor.colIndex);
})
};
const key = internals.safeGetRowKey(primaryKey, row, rowIndex);
if (Row != null && tbodyHtmlTag === 'tbody') {
return /*#__PURE__*/React.createElement(Row, {
key,
row,
rowIndex,
trProps
});
} else {
return /*#__PURE__*/React.createElement("tr", _extends({
key: key
}, trProps));
}
}
function renderBodyCell(row, rowIndex, column, colIndex) {
if (spanManager.testSkip(rowIndex, colIndex)) {
return null;
}
const value = internals.safeGetValue(column, row, rowIndex);
const cellProps = column.getCellProps?.(value, row, rowIndex) ?? {};
const a = 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.createElement("div", {
className: "ui-rc_cell-content"
}, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
return /*#__PURE__*/React.createElement(Command, {
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: cx(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 (!nonActionColumn.includes(column.field) && column.isSummary !== false) {
return /*#__PURE__*/React.createElement("td", _extends({
key: colIndex
}, tdProps));
} else {
return /*#__PURE__*/React.createElement("td", _extends({
key: colIndex
}, tdProps), '');
}
}
if (Cell != null && tbodyHtmlTag === 'tbody') {
return /*#__PURE__*/React.createElement(Cell, {
key: colIndex,
tdProps: tdProps,
row: row,
rowIndex: rowIndex,
column: column,
colIndex: colIndex
});
} else {
return /*#__PURE__*/React.createElement("td", _extends({
key: colIndex
}, tdProps));
}
}
}