linkmore-design/lib/chart-table/table/GroupTable.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 _button = _interopRequireDefault(require("../../button"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
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 useTableConfig = ({
  width,
  instance
}) => {
  const {
    resizeConfig,
    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 isSelected = !!checkboxConfig.selected?.length;
  return {
    span,
    isSelected
  };
};
const GroupHeaderRender = props => {
  const {
    groupKey,
    groupData,
    expand,
    onExpand,
    instance
  } = props;
  const {
    prefixCls,
    groupRender,
    locale
  } = instance;
  const totalLen = `(${groupData?.length})`;
  if (groupRender) {
    return groupRender(props);
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}_group_header`
  }, /*#__PURE__*/_react.default.createElement(_button.default, {
    type: "text",
    icon: /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: expand ? 'lm-icon-xiasanjiao' : 'icon-yousanjiao'
    }),
    onClick: () => onExpand(o => !o)
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "group_title"
  }, groupKey || locale?.noGroup), /*#__PURE__*/_react.default.createElement("span", {
    className: "group_tip"
  }, totalLen));
};
const TableGroup = ({
  group,
  span,
  instance
}) => {
  const [groupKey, groupData] = group;
  const {
    prefixCls,
    rowConfig,
    groupDefaultExpand
  } = instance;
  const [expand, setExpand] = _react.default.useState(groupDefaultExpand);
  const rowLen = Math.ceil(groupData.length / span);
  const groupCSSProperties = {
    display: expand ? 'grid' : 'none',
    height: rowConfig.height * rowLen,
    gridTemplateColumns: `repeat(${span}, 1fr)`,
    gap: rowConfig.gap?.x ?? rowConfig.gap
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(GroupHeaderRender, {
    groupKey: groupKey,
    groupData: groupData,
    expand: expand,
    onExpand: setExpand,
    instance: instance
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}_group`,
    style: groupCSSProperties
  }, groupData?.map((record, index) => {
    return /*#__PURE__*/_react.default.createElement(Cell, {
      key: index,
      record: record,
      instance: instance
    });
  })));
};
const Table = ({
  width,
  instance
}) => {
  const {
    prefixCls,
    dataSource,
    groupKeys
  } = instance;
  const {
    span,
    isSelected
  } = useTableConfig({
    width,
    instance
  });
  const groupDataIndex = Array.isArray(groupKeys) ? groupKeys?.[0] : groupKeys;

  /**
   * @returns [ [ groupKey, groupData ], ... ]
   */
  const groupDatSource = (0, _react.useMemo)(() => {
    const groupsMap = new Map();
    dataSource.forEach(record => {
      const mapKey = record[groupDataIndex];
      if (groupsMap.has(mapKey)) {
        const groupDataSource = groupsMap.get(mapKey);
        groupsMap.set(mapKey, [...groupDataSource, record]);
      } else {
        groupsMap.set(mapKey, [record]);
      }
    });
    const arr = Array.from(groupsMap);
    return arr;
  }, [dataSource, groupDataIndex]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(`${prefixCls}-body`, isSelected && 'has-selected')
  }, groupDatSource.map(group => {
    return /*#__PURE__*/_react.default.createElement(TableGroup, {
      key: group?.[0],
      span: span,
      group: group,
      instance: instance
    });
  }));
};
var _default = Table;
exports.default = _default;