linkmore-design/es/lm-edit-table/virtual/VirtualTable.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useCallback, useRef } from 'react';
import { useVirtual } from 'react-virtual';
import { TableContext, useRealive } from "./context";
var VirtualTable = /*#__PURE__*/React.memo(function (tableProps) {
  var _bodyRef$current, _tableProps$children$3, _tableProps$children$4, _bodyRef$current2;
  var fn = tableProps.fn;
  var bodyRef = useRef(null);
  var _useRealive = useRealive(),
    _useRealive2 = _slicedToArray(_useRealive, 2),
    state = _useRealive2[0],
    dispatch = _useRealive2[1];

  // 行虚拟化 { totalSize, virtualItems }
  var rowVirtual = useVirtual({
    size: state.totalLen,
    // 绑定父节点
    parentRef: {
      current: bodyRef === null || bodyRef === void 0 ? void 0 : (_bodyRef$current = bodyRef.current) === null || _bodyRef$current === void 0 ? void 0 : _bodyRef$current.parentNode
    },
    estimateSize: React.useCallback(function () {
      return state.rowHeight;
    }, [state.rowHeight]),
    overscan: 5
  });
  fn.current = rowVirtual.scrollToIndex;

  // 列动态宽度
  var columnEstimateSize = useCallback(function (i) {
    var _tableProps$children$, _tableProps$children$2, _colWidths$slice;
    var colWidths = tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$children$ = tableProps.children[0]) === null || _tableProps$children$ === void 0 ? void 0 : (_tableProps$children$2 = _tableProps$children$.props) === null || _tableProps$children$2 === void 0 ? void 0 : _tableProps$children$2.colWidths;
    var leftColumnsLen = state.sliceColumns.leftColumns.length;
    var centerColumnsLen = state.sliceColumns.centerColumns.length;
    // 获取非固定列
    var virList = colWidths === null || colWidths === void 0 ? void 0 : (_colWidths$slice = colWidths.slice) === null || _colWidths$slice === void 0 ? void 0 : _colWidths$slice.call(colWidths, leftColumnsLen, leftColumnsLen + centerColumnsLen);
    return virList ? virList[i] || 0 : 0;
  }, [(_tableProps$children$3 = tableProps.children[0]) === null || _tableProps$children$3 === void 0 ? void 0 : (_tableProps$children$4 = _tableProps$children$3.props) === null || _tableProps$children$4 === void 0 ? void 0 : _tableProps$children$4.colWidths, state.sliceColumns.leftColumns.length, state.sliceColumns.centerColumns.length]);

  // 列虚拟化
  var columnVirtual = useVirtual({
    horizontal: true,
    size: state.columnsLen,
    // 需要虚化的列的长度(不包含固定列)
    parentRef: {
      current: bodyRef === null || bodyRef === void 0 ? void 0 : (_bodyRef$current2 = bodyRef.current) === null || _bodyRef$current2 === void 0 ? void 0 : _bodyRef$current2.parentNode
    },
    estimateSize: columnEstimateSize,
    overscan: 5
  });
  var instance = {
    rowVirtual: rowVirtual,
    columnVirtual: columnVirtual
  };
  return /*#__PURE__*/React.createElement(TableContext.Provider, {
    value: {
      state: state,
      dispatch: dispatch,
      instance: instance
    }
  }, /*#__PURE__*/React.createElement("table", _extends({
    ref: bodyRef
  }, tableProps)));
});
export default VirtualTable;