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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _reactVirtual = require("react-virtual");
var _context = require("./context");
const VirtualTable = /*#__PURE__*/_react.default.memo(tableProps => {
  const {
    fn
  } = tableProps;
  const bodyRef = (0, _react.useRef)(null);
  const [state, dispatch] = (0, _context.useRealive)();

  // 行虚拟化 { totalSize, virtualItems }
  const rowVirtual = (0, _reactVirtual.useVirtual)({
    size: state.totalLen,
    // 绑定父节点
    parentRef: {
      current: bodyRef?.current?.parentNode
    },
    estimateSize: _react.default.useCallback(() => state.rowHeight, [state.rowHeight]),
    overscan: 5
  });
  fn.current = rowVirtual.scrollToIndex;

  // 列动态宽度
  const columnEstimateSize = (0, _react.useCallback)(i => {
    const colWidths = tableProps?.children[0]?.props?.colWidths;
    const leftColumnsLen = state.sliceColumns.leftColumns.length;
    const centerColumnsLen = state.sliceColumns.centerColumns.length;
    // 获取非固定列
    const virList = colWidths?.slice?.(leftColumnsLen, leftColumnsLen + centerColumnsLen);
    return virList ? virList[i] || 0 : 0;
  }, [tableProps.children[0]?.props?.colWidths, state.sliceColumns.leftColumns.length, state.sliceColumns.centerColumns.length]);

  // 列虚拟化
  const columnVirtual = (0, _reactVirtual.useVirtual)({
    horizontal: true,
    size: state.columnsLen,
    // 需要虚化的列的长度(不包含固定列)
    parentRef: {
      current: bodyRef?.current?.parentNode
    },
    estimateSize: columnEstimateSize,
    overscan: 5
  });
  const instance = {
    rowVirtual,
    columnVirtual
  };
  return /*#__PURE__*/_react.default.createElement(_context.TableContext.Provider, {
    value: {
      state,
      dispatch,
      instance
    }
  }, /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({
    ref: bodyRef
  }, tableProps)));
});
var _default = VirtualTable;
exports.default = _default;