linkmore-design/es/card-table/body/TableBody.js

🌈 🚀lm组件库。🚀

import React, { useMemo, useContext } from 'react';
import cn from 'classnames';
import LmCardTableBodyRow, { LmCardTableBodyRowVirtual } from "./TableBodyRow";
import { useVirtual } from 'react-virtual';
var TableBody = /*#__PURE__*/React.memo(function (_ref) {
  var table = _ref.table,
    tableContainerRef = _ref.tableContainerRef;
  var _table$state = table.state,
    rows = _table$state.rows,
    checkboxConfig = _table$state.checkboxConfig,
    rowConfig = table.rowConfig,
    height = table.cellConfig.height,
    virtual = table.virtual;

  // 是否存在选中
  var hasChecked = useMemo(function () {
    return checkboxConfig.checkKeys.length;
  }, [checkboxConfig.checkKeys.length]);
  var _useVirtual = useVirtual({
      size: rows.length,
      parentRef: tableContainerRef,
      estimateSize: React.useCallback(function () {
        return height + rowConfig.gap;
      }, [height]),
      overscan: 2
    }),
    totalSize = _useVirtual.totalSize,
    virtualItems = _useVirtual.virtualItems;
  var virScrollStyles = useMemo(function () {
    return {
      height: "".concat(totalSize - rowConfig.gap, "px"),
      width: '100%',
      position: "relative"
    };
  }, [totalSize]);
  return /*#__PURE__*/React.createElement("div", {
    className: cn('lm_card_table_body', hasChecked && 'hasChecked')
  }, /*#__PURE__*/React.createElement("div", {
    className: "lm_card_table_body_scroll",
    style: virScrollStyles
  }, virtual && rows.length > 10 ? virtualItems.map(function (_ref2) {
    var index = _ref2.index,
      start = _ref2.start;
    return /*#__PURE__*/React.createElement(LmCardTableBodyRowVirtual, {
      key: index,
      rowIndex: index,
      start: start,
      row: rows[index],
      table: table
    });
  }) : rows.map(function (row, index) {
    return /*#__PURE__*/React.createElement(LmCardTableBodyRow, {
      key: index,
      rowIndex: index,
      row: row,
      table: table
    });
  })));
});
export default TableBody;