@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
79 lines • 2.71 kB
JavaScript
import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
import { useCallback, useEffect, useRef, useState } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export const VirtualTableBodyContainer = props => {
const {
tableBodyHeight,
totalColumnsWidth,
children,
parentRef,
classes,
infiniteScroll,
infiniteScrollThreshold,
onLoadMore,
rows,
internalRowHeight,
handleExternalScroll,
visibleRows,
popInRowHeight,
rowCollapsedFlag,
dispatch
} = props;
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
if (parentRef.current) {
setIsMounted(true);
}
}, [parentRef.current]);
const dataLength = rows.length;
const lastScrollTop = useRef(0);
const firedInfiniteLoadEvents = useRef(new Set());
const prevDataLength = useRef(dataLength);
useEffect(() => {
if (prevDataLength.current > dataLength) {
// if prevData is larger because a row was collapsed, no scroll should be executed
if (rowCollapsedFlag) {
dispatch({
type: 'ROW_COLLAPSED_FLAG',
payload: false
});
} else {
firedInfiniteLoadEvents.current.clear();
parentRef.current.scrollTop = 0;
lastScrollTop.current = 0;
}
}
prevDataLength.current = dataLength;
}, [dataLength, rowCollapsedFlag]);
const onScroll = useCallback(event => {
handleExternalScroll(enrichEventWithDetails(event, {
rows,
rowElements: event.target.children[0].children
}));
const scrollOffset = event.target.scrollTop;
const isScrollingDown = lastScrollTop.current < scrollOffset;
if (isScrollingDown && infiniteScroll) {
lastScrollTop.current = scrollOffset;
const currentLastRow = Math.floor(scrollOffset / popInRowHeight) + (popInRowHeight === internalRowHeight ? visibleRows : Math.floor(tableBodyHeight / popInRowHeight));
if (rows.length - currentLastRow < infiniteScrollThreshold) {
if (!firedInfiniteLoadEvents.current.has(rows.length)) {
onLoadMore(event);
}
firedInfiniteLoadEvents.current.add(rows.length);
}
}
}, [infiniteScroll, infiniteScrollThreshold, onLoadMore, rows, internalRowHeight, firedInfiniteLoadEvents, lastScrollTop, handleExternalScroll, popInRowHeight, tableBodyHeight]);
return /*#__PURE__*/_jsx("div", {
className: classes.tbody,
ref: parentRef,
onScroll: onScroll,
style: {
position: 'relative',
overflowY: 'auto',
height: `${tableBodyHeight}px`,
width: `${totalColumnsWidth}px`
},
"data-component-name": "AnalyticalTableBody",
children: isMounted && children
});
};