linkmore-design/es/chart-table/table/Table.js

🌈 🚀lm组件库。🚀

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import classNames from 'classnames';
import React, { useMemo } from 'react';
import { useVirtual } from 'react-virtual';
import Item from "./Item";
var Cell = function Cell(layoutProps) {
  var instance = layoutProps.instance;
  var itemRender = instance.itemRender,
    prefixCls = instance.prefixCls;
  if (itemRender) return itemRender(layoutProps);
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "_cell")
  }, /*#__PURE__*/React.createElement(Item, layoutProps));
};
var Row = function Row(_ref) {
  var _ref2, _rowConfig$gap, _rowConfig$gap$x, _rowConfig$gap2, _rowConfig$gap$y, _rowConfig$gap3;
  var row = _ref.row,
    span = _ref.span,
    start = _ref.start,
    isLastRow = _ref.isLastRow,
    instance = _ref.instance;
  var rowConfig = instance.rowConfig,
    prefixCls = instance.prefixCls;
  var contentHeight = isLastRow ? (_ref2 = rowConfig.height - ((_rowConfig$gap = rowConfig.gap) === null || _rowConfig$gap === void 0 ? void 0 : _rowConfig$gap.y)) !== null && _ref2 !== void 0 ? _ref2 : rowConfig.gap : rowConfig.height;
  var rowCSSProperties = {
    position: 'absolute',
    top: 0,
    left: 0,
    transform: "translateY(".concat(start, "px)"),
    height: contentHeight,
    gridTemplateColumns: "repeat(".concat(span, ", 1fr)"),
    gap: (_rowConfig$gap$x = (_rowConfig$gap2 = rowConfig.gap) === null || _rowConfig$gap2 === void 0 ? void 0 : _rowConfig$gap2.x) !== null && _rowConfig$gap$x !== void 0 ? _rowConfig$gap$x : rowConfig.gap,
    paddingBottom: !isLastRow && ((_rowConfig$gap$y = (_rowConfig$gap3 = rowConfig.gap) === null || _rowConfig$gap3 === void 0 ? void 0 : _rowConfig$gap3.y) !== null && _rowConfig$gap$y !== void 0 ? _rowConfig$gap$y : rowConfig.gap)
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "_row"),
    style: rowCSSProperties
  }, row.map(function (record, cellIndex) {
    return /*#__PURE__*/React.createElement(Cell, {
      key: cellIndex,
      record: record,
      instance: instance
    });
  }));
};

/** 计算所需配置参数 */
var useTableConfig = function useTableConfig(_ref3) {
  var _checkboxConfig$selec;
  var resizeRef = _ref3.resizeRef,
    width = _ref3.width,
    instance = _ref3.instance;
  var resizeConfig = instance.resizeConfig,
    dataSource = instance.dataSource,
    rowConfig = instance.rowConfig,
    checkboxConfig = instance.checkboxConfig;
  var span = useMemo(function () {
    if (width < 632) return resizeConfig.xs;
    if (width < 888) return resizeConfig.sm;
    if (width < 1152) return resizeConfig.md;
    if (width < 1464) return resizeConfig.lg;
    if (width < 1784) return resizeConfig.xl;

    /** 当尺寸过大时, 按照320px的宽度阶增列数量 */
    var leftNum = Math.floor((width - 1784) / 480) + resizeConfig.xxl;
    return leftNum;
  }, [].concat(_toConsumableArray(Object.values(resizeConfig)), [width]));
  var rows = useMemo(function () {
    var rowLen = Math.ceil(dataSource.length / span);
    var result = new Array(rowLen).fill({}).map(function (v, rowIndex) {
      return dataSource.slice(rowIndex * span, (rowIndex + 1) * span);
    });
    return result;
  }, [span, dataSource]);
  var _useVirtual = useVirtual({
      size: rows.length,
      parentRef: resizeRef,
      estimateSize: React.useCallback(function () {
        return rowConfig.height;
      }, [rowConfig.height]),
      overscan: 2
    }),
    totalSize = _useVirtual.totalSize,
    virtualItems = _useVirtual.virtualItems;
  var virScrollStyles = useMemo(function () {
    var _rowConfig$gap$y2, _rowConfig$gap4;
    return {
      position: 'relative',
      height: "".concat(totalSize - ((_rowConfig$gap$y2 = (_rowConfig$gap4 = rowConfig.gap) === null || _rowConfig$gap4 === void 0 ? void 0 : _rowConfig$gap4.y) !== null && _rowConfig$gap$y2 !== void 0 ? _rowConfig$gap$y2 : rowConfig.gap), "px")
    };
  }, [totalSize, rowConfig.gap]);

  /** 总高度(需去掉末行的边距): 虚拟滚动时需要 */
  // const totalSize = rows.length * rowConfig.height - rowConfig.gap?.y

  var isSelected = !!((_checkboxConfig$selec = checkboxConfig.selected) !== null && _checkboxConfig$selec !== void 0 && _checkboxConfig$selec.length);
  return {
    span: span,
    rows: rows,
    isSelected: isSelected,
    virtualItems: virtualItems,
    virScrollStyles: virScrollStyles
  };
};
var Table = function Table(_ref4) {
  var resizeRef = _ref4.resizeRef,
    width = _ref4.width,
    instance = _ref4.instance;
  var prefixCls = instance.prefixCls;
  var _useTableConfig = useTableConfig({
      resizeRef: resizeRef,
      width: width,
      instance: instance
    }),
    span = _useTableConfig.span,
    rows = _useTableConfig.rows,
    isSelected = _useTableConfig.isSelected,
    virtualItems = _useTableConfig.virtualItems,
    virScrollStyles = _useTableConfig.virScrollStyles;
  return /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-body"), isSelected && 'has-selected'),
    style: virScrollStyles
  }, virtualItems.map(function (_ref5) {
    var index = _ref5.index,
      start = _ref5.start,
      end = _ref5.end;
    return /*#__PURE__*/React.createElement(Row, {
      key: index,
      span: span,
      start: start,
      row: rows[index],
      isLastRow: index === rows.length - 1,
      instance: instance
    });
  }));
};
export default Table;