linkmore-design/lib/chart-table/table/Table.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 _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _reactVirtual = require("react-virtual");
var _Item = _interopRequireDefault(require("./Item"));
const Cell = layoutProps => {
  const {
    instance
  } = layoutProps;
  const {
    itemRender,
    prefixCls
  } = instance;
  if (itemRender) return itemRender(layoutProps);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}_cell`
  }, /*#__PURE__*/_react.default.createElement(_Item.default, layoutProps));
};
const Row = ({
  row,
  span,
  start,
  isLastRow,
  instance
}) => {
  const {
    rowConfig,
    prefixCls
  } = instance;
  const contentHeight = isLastRow ? rowConfig.height - rowConfig.gap?.y ?? rowConfig.gap : rowConfig.height;
  const rowCSSProperties = {
    position: 'absolute',
    top: 0,
    left: 0,
    transform: `translateY(${start}px)`,
    height: contentHeight,
    gridTemplateColumns: `repeat(${span}, 1fr)`,
    gap: rowConfig.gap?.x ?? rowConfig.gap,
    paddingBottom: !isLastRow && (rowConfig.gap?.y ?? rowConfig.gap)
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}_row`,
    style: rowCSSProperties
  }, row.map((record, cellIndex) => /*#__PURE__*/_react.default.createElement(Cell, {
    key: cellIndex,
    record: record,
    instance: instance
  })));
};

/** 计算所需配置参数 */
const useTableConfig = ({
  resizeRef,
  width,
  instance
}) => {
  const {
    resizeConfig,
    dataSource,
    rowConfig,
    checkboxConfig
  } = instance;
  const span = (0, _react.useMemo)(() => {
    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的宽度阶增列数量 */
    const leftNum = Math.floor((width - 1784) / 480) + resizeConfig.xxl;
    return leftNum;
  }, [...Object.values(resizeConfig), width]);
  const rows = (0, _react.useMemo)(() => {
    const rowLen = Math.ceil(dataSource.length / span);
    const result = new Array(rowLen).fill({}).map((v, rowIndex) => {
      return dataSource.slice(rowIndex * span, (rowIndex + 1) * span);
    });
    return result;
  }, [span, dataSource]);
  const {
    totalSize,
    virtualItems
  } = (0, _reactVirtual.useVirtual)({
    size: rows.length,
    parentRef: resizeRef,
    estimateSize: _react.default.useCallback(() => rowConfig.height, [rowConfig.height]),
    overscan: 2
  });
  const virScrollStyles = (0, _react.useMemo)(() => {
    return {
      position: 'relative',
      height: `${totalSize - (rowConfig.gap?.y ?? rowConfig.gap)}px`
    };
  }, [totalSize, rowConfig.gap]);

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

  const isSelected = !!checkboxConfig.selected?.length;
  return {
    span,
    rows,
    isSelected,
    virtualItems,
    virScrollStyles
  };
};
const Table = ({
  resizeRef,
  width,
  instance
}) => {
  const {
    prefixCls
  } = instance;
  const {
    span,
    rows,
    isSelected,
    virtualItems,
    virScrollStyles
  } = useTableConfig({
    resizeRef,
    width,
    instance
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(`${prefixCls}-body`, isSelected && 'has-selected'),
    style: virScrollStyles
  }, virtualItems.map(({
    index,
    start,
    end
  }) => /*#__PURE__*/_react.default.createElement(Row, {
    key: index,
    span: span,
    start: start,
    row: rows[index],
    isLastRow: index === rows.length - 1,
    instance: instance
  })));
};
var _default = Table;
exports.default = _default;