choerodon-ui/pro/lib/table/TableTBody.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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 _tslib = require("tslib");

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

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

var _reactBeautifulDnd = require("react-beautiful-dnd");

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

var _resizeObserver = _interopRequireDefault(require("../../../lib/_util/resizeObserver"));

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

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

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

var _TableRow = _interopRequireDefault(require("./TableRow"));

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

var _ExpandedRow = _interopRequireDefault(require("./ExpandedRow"));

var _enum2 = require("../data-set/enum");

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _Table = require("./Table");

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

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 TableTBody =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(TableTBody, _Component);

  var _super = _createSuper(TableTBody);

  function TableTBody(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, TableTBody);
    _this = _super.call(this, props, context);
    var tableStore = context.tableStore,
        dataSet = context.dataSet;

    if (tableStore.performanceEnabled) {
      if (dataSet.status === _enum2.DataSetStatus.ready && dataSet.length) {
        tableStore.performanceOn = true;
        tableStore.timing.renderStart = Date.now();
      }
    }

    return _this;
  }

  (0, _createClass2["default"])(TableTBody, [{
    key: "handlePerformance",
    value: function handlePerformance() {
      var _this$context = this.context,
          code = _this$context.code,
          tableStore = _this$context.tableStore,
          dataSet = _this$context.dataSet;

      if (tableStore.performanceEnabled && tableStore.performanceOn) {
        var timing = tableStore.timing;
        var performance = dataSet.performance;
        var onPerformance = (0, _configure.getConfig)('onPerformance');
        timing.renderEnd = Date.now();
        onPerformance('Table', {
          name: code,
          url: performance.url,
          size: dataSet.length,
          timing: (0, _objectSpread2["default"])({}, performance.timing, {}, timing)
        });
        tableStore.performanceOn = false;
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.handlePerformance();
    }
  }, {
    key: "componentWillUpdate",
    value: function componentWillUpdate() {
      var tableStore = this.context.tableStore;

      if (tableStore.performanceEnabled && tableStore.performanceOn) {
        tableStore.timing.renderStart = Date.now();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.handlePerformance();
      var lock = this.props.lock;

      if (!lock) {
        var node = this.context.tableStore.node;

        if (node.isFocus && !node.wrapper.contains(document.activeElement)) {
          node.focus();
        }
      }
    }
  }, {
    key: "handleResize",
    value: function handleResize(_width, height) {
      var tableStore = this.context.tableStore;

      if (!tableStore.hidden) {
        tableStore.calcBodyHeight = height;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          lock = _this$props.lock,
          columnGroups = _this$props.columnGroups;
      var _this$context2 = this.context,
          prefixCls = _this$context2.prefixCls,
          tableStore = _this$context2.tableStore,
          rowDragRender = _this$context2.rowDragRender,
          dataSet = _this$context2.dataSet;
      var data = tableStore.data,
          virtual = tableStore.virtual,
          rowDraggable = tableStore.rowDraggable;
      var virtualData = virtual ? data.slice(tableStore.virtualStartIndex, tableStore.virtualEndIndex) : data;
      var rows = virtualData.length ? this.getRows(virtualData, columnGroups, true, virtual) : this.getEmptyRow(columnGroups);
      var body = rowDraggable ? _react["default"].createElement(_reactBeautifulDnd.Droppable, (0, _extends2["default"])({
        droppableId: "table",
        key: "table",
        renderClone: function renderClone(provided, snapshot, rubric) {
          if (snapshot.isDragging && tableStore.overflowX && tableStore.dragColumnAlign === _enum.DragColumnAlign.right) {
            var style = provided.draggableProps.style;

            if ((0, _utils.isDraggingStyle)(style)) {
              var left = style.left,
                  width = style.width;
              style.left = left - Math.max(tableStore.columnGroups.leafColumnsWidth - 50, width);
            }
          }

          var record = dataSet.get(rubric.source.index);

          if (record) {
            var leafColumnsBody = lock ? tableStore.columnGroups : columnGroups;
            var renderClone = rowDragRender && rowDragRender.renderClone;
            var id = record.id;

            if (renderClone && (0, _isFunction["default"])(renderClone)) {
              return renderClone({
                provided: provided,
                snapshot: snapshot,
                rubric: rubric,
                key: id,
                hidden: false,
                lock: false,
                prefixCls: prefixCls,
                columns: leafColumnsBody.leafs.map(function (_ref) {
                  var column = _ref.column;
                  return column;
                }),
                columnGroups: leafColumnsBody,
                record: record,
                index: id
              });
            }

            return _react["default"].createElement(_TableRow["default"], {
              provided: provided,
              snapshot: snapshot,
              key: id,
              hidden: false,
              lock: false,
              columnGroups: leafColumnsBody,
              record: record,
              index: id
            });
          }

          return _react["default"].createElement("span", null);
        },
        getContainerForClone: function getContainerForClone() {
          return (0, _Table.instance)(tableStore.node.getClassName(), prefixCls).tbody;
        }
      }, rowDragRender && rowDragRender.droppableProps), function (droppableProvided) {
        return _react["default"].createElement("tbody", (0, _extends2["default"])({
          ref: droppableProvided.innerRef
        }, droppableProvided.droppableProps, {
          className: "".concat(prefixCls, "-tbody")
        }), rows, droppableProvided.placeholder);
      }) : _react["default"].createElement("tbody", {
        className: "".concat(prefixCls, "-tbody")
      }, rows);
      return lock || virtual ? body : _react["default"].createElement(_resizeObserver["default"], {
        onResize: this.handleResize,
        resizeProp: "height",
        immediately: true
      }, body);
    }
  }, {
    key: "getRows",
    value: function getRows(records, columnGroups, expanded, virtual) {
      var _this2 = this;

      return records.map(function (record, index) {
        return _this2.getRow(columnGroups, record, virtual ? record.index : index, expanded);
      });
    }
  }, {
    key: "getEmptyRow",
    value: function getEmptyRow(columnGroups) {
      var _this$context3 = this.context,
          prefixCls = _this$context3.prefixCls,
          dataSet = _this$context3.dataSet,
          _this$context3$tableS = _this$context3.tableStore,
          emptyText = _this$context3$tableS.emptyText,
          width = _this$context3$tableS.width;
      var lock = this.props.lock;
      var styles = width ? {
        position: (0, _utils.isStickySupport)() ? 'sticky' : 'relative',
        left: (0, _UnitConvertor.pxToRem)(width / 2)
      } : {
        transform: 'none',
        display: 'inline-block'
      };
      var tdStyle = width ? undefined : {
        textAlign: 'center'
      };
      return _react["default"].createElement("tr", {
        className: "".concat(prefixCls, "-empty-row")
      }, _react["default"].createElement("td", {
        colSpan: columnGroups.leafs.length,
        style: tdStyle
      }, _react["default"].createElement("div", {
        style: styles
      }, !lock && dataSet.status === _enum2.DataSetStatus.ready && emptyText)));
    }
  }, {
    key: "renderExpandedRows",
    value: function renderExpandedRows(columnGroups, record, isExpanded) {
      return this.getRows(record.children || [], columnGroups, isExpanded);
    }
  }, {
    key: "getRow",
    value: function getRow(columnGroups, record, index, expanded) {
      var lock = this.props.lock;
      var _this$context4 = this.context,
          tableStore = _this$context4.tableStore,
          rowDragRender = _this$context4.rowDragRender;
      var key = record.key;

      var children = tableStore.isTree && _react["default"].createElement(_ExpandedRow["default"], {
        record: record,
        columnGroups: columnGroups
      }, this.renderExpandedRows);

      if (tableStore.rowDraggable) {
        var dragColumnAlign = tableStore.dragColumnAlign;

        if (!dragColumnAlign || dragColumnAlign === _enum.DragColumnAlign.right && lock !== _enum.ColumnLock.left || dragColumnAlign === _enum.DragColumnAlign.left && lock !== _enum.ColumnLock.right) {
          return _react["default"].createElement(_reactBeautifulDnd.Draggable, {
            draggableId: String(key),
            index: index,
            key: record.key
          }, function (provided, snapshot) {
            return _react["default"].createElement(_TableRow["default"], (0, _extends2["default"])({
              provided: provided,
              snapshot: snapshot,
              key: record.key,
              hidden: !expanded,
              lock: lock,
              columnGroups: columnGroups,
              record: record,
              index: index
            }, rowDragRender && rowDragRender.draggableProps), children);
          });
        }
      }

      return _react["default"].createElement(_TableRow["default"], {
        key: key,
        hidden: !expanded,
        lock: lock,
        columnGroups: columnGroups,
        record: record,
        index: index
      }, children);
    }
  }]);
  return TableTBody;
}(_react.Component);

TableTBody.displayName = 'TableTBody';
TableTBody.contextType = _TableContext["default"];
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TableTBody.prototype, "handleResize", null);
(0, _tslib.__decorate)([_autobind["default"]], TableTBody.prototype, "renderExpandedRows", null);
TableTBody = (0, _tslib.__decorate)([_mobxReact.observer], TableTBody);
var _default = TableTBody;
exports["default"] = _default;
//# sourceMappingURL=TableTBody.js.map