@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
216 lines • 8.82 kB
JavaScript
import { clsx } from 'clsx';
import { useEffect, useMemo, useRef, createElement as _createElement } from 'react';
import { AnalyticalTableSubComponentsBehavior } from '../../../enums/index.js';
import { getSubRowsByString } from '../util/index.js';
import { EmptyRow } from './EmptyRow.js';
import { RowSubComponent as SubComponent } from './RowSubComponent.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const VirtualTableBody = props => {
const {
alternateRowColor,
classes,
prepareRow,
rows,
scrollToRef,
isTreeTable,
internalRowHeight,
visibleColumns,
renderRowSubComponent,
popInRowHeight,
markNavigatedRow,
isRtl,
alwaysShowSubComponent,
dispatch,
subComponentsHeight,
columnVirtualizer,
manualGroupBy,
subRowsKey,
scrollContainerRef,
subComponentsBehavior,
triggerScroll,
rowVirtualizer
} = props;
const rowHeight = popInRowHeight !== internalRowHeight ? popInRowHeight : internalRowHeight;
const lastNonEmptyRow = useRef(null);
scrollToRef.current = {
...scrollToRef.current,
scrollToOffset: rowVirtualizer.scrollToOffset,
scrollToIndex: rowVirtualizer.scrollToIndex
};
useEffect(() => {
if (triggerScroll && triggerScroll.direction === 'vertical') {
if (triggerScroll.type === 'offset') {
rowVirtualizer.scrollToOffset(...triggerScroll.args);
} else {
rowVirtualizer.scrollToIndex(...triggerScroll.args);
}
}
}, [triggerScroll]);
const popInColumn = useMemo(() => visibleColumns.filter(item => item.id !== '__ui5wcr__internal_highlight_column' && item.id !== '__ui5wcr__internal_selection_column' && item.id !== '__ui5wcr__internal_navigation_column')[0], [visibleColumns]);
return /*#__PURE__*/_jsx("div", {
ref: scrollContainerRef,
"data-component-name": "AnalyticalTableBodyScrollableContainer",
style: {
position: 'relative',
height: `${rowVirtualizer.getTotalSize()}px`,
width: `${columnVirtualizer.getTotalSize()}px`
},
children: rowVirtualizer.getVirtualItems().map((virtualRow, visibleRowIndex) => {
const row = rows[virtualRow.index];
const rowIndexWithHeader = virtualRow.index + 1;
if (!row || row.groupByVal === 'undefined') {
const alternate = alternateRowColor && virtualRow.index % 2 !== 0;
if (!lastNonEmptyRow.current?.cells) {
return /*#__PURE__*/_jsx(EmptyRow, {
virtualRow: virtualRow,
className: clsx(classes.tr, alternate && classes.alternateRowColor)
}, `empty_row_${virtualRow.index}`);
}
const cells = lastNonEmptyRow.current.cells;
return /*#__PURE__*/_jsx(EmptyRow, {
virtualRow: virtualRow,
className: clsx(classes.tr, alternate && classes.alternateRowColor),
children: columnVirtualizer.getVirtualItems().map(item => {
const cell = cells[item.index];
const cellProps = cell.getCellProps();
const {
'aria-colindex': _0,
'aria-selected': _1,
'aria-label': _2,
tabIndex: _3,
...emptyRowCellProps
} = cellProps;
return /*#__PURE__*/_createElement("div", {
...emptyRowCellProps,
key: `${visibleRowIndex}-${emptyRowCellProps.key}`,
"data-empty-row-cell": "true",
tabIndex: -1,
"aria-hidden": true,
style: {
...emptyRowCellProps.style,
cursor: 'unset',
width: item.size
}
});
})
}, `empty_row_${virtualRow.index}`);
} else {
lastNonEmptyRow.current = row;
}
prepareRow(row);
const {
key,
...rowProps
} = row.getRowProps({
'aria-rowindex': virtualRow.index + 1,
'data-virtual-row-index': virtualRow.index
});
const isNavigatedCell = typeof markNavigatedRow === 'function' ? markNavigatedRow(row) : false;
const RowSubComponent = typeof renderRowSubComponent === 'function' ? renderRowSubComponent(row) : undefined;
if ((!RowSubComponent || subComponentsBehavior === AnalyticalTableSubComponentsBehavior.IncludeHeightExpandable && !row.isExpanded) && subComponentsHeight && subComponentsHeight?.[virtualRow.index]?.subComponentHeight) {
dispatch({
type: 'SUB_COMPONENTS_HEIGHT',
payload: {
...subComponentsHeight,
[virtualRow.index]: {
subComponentHeight: 0,
rowId: row.id
}
}
});
}
let updatedHeight = rowHeight;
if (renderRowSubComponent && (rows[virtualRow.index]?.isExpanded || alwaysShowSubComponent) && subComponentsHeight?.[virtualRow.index]?.rowId === rows[virtualRow.index]?.id) {
updatedHeight += subComponentsHeight?.[virtualRow.index]?.subComponentHeight ?? 0;
}
const measureRef = isTreeTable && renderRowSubComponent && (row.isExpanded || alwaysShowSubComponent) ? node => {
rowVirtualizer.measureElement(node);
} : rowVirtualizer.measureElement;
return (
/*#__PURE__*/
// eslint-disable-next-line react/jsx-key
_jsxs("div", {
...rowProps,
ref: measureRef,
style: {
...(rowProps.style ?? {}),
transform: `translateY(${virtualRow.start}px)`,
position: 'absolute',
boxSizing: 'border-box',
height: `${updatedHeight}px`
},
children: [RowSubComponent && (row.isExpanded || alwaysShowSubComponent) && /*#__PURE__*/_jsx(SubComponent, {
subComponentsHeight: subComponentsHeight,
virtualRow: virtualRow,
dispatch: dispatch,
row: row,
rowHeight: rowHeight,
rows: rows,
alwaysShowSubComponent: alwaysShowSubComponent,
rowIndex: visibleRowIndex + 1,
children: RowSubComponent
}), columnVirtualizer.getVirtualItems().map((virtualColumn, visibleColumnIndex) => {
const cell = row.cells[virtualColumn.index];
const directionStyles = isRtl ? {
transform: `translateX(-${virtualColumn.start}px)`,
insertInlineStart: 0
} : {
transform: `translateX(${virtualColumn.start}px)`,
insertInlineStart: 0
};
if (!cell) {
return null;
}
const {
key,
...cellProps
} = cell.getCellProps();
const allCellProps = {
...cellProps,
['data-visible-column-index']: visibleColumnIndex,
['data-column-index']: virtualColumn.index,
['data-visible-row-index']: visibleRowIndex + 1,
['data-row-index']: rowIndexWithHeader,
style: {
...cellProps.style,
position: 'absolute',
width: `${virtualColumn.size}px`,
top: 0,
height: `${rowHeight}px`,
...directionStyles
}
};
let contentToRender;
if (cell.column.id === '__ui5wcr__internal_highlight_column' || cell.column.id === '__ui5wcr__internal_selection_column' || cell.column.id === '__ui5wcr__internal_navigation_column') {
contentToRender = 'Cell';
} else if (isTreeTable || !alwaysShowSubComponent && RowSubComponent) {
contentToRender = 'Expandable';
} else if (cell.isGrouped || manualGroupBy && cell.column.isGrouped && getSubRowsByString(subRowsKey, row.original) != null && cell.value !== undefined) {
contentToRender = 'Grouped';
} else if (cell.isAggregated) {
contentToRender = 'Aggregated';
} else if (cell.isPlaceholder) {
contentToRender = 'RepeatedValue';
} else {
contentToRender = 'Cell';
}
return (
/*#__PURE__*/
// eslint-disable-next-line react/jsx-key
_jsx("div", {
...allCellProps,
"data-selection-cell": cell.column.id === '__ui5wcr__internal_selection_column',
children: popInRowHeight !== internalRowHeight && popInColumn.id === cell.column.id ? cell.render('PopIn', {
contentToRender,
internalRowHeight
}) : cell.render(contentToRender, isNavigatedCell === true ? {
isNavigatedCell
} : {})
}, key)
);
})]
}, key)
);
})
});
};