es-grid-template/es/grid-component/table/InfiniteTable.js

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { Fragment, useRef } from 'react';
import { GridStyle } from "../GridStyle";
import { ConfigProvider } from "rc-master-ui";
import TableGrid from "../TableGrid";

// type Props = {
//   columns: any[]
//   data: any[]
//   currentPage: number
//   pageSize: number
//   total: number
//   loading?: boolean
//   next?: () => void
// }

const InfiniteTable = props => {
  const {
    next,
    loading
  } = props;
  const {
    id,
    height,
    scrollHeight,
    rowHoverable,
    pagination,
    dataSource,
    isFullScreen,
    ...rest
  } = props;
  const {
    currentPage,
    pageSize,
    total
  } = pagination ?? {};
  const loadingRef = useRef(false);
  const hasMoreRef = useRef(true);
  const loadData = page => {
    if (!hasMoreRef.current || loadingRef.current || loading) return;
    loadingRef.current = true;
    setTimeout(() => {
      next?.();
      if (page * pageSize >= total) {
        hasMoreRef.current = false;
      }
      loadingRef.current = false;
    }, 10);
  };
  const handleNext = () => {
    loadData(currentPage + 1);
  };
  const handleScroll = e => {
    if (loadingRef.current || loading || dataSource?.length === 0) {
      e.stopPropagation();
      e.preventDefault();
      return;
    }
    const {
      scrollHeight: tbScrollHeight,
      scrollTop,
      clientHeight
    } = e.currentTarget;
    const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
    if (isEnd && !loadingRef.current && hasMoreRef.current && dataSource?.length > 0) {
      handleNext();
    }
  };
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
    $heightTable: height,
    $heightScroll: scrollHeight,
    $isFullScreen: isFullScreen,
    style: {
      position: 'relative'
    },
    id: id
  }, /*#__PURE__*/React.createElement(ConfigProvider, {
    theme: {
      components: {
        Table: {
          rowHoverBg: '#eb461912',
          rowSelectedBg: '#eb4619',
          rowSelectedHoverBg: '#eb4619',
          cellFontSize: 12,
          cellFontSizeSM: 13,
          headerBg: '#ffffff',
          cellPaddingBlockSM: 7
        }
      }
    }
  }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
    id: id,
    dataSource: dataSource,
    pagination: false,
    virtual: true,
    onScroll: handleScroll,
    loading: loading,
    isFullScreen: isFullScreen
  })))));
};
export default InfiniteTable;