linkmore-design/es/lm-table/virTual/VirtualTable.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["className", "isEmpty", "emptyProps"];
import React, { useCallback, useRef } from 'react';
import { useVirtual } from 'react-virtual';
import cls from 'classnames';
import { TableContext, useRealive } from "./context";
import CustomizeRenderEmpty from "../components/customRenderEmpty";
import Empty from "../../empty";
var VirtualTable = /*#__PURE__*/React.memo(function (tableProps) {
  var _bodyRef$current, _tableProps$children$, _tableProps$children$2, _bodyRef$current2;
  var className = tableProps.className,
    isEmpty = tableProps.isEmpty,
    emptyProps = tableProps.emptyProps,
    rest = _objectWithoutProperties(tableProps, _excluded);
  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
  });

  // 列动态宽度
  var columnEstimateSize = useCallback(function (i) {
    var _tableProps$children, _children$, _children$$props;
    var children = tableProps === null || tableProps === void 0 ? void 0 : (_tableProps$children = tableProps.children) === null || _tableProps$children === void 0 ? void 0 : _tableProps$children.filter(Boolean);
    var colWidths = (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : (_children$$props = _children$.props) === null || _children$$props === void 0 ? void 0 : _children$$props.colWidths;
    var leftColumnsLen = state.sliceColumns.leftColumns.length;
    var centerColumnsLen = state.sliceColumns.centerColumns.length;
    // 获取非固定列
    var virList = colWidths.slice(leftColumnsLen, leftColumnsLen + centerColumnsLen);
    return virList[i] || 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, 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
    }
  }, isEmpty ? /*#__PURE__*/React.createElement("table", _extends({
    className: cls('lm_virtual_table', className),
    ref: bodyRef
  }, rest), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, emptyProps ? /*#__PURE__*/React.createElement(Empty, emptyProps, (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.footer) || null) : /*#__PURE__*/React.createElement(CustomizeRenderEmpty, null))))) : /*#__PURE__*/React.createElement("table", _extends({
    className: cls('lm_virtual_table', className),
    ref: bodyRef
  }, rest)));
});
export default VirtualTable;