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

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useContext } from 'react';
import { observer } from 'mobx-react-lite';
import classNames from 'classnames';
import omit from 'lodash/omit';
import defaultTo from 'lodash/defaultTo';
import { IteratorHelper } from 'choerodon-ui/dataset';
import Tree from '../../../es/tree';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import { defaultAggregationRenderer } from './Column';
import TableContext from './TableContext';
import { getColumnLock, getEditorByColumnAndRecord, getHeader, isStickySupport } from './utils';
import { ColumnLock } from './enum';
import TableCellInner from './TableCellInner';
import AggregationButton from './AggregationButton';
import { treeSome } from '../_util/treeUtils';
import TableGroupCellInner from './TableGroupCellInner';

function getRowSpan(group, tableStore) {
  if (tableStore.headerTableGroups.length) {
    var subGroups = group.subGroups,
        subHGroups = group.subHGroups;

    if (subHGroups) {
      return IteratorHelper.iteratorReduce(subHGroups.values(), function (rowSpan, group) {
        return Math.max(rowSpan, group.records.length);
      }, 0);
    }

    return subGroups.reduce(function (rowSpan, subGroup) {
      return rowSpan + (subGroup.subGroups.length ? getRowSpan(subGroup, tableStore) : 0) + subGroup.records.length;
    }, 0);
  }

  return group.expandedRecords.length;
}

var TableCell = function TableCell(props) {
  var _classNames3;

  var columnGroup = props.columnGroup,
      record = props.record,
      isDragging = props.isDragging,
      provided = props.provided,
      colSpan = props.colSpan,
      className = props.className,
      children = props.children,
      disabled = props.disabled,
      inView = props.inView,
      groupPath = props.groupPath,
      rowIndex = props.rowIndex;
  var column = columnGroup.column,
      key = columnGroup.key;

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

  var cellPrefix = "".concat(prefixCls, "-cell");
  var tableColumnOnCell = tableStore.getConfig('tableColumnOnCell');
  var __tableGroup = column.__tableGroup;

  var _ref = __tableGroup && groupPath && groupPath.find(function (_ref3) {
    var _ref4 = _slicedToArray(_ref3, 1),
        path = _ref4[0];

    return path.name === __tableGroup.name;
  }) || [undefined, false],
      _ref2 = _slicedToArray(_ref, 2),
      group = _ref2[0],
      isLast = _ref2[1];

  var _ref5 = group || !groupPath || !groupPath.length ? [undefined, false] : groupPath[groupPath.length - 1],
      _ref6 = _slicedToArray(_ref5, 1),
      rowGroup = _ref6[0];

  var getInnerNode = useCallback(function (col, onCellStyle, inAggregation, headerGroup) {
    return record ? React.createElement(TableCellInner, {
      column: col,
      record: record,
      style: onCellStyle,
      disabled: disabled,
      inAggregation: inAggregation,
      prefixCls: cellPrefix,
      colSpan: colSpan,
      headerGroup: headerGroup,
      rowGroup: rowGroup
    }, children) : undefined;
  }, [record, disabled, children, cellPrefix, colSpan, rowGroup]);
  var getColumnsInnerNode = useCallback(function (columns) {
    return record ? columns.map(function (colGroup) {
      var hidden = colGroup.hidden,
          col = colGroup.column;
      var hiddenInAggregation = col.hiddenInAggregation;

      if (!hidden && !(typeof hiddenInAggregation === 'function' ? hiddenInAggregation(record) : hiddenInAggregation)) {
        var columnKey = colGroup.key,
            headerGroup = colGroup.headerGroup;

        var _isBuiltInColumn = tableStore.isBuiltInColumn(col);

        var _columnOnCell = !_isBuiltInColumn && (col.onCell || tableColumnOnCell);

        var _cellExternalProps = typeof _columnOnCell === 'function' ? _columnOnCell({
          dataSet: dataSet,
          record: record,
          column: col
        }) : {};

        var header = getHeader(_objectSpread({}, col, {
          dataSet: dataSet,
          aggregation: tableAggregation,
          group: headerGroup
        })); // 只有全局属性时候的样式可以继承给下级满足对td的样式能够一致表现

        var _onCellStyle = !_isBuiltInColumn && tableColumnOnCell === _columnOnCell && typeof tableColumnOnCell === 'function' ? omit(_cellExternalProps.style, ['width', 'height']) : undefined;

        var childColumns = colGroup.children;

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

          if (colGroups.length) {
            return React.createElement(Tree.TreeNode, _extends({}, _cellExternalProps, {
              key: columnKey,
              title: header
            }), getColumnsInnerNode(colGroups));
          }
        }

        var innerNode = getInnerNode(col, _onCellStyle, true, headerGroup);
        return React.createElement(Tree.TreeNode, _extends({}, _cellExternalProps, {
          key: columnKey,
          title: React.createElement(React.Fragment, null, React.createElement("span", {
            className: "".concat(cellPrefix, "-label")
          }, header), innerNode)
        }));
      }

      return undefined;
    }) : [];
  }, [tableStore, record, dataSet, cellPrefix, getInnerNode, tableColumnOnCell, tableAggregation]);
  var style = column.style,
      lock = column.lock,
      onCell = column.onCell,
      aggregation = column.aggregation;
  var columnLock = isStickySupport() && getColumnLock(lock);

  var baseStyle = function () {
    if (columnLock) {
      if (columnLock === ColumnLock.left) {
        return _objectSpread({}, style, {
          left: pxToRem(columnGroup.left)
        });
      }

      if (columnLock === ColumnLock.right) {
        return _objectSpread({}, style, {
          right: pxToRem(colSpan && colSpan > 1 ? 0 : columnGroup.right)
        });
      }
    }

    return style;
  }();

  var baseClassName = classNames(cellPrefix, _defineProperty({}, "".concat(cellPrefix, "-fix-").concat(columnLock), columnLock));

  if (!record) {
    return React.createElement("td", {
      className: baseClassName,
      style: baseStyle,
      "data-index": key,
      colSpan: colSpan
    });
  }

  var indexInGroup = group ? group.expandedRecords.indexOf(record) : -1;
  var groupCell = indexInGroup === 0 || tableStore.virtual && indexInGroup > -1 && tableStore.virtualStartIndex === rowIndex;

  if (group && !groupCell) {
    return null;
  }

  var getAggregationList = function getAggregationList($aggregation) {
    if ($aggregation) {
      var childrenInAggregation = columnGroup.childrenInAggregation;

      if (childrenInAggregation) {
        var visibleChildren = childrenInAggregation.columns.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 expanded = defaultTo(tableStore.isAggregationCellExpanded(record, key), typeof aggregationLimitDefaultExpanded === 'function' ? aggregationLimitDefaultExpanded(record) : aggregationLimitDefaultExpanded) || false;
          var hasExpand = length > aggregationLimit;
          var nodes = hasExpand && !expanded ? visibleChildren.slice(0, aggregationLimit - 1) : visibleChildren;
          return React.createElement(Tree, {
            prefixCls: "".concat(cellPrefix, "-tree"),
            virtual: false,
            focusable: false,
            defaultExpandedKeys: aggregationDefaultExpandedKeys,
            defaultExpandAll: aggregationDefaultExpandAll
          }, getColumnsInnerNode(nodes), hasExpand && React.createElement(Tree.TreeNode, {
            title: React.createElement(AggregationButton, {
              expanded: expanded,
              record: record,
              columnGroup: columnGroup
            })
          }));
        }
      }
    }
  };

  var groupRowSpan = groupCell && group ? getRowSpan(group, tableStore) - indexInGroup : undefined;
  var rowSpan = groupRowSpan === 1 ? undefined : groupRowSpan;

  var renderInnerNode = function renderInnerNode($aggregation, onCellStyle) {
    if (expandIconAsCell && children) {
      return React.createElement("span", {
        className: classNames("".concat(cellPrefix, "-inner"), _defineProperty({}, "".concat(cellPrefix, "-inner-row-height-fixed"), rowHeight !== 'auto')),
        style: _objectSpread({
          textAlign: 'center'
        }, onCellStyle)
      }, children);
    }

    var aggregationList = getAggregationList($aggregation);

    if (groupCell && group && __tableGroup) {
      return React.createElement(TableGroupCellInner, {
        rowSpan: rowSpan,
        group: group,
        column: column
      }, aggregationList);
    }

    if (aggregationList) {
      var _column$renderer = column.renderer,
          renderer = _column$renderer === void 0 ? defaultAggregationRenderer : _column$renderer;
      return React.createElement("span", {
        className: "".concat(cellPrefix, "-inner")
      }, renderer({
        text: aggregationList,
        record: record,
        dataSet: dataSet,
        aggregation: tableAggregation,
        headerGroup: columnGroup.headerGroup,
        rowGroup: rowGroup
      }));
    }

    return getInnerNode(column, onCellStyle, undefined, columnGroup.headerGroup);
  };

  var scope = groupCell ? 'row' : undefined;
  var TCell = scope ? 'th' : 'td';

  if (inView === false || columnGroup.inView === false) {
    var hasEditor = aggregation ? treeSome(column.children || [], function (node) {
      return !!getEditorByColumnAndRecord(node, record);
    }) : !!getEditorByColumnAndRecord(column, record);
    var emptyCellProps = {
      colSpan: colSpan,
      rowSpan: rowSpan,
      'data-index': key,
      className: baseClassName,
      style: baseStyle,
      scope: scope
    };

    if (hasEditor) {
      emptyCellProps.onFocus = function (e) {
        tableStore.activeEmptyCell = e.target;
      };

      emptyCellProps.onBlur = function () {
        delete tableStore.activeEmptyCell;
      };

      emptyCellProps.tabIndex = 0;
    }

    return React.createElement(TCell, _extends({}, emptyCellProps));
  }

  var isBuiltInColumn = tableStore.isBuiltInColumn(column);
  var columnOnCell = !isBuiltInColumn && (onCell || tableColumnOnCell);
  var cellExternalProps = typeof columnOnCell === 'function' ? columnOnCell({
    dataSet: dataSet,
    record: record,
    column: column
  }) : {};

  var cellStyle = _objectSpread({}, baseStyle, {}, cellExternalProps.style, {}, provided && {
    cursor: 'move'
  });

  var classString = classNames(baseClassName, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(cellPrefix, "-aggregation"), aggregation), _defineProperty(_classNames3, "".concat(cellPrefix, "-last-group"), groupCell && isLast), _classNames3), column.className, className, cellExternalProps.className);

  var widthDraggingStyle = function widthDraggingStyle() {
    var draggingStyle = {};

    if (isDragging) {
      var dom = tableStore.node.element.querySelector(".".concat(prefixCls, "-tbody .").concat(prefixCls, "-cell[data-index=\"").concat(key, "\"]"));

      if (dom) {
        draggingStyle.width = dom.clientWidth;
        draggingStyle.whiteSpace = 'nowrap';
      }
    }

    return draggingStyle;
  }; // 只有全局属性时候的样式可以继承给下级满足对td的样式能够一致表现


  var onCellStyle = !isBuiltInColumn && tableColumnOnCell === columnOnCell && typeof tableColumnOnCell === 'function' ? omit(cellExternalProps.style, ['width', 'height']) : undefined;
  return React.createElement(TCell, _extends({
    colSpan: colSpan,
    rowSpan: rowSpan
  }, cellExternalProps, {
    className: classString,
    "data-index": key
  }, provided && provided.dragHandleProps, {
    style: _objectSpread({}, omit(cellStyle, ['width', 'height']), {}, widthDraggingStyle()),
    scope: scope
  }), renderInnerNode(aggregation, onCellStyle));
};

TableCell.displayName = 'TableCell';
export default observer(TableCell);
//# sourceMappingURL=TableCell.js.map