es-grid-template/lib/table-component/TableContainer.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _TableHead = _interopRequireDefault(require("./header/TableHead"));
var _utils = require("./hook/utils");
var _reactVirtual = require("@tanstack/react-virtual");
var _classnames = _interopRequireDefault(require("classnames"));
var _TableBody = _interopRequireDefault(require("./body/TableBody"));
var _useContext = require("./useContext");
// import type { Dispatch, SetStateAction } from "react";

const TableContainer = props => {
  const {
    // t,
    table,
    id,
    prefix,
    commandClick,
    editAble,
    rowKey,
    format,
    dataSource,
    originData,
    expandable,
    wrapSettings,
    recordDoubleClick,
    // triggerFilter,
    selectionSettings,
    setIsSelectionChange,
    onContextMenu,
    contextMenuItems,
    setSorterChange,
    setFilterChange,
    tableHeight
  } = props;
  const tableContainerRef = _react.default.useRef(null);
  const visibleColumns = table.getVisibleLeafColumns();
  const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
  const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
  const columnVirtualizer = (0, _reactVirtual.useVirtualizer)({
    count: visibleColumns.length,
    estimateSize: index => visibleColumns[index].getSize(),
    getScrollElement: () => tableContainerRef.current,
    horizontal: true,
    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
    overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
  });

  // const columnSizingState = table.getState().columnSizing

  // React.useEffect(() => {
  //   requestAnimationFrame(() => {
  //     columnVirtualizer.measure()
  //   })
  // }, [columnSizingState, columnVirtualizer])

  const virtualColumns = columnVirtualizer.getVirtualItems();
  const cacheColumns = columnVirtualizer.measurementsCache;
  const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
  const leftCols = [...cacheColumns].slice(0, table.getState().columnPinning.left?.length ?? 0);
  const rightWidth = (0, _utils.sumSize)(rightCols);
  const leftWidth = (0, _utils.sumSize)(leftCols);

  //different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
  let virtualPaddingLeft;
  let virtualPaddingRight;
  const pdRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
  if (columnVirtualizer && virtualColumns?.length) {
    virtualPaddingLeft = fixedLeftColumns && fixedLeftColumns.length > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth : 0 : virtualColumns[0]?.start ?? 0;
    virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(`${prefix}-grid-container`, {
      'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
      'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
    }),
    id: id,
    ref: tableContainerRef,
    style: {
      overflow: 'auto',
      //our scrollable table container
      position: 'relative',
      //needed for sticky header
      height: tableHeight ?? '500px' //should be a fixed height
      // minWidth: table.getTotalSize()
    }
  }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
    value: {
      prefix,
      id,
      rowKey,
      format,
      expandable,
      dataSource,
      originData,
      // triggerFilter,
      wrapSettings,
      recordDoubleClick,
      selectionSettings,
      setIsSelectionChange,
      onContextMenu,
      setSorterChange,
      setFilterChange
    }
  }, /*#__PURE__*/_react.default.createElement("table", {
    style: {
      display: 'grid',
      minWidth: table.getTotalSize()
    }
  }, /*#__PURE__*/_react.default.createElement(_TableHead.default, {
    tableContainerRef: tableContainerRef,
    columnVirtualizer: columnVirtualizer,
    table: table,
    virtualPaddingLeft: virtualPaddingLeft,
    virtualPaddingRight: virtualPaddingRight,
    fixedLeftColumns: fixedLeftColumns,
    fixedRightColumns: fixedRightColumns
  }), /*#__PURE__*/_react.default.createElement(_TableBody.default, {
    tableId: id,
    columnVirtualizer: columnVirtualizer,
    table: table,
    tableContainerRef: tableContainerRef,
    virtualPaddingLeft: virtualPaddingLeft,
    virtualPaddingRight: virtualPaddingRight,
    fixedLeftColumns: fixedLeftColumns,
    fixedRightColumns: fixedRightColumns,
    commandClick: commandClick,
    editAble: editAble,
    contextMenuItems: contextMenuItems
  }))));
};
var _default = exports.default = TableContainer;