@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
82 lines (81 loc) • 3.25 kB
JavaScript
//#region src/Table/hooks/useHvHeaderGroups.ts
/**
* Moving non grouped headers to the top level,
* by placing them in the position of their top level placeholder.
*
* By default the header groups are built bottom top,
* that results in non grouped headers to be placed
* at the bottom row in the table head.
*
* @param {Array.<Object>} headerGroups - table header groups
*/
var replaceHeaderPlaceholders = (headerGroups) => {
const [headerGroup] = headerGroups;
if (!headerGroup.headers.some((h) => h.placeholderOf != null)) return;
const maxDepth = headerGroups.length - 1;
const leafGroup = headerGroups[maxDepth];
headerGroup.headers.forEach((header, position) => {
const { placeholderOf } = header;
if (placeholderOf != null) {
const leafIndex = leafGroup.headers.slice(position).findIndex(({ id }) => id === placeholderOf.id) + position;
header.variant = placeholderOf.variant;
header.depth = maxDepth;
leafGroup.headers[leafIndex] = header;
placeholderOf.rowSpan = maxDepth + 1;
headerGroup.headers[position] = placeholderOf;
}
});
};
var getCellProps = (column, isHeaderCell = false) => ({
groupColumnMostLeft: column.isGroupLeftColumn,
groupColumnMostRight: column.isGroupRightColumn,
rowSpan: isHeaderCell && column.rowSpan != null ? column.rowSpan : 1
});
var getHeaderPropsHook = (props, { instance, column }) => {
const nextProps = instance.hasGroupedColumns ? getCellProps(column, true) : {};
if (instance.hasGroupedColumns) {
const isPlaceholder = column.placeholderOf != null;
nextProps.style = { display: isPlaceholder ? "none" : props.style?.display };
if (instance.hasStickyColumns) {
if (isPlaceholder) {
nextProps.style.display = "inline-flex";
nextProps.style.visibility = "hidden";
}
if (column.parent || isPlaceholder) nextProps.style.marginTop = `calc(var(--cell-height) * -1)`;
if (column.rowSpan > 1) nextProps.style.height = `calc(var(--first-row-cell-height) + var(--cell-height) * ${column.rowSpan - 1})`;
}
}
return [props, nextProps];
};
var getCellPropsHook = (props, { instance, cell }) => {
return [props, instance.hasGroupedColumns ? getCellProps(cell.column) : {}];
};
var visibleColumnsHook = (visibleColumns, { instance }) => {
const parentList = /* @__PURE__ */ new Set();
visibleColumns.forEach(({ parent }) => {
if (parent != null && !parentList.has(parent)) parentList.add(parent);
});
const hasGroupedColumns = parentList.size > 0;
if (hasGroupedColumns) parentList.forEach((parent) => {
parent.align = "center";
parent.isGroupLeftColumn = true;
parent.isGroupRightColumn = true;
const { columns } = parent;
columns[0].isGroupLeftColumn = true;
columns[columns.length - 1].isGroupRightColumn = true;
});
Object.assign(instance, { hasGroupedColumns });
return visibleColumns;
};
var useInstanceHook = (instance) => {
if (instance.hasGroupedColumns) replaceHeaderPlaceholders(instance.headerGroups);
};
var useHvHeaderGroups = (hooks) => {
hooks.visibleColumns.push(visibleColumnsHook);
hooks.useInstance.push(useInstanceHook);
hooks.getHeaderProps.push(getHeaderPropsHook);
hooks.getCellProps.push(getCellPropsHook);
};
useHvHeaderGroups.pluginName = "useHvHeaderGroups";
//#endregion
export { useHvHeaderGroups };