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

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import classNames from 'classnames';
import React, { useMemo } from 'react';
import Button from "../../button";
import IconFont from "../../icon-font";
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 useTableConfig = function useTableConfig(_ref) {
  var _checkboxConfig$selec;
  var width = _ref.width,
    instance = _ref.instance;
  var resizeConfig = instance.resizeConfig,
    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 isSelected = !!((_checkboxConfig$selec = checkboxConfig.selected) !== null && _checkboxConfig$selec !== void 0 && _checkboxConfig$selec.length);
  return {
    span: span,
    isSelected: isSelected
  };
};
var GroupHeaderRender = function GroupHeaderRender(props) {
  var groupKey = props.groupKey,
    groupData = props.groupData,
    expand = props.expand,
    onExpand = props.onExpand,
    instance = props.instance;
  var prefixCls = instance.prefixCls,
    groupRender = instance.groupRender,
    locale = instance.locale;
  var totalLen = "(".concat(groupData === null || groupData === void 0 ? void 0 : groupData.length, ")");
  if (groupRender) {
    return groupRender(props);
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "_group_header")
  }, /*#__PURE__*/React.createElement(Button, {
    type: "text",
    icon: /*#__PURE__*/React.createElement(IconFont, {
      type: expand ? 'icon-xiasanjiao' : 'icon-yousanjiao'
    }),
    onClick: function onClick() {
      return onExpand(function (o) {
        return !o;
      });
    }
  }), /*#__PURE__*/React.createElement("span", {
    className: "group_title"
  }, groupKey || (locale === null || locale === void 0 ? void 0 : locale.noGroup)), /*#__PURE__*/React.createElement("span", {
    className: "group_tip"
  }, totalLen));
};
var TableGroup = function TableGroup(_ref2) {
  var _rowConfig$gap$x, _rowConfig$gap;
  var group = _ref2.group,
    span = _ref2.span,
    instance = _ref2.instance;
  var _group = _slicedToArray(group, 2),
    groupKey = _group[0],
    groupData = _group[1];
  var prefixCls = instance.prefixCls,
    rowConfig = instance.rowConfig,
    groupDefaultExpand = instance.groupDefaultExpand;
  var _React$useState = React.useState(groupDefaultExpand),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    expand = _React$useState2[0],
    setExpand = _React$useState2[1];
  var rowLen = Math.ceil(groupData.length / span);
  var groupCSSProperties = {
    display: expand ? 'grid' : 'none',
    height: rowConfig.height * rowLen,
    gridTemplateColumns: "repeat(".concat(span, ", 1fr)"),
    gap: (_rowConfig$gap$x = (_rowConfig$gap = rowConfig.gap) === null || _rowConfig$gap === void 0 ? void 0 : _rowConfig$gap.x) !== null && _rowConfig$gap$x !== void 0 ? _rowConfig$gap$x : rowConfig.gap
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GroupHeaderRender, {
    groupKey: groupKey,
    groupData: groupData,
    expand: expand,
    onExpand: setExpand,
    instance: instance
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "_group"),
    style: groupCSSProperties
  }, groupData === null || groupData === void 0 ? void 0 : groupData.map(function (record, index) {
    return /*#__PURE__*/React.createElement(Cell, {
      key: index,
      record: record,
      instance: instance
    });
  })));
};
var Table = function Table(_ref3) {
  var width = _ref3.width,
    instance = _ref3.instance;
  var prefixCls = instance.prefixCls,
    dataSource = instance.dataSource,
    groupKeys = instance.groupKeys;
  var _useTableConfig = useTableConfig({
      width: width,
      instance: instance
    }),
    span = _useTableConfig.span,
    isSelected = _useTableConfig.isSelected;
  var groupDataIndex = Array.isArray(groupKeys) ? groupKeys === null || groupKeys === void 0 ? void 0 : groupKeys[0] : groupKeys;

  /**
   * @returns [ [ groupKey, groupData ], ... ]
   */
  var groupDatSource = useMemo(function () {
    var groupsMap = new Map();
    dataSource.forEach(function (record) {
      var mapKey = record[groupDataIndex];
      if (groupsMap.has(mapKey)) {
        var groupDataSource = groupsMap.get(mapKey);
        groupsMap.set(mapKey, [].concat(_toConsumableArray(groupDataSource), [record]));
      } else {
        groupsMap.set(mapKey, [record]);
      }
    });
    var arr = Array.from(groupsMap);
    return arr;
  }, [dataSource, groupDataIndex]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-body"), isSelected && 'has-selected')
  }, groupDatSource.map(function (group) {
    return /*#__PURE__*/React.createElement(TableGroup, {
      key: group === null || group === void 0 ? void 0 : group[0],
      span: span,
      group: group,
      instance: instance
    });
  }));
};
export default Table;