choerodon-ui/pro/lib/performance-table/Cell.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"] = exports.propTypes = void 0;

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

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

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

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

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

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

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

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

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

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

var _mobx = require("mobx");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

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

var _constants = require("./constants");

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

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

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

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var propTypes = {
  align: _propTypes["default"].oneOf(['left', 'center', 'right']),
  verticalAlign: _propTypes["default"].oneOf(['top', 'middle', 'bottom']),
  className: _propTypes["default"].string,
  classPrefix: _propTypes["default"].string,
  dataKey: _propTypes["default"].string,
  isHeaderCell: _propTypes["default"].bool,
  width: _propTypes["default"].number,
  height: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].func]),
  left: _propTypes["default"].number,
  headerHeight: _propTypes["default"].number,
  style: _propTypes["default"].object,
  firstColumn: _propTypes["default"].bool,
  lastColumn: _propTypes["default"].bool,
  hasChildren: _propTypes["default"].bool,
  children: _propTypes["default"].any,
  rowKey: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  rowIndex: _propTypes["default"].number,
  rowData: _propTypes["default"].object,
  depth: _propTypes["default"].number,
  onTreeToggle: _propTypes["default"].func,
  renderTreeToggle: _propTypes["default"].func,
  renderCell: _propTypes["default"].func,
  wordWrap: _propTypes["default"].bool,
  hidden: _propTypes["default"].bool,
  treeCol: _propTypes["default"].bool,
  expanded: _propTypes["default"].bool,
  groupHeader: _propTypes["default"].node,
  groupCount: _propTypes["default"].number,
  isDragging: _propTypes["default"].bool
};
exports.propTypes = propTypes;

var Cell =
/*#__PURE__*/
function (_React$PureComponent) {
  (0, _inherits2["default"])(Cell, _React$PureComponent);

  var _super = _createSuper(Cell);

  function Cell() {
    var _this;

    (0, _classCallCheck2["default"])(this, Cell);
    _this = _super.apply(this, arguments); // @ts-ignore

    _this.addPrefix = function (name) {
      return (0, _utils.prefix)(_this.props.classPrefix)(name);
    };

    _this.handleExpandClick = function (event) {
      var _this$props$onTreeTog, _this$props2;

      var _this$props = _this.props,
          rowKey = _this$props.rowKey,
          rowIndex = _this$props.rowIndex,
          rowData = _this$props.rowData;
      (_this$props$onTreeTog = (_this$props2 = _this.props).onTreeToggle) === null || _this$props$onTreeTog === void 0 ? void 0 : _this$props$onTreeTog.call(_this$props2, rowKey, rowIndex, rowData, event);
    };

    return _this;
  }

  (0, _createClass2["default"])(Cell, [{
    key: "isTreeCol",
    value: function isTreeCol() {
      var _this$props3 = this.props,
          treeCol = _this$props3.treeCol,
          firstColumn = _this$props3.firstColumn;
      var _this$context = this.context,
          hasCustomTreeCol = _this$context.hasCustomTreeCol,
          isTree = _this$context.isTree;

      if (treeCol) {
        return true;
      }

      if (!hasCustomTreeCol && firstColumn && isTree) {
        return true;
      }

      return false;
    }
  }, {
    key: "getHeight",
    value: function getHeight() {
      var _this$props4 = this.props,
          height = _this$props4.height,
          rowData = _this$props4.rowData; // @ts-ignore

      return typeof height === 'function' ? height(rowData) : height;
    }
  }, {
    key: "renderTreeNodeExpandIcon",
    value: function renderTreeNodeExpandIcon() {
      var _this$props5 = this.props,
          rowData = _this$props5.rowData,
          renderTreeToggle = _this$props5.renderTreeToggle,
          hasChildren = _this$props5.hasChildren,
          expanded = _this$props5.expanded;
      var expandButton = React.createElement("i", {
        className: this.addPrefix('expand-icon icon')
      });

      if (this.isTreeCol() && hasChildren) {
        return React.createElement("span", {
          role: "button",
          tabIndex: -1,
          className: this.addPrefix('expand-wrapper'),
          onClick: this.handleExpandClick
        }, renderTreeToggle ? renderTreeToggle(expandButton, rowData, expanded) : expandButton);
      }

      return null;
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames;

      var _this$props6 = this.props,
          width = _this$props6.width,
          left = _this$props6.left,
          style = _this$props6.style,
          className = _this$props6.className,
          firstColumn = _this$props6.firstColumn,
          lastColumn = _this$props6.lastColumn,
          isHeaderCell = _this$props6.isHeaderCell,
          headerHeight = _this$props6.headerHeight,
          align = _this$props6.align,
          children = _this$props6.children,
          rowData = _this$props6.rowData,
          dataKey = _this$props6.dataKey,
          rowIndex = _this$props6.rowIndex,
          renderCell = _this$props6.renderCell,
          hidden = _this$props6.hidden,
          wordWrap = _this$props6.wordWrap,
          classPrefix = _this$props6.classPrefix,
          depth = _this$props6.depth,
          verticalAlign = _this$props6.verticalAlign,
          expanded = _this$props6.expanded,
          onClick = _this$props6.onClick,
          onCell = _this$props6.onCell,
          rowSpan = _this$props6.rowSpan,
          fixed = _this$props6.fixed,
          rest = (0, _objectWithoutProperties2["default"])(_this$props6, ["width", "left", "style", "className", "firstColumn", "lastColumn", "isHeaderCell", "headerHeight", "align", "children", "rowData", "dataKey", "rowIndex", "renderCell", "hidden", "wordWrap", "classPrefix", "depth", "verticalAlign", "expanded", "onClick", "onCell", "rowSpan", "fixed"]);
      var tableStore = this.context.tableStore;
      var cellExternalProps = (typeof onCell === 'function' ? onCell({
        rowData: rowData,
        dataKey: dataKey,
        rowIndex: rowIndex
      }) : {}) || {};
      var cellHidden = hidden || cellExternalProps.hidden;
      var cellRowSpan = rowSpan || cellExternalProps.rowSpan;

      if (cellHidden || cellRowSpan === 0) {
        if (!isHeaderCell && rowData && cellRowSpan === 0 && fixed) {
          (0, _mobx.runInAction)(function () {
            tableStore.rowZIndex.push(rowIndex);
          });
        }

        return null;
      }

      var classes = (0, _classnames["default"])(classPrefix, className, cellExternalProps.className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, this.addPrefix('expanded'), expanded && this.isTreeCol()), (0, _defineProperty2["default"])(_classNames, this.addPrefix('first'), firstColumn), (0, _defineProperty2["default"])(_classNames, this.addPrefix('last'), lastColumn), _classNames));
      var rtl = this.context.rtl;
      var nextHeight = isHeaderCell ? headerHeight : this.getHeight();

      if (cellExternalProps.rowSpan) {
        nextHeight = cellExternalProps.rowSpan * (nextHeight || 1);
      }

      var styles = (0, _objectSpread3["default"])({}, style, {}, cellExternalProps.style, (0, _defineProperty2["default"])({
        width: width,
        height: nextHeight,
        zIndex: depth
      }, rtl ? 'right' : 'left', left)); //By moving style from cell content to Cell, it breaks UI behaviours.
      // for example, check box are not showing in the middle of the cell anymore.

      var contentStyles = (0, _defineProperty2["default"])({
        width: width,
        height: nextHeight,
        textAlign: align
      }, rtl ? 'paddingRight' : 'paddingLeft', this.isTreeCol() ? depth * _constants.LAYER_WIDTH + 10 : null);

      if (verticalAlign) {
        contentStyles.display = 'table-cell';
        contentStyles.verticalAlign = verticalAlign;
      } // @ts-ignore


      var cellContent = (0, _utils.isNullOrUndefined)(children) && rowData ? rowData[dataKey] : children;

      if (typeof children === 'function') {
        var getChildren = children;
        cellContent = getChildren(rowData, rowIndex);
      } // fix unable to get propTypes after gatsby is compiled


      var unhandledProps = (0, _utils.getUnhandledProps)(propTypes, (0, _utils.getUnhandledProps)(_Column["default"].propTypes, rest));
      var cell = renderCell ? renderCell(cellContent) : cellContent;
      var searchText = tableStore.searchText,
          highlightRowIndexs = tableStore.highlightRowIndexs;
      if ((0, _isNumber["default"])(cell)) cell = String(cell);

      if ((0, _isString["default"])(cell) && searchText) {
        var index = cell.indexOf(searchText);
        var beforeStr = cell.substr(0, index);
        var afterStr = cell.substr(index + searchText.length);

        if (index > -1) {
          highlightRowIndexs.push(rowIndex);
        }

        cell = index > -1 ? React.createElement("span", null, beforeStr, React.createElement("span", {
          className: this.addPrefix('letter-highlight')
        }, searchText), afterStr) : React.createElement("span", null, cell);
      }

      var content = wordWrap ? React.createElement("div", {
        className: this.addPrefix('wrap')
      }, this.renderTreeNodeExpandIcon(), cell) : React.createElement(React.Fragment, null, this.renderTreeNodeExpandIcon(), cell);
      return React.createElement("div", (0, _extends2["default"])({
        role: isHeaderCell ? 'columnheader' : 'gridcell'
      }, unhandledProps, {
        onClick: onClick,
        className: classes,
        style: styles
      }), React.createElement("div", {
        className: this.addPrefix('content'),
        style: contentStyles
      }, content));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _TableContext["default"];
    }
  }]);
  return Cell;
}(React.PureComponent);

Cell.propTypes = propTypes;
Cell.defaultProps = {
  classPrefix: (0, _utils.defaultClassPrefix)('performance-table-cell'),
  headerHeight: 36,
  depth: 0,
  height: 36,
  width: 0,
  left: 0
};
var _default = Cell;
exports["default"] = _default;
//# sourceMappingURL=Cell.js.map