linkmore-design/lib/lm-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 _classnames = _interopRequireDefault(require("classnames"));
var _context = require("./context");
var _customRenderEmpty = _interopRequireDefault(require("../components/customRenderEmpty"));
var _empty = _interopRequireDefault(require("../../empty"));
const VirtualTable = /*#__PURE__*/_react.default.memo(tableProps => {
  const {
    className,
    isEmpty,
    emptyProps,
    ...rest
  } = 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
  });

  // 列动态宽度
  const columnEstimateSize = (0, _react.useCallback)(i => {
    const children = tableProps?.children?.filter(Boolean);
    const colWidths = 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[i] || 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
    }
  }, isEmpty ? /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({
    className: (0, _classnames.default)('lm_virtual_table', className),
    ref: bodyRef
  }, rest), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, emptyProps ? /*#__PURE__*/_react.default.createElement(_empty.default, emptyProps, emptyProps?.footer || null) : /*#__PURE__*/_react.default.createElement(_customRenderEmpty.default, null))))) : /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({
    className: (0, _classnames.default)('lm_virtual_table', className),
    ref: bodyRef
  }, rest)));
});
var _default = VirtualTable;
exports.default = _default;