es-grid-template
Version:
es-grid-template
95 lines (93 loc) • 4.34 kB
JavaScript
import React, { useContext } from 'react';
import classNames from 'classnames';
import { Checkbox } from 'rc-master-ui';
import { getCommonPinningStyles2 } from "../hook/utils";
import { TableContext } from "../useContext";
const TableHeadGroupCell = props => {
const {
column,
t,
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 = originalColumn.headerTemplate ? originalColumn.headerTemplate : (t ? t(originalColumn.headerText) : originalColumn.headerText)
const cellContent = typeof originalColumn.headerTemplate === 'function' ? originalColumn.headerTemplate(originalColumn) : originalColumn.headerTemplate ?? (t ? t(originalColumn.headerText) : originalColumn.headerText);
const headerCustomTooltip = originalColumn?.headerTooltip ?? (t ? t(originalColumn?.headerText) : originalColumn?.headerText);
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-content": headerCustomTooltip
}, /*#__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;