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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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 _propTypes = _interopRequireDefault(require("prop-types"));

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

var _mobx = require("mobx");

var _componentClasses = _interopRequireDefault(require("component-classes"));

var _raf = _interopRequireDefault(require("raf"));

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

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

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

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() {
    (0, _classCallCheck2["default"])(this, TableTBody);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(TableTBody, [{
    key: "handleResize",
    value: function handleResize() {
      if (this.nextFrameActionId !== undefined) {
        _raf["default"].cancel(this.nextFrameActionId);
      }

      this.nextFrameActionId = (0, _raf["default"])(this.syncBodyHeight);
    }
  }, {
    key: "saveRef",
    value: function saveRef(node) {
      this.tableBody = node;
      this.handleResize();
    }
    /**
     * 虚拟滚动计算可视化数据
     */

  }, {
    key: "processData",
    value: function processData() {
      var _this$context$tableSt = this.context.tableStore,
          data = _this$context$tableSt.data,
          _this$context$tableSt2 = _this$context$tableSt.lastScrollTop,
          lastScrollTop = _this$context$tableSt2 === void 0 ? 0 : _this$context$tableSt2,
          height = _this$context$tableSt.height,
          rowHeight = _this$context$tableSt.rowHeight;
      var startIndex = Math.max(Math.round(lastScrollTop / rowHeight - 3), 0);
      var endIndex = Math.min(Math.round((lastScrollTop + height) / rowHeight + 2), data.length);
      return data.slice(startIndex, endIndex);
    }
  }, {
    key: "render",
    value: function render() {
      var _this = this;

      var lock = this.props.lock;
      var leafColumns = this.leafColumns,
          leafColumnsBody = this.leafColumnsBody;
      var _this$context$tableSt3 = this.context.tableStore,
          prefixCls = _this$context$tableSt3.prefixCls,
          node = _this$context$tableSt3.node,
          virtual = _this$context$tableSt3.virtual,
          virtualData = _this$context$tableSt3.virtualData,
          dataSet = _this$context$tableSt3.dataSet,
          rowDraggable = _this$context$tableSt3.rowDraggable,
          dragColumnAlign = _this$context$tableSt3.dragColumnAlign,
          totalLeafColumnsWidth = _this$context$tableSt3.totalLeafColumnsWidth,
          overflowX = _this$context$tableSt3.overflowX,
          _this$context$tableSt4 = _this$context$tableSt3.props.rowDragRender,
          rowDragRender = _this$context$tableSt4 === void 0 ? {} : _this$context$tableSt4;
      var droppableProps = rowDragRender.droppableProps,
          _renderClone = rowDragRender.renderClone;
      var rows = virtualData.length ? this.getRows(virtualData, leafColumns, true, lock, virtual) : this.getEmptyRow(leafColumns, lock);
      var body = rowDraggable ? _react["default"].createElement(_reactBeautifulDnd.Droppable, (0, _extends2["default"])({
        droppableId: "table",
        key: "table",
        renderClone: function renderClone(provided, snapshot, rubric) {
          if (overflowX && dragColumnAlign === _enum.DragColumnAlign.right && snapshot.isDragging) {
            var style = provided.draggableProps.style;

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

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

          if (_renderClone && (0, _isFunction["default"])(_renderClone)) {
            return _renderClone({
              provided: provided,
              snapshot: snapshot,
              key: record.id,
              hidden: false,
              lock: false,
              prefixCls: prefixCls,
              columns: leafColumnsBody,
              record: record,
              index: record.id,
              rubric: rubric
            });
          }

          return _react["default"].createElement(_TableRow["default"], {
            provided: provided,
            snapshot: snapshot,
            key: record.id,
            hidden: false,
            lock: false,
            columns: leafColumnsBody,
            record: record,
            index: record.id
          });
        },
        getContainerForClone: function getContainerForClone() {
          return (0, _Table.instance)(node.getClassName(), prefixCls).tbody;
        }
      }, droppableProps), function (droppableProvided) {
        return _react["default"].createElement("tbody", (0, _extends2["default"])({
          ref: function ref(_ref) {
            if (_ref) {
              _this.saveRef(_ref);

              droppableProvided.innerRef(_ref);
            }
          }
        }, droppableProvided.droppableProps, {
          className: "".concat(prefixCls, "-tbody")
        }), rows, droppableProvided.placeholder);
      }) : _react["default"].createElement("tbody", {
        ref: lock ? undefined : this.saveRef,
        className: "".concat(prefixCls, "-tbody")
      }, rows);
      return lock ? body : _react["default"].createElement(_resizeObserver["default"], {
        onResize: this.handleResize,
        resizeProp: "height"
      }, body);
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {
      this.processDataSetListener(true);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.processDataSetListener(false);
    }
  }, {
    key: "processDataSetListener",
    value: function processDataSetListener(flag) {
      var dataSet = this.context.tableStore.dataSet;

      if (dataSet) {
        var handler = flag ? dataSet.addEventListener : dataSet.removeEventListener;
        handler.call(dataSet, 'validate', this.handleDataSetValidate);
      }
    }
  }, {
    key: "handleDataSetValidate",
    value: function () {
      var _handleDataSetValidate = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee(_ref2) {
        var result, cell;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                result = _ref2.result;
                _context.next = 3;
                return result;

              case 3:
                if (_context.sent) {
                  _context.next = 6;
                  break;
                }

                cell = this.tableBody ? (0, _utils.findFirstFocusableInvalidElement)(this.tableBody) : null;

                if (cell) {
                  cell.focus();
                }

              case 6:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function handleDataSetValidate(_x) {
        return _handleDataSetValidate.apply(this, arguments);
      }

      return handleDataSetValidate;
    }()
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var lock = this.props.lock;
      var prefixCls = this.context.tableStore.prefixCls;

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

        if ((0, _componentClasses["default"])(node.wrapper).has("".concat(prefixCls, "-focused")) && !node.wrapper.contains(document.activeElement)) {
          node.focus();
        }
      }
    }
  }, {
    key: "getRows",
    value: function getRows(records, columns, expanded, lock, virtual) {
      var _this2 = this;

      return records.map(function (record, index) {
        return _this2.getRow(columns, record, virtual ? record.index : index, expanded, lock);
      });
    }
  }, {
    key: "getEmptyRow",
    value: function getEmptyRow(columns, lock) {
      var _this$context$tableSt5 = this.context.tableStore,
          prefixCls = _this$context$tableSt5.prefixCls,
          dataSet = _this$context$tableSt5.dataSet,
          emptyText = _this$context$tableSt5.emptyText,
          width = _this$context$tableSt5.width,
          style = _this$context$tableSt5.style;
      var tableWidth = width;

      if (style && style.width) {
        tableWidth = (0, _UnitConvertor.toPx)(style === null || style === void 0 ? void 0 : style.width) || width;
      }

      var styles = tableWidth ? {
        marginLeft: (0, _UnitConvertor.pxToRem)(tableWidth / 2)
      } : {
        transform: 'none',
        display: 'inline-block'
      };
      var tdStyle = tableWidth ? {} : {
        textAlign: 'center'
      };
      return _react["default"].createElement("tr", {
        className: "".concat(prefixCls, "-empty-row")
      }, _react["default"].createElement("td", {
        colSpan: columns.length,
        style: tdStyle
      }, _react["default"].createElement("div", {
        style: styles
      }, !lock && dataSet.status === _enum2.DataSetStatus.ready && emptyText)));
    }
  }, {
    key: "renderExpandedRows",
    value: function renderExpandedRows(columns, record, isExpanded, lock) {
      return this.getRows(record.children || [], columns, isExpanded, lock);
    }
  }, {
    key: "getRow",
    value: function getRow(columns, record, index, expanded, lock) {
      var _this$context$tableSt6 = this.context.tableStore,
          isTree = _this$context$tableSt6.isTree,
          _this$context$tableSt7 = _this$context$tableSt6.props.rowDragRender,
          rowDragRender = _this$context$tableSt7 === void 0 ? {} : _this$context$tableSt7,
          rowDraggable = _this$context$tableSt6.rowDraggable,
          dragColumnAlign = _this$context$tableSt6.dragColumnAlign;
      var draggableProps = rowDragRender.draggableProps;

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

      return rowDraggable && (!dragColumnAlign || dragColumnAlign === _enum.DragColumnAlign.right && lock !== _enum.ColumnLock.left || dragColumnAlign === _enum.DragColumnAlign.left && lock !== _enum.ColumnLock.right) ? _react["default"].createElement(_reactBeautifulDnd.Draggable, {
        draggableId: String(record.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,
          columns: columns,
          record: record,
          index: index
        }, draggableProps), children);
      }) : _react["default"].createElement(_TableRow["default"], {
        key: record.key,
        hidden: !expanded,
        lock: lock,
        columns: columns,
        record: record,
        index: index
      }, children);
    }
  }, {
    key: "syncBodyHeight",
    value: function syncBodyHeight() {
      var tableStore = this.context.tableStore;

      if (this.tableBody && !tableStore.hidden) {
        tableStore.bodyHeight = this.tableBody.offsetHeight;
      }
    }
  }, {
    key: "leafColumns",
    get: function get() {
      var tableStore = this.context.tableStore;
      var lock = this.props.lock;

      if (lock === _enum.ColumnLock.right) {
        return tableStore.rightLeafColumns.filter(function (_ref3) {
          var hidden = _ref3.hidden;
          return !hidden;
        });
      }

      if (lock) {
        return tableStore.leftLeafColumns.filter(function (_ref4) {
          var hidden = _ref4.hidden;
          return !hidden;
        });
      }

      return this.leafColumnsBody;
    }
  }, {
    key: "leafColumnsBody",
    get: function get() {
      var tableStore = this.context.tableStore;
      return tableStore.leafColumns.filter(function (_ref5) {
        var hidden = _ref5.hidden;
        return !hidden;
      });
    }
  }]);
  return TableTBody;
}(_react.Component);

TableTBody.displayName = 'TableTBody';
TableTBody.propTypes = {
  lock: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf([_enum.ColumnLock.right, _enum.ColumnLock.left])])
};
TableTBody.contextType = _TableContext["default"];
(0, _tslib.__decorate)([_mobx.computed], TableTBody.prototype, "leafColumns", null);
(0, _tslib.__decorate)([_mobx.computed], TableTBody.prototype, "leafColumnsBody", null);
(0, _tslib.__decorate)([_autobind["default"]], TableTBody.prototype, "handleResize", null);
(0, _tslib.__decorate)([_autobind["default"]], TableTBody.prototype, "saveRef", null);
(0, _tslib.__decorate)([_autobind["default"]], TableTBody.prototype, "processData", null);
(0, _tslib.__decorate)([_autobind["default"]], TableTBody.prototype, "handleDataSetValidate", null);
(0, _tslib.__decorate)([_autobind["default"]], TableTBody.prototype, "renderExpandedRows", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TableTBody.prototype, "syncBodyHeight", null);
TableTBody = (0, _tslib.__decorate)([_mobxReact.observer], TableTBody);
var _default = TableTBody;
exports["default"] = _default;
//# sourceMappingURL=TableTBody.js.map