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

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

import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import { action, computed } from 'mobx';
import classes from 'component-classes';
import raf from 'raf';
import { Draggable, Droppable } from 'react-beautiful-dnd';
import { pxToRem, toPx } from '../../../es/_util/UnitConvertor';
import ReactResizeObserver from '../../../es/_util/resizeObserver';
import isFunction from 'lodash/isFunction';
import TableContext from './TableContext';
import TableRow from './TableRow';
import { ColumnLock, DragColumnAlign } from './enum';
import ExpandedRow from './ExpandedRow';
import { DataSetStatus } from '../data-set/enum';
import autobind from '../_util/autobind';
import { instance } from './Table';
import { findFirstFocusableInvalidElement, isDraggingStyle } from './utils';

var TableTBody =
/*#__PURE__*/
function (_Component) {
  _inherits(TableTBody, _Component);

  var _super = _createSuper(TableTBody);

  function TableTBody() {
    _classCallCheck(this, TableTBody);

    return _super.apply(this, arguments);
  }

  _createClass(TableTBody, [{
    key: "handleResize",
    value: function handleResize() {
      if (this.nextFrameActionId !== undefined) {
        raf.cancel(this.nextFrameActionId);
      }

      this.nextFrameActionId = raf(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.createElement(Droppable, _extends({
        droppableId: "table",
        key: "table",
        renderClone: function renderClone(provided, snapshot, rubric) {
          if (overflowX && dragColumnAlign === DragColumnAlign.right && snapshot.isDragging) {
            var style = provided.draggableProps.style;

            if (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 && isFunction(_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.createElement(TableRow, {
            provided: provided,
            snapshot: snapshot,
            key: record.id,
            hidden: false,
            lock: false,
            columns: leafColumnsBody,
            record: record,
            index: record.id
          });
        },
        getContainerForClone: function getContainerForClone() {
          return instance(node.getClassName(), prefixCls).tbody;
        }
      }, droppableProps), function (droppableProvided) {
        return React.createElement("tbody", _extends({
          ref: function ref(_ref) {
            if (_ref) {
              _this.saveRef(_ref);

              droppableProvided.innerRef(_ref);
            }
          }
        }, droppableProvided.droppableProps, {
          className: "".concat(prefixCls, "-tbody")
        }), rows, droppableProvided.placeholder);
      }) : React.createElement("tbody", {
        ref: lock ? undefined : this.saveRef,
        className: "".concat(prefixCls, "-tbody")
      }, rows);
      return lock ? body : React.createElement(ReactResizeObserver, {
        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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee(_ref2) {
        var result, cell;
        return _regeneratorRuntime.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 ? 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 (classes(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 = toPx(style === null || style === void 0 ? void 0 : style.width) || width;
      }

      var styles = tableWidth ? {
        marginLeft: pxToRem(tableWidth / 2)
      } : {
        transform: 'none',
        display: 'inline-block'
      };
      var tdStyle = tableWidth ? {} : {
        textAlign: 'center'
      };
      return React.createElement("tr", {
        className: "".concat(prefixCls, "-empty-row")
      }, React.createElement("td", {
        colSpan: columns.length,
        style: tdStyle
      }, React.createElement("div", {
        style: styles
      }, !lock && dataSet.status === 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.createElement(ExpandedRow, {
        record: record,
        columns: columns,
        lock: lock
      }, this.renderExpandedRows);
      return rowDraggable && (!dragColumnAlign || dragColumnAlign === DragColumnAlign.right && lock !== ColumnLock.left || dragColumnAlign === DragColumnAlign.left && lock !== ColumnLock.right) ? React.createElement(Draggable, {
        draggableId: String(record.key),
        index: index,
        key: record.key
      }, function (provided, snapshot) {
        return React.createElement(TableRow, _extends({
          provided: provided,
          snapshot: snapshot,
          key: record.key,
          hidden: !expanded,
          lock: lock,
          columns: columns,
          record: record,
          index: index
        }, draggableProps), children);
      }) : React.createElement(TableRow, {
        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 === 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;
}(Component);

TableTBody.displayName = 'TableTBody';
TableTBody.propTypes = {
  lock: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([ColumnLock.right, ColumnLock.left])])
};
TableTBody.contextType = TableContext;

__decorate([computed], TableTBody.prototype, "leafColumns", null);

__decorate([computed], TableTBody.prototype, "leafColumnsBody", null);

__decorate([autobind], TableTBody.prototype, "handleResize", null);

__decorate([autobind], TableTBody.prototype, "saveRef", null);

__decorate([autobind], TableTBody.prototype, "processData", null);

__decorate([autobind], TableTBody.prototype, "handleDataSetValidate", null);

__decorate([autobind], TableTBody.prototype, "renderExpandedRows", null);

__decorate([autobind, action], TableTBody.prototype, "syncBodyHeight", null);

TableTBody = __decorate([observer], TableTBody);
export default TableTBody;
//# sourceMappingURL=TableTBody.js.map