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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _mobxReactLite = require("mobx-react-lite");

var _classnames = _interopRequireDefault(require("classnames"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _tree = _interopRequireDefault(require("../../../lib/tree"));

var _configure = require("../../../lib/configure");

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _Column = require("./Column");

var _TableContext = _interopRequireDefault(require("./TableContext"));

var _utils = require("./utils");

var _enum = require("./enum");

var _TableCellInner = _interopRequireDefault(require("./TableCellInner"));

var _AggregationButton = _interopRequireDefault(require("./AggregationButton"));

var TableCell = (0, _mobxReactLite.observer)(function TableCell(props) {
  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;
  var column = columnGroup.column,
      key = columnGroup.key;

  var _useContext = (0, _react.useContext)(_TableContext["default"]),
      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 = (0, _configure.getConfig)('tableColumnOnCell');
  var getInnerNode = (0, _react.useCallback)(function (col, onCellStyle, inAggregation) {
    return _react["default"].createElement(_TableCellInner["default"], {
      column: col,
      record: record,
      style: onCellStyle,
      disabled: disabled,
      inAggregation: inAggregation,
      prefixCls: cellPrefix,
      colSpan: colSpan
    }, children);
  }, [record, disabled, children, cellPrefix, colSpan]);
  var getColumnsInnerNode = (0, _react.useCallback)(function (columns) {
    return columns.map(function (col) {
      var hidden = col.hidden,
          hiddenInAggregation = col.hiddenInAggregation;

      if (!hidden && !(typeof hiddenInAggregation === 'function' ? hiddenInAggregation(record) : hiddenInAggregation)) {
        var _onCell = col.onCell;

        var _isBuiltInColumn = tableStore.isBuiltInColumn(col);

        var _columnOnCell = !_isBuiltInColumn && (_onCell || tableColumnOnCell);

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

        var columnKey = (0, _utils.getColumnKey)(col);
        var header = (0, _utils.getHeader)(col, dataSet, tableAggregation); // 只有全局属性时候的样式可以继承给下级满足对td的样式能够一致表现

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

        var childColumns = col.children;

        if (childColumns && childColumns.length) {
          return _react["default"].createElement(_tree["default"].TreeNode, (0, _extends2["default"])({}, _cellExternalProps, {
            key: columnKey,
            title: header
          }), getColumnsInnerNode(childColumns));
        }

        var innerNode = getInnerNode(col, _onCellStyle, true);
        return _react["default"].createElement(_tree["default"].TreeNode, (0, _extends2["default"])({}, _cellExternalProps, {
          key: columnKey,
          title: _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("span", {
            className: "".concat(cellPrefix, "-label")
          }, header), innerNode)
        }));
      }

      return undefined;
    });
  }, [tableStore, record, dataSet, cellPrefix, getInnerNode, tableColumnOnCell, tableAggregation]);

  var renderInnerNode = function renderInnerNode(aggregation, onCellStyle) {
    if (expandIconAsCell && children) {
      return _react["default"].createElement("span", {
        className: (0, _classnames["default"])("".concat(cellPrefix, "-inner"), (0, _defineProperty2["default"])({}, "".concat(cellPrefix, "-inner-row-height-fixed"), rowHeight !== 'auto')),
        style: (0, _objectSpread2["default"])({
          textAlign: 'center'
        }, onCellStyle)
      }, children);
    }

    if (aggregation) {
      var childColumns = columnGroup.column.children;

      if (childColumns) {
        var visibleChildren = childColumns.filter(function (child) {
          return !child.hidden;
        });
        var length = visibleChildren.length;

        if (length > 0) {
          var _column$renderer = column.renderer,
              renderer = _column$renderer === void 0 ? _Column.defaultAggregationRenderer : _column$renderer,
              aggregationLimit = column.aggregationLimit,
              aggregationDefaultExpandedKeys = column.aggregationDefaultExpandedKeys,
              aggregationDefaultExpandAll = column.aggregationDefaultExpandAll;
          var expanded = tableStore.isAggregationCellExpanded(record, key);
          var hasExpand = length > aggregationLimit;
          var nodes = hasExpand && !expanded ? visibleChildren.slice(0, aggregationLimit - 1) : visibleChildren;

          var text = _react["default"].createElement(_tree["default"], {
            prefixCls: "".concat(cellPrefix, "-tree"),
            virtual: false,
            focusable: false,
            defaultExpandedKeys: aggregationDefaultExpandedKeys,
            defaultExpandAll: aggregationDefaultExpandAll
          }, getColumnsInnerNode(nodes), hasExpand && _react["default"].createElement(_tree["default"].TreeNode, {
            title: _react["default"].createElement(_AggregationButton["default"], {
              expanded: expanded,
              record: record,
              columnGroup: columnGroup
            })
          }));

          return _react["default"].createElement("div", {
            className: "".concat(cellPrefix, "-inner")
          }, renderer({
            text: text,
            record: record,
            dataSet: dataSet,
            aggregation: tableAggregation
          }));
        }
      }
    }

    return getInnerNode(column, onCellStyle);
  };

  var style = column.style,
      lock = column.lock;
  var columnLock = (0, _utils.isStickySupport)() && (0, _utils.getColumnLock)(lock);

  var baseStyle = function () {
    if (columnLock) {
      if (columnLock === _enum.ColumnLock.left) {
        return (0, _objectSpread2["default"])({}, style, {
          left: (0, _UnitConvertor.pxToRem)(columnGroup.left)
        });
      }

      if (columnLock === _enum.ColumnLock.right) {
        return (0, _objectSpread2["default"])({}, style, {
          right: (0, _UnitConvertor.pxToRem)(colSpan && colSpan > 1 ? 0 : columnGroup.right)
        });
      }
    }

    return style;
  }();

  var baseClassName = (0, _classnames["default"])(cellPrefix, (0, _defineProperty2["default"])({}, "".concat(cellPrefix, "-fix-").concat(columnLock), columnLock));

  if (inView === false || columnGroup.inView === false) {
    return _react["default"].createElement("td", {
      colSpan: colSpan,
      "data-index": key,
      className: baseClassName,
      style: baseStyle
    });
  }

  var onCell = column.onCell,
      aggregation = column.aggregation;
  var isBuiltInColumn = tableStore.isBuiltInColumn(column);
  var columnOnCell = !isBuiltInColumn && (onCell || tableColumnOnCell);
  var cellExternalProps = typeof columnOnCell === 'function' ? columnOnCell({
    dataSet: record.dataSet,
    record: record,
    column: column
  }) : {};
  var cellStyle = (0, _objectSpread2["default"])({}, baseStyle, {}, cellExternalProps.style, {}, provided && {
    cursor: 'move'
  });
  var classString = (0, _classnames["default"])(baseClassName, (0, _defineProperty2["default"])({}, "".concat(cellPrefix, "-aggregation"), aggregation), 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' ? (0, _omit["default"])(cellExternalProps.style, ['width', 'height']) : undefined;
  return _react["default"].createElement("td", (0, _extends2["default"])({
    colSpan: colSpan
  }, cellExternalProps, {
    className: classString,
    "data-index": key
  }, provided && provided.dragHandleProps, {
    style: (0, _objectSpread2["default"])({}, (0, _omit["default"])(cellStyle, ['width', 'height']), {}, widthDraggingStyle())
  }), renderInnerNode(aggregation, onCellStyle));
});
TableCell.displayName = 'TableCell';
var _default = TableCell;
exports["default"] = _default;
//# sourceMappingURL=TableCell.js.map