es-grid-template
Version:
es-grid-template
196 lines (189 loc) • 7.63 kB
JavaScript
import ReactDOMServer from 'react-dom/server';
import { getCommonPinningStyles } from "../hook/utils";
import classNames from "classnames";
import React from "react";
import { TableContext } from "../useContext";
import { toggleRowSelection } from "../../table-component/hook/useColumns";
const TableBodyCellRowGroup = props => {
const {
cell,
table,
isEditing,
colSpan,
rowSpan,
sumValue
} = props;
const {
id,
prefix,
focusedCell,
setFocusedCell,
expanded,
setExpanded,
expandable,
isDataTree,
setIsSelectionChange,
isSelectionChange,
selectionSettings,
wrapSettings
// dataSource
} = React.useContext(TableContext);
const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
const record = cell.row.original;
const columnMeta = cell.column.columnDef.meta ?? {};
const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
// const tooltipContent = (isOpenTooltip === false || columnMeta.type === 'checkbox') ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
value: cell.getValue(),
rowData: record
}) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
const allRows = table.getRowModel().flatRows;
const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
const colIndex = cell.column.getIndex();
const isPinned = cell.column.getIsPinned();
const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
const enableClick = typeof columnMeta.allowSelection === 'function' ? columnMeta.allowSelection(record) : columnMeta.allowSelection;
return /*#__PURE__*/React.createElement("td", {
key: cell.id,
colSpan: colSpan,
rowSpan: rowSpan
// {...cellProps}
,
ref: el => {
if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
el?.focus();
}
},
tabIndex: focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id ? 0 : -1,
"data-col-index": colIndex,
"data-row-index": rowNumber,
"data-col-key": cell.column.id,
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-html": ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent)),
className: classNames(`${prefix}-grid-cell`, {
// [`${prefix}-grid-cell-ellipsis`]: true,
[`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
[`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
// [`${prefix}-grid-cell-selected`]: isCellSelected,
[`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
[`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
[`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
[`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
}),
style: {
...cellStyles,
// display: 'flex',
width: cell.column.getSize(),
minWidth: cell.column.getSize(),
minHeight: 36,
...getCommonPinningStyles(cell.column)
},
onMouseEnter: e => {
if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
setIsOpenTooltip(true);
}
},
onKeyDown: e => {
const flatRows = table.getRowModel().flatRows;
if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
const nextIndex = cell.row.index + 1;
// const nextIndex = rowNumber + 1
const nextId = flatRows[nextIndex].id;
setFocusedCell?.({
colId: cell.column.id,
rowId: nextId
});
const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
if (cellFocus) {
cellFocus.focus();
}
}
if (e.key === 'ArrowUp' && rowNumber > 0) {
const prevIndex = cell.row.index - 1;
const nextId = flatRows[prevIndex].id;
setFocusedCell?.({
colId: cell.column.id,
rowId: nextId
});
const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
if (cellFocus) {
cellFocus.focus();
}
}
if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {
toggleRowSelection({
e,
cell,
setIsSelectionChange,
isSelectionChange,
selectionSettings
});
cell.row.getToggleSelectedHandler()(e);
}
},
onClick: e => {
const selection = window.getSelection();
const text = selection ? selection.toString() : "";
if (text.length > 0 || enableClick === false) {} else {
if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
toggleRowSelection({
e,
cell,
setIsSelectionChange,
isSelectionChange,
selectionSettings
});
setFocusedCell?.({
colId: cell.column.id,
rowId: cell.row.id
});
}
}
}
}, cell.column.getIndex() === expandIconColumnIndex && isDataTree ? /*#__PURE__*/React.createElement("div", {
className: classNames('ui-rc_cell-content', {})
}, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
className: "ui-rc-table-row-expand-trigger",
style: {
paddingLeft: `${cell.row.depth * 25}px`
}
}, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
// onClick: cell.row.getToggleExpandedHandler(),
// onClick: (e) => {
// e.stopPropagation()
// cell.row.toggleExpanded()
// },
onClick: e => {
e.stopPropagation();
const keys = Object.keys(expanded);
// @ts-ignore
const tmp = {
...expanded
};
if (keys.includes(cell.row.id)) {
delete tmp[cell.row.id];
setExpanded(tmp);
} else {
setExpanded(old => ({
...old,
[cell.row.id]: true
}));
}
},
style: {
cursor: "pointer"
},
className: "ui-rc-table-row-expand"
}, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
}) : /*#__PURE__*/React.createElement("span", {
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
})) : /*#__PURE__*/React.createElement("span", {
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
}))), sumValue) : /*#__PURE__*/React.createElement(React.Fragment, null, sumValue));
};
export default TableBodyCellRowGroup;