es-grid-template
Version:
es-grid-template
94 lines • 4.26 kB
JavaScript
import { flexRender } from '@tanstack/react-table';
import React, { useContext } from 'react';
import classNames from 'classnames';
import { Checkbox } from 'rc-master-ui';
import { getCommonPinningStyles2 } from "../hook/utils";
import { TableContext } from "../useContext";
import ReactDOMServer from 'react-dom/server';
const TableHeadGroupCell = props => {
const {
column,
header,
table,
depth,
colSpan,
rowSpan
} = props;
const {
prefix,
wrapSettings,
selectionSettings,
setIsSelectionChange,
id
} = useContext(TableContext);
const isPinned = column.getIsPinned();
const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
const originalColumn = column.columnDef.meta ?? {};
const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
const cellContent = flexRender(column.columnDef.header, header.getContext());
const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
const hasValue = html.trim().length > 0;
const style = {
transition: 'width transform 0.2s ease-in-out',
whiteSpace: 'nowrap',
...cellStyles
};
return /*#__PURE__*/React.createElement("div", {
// ref={setNodeRef}
className: classNames(`${prefix}-grid-cell`, {
[`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
[`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
[`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
[`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
[`${prefix}-grid-cell-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
[`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
}),
"data-col-span": colSpan,
key: header.id,
style: {
minWidth: column.getSize(),
flex: 1,
gridRow: `${depth + 1} / span ${rowSpan}`,
gridColumn: `span ${colSpan}`,
...getCommonPinningStyles2(header),
width: 'auto',
...style
},
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-html": !hasValue ? '' : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement("div", null, cellContent))
}, /*#__PURE__*/React.createElement("div", {
className: classNames('', {
[`${prefix}-grid-filter-column`]: column.id !== 'selection_column',
[`${prefix}-grid-selection-column`]: column.id === 'selection_column'
})
}, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== false && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
checked: table.getIsAllRowsSelected(),
indeterminate: table.getIsSomeRowsSelected(),
onChange: e => {
setIsSelectionChange({
isChange: true,
type: 'all',
rowData: {},
rowsData: []
});
table.getToggleAllRowsSelectedHandler()(e);
}
}), column.id !== 'selection_column' && /*#__PURE__*/React.createElement("span", {
className: "ui-rc-table-column-title",
style: {
flex: 1
}
}, /*#__PURE__*/React.createElement("div", {
className: classNames('', {
[`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
[`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
})
}, cellContent))), column.getCanResize() && /*#__PURE__*/React.createElement("div", {
onDoubleClick: () => column.resetSize(),
onMouseDown: header.getResizeHandler(),
onTouchStart: header.getResizeHandler(),
className: `resizer ${column.getIsResizing() ? 'isResizing' : ''}`
}));
};
export default TableHeadGroupCell;