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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Table = _interopRequireDefault(require("./Table"));
var _utils = require("../utils");
var _empty = _interopRequireDefault(require("../../empty"));
// 主体区域: 对表格进行包裹
// 获取主体高度

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
const LmCardTableContainer = /*#__PURE__*/_react.default.memo(({
  table
}) => {
  const {
    dataSource,
    dispatch,
    cellConfig,
    type
  } = table;
  const tableContainerRef = (0, _react.useRef)(null);

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

  // 获取容器盒子高宽
  const getResize = (0, _react.useCallback)(({
    blockSize,
    inlineSize
  } = {}) => {
    // 列数量
    const colCount = (0, _utils.getResizeColumnCount)({
      width: inlineSize,
      height: blockSize
    }, cellConfig.width);
    // 获取行
    const rows = getRows(colCount);
    dispatch({
      type: 'windowResize',
      resize: {
        width: inlineSize,
        height: blockSize
      }
    });
    dispatch({
      type: 'changeColumnCount',
      columnCount: colCount
    });
    dispatch({
      type: 'changeRows',
      rows
    });
  }, [getRows, cellConfig.width]);

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