choerodon-ui/pro/es/table/AggregationTree.js

An enterprise-class UI design language and React-based implementation

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React, { useCallback, useContext, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import defaultTo from 'lodash/defaultTo';
import omit from 'lodash/omit';
import Tree from '../../../es/tree';
import AggregationButton from './AggregationButton';
import TableContext from './TableContext';
import ColumnGroups from './ColumnGroups';
import { getColumnKey, getHeader } from './utils';
import { EXPAND_KEY } from './TableStore';

var AggregationTree = function AggregationTree(props) {
  var columns = props.columns,
      groups = props.groups,
      record = props.record,
      rowGroup = props.rowGroup,
      headerGroup = props.headerGroup,
      column = props.column,
      renderer = props.renderer,
      _props$index = props.index,
      index = _props$index === void 0 ? 0 : _props$index;

  var _useContext = useContext(TableContext),
      tableStore = _useContext.tableStore,
      prefixCls = _useContext.prefixCls,
      dataSet = _useContext.dataSet,
      tableAggregation = _useContext.aggregation;

  var cellPrefix = "".concat(prefixCls, "-cell");
  var columnGroups = useMemo(function () {
    if (groups) {
      return groups;
    }

    if (columns) {
      return new ColumnGroups(columns, tableStore).columns;
    }

    return [];
  }, [columns, groups]);
  var tableColumnOnCell = tableStore.getConfig('tableColumnOnCell');
  var getColumnsInnerNode = useCallback(function (columns) {
    return columns.map(function (colGroup) {
      var hidden = colGroup.hidden,
          col = colGroup.column;
      var hiddenInAggregation = col.hiddenInAggregation;

      if (!hidden && !(typeof hiddenInAggregation === 'function' ? record ? hiddenInAggregation(record) : false : hiddenInAggregation)) {
        var columnKey = colGroup.key;
        var isBuiltInColumn = tableStore.isBuiltInColumn(col);
        var columnOnCell = !isBuiltInColumn && (col.onCell || tableColumnOnCell);
        var cellExternalProps = typeof columnOnCell === 'function' && record ? columnOnCell({
          dataSet: dataSet,
          record: record,
          column: col
        }) : {};
        var header = getHeader(_objectSpread(_objectSpread({}, col), {}, {
          dataSet: dataSet,
          aggregation: tableAggregation,
          group: colGroup.headerGroup,
          groups: colGroup.headerGroups
        }));
        var childColumns = colGroup.children;

        if (childColumns) {
          var colGroups = childColumns.columns;

          if (colGroups.length) {
            return /*#__PURE__*/React.createElement(Tree.TreeNode, _extends({}, cellExternalProps, {
              key: columnKey,
              title: header
            }), getColumnsInnerNode(colGroups));
          }
        } // 只有全局属性时候的样式可以继承给下级满足对td的样式能够一致表现


        var style = !isBuiltInColumn && tableColumnOnCell === columnOnCell && typeof tableColumnOnCell === 'function' ? omit(cellExternalProps.style, ['width', 'height']) : undefined;
        var innerNode = renderer({
          colGroup: colGroup,
          style: style
        });
        return /*#__PURE__*/React.createElement(Tree.TreeNode, _extends({}, cellExternalProps, {
          key: columnKey,
          title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
            className: "".concat(cellPrefix, "-label")
          }, header), innerNode)
        }));
      }

      return undefined;
    });
  }, [tableStore, record, dataSet, cellPrefix, renderer, tableColumnOnCell, tableAggregation]);
  var aggregationExpandKey = getColumnKey(column);
  var visibleChildren = columnGroups.filter(function (child) {
    return !child.hidden;
  });
  var length = visibleChildren.length;

  if (length > 0) {
    var aggregationLimit = column.aggregationLimit,
        aggregationDefaultExpandedKeys = column.aggregationDefaultExpandedKeys,
        aggregationDefaultExpandAll = column.aggregationDefaultExpandAll,
        aggregationLimitDefaultExpanded = column.aggregationLimitDefaultExpanded;
    var hasExpand = index === 0 && length > aggregationLimit;
    var expanded = hasExpand ? defaultTo(record ? tableStore.isAggregationCellExpanded(record, aggregationExpandKey) : headerGroup && headerGroup.getState(EXPAND_KEY), typeof aggregationLimitDefaultExpanded === 'function' ? record ? aggregationLimitDefaultExpanded(record) : false : aggregationLimitDefaultExpanded) || false : false;
    var nodes = hasExpand && !expanded ? visibleChildren.slice(0, aggregationLimit - 1) : visibleChildren;
    return /*#__PURE__*/React.createElement(Tree, {
      prefixCls: "".concat(cellPrefix, "-tree"),
      virtual: false,
      focusable: false,
      selectable: false,
      defaultExpandedKeys: aggregationDefaultExpandedKeys,
      defaultExpandAll: aggregationDefaultExpandAll
    }, getColumnsInnerNode(nodes), hasExpand && /*#__PURE__*/React.createElement(Tree.TreeNode, {
      key: 'expand-treenode',
      title: /*#__PURE__*/React.createElement(AggregationButton, {
        expanded: expanded,
        record: record,
        rowGroup: rowGroup,
        headerGroup: headerGroup,
        isColumnGroup: !(headerGroup || !column.__tableGroup),
        aggregationExpandKey: aggregationExpandKey
      })
    }));
  }

  return null;
};

AggregationTree.displayName = 'AggregationTree';
var ObserverAggregationTree = observer(AggregationTree);
export default ObserverAggregationTree;
export function groupedAggregationTree(props) {
  var groups = props.groups,
      columns = props.columns;

  if (groups) {
    var treeGroups = [];
    groups.forEach(function (group) {
      var _group$column$aggrega = group.column.aggregationTreeIndex,
          aggregationTreeIndex = _group$column$aggrega === void 0 ? 0 : _group$column$aggrega;
      var treeGroup = treeGroups[aggregationTreeIndex];

      if (!treeGroup) {
        treeGroup = [];
        treeGroups[aggregationTreeIndex] = treeGroup;
      }

      treeGroup.push(group);
    });
    return treeGroups.reduce(function (trees, treeGroup, index) {
      return treeGroup ? trees.concat( /*#__PURE__*/React.createElement(ObserverAggregationTree, _extends({
        key: String(index)
      }, props, {
        groups: treeGroup
      }))) : trees;
    }, []);
  }

  if (columns) {
    var treeColumns = [];
    columns.forEach(function (column) {
      var _column$aggregationTr = column.aggregationTreeIndex,
          aggregationTreeIndex = _column$aggregationTr === void 0 ? 0 : _column$aggregationTr;
      var treeColumn = treeColumns[aggregationTreeIndex];

      if (!treeColumn) {
        treeColumn = [];
        treeColumns[aggregationTreeIndex] = treeColumn;
      }

      treeColumn.push(column);
    });
    return treeColumns.reduce(function (trees, treeColumn, index) {
      return treeColumn ? trees.concat( /*#__PURE__*/React.createElement(ObserverAggregationTree, _extends({
        key: String(index)
      }, props, {
        columns: treeColumn,
        index: index
      }))) : trees;
    }, []);
  }

  return [];
}
//# sourceMappingURL=AggregationTree.js.map