linkmore-design/es/card-table/table/TableContainer.js

🌈 🚀lm组件库。🚀

// 主体区域: 对表格进行包裹
// 获取主体高度
import React, { useRef, useCallback, useLayoutEffect, useEffect } from 'react';
import LmCardTable from "./Table";
import { getResizeColumnCount } from "../utils";
import Empty from "../../empty";
var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
var LmCardTableContainer = /*#__PURE__*/React.memo(function (_ref) {
  var table = _ref.table;
  var dataSource = table.dataSource,
    dispatch = table.dispatch,
    cellConfig = table.cellConfig,
    type = table.type;
  var tableContainerRef = useRef(null);

  // 行数据计算
  var getRows = useCallback(function (columnCount) {
    var arr = [];
    var len = Math.ceil(dataSource.length / columnCount);
    for (var i = 0; i < len; i += 1) {
      var startIndex = columnCount * i;
      var items = dataSource.slice(startIndex, startIndex + columnCount);
      arr.push(items);
    }
    return arr;
  }, [dataSource]);

  // 获取容器盒子高宽
  var getResize = useCallback(function () {
    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      blockSize = _ref2.blockSize,
      inlineSize = _ref2.inlineSize;
    // 列数量
    var colCount = getResizeColumnCount({
      width: inlineSize,
      height: blockSize
    }, cellConfig.width);
    // 获取行
    var rows = getRows(colCount);
    dispatch({
      type: 'windowResize',
      resize: {
        width: inlineSize,
        height: blockSize
      }
    });
    dispatch({
      type: 'changeColumnCount',
      columnCount: colCount
    });
    dispatch({
      type: 'changeRows',
      rows: rows
    });
  }, [getRows, cellConfig.width]);

  // 获取表格高度
  useIsomorphicLayoutEffect(function () {
    // 频繁变动可考虑增加防抖
    var resizeObserver = new ResizeObserver(function (entries) {
      var borderbox = entries[0].borderBoxSize[0];
      getResize(borderbox);
    });
    if (tableContainerRef.current) {
      resizeObserver.observe(tableContainerRef.current);
    }
    return function () {
      return resizeObserver.disconnect();
    };
  }, [type, getResize]);
  return /*#__PURE__*/React.createElement("div", {
    ref: tableContainerRef,
    className: "lm_card_table_container"
  }, dataSource.length ? /*#__PURE__*/React.createElement(LmCardTable, {
    table: table,
    tableContainerRef: tableContainerRef
  }) : /*#__PURE__*/React.createElement(Empty, {
    image: "nodata"
  }));
});
export default LmCardTableContainer;