@ui5/webcomponents-react/dist/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.js

React Wrapper for UI5 Web Components and additional components

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
  });
};