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

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

"use strict";

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

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

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

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

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

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

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

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

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 = _interopRequireDefault(require("react"));

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

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

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

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

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

var _pick = _interopRequireDefault(require("lodash/pick"));

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

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

var _isNil = _interopRequireDefault(require("lodash/isNil"));

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

var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _mobx = require("mobx");

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

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

var _warning = _interopRequireDefault(require("../../../lib/_util/warning"));

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

var _measureScrollbar = _interopRequireDefault(require("../../../lib/_util/measureScrollbar"));

var _KeyCode = _interopRequireDefault(require("../../../lib/_util/KeyCode"));

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

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

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

var _TableHeaderCell = _interopRequireDefault(require("./TableHeaderCell"));

var _TableStore = _interopRequireDefault(require("./TableStore"));

var _TableHeader = _interopRequireDefault(require("./TableHeader"));

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

var _Pagination = _interopRequireDefault(require("../pagination/Pagination"));

var _spin = _interopRequireDefault(require("../spin"));

var _DataSetComponent2 = _interopRequireDefault(require("../data-set/DataSetComponent"));

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

var _TableWrapper = _interopRequireDefault(require("./TableWrapper"));

var _TableTBody = _interopRequireDefault(require("./TableTBody"));

var _TableFooter = _interopRequireDefault(require("./TableFooter"));

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

var _queryBar = _interopRequireDefault(require("./query-bar"));

var _TableToolBar = _interopRequireDefault(require("./query-bar/TableToolBar"));

var _TableFilterBar = _interopRequireDefault(require("./query-bar/TableFilterBar"));

var _TableAdvancedQueryBar = _interopRequireDefault(require("./query-bar/TableAdvancedQueryBar"));

var _TableProfessionalBar = _interopRequireDefault(require("./query-bar/TableProfessionalBar"));

var _TableDynamicFilterBar = _interopRequireDefault(require("./query-bar/TableDynamicFilterBar"));

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

var _TableBody = _interopRequireDefault(require("./TableBody"));

var _VirtualWrapper = _interopRequireDefault(require("./VirtualWrapper"));

var _SelectionTips = _interopRequireDefault(require("./SelectionTips"));

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

var _enum3 = require("../core/enum");

var _StickyShadow = _interopRequireDefault(require("./StickyShadow"));

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 buttonsEnumType = _propTypes["default"].oneOf([_enum.TableButtonType.add, _enum.TableButtonType.save, _enum.TableButtonType.remove, _enum.TableButtonType["delete"], _enum.TableButtonType.reset, _enum.TableButtonType.query, _enum.TableButtonType["export"], _enum.TableButtonType.expandAll, _enum.TableButtonType.collapseAll]);

exports.buttonsEnumType = buttonsEnumType;

var _instance; // 构造一个单例table来防止body下不能有table元素的报错


var instance = function instance(wrapperClassName, prefixCls) {
  // Using a table as the portal so that we do not get react
  // warnings when mounting a tr element
  var _tableContain = function _tableContain() {
    var table = document.createElement('table');

    if (wrapperClassName) {
      table.className = wrapperClassName;
    }

    var thead = document.createElement('thead');
    thead.className = "".concat(prefixCls, "-thead");
    table.appendChild(thead);
    var headtr = document.createElement('tr');
    thead.appendChild(headtr);
    var tbody = document.createElement('tbody');
    tbody.className = "".concat(prefixCls, "-tbody");
    table.appendChild(tbody);

    if (!document.body) {
      throw new Error('document.body required a body to append');
    }

    document.body.appendChild(table);
    return {
      // @ts-ignore
      tbody: tbody,
      // @ts-ignore
      headtr: headtr
    };
  };

  if (_instance) {
    return _instance;
  }

  return _instance = _tableContain();
};

exports.instance = instance;

var Table =
/*#__PURE__*/
function (_DataSetComponent) {
  (0, _inherits2["default"])(Table, _DataSetComponent);

  var _super = _createSuper(Table);

  function Table() {
    var _this;

    (0, _classCallCheck2["default"])(this, Table);
    _this = _super.apply(this, arguments);
    _this.tableStore = new _TableStore["default"]((0, _assertThisInitialized2["default"])(_this));
    _this.wrapperWidth = [];
    /**
     * 滚动结束隐藏spin
     */

    _this.setSpin = (0, _debounce["default"])(function () {
      var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
          refSpin = _assertThisInitialize.refSpin;

      if (refSpin) {
        refSpin.style.display = 'none';
      }
    }, 300);
    return _this;
  }

  (0, _createClass2["default"])(Table, [{
    key: "saveVirtualSpinRef",
    value: function saveVirtualSpinRef(node) {
      this.refSpin = node;
    }
  }, {
    key: "saveResizeRef",
    value: function saveResizeRef(node) {
      this.resizeLine = node;
    }
  }, {
    key: "useFocusedClassName",
    value: function useFocusedClassName() {
      return false;
    }
  }, {
    key: "setCode",
    value: function setCode(props) {
      var customizedCode = props.customizedCode;

      if (customizedCode) {
        this.code = customizedCode;
      } else {
        (0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "setCode", this).call(this, props);
      }
    }
  }, {
    key: "handleResize",
    value: function handleResize(width) {
      var element = this.element,
          tableStore = this.tableStore,
          wrapperWidth = this.wrapperWidth;

      if (width !== undefined) {
        var duplicate = wrapperWidth.includes(width);
        wrapperWidth.unshift(width);
        window.clearTimeout(this.wrapperWidthTimer);
        this.wrapperWidthTimer = window.setTimeout(function () {
          wrapperWidth.pop();
        }, 500);

        if (wrapperWidth.length > 2) {
          wrapperWidth.pop();
        }

        if (duplicate) {
          return;
        }
      }

      if (!element.offsetParent) {
        tableStore.styledHidden = true;
      } else if (!tableStore.hidden) {
        this.syncSizeInFrame(width);
      } else {
        tableStore.styledHidden = false;
      }
    }
  }, {
    key: "handleWindowResize",
    value: function handleWindowResize() {
      this.handleResize();
    }
  }, {
    key: "handleDataSetLoad",
    value: function handleDataSetLoad() {
      var tableStore = this.tableStore;

      if (tableStore.performanceEnabled) {
        tableStore.performanceOn = true;
      }

      this.initDefaultExpandedRows();
    }
  }, {
    key: "handleDataSetCreate",
    value: function handleDataSetCreate(_ref) {
      var record = _ref.record,
          dataSet = _ref.dataSet;
      var tableStore = this.tableStore;

      if (tableStore.inlineEdit) {
        if (tableStore.currentEditRecord) {
          tableStore.currentEditRecord.reset();
          dataSet.remove(record);
        } else {
          tableStore.currentEditRecord = record;
        }
      }
    }
  }, {
    key: "handleDataSetValidate",
    value: function () {
      var _handleDataSetValidate = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee(_ref2) {
        var result, dataSet, _dataSet$getValidatio, _dataSet$getValidatio2, firstInvalidRecord, errors, record, _errors, name, cell;

        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                result = _ref2.result, dataSet = _ref2.dataSet;
                _context.next = 3;
                return result;

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

                _dataSet$getValidatio = dataSet.getValidationErrors(), _dataSet$getValidatio2 = (0, _slicedToArray2["default"])(_dataSet$getValidatio, 1), firstInvalidRecord = _dataSet$getValidatio2[0];

                if (firstInvalidRecord) {
                  errors = firstInvalidRecord.errors, record = firstInvalidRecord.record;

                  if (errors.length) {
                    _errors = (0, _slicedToArray2["default"])(errors, 1), name = _errors[0].field.name;
                    cell = (0, _utils.findCell)(this.tableStore, name, undefined, record);

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

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

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

      return handleDataSetValidate;
    }()
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      var tableStore = this.tableStore;
      var keyboard = tableStore.keyboard;

      if (!tableStore.editing) {
        try {
          var dataSet = this.props.dataSet;
          var ctrlKey = e.ctrlKey || e.metaKey;
          var altKey = e.altKey;
          var shiftKey = e.shiftKey;

          switch (e.keyCode) {
            case _KeyCode["default"].UP:
              if (shiftKey && keyboard) {
                this.handleKeyDownUpShift(e);
              } else {
                this.handleKeyDownUp(e);
              }

              break;

            case _KeyCode["default"].DOWN:
              if (shiftKey && keyboard) {
                this.handleKeyDownDownShift(e);
              } else {
                this.handleKeyDownDown(e);
              }

              break;

            case _KeyCode["default"].RIGHT:
              this.handleKeyDownRight(e);
              break;

            case _KeyCode["default"].LEFT:
              this.handleKeyDownLeft(e);
              break;

            case _KeyCode["default"].PAGE_UP:
              e.preventDefault();
              dataSet.prePage();
              break;

            case _KeyCode["default"].PAGE_DOWN:
              e.preventDefault();
              dataSet.nextPage();
              break;

            case _KeyCode["default"].HOME:
              this.handleKeyDownHome(e);
              break;

            case _KeyCode["default"].END:
              this.handleKeyDownEnd(e);
              break;

            case _KeyCode["default"].S:
              if (ctrlKey === true && keyboard) this.handleKeyDownCTRLS(e);
              break;

            case _KeyCode["default"].N:
              if (altKey === true && keyboard) this.handleKeyDownCTRLN(e);
              break;

            case _KeyCode["default"].D:
              if (ctrlKey === true && keyboard) this.handleKeyDownCTRLD(e);
              break;

            case _KeyCode["default"].DELETE:
              if (altKey === true && keyboard) this.handleKeyDownCTRLDELETE(e);
              break;

            default:
          }
        } catch (error) {
          (0, _warning["default"])(false, error.message);
        }
      }

      var _this$props$onKeyDown = this.props.onKeyDown,
          onKeyDown = _this$props$onKeyDown === void 0 ? _noop["default"] : _this$props$onKeyDown;
      onKeyDown(e);
    }
  }, {
    key: "focusRow",
    value: function focusRow(row) {
      if (row) {
        var index = row.dataset.index;

        if (index) {
          var dataSet = this.props.dataSet;
          var record = dataSet.findRecordById(index);

          if (record) {
            dataSet.current = record;
            return record;
          }
        }
      }
    }
  }, {
    key: "handleKeyDownHome",
    value: function () {
      var _handleKeyDownHome = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee2(e) {
        var dataSet;
        return _regenerator["default"].wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                e.preventDefault();
                dataSet = this.props.dataSet;

                if (this.tableStore.isTree) {
                  _context2.next = 5;
                  break;
                }

                _context2.next = 5;
                return dataSet.first();

              case 5:
                this.focusRow(this.firstRow);

              case 6:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this);
      }));

      function handleKeyDownHome(_x2) {
        return _handleKeyDownHome.apply(this, arguments);
      }

      return handleKeyDownHome;
    }()
  }, {
    key: "handleKeyDownEnd",
    value: function () {
      var _handleKeyDownEnd = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee3(e) {
        var dataSet;
        return _regenerator["default"].wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                e.preventDefault();
                dataSet = this.props.dataSet;

                if (this.tableStore.isTree) {
                  _context3.next = 5;
                  break;
                }

                _context3.next = 5;
                return dataSet.last();

              case 5:
                this.focusRow(this.lastRow);

              case 6:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3, this);
      }));

      function handleKeyDownEnd(_x3) {
        return _handleKeyDownEnd.apply(this, arguments);
      }

      return handleKeyDownEnd;
    }()
  }, {
    key: "handleKeyDownCTRLS",
    value: function () {
      var _handleKeyDownCTRLS = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee4(e) {
        var dataSet;
        return _regenerator["default"].wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                e.preventDefault();
                dataSet = this.tableStore.dataSet;
                dataSet.submit();

              case 3:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4, this);
      }));

      function handleKeyDownCTRLS(_x4) {
        return _handleKeyDownCTRLS.apply(this, arguments);
      }

      return handleKeyDownCTRLS;
    }()
  }, {
    key: "handleKeyDownCTRLN",
    value: function () {
      var _handleKeyDownCTRLN = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee5(e) {
        var _this$tableStore, dataSet, editors;

        return _regenerator["default"].wrap(function _callee5$(_context5) {
          while (1) {
            switch (_context5.prev = _context5.next) {
              case 0:
                _this$tableStore = this.tableStore, dataSet = _this$tableStore.dataSet, editors = _this$tableStore.editors;

                if (editors.size) {
                  e.preventDefault();
                  dataSet.create({}, 0);
                }

              case 2:
              case "end":
                return _context5.stop();
            }
          }
        }, _callee5, this);
      }));

      function handleKeyDownCTRLN(_x5) {
        return _handleKeyDownCTRLN.apply(this, arguments);
      }

      return handleKeyDownCTRLN;
    }() // TODO: To be optimized

  }, {
    key: "handleKeyDownCTRLD",
    value: function () {
      var _handleKeyDownCTRLD = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee6(e) {
        var currentRow, tableStore, dataSet, currentElementSibling, previousElementSibling, index, currentIndex, record, currentRecord, cloneRecodData, dealCloneRecodData, editeColumn, uniqueFieldIterator, uniqueFieldNames;
        return _regenerator["default"].wrap(function _callee6$(_context6) {
          while (1) {
            switch (_context6.prev = _context6.next) {
              case 0:
                e.preventDefault();
                currentRow = this.currentRow, tableStore = this.tableStore;
                dataSet = tableStore.dataSet;
                currentElementSibling = null; // to justice it can be change or standards compliant

                if ((0, _utils.isCanEdictingRow)(currentRow)) {
                  currentElementSibling = currentRow;
                }

                if (currentElementSibling && tableStore && dataSet) {
                  previousElementSibling = (0, _utils.findIndexedSibling)(currentElementSibling, -1);

                  if (previousElementSibling) {
                    index = previousElementSibling.dataset.index;
                    currentIndex = currentElementSibling.dataset.index;

                    if (index && currentIndex) {
                      record = dataSet.findRecordById(index);
                      currentRecord = dataSet.findRecordById(currentIndex); // exculde the primery key and merge has columns which has edictor

                      if (record && currentRecord && tableStore) {
                        cloneRecodData = record.clone().toData() || {};
                        dealCloneRecodData = {};
                        editeColumn = tableStore.columns.filter(function (column) {
                          return !!column.editor;
                        }).reduce(function (accumulator, nowValue) {
                          return [].concat((0, _toConsumableArray2["default"])(accumulator), [nowValue.name]);
                        }, []).filter(function (v) {
                          return !(v === null || v === undefined || v === '');
                        });

                        if (editeColumn && editeColumn.length > 0) {
                          editeColumn.forEach(function (element) {
                            if (element) {
                              dealCloneRecodData[element] = cloneRecodData[element];
                            }
                          });
                        } // remove the unique name of fields


                        uniqueFieldIterator = new Map((0, _toConsumableArray2["default"])(dataSet.fields.entries()).filter(function (_ref3) {
                          var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
                              _key = _ref4[0],
                              field = _ref4[1];

                          return !!field.get('unique');
                        })).keys();
                        uniqueFieldNames = Array.from(uniqueFieldIterator);

                        if (uniqueFieldNames && uniqueFieldNames.length > 0) {
                          uniqueFieldNames.forEach(function (element) {
                            if (element) {
                              delete dealCloneRecodData[element];
                            }
                          });
                        }

                        currentRecord.set(dealCloneRecodData);
                      }
                    }
                  }
                }

              case 6:
              case "end":
                return _context6.stop();
            }
          }
        }, _callee6, this);
      }));

      function handleKeyDownCTRLD(_x6) {
        return _handleKeyDownCTRLD.apply(this, arguments);
      }

      return handleKeyDownCTRLD;
    }()
  }, {
    key: "handleKeyDownCTRLDELETE",
    value: function () {
      var _handleKeyDownCTRLDELETE = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee7(e) {
        var dataSet;
        return _regenerator["default"].wrap(function _callee7$(_context7) {
          while (1) {
            switch (_context7.prev = _context7.next) {
              case 0:
                e.preventDefault();
                dataSet = this.tableStore.dataSet;
                dataSet["delete"](dataSet.selected);

              case 3:
              case "end":
                return _context7.stop();
            }
          }
        }, _callee7, this);
      }));

      function handleKeyDownCTRLDELETE(_x7) {
        return _handleKeyDownCTRLDELETE.apply(this, arguments);
      }

      return handleKeyDownCTRLDELETE;
    }()
  }, {
    key: "handleKeyDownUp",
    value: function () {
      var _handleKeyDownUp = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee8(e) {
        var currentRow, returnRecod, previousElementSibling, dataSet;
        return _regenerator["default"].wrap(function _callee8$(_context8) {
          while (1) {
            switch (_context8.prev = _context8.next) {
              case 0:
                e.preventDefault();
                currentRow = this.currentRow;

                if (!currentRow) {
                  _context8.next = 14;
                  break;
                }

                previousElementSibling = (0, _utils.findIndexedSibling)(currentRow, -1);

                if (!previousElementSibling) {
                  _context8.next = 8;
                  break;
                }

                returnRecod = this.focusRow(previousElementSibling);
                _context8.next = 12;
                break;

              case 8:
                dataSet = this.props.dataSet;
                _context8.next = 11;
                return dataSet.prePage();

              case 11:
                returnRecod = this.focusRow(this.lastRow);

              case 12:
                if (!returnRecod) {
                  _context8.next = 14;
                  break;
                }

                return _context8.abrupt("return", Promise.resolve(returnRecod));

              case 14:
                return _context8.abrupt("return", Promise.reject());

              case 15:
              case "end":
                return _context8.stop();
            }
          }
        }, _callee8, this);
      }));

      function handleKeyDownUp(_x8) {
        return _handleKeyDownUp.apply(this, arguments);
      }

      return handleKeyDownUp;
    }()
  }, {
    key: "handleKeyDownDown",
    value: function () {
      var _handleKeyDownDown = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee9(e) {
        var currentRow, returnRecod, nextElementSibling, dataSet;
        return _regenerator["default"].wrap(function _callee9$(_context9) {
          while (1) {
            switch (_context9.prev = _context9.next) {
              case 0:
                e.preventDefault();
                currentRow = this.currentRow;

                if (!currentRow) {
                  _context9.next = 14;
                  break;
                }

                nextElementSibling = (0, _utils.findIndexedSibling)(currentRow, 1);

                if (!nextElementSibling) {
                  _context9.next = 8;
                  break;
                }

                returnRecod = this.focusRow(nextElementSibling);
                _context9.next = 12;
                break;

              case 8:
                dataSet = this.props.dataSet;
                _context9.next = 11;
                return dataSet.nextPage();

              case 11:
                returnRecod = this.focusRow(this.firstRow);

              case 12:
                if (!returnRecod) {
                  _context9.next = 14;
                  break;
                }

                return _context9.abrupt("return", Promise.resolve(returnRecod));

              case 14:
                return _context9.abrupt("return", Promise.reject());

              case 15:
              case "end":
                return _context9.stop();
            }
          }
        }, _callee9, this);
      }));

      function handleKeyDownDown(_x9) {
        return _handleKeyDownDown.apply(this, arguments);
      }

      return handleKeyDownDown;
    }()
  }, {
    key: "handleKeyDownDownShift",
    value: function () {
      var _handleKeyDownDownShift = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee10(e) {
        var dataSet, currentRow, index, record, currentRecord;
        return _regenerator["default"].wrap(function _callee10$(_context10) {
          while (1) {
            switch (_context10.prev = _context10.next) {
              case 0:
                e.preventDefault();
                dataSet = this.tableStore.dataSet;
                currentRow = this.currentRow;

                if (!(currentRow && (0, _utils.isCanEdictingRow)(currentRow))) {
                  _context10.next = 22;
                  break;
                }

                index = currentRow.dataset.index;

                if (!index) {
                  _context10.next = 20;
                  break;
                }

                record = dataSet.findRecordById(index);

                if (!record) {
                  _context10.next = 20;
                  break;
                }

                if (record.selectable) {
                  _context10.next = 12;
                  break;
                }

                this.handleKeyDownDown(e);
                _context10.next = 20;
                break;

              case 12:
                if (record.isSelected) {
                  _context10.next = 16;
                  break;
                }

                dataSet.select(record);
                _context10.next = 20;
                break;

              case 16:
                _context10.next = 18;
                return this.handleKeyDownDown(e);

              case 18:
                currentRecord = _context10.sent;

                if (currentRecord && dataSet) {
                  dataSet.select(currentRecord);
                }

              case 20:
                _context10.next = 23;
                break;

              case 22:
                this.handleKeyDownDown(e);

              case 23:
              case "end":
                return _context10.stop();
            }
          }
        }, _callee10, this);
      }));

      function handleKeyDownDownShift(_x10) {
        return _handleKeyDownDownShift.apply(this, arguments);
      }

      return handleKeyDownDownShift;
    }()
  }, {
    key: "handleKeyDownUpShift",
    value: function () {
      var _handleKeyDownUpShift = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee11(e) {
        var dataSet, currentRow, index, record, currentRecord;
        return _regenerator["default"].wrap(function _callee11$(_context11) {
          while (1) {
            switch (_context11.prev = _context11.next) {
              case 0:
                e.preventDefault();
                dataSet = this.tableStore.dataSet;
                currentRow = this.currentRow;

                if (!(currentRow && (0, _utils.isCanEdictingRow)(currentRow))) {
                  _context11.next = 22;
                  break;
                }

                index = currentRow.dataset.index;

                if (!index) {
                  _context11.next = 20;
                  break;
                }

                record = dataSet.findRecordById(index);

                if (!record) {
                  _context11.next = 20;
                  break;
                }

                if (record.selectable) {
                  _context11.next = 12;
                  break;
                }

                this.handleKeyDownUp(e);
                _context11.next = 20;
                break;

              case 12:
                if (record.isSelected) {
                  _context11.next = 16;
                  break;
                }

                dataSet.select(record);
                _context11.next = 20;
                break;

              case 16:
                _context11.next = 18;
                return this.handleKeyDownUp(e);

              case 18:
                currentRecord = _context11.sent;

                if (currentRecord) {
                  dataSet.select(currentRecord);
                }

              case 20:
                _context11.next = 23;
                break;

              case 22:
                this.handleKeyDownUp(e);

              case 23:
              case "end":
                return _context11.stop();
            }
          }
        }, _callee11, this);
      }));

      function handleKeyDownUpShift(_x11) {
        return _handleKeyDownUpShift.apply(this, arguments);
      }

      return handleKeyDownUpShift;
    }()
  }, {
    key: "handleKeyDownRight",
    value: function handleKeyDownRight(e) {
      var tableStore = this.tableStore,
          _this$props = this.props,
          expandedRowRenderer = _this$props.expandedRowRenderer,
          dataSet = _this$props.dataSet;

      if (tableStore.isTree || expandedRowRenderer) {
        var current = dataSet.current;

        if (current) {
          e.preventDefault();
          tableStore.setRowExpanded(current, true);
        }
      }
    }
  }, {
    key: "handleKeyDownLeft",
    value: function handleKeyDownLeft(e) {
      var tableStore = this.tableStore,
          _this$props2 = this.props,
          expandedRowRenderer = _this$props2.expandedRowRenderer,
          dataSet = _this$props2.dataSet;

      if (tableStore.isTree || expandedRowRenderer) {
        var current = dataSet.current;

        if (current) {
          e.preventDefault();
          tableStore.setRowExpanded(current, false);
        }
      }
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "getOmitPropsKeys", this).call(this).concat(['columns', 'header', 'showHeader', 'footer', 'border', 'columnEditorBorder', 'selectionMode', 'rowBoxPlacement', 'alwaysShowRowBox', 'showSelectionTips', 'showSelectionCachedButton', 'showCachedSelection', 'onShowCachedSelectionChange', 'showAllPageSelectionButton', 'onRow', 'onColumnResize', 'rowRenderer', 'buttons', 'buttonsLimit', 'rowHeight', 'queryFields', 'queryFieldsLimit', 'summaryFieldsLimit', 'queryBar', 'queryBarProps', 'autoFocus', 'summaryBar', 'defaultRowExpanded', 'expandRowByClick', 'expandedRowRenderer', 'expandIconColumnIndex', 'indentSize', 'filter', 'mode', 'editMode', 'filterBarFieldName', 'filterBarPlaceholder', 'pagination', 'highLightRow', 'selectedHighLightRow', 'columnResizable', 'columnTitleEditable', 'pristine', 'expandIcon', 'spin', 'virtual', 'virtualCell', 'virtualSpin', 'autoWidth', 'autoHeight', 'autoFootHeight', 'useMouseBatchChoose', 'autoMaxWidth', 'dragColumnAlign', 'columnDraggable', 'rowDraggable', 'onDragEnd', 'rowDragRender', 'columnsDragRender', 'editorNextKeyEnterDown', 'onDragEndBefore', 'keyboard', 'dynamicFilterBar', 'parityRow', 'rowNumber', 'treeAsync', 'treeLoadData', 'customizable', 'customizedCode', 'dragColumn', 'dragRow', 'clientExportQuantity', 'treeQueryExpanded', 'summary', 'aggregation', 'onAggregationChange', 'showRemovedRow', 'searchCode']);
    }
  }, {
    key: "getWrapperProps",
    value: function getWrapperProps() {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var autoWidth = this.props.autoWidth;
      var wrapperProps = (0, _objectSpread2["default"])({}, props);

      if (autoWidth) {
        var _this$tableStore2 = this.tableStore,
            columnGroups = _this$tableStore2.columnGroups,
            overflowY = _this$tableStore2.overflowY,
            border = _this$tableStore2.border;
        wrapperProps.style = {
          width: columnGroups.width + (overflowY ? (0, _measureScrollbar["default"])() : 0) + (border ? 2 : 0)
        };
      }

      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "getWrapperProps", this).call(this, wrapperProps);
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = (0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "getOtherProps", this).call(this);
      otherProps.onKeyDown = this.handleKeyDown;
      var rowHeight = this.tableStore.rowHeight;

      if (rowHeight === 'auto') {
        delete otherProps.style;
      } else {
        otherProps.style = {
          lineHeight: (0, _UnitConvertor.pxToRem)(rowHeight)
        };
      }

      return otherProps;
    }
  }, {
    key: "getClassName",
    value: function getClassName() {
      var _get$call;

      var _this$tableStore3 = this.tableStore,
          border = _this$tableStore3.border,
          parityRow = _this$tableStore3.parityRow,
          aggregation = _this$tableStore3.aggregation,
          size = _this$tableStore3.size,
          prefixCls = this.prefixCls;
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "getClassName", this).call(this, (_get$call = {}, (0, _defineProperty2["default"])(_get$call, "".concat(prefixCls, "-").concat(size), size !== _enum3.Size["default"]), (0, _defineProperty2["default"])(_get$call, "".concat(prefixCls, "-bordered"), border), (0, _defineProperty2["default"])(_get$call, "".concat(prefixCls, "-parity-row"), parityRow), (0, _defineProperty2["default"])(_get$call, "".concat(prefixCls, "-aggregation"), aggregation), _get$call));
    }
    /**
     * 获取传入的 Spin props
     */

  }, {
    key: "getSpinProps",
    value: function getSpinProps() {
      var _this$props3 = this.props,
          spin = _this$props3.spin,
          dataSet = _this$props3.dataSet;
      if (spin && !(0, _isUndefined["default"])(spin.spinning)) return (0, _objectSpread2["default"])({}, spin);
      var loading = this.tableStore.loading;

      if (loading) {
        return (0, _objectSpread2["default"])({}, spin, {
          spinning: true
        });
      }

      return (0, _objectSpread2["default"])({}, spin, {
        dataSet: dataSet
      });
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {
      this.initDefaultExpandedRows();
      this.connect();
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "componentDidMount", this).call(this);
      this.syncSize();
      this.syncSizeInFrame();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);
      this.disconnect();
      this.tableStore.updateProps(nextProps);
      this.connect();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.disconnect();

      if (this.scrollId !== undefined) {
        _raf["default"].cancel(this.scrollId);
      }

      var bodyHeightReaction = this.bodyHeightReaction;

      if (bodyHeightReaction) {
        bodyHeightReaction();
      }
    }
  }, {
    key: "connect",
    value: function connect() {
      this.processDataSetListener(true);
      var style = this.props.style;

      var _ref5 = style || {},
          maxHeight = _ref5.maxHeight,
          minHeight = _ref5.minHeight;

      if (this.tableStore.heightType === _enum.TableHeightType.flex || (0, _isString["default"])(maxHeight) && (0, _UnitConvertor.isCalcSize)(maxHeight) || (0, _isString["default"])(minHeight) && (0, _UnitConvertor.isCalcSize)(minHeight)) {
        window.addEventListener('resize', this.handleWindowResize, false);
      }
    }
  }, {
    key: "disconnect",
    value: function disconnect() {
      this.processDataSetListener(false);
      window.removeEventListener('resize', this.handleWindowResize, false);
    }
  }, {
    key: "processDataSetListener",
    value: function processDataSetListener(flag) {
      var _this$tableStore4 = this.tableStore,
          isTree = _this$tableStore4.isTree,
          dataSet = _this$tableStore4.dataSet,
          inlineEdit = _this$tableStore4.inlineEdit,
          performanceEnabled = _this$tableStore4.performanceEnabled;

      if (dataSet) {
        var handler = flag ? dataSet.addEventListener : dataSet.removeEventListener;

        if (isTree || performanceEnabled) {
          handler.call(dataSet, _enum2.DataSetEvents.load, this.handleDataSetLoad);
        }

        if (inlineEdit) {
          handler.call(dataSet, _enum2.DataSetEvents.create, this.handleDataSetCreate);
        }

        handler.call(dataSet, _enum2.DataSetEvents.validate, this.handleDataSetValidate);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$tableStore5 = this.tableStore,
          virtual = _this$tableStore5.virtual,
          overflowX = _this$tableStore5.overflowX,
          overflowY = _this$tableStore5.overflowY,
          isAnyColumnsLeftLock = _this$tableStore5.isAnyColumnsLeftLock,
          isAnyColumnsRightLock = _this$tableStore5.isAnyColumnsRightLock,
          _this$props4 = this.props,
          dataSet = _this$props4.dataSet,
          style = _this$props4.style,
          treeQueryExpanded = _this$props4.treeQueryExpanded,
          spin = _this$props4.spin,
          virtualSpin = _this$props4.virtualSpin,
          buttons = _this$props4.buttons,
          buttonsLimit = _this$props4.buttonsLimit,
          queryFields = _this$props4.queryFields,
          queryFieldsLimit = _this$props4.queryFieldsLimit,
          summaryFieldsLimit = _this$props4.summaryFieldsLimit,
          filterBarFieldName = _this$props4.filterBarFieldName,
          filterBarPlaceholder = _this$props4.filterBarPlaceholder,
          summaryBar = _this$props4.summaryBar,
          dynamicFilterBar = _this$props4.dynamicFilterBar,
          clientExportQuantity = _this$props4.clientExportQuantity,
          indentSize = _this$props4.indentSize,
          selectionMode = _this$props4.selectionMode,
          rowRenderer = _this$props4.rowRenderer,
          onRow = _this$props4.onRow,
          onColumnResize = _this$props4.onColumnResize,
          expandedRowRenderer = _this$props4.expandedRowRenderer,
          expandRowByClick = _this$props4.expandRowByClick,
          rowDragRender = _this$props4.rowDragRender,
          columnsDragRender = _this$props4.columnsDragRender,
          mode = _this$props4.mode,
          pristine = _this$props4.pristine,
          showSelectionCachedButton = _this$props4.showSelectionCachedButton,
          onShowCachedSelectionChange = _this$props4.onShowCachedSelectionChange,
          autoMaxWidth = _this$props4.autoMaxWidth,
          summary = _this$props4.summary,
          searchCode = _this$props4.searchCode,
          tableStore = this.tableStore,
          prefixCls = this.prefixCls;
      var content = this.getTable();
      var pagination = this.getPagination(_enum.TablePaginationPosition.top);
      var tableSpinProps = (0, _configure.getConfig)('tableSpinProps');
      var tableButtonsLimit = (0, _isNil["default"])(buttonsLimit) ? (0, _configure.getConfig)('tableButtonsLimit') : buttonsLimit;
      var styleHeight = style ? (0, _UnitConvertor.toPx)(style.height) : 0;
      return _react["default"].createElement(_resizeObserver["default"], {
        resizeProp: "width",
        onResize: this.handleResize
      }, _react["default"].createElement("div", (0, _extends2["default"])({}, this.getWrapperProps()), _react["default"].createElement(_TableContext.TableContextProvider, {
        code: this.code,
        prefixCls: prefixCls,
        dataSet: dataSet,
        tableStore: tableStore,
        indentSize: indentSize,
        selectionMode: selectionMode,
        onRow: onRow,
        onColumnResize: onColumnResize,
        rowRenderer: rowRenderer,
        expandedRowRenderer: expandedRowRenderer,
        expandRowByClick: expandRowByClick,
        rowDragRender: rowDragRender,
        columnsDragRender: columnsDragRender,
        showSelectionCachedButton: showSelectionCachedButton,
        onShowCachedSelectionChange: onShowCachedSelectionChange,
        autoMaxWidth: autoMaxWidth,
        pristine: pristine,
        summary: summary,
        isTree: mode === _enum.TableMode.tree
      }, this.getHeader(), _react["default"].createElement(_queryBar["default"], {
        buttons: buttons,
        buttonsLimit: tableButtonsLimit,
        pagination: pagination,
        queryFields: queryFields,
        clientExportQuantity: clientExportQuantity,
        summaryBar: summaryBar,
        dynamicFilterBar: dynamicFilterBar,
        queryFieldsLimit: queryFieldsLimit,
        summaryFieldsLimit: summaryFieldsLimit,
        filterBarFieldName: filterBarFieldName,
        filterBarPlaceholder: filterBarPlaceholder,
        treeQueryExpanded: treeQueryExpanded,
        searchCode: searchCode
      }), _react["default"].createElement(_spin["default"], (0, _extends2["default"])({}, tableSpinProps, this.getSpinProps(), {
        key: "content"
      }), virtual && virtualSpin && _react["default"].createElement("div", {
        ref: this.saveVirtualSpinRef,
        style: {
          display: 'none'
        }
      }, _react["default"].createElement(_spin["default"], (0, _extends2["default"])({
        key: "virtual",
        spinning: true,
        style: {
          height: (0, _UnitConvertor.pxToRem)(styleHeight),
          lineHeight: (0, _UnitConvertor.pxToRem)(styleHeight),
          position: 'absolute',
          width: '100%',
          zIndex: 4
        }
      }, tableSpinProps, spin))), _react["default"].createElement("div", (0, _extends2["default"])({}, this.getOtherProps()), _react["default"].createElement("div", {
        className: (0, _classnames["default"])("".concat(prefixCls, "-content"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-content-overflow"), (0, _utils.isStickySupport)() && overflowX && !overflowY)),
        onScroll: this.handleBodyScroll
      }, !(0, _utils.isStickySupport)() && isAnyColumnsLeftLock && overflowX && this.getLeftFixedTable(), content, !(0, _utils.isStickySupport)() && isAnyColumnsRightLock && overflowX && this.getRightFixedTable()), (0, _utils.isStickySupport)() && overflowX && _react["default"].createElement(_StickyShadow["default"], {
        position: "left"
      }), (0, _utils.isStickySupport)() && overflowX && _react["default"].createElement(_StickyShadow["default"], {
        position: "right"
      }), _react["default"].createElement("div", {
        ref: this.saveResizeRef,
        className: "".concat(prefixCls, "-split-line")
      }))), this.getFooter(), this.getPagination(_enum.TablePaginationPosition.bottom))));
    }
  }, {
    key: "reorderDataSet",
    value: function reorderDataSet(startIndex, endIndex) {
      var dataSet = this.tableStore.dataSet;
      dataSet.move(startIndex, endIndex);
    }
  }, {
    key: "handleDragEnd",
    value: function handleDragEnd(resultDrag, provided) {
      var _this$props5 = this.props,
          onDragEnd = _this$props5.onDragEnd,
          onDragEndBefore = _this$props5.onDragEndBefore;
      var resultBefore = resultDrag;

      if (onDragEndBefore) {
        var result = onDragEndBefore(this.tableStore.dataSet, (0, _mobx.toJS)(this.tableStore.columns), resultDrag, provided);

        if (result === false) {
          return;
        }

        if ((0, _utils.isDropresult)(result)) {
          resultBefore = result;
        }
      }

      if (resultBefore && resultBefore.destination) {
        this.reorderDataSet(resultBefore.source.index, resultBefore.destination.index);
      }
      /**
       * 相应变化后的数据
       */


      if (onDragEnd) {
        onDragEnd(this.tableStore.dataSet, (0, _mobx.toJS)(this.tableStore.columns), resultBefore, provided);
      }
    }
  }, {
    key: "handleBodyScroll",
    value: function handleBodyScroll(e) {
      var _this2 = this;

      var currentTarget = e.currentTarget;

      var handle = function handle() {
        _this2.handleBodyScrollTop(e, currentTarget);

        _this2.handleBodyScrollLeft(e, currentTarget);
      };

      if ((0, _utils.isStickySupport)()) {
        handle();
      } else {
        e.persist();
        this.scrollId = (0, _raf["default"])(handle);
      }
    }
  }, {
    key: "handleBodyScrollTop",
    value: function handleBodyScrollTop(e, currentTarget) {
      var target = e.target;
      var tableStore = this.tableStore;

      if ((0, _utils.isStickySupport)() && !tableStore.virtual || // (![TableHeightType.fixed, TableHeightType.flex].includes(tableStore.heightType)) ||
      !tableStore.overflowY || currentTarget !== target || target === this.tableFootWrap) {
        return;
      }

      var fixedColumnsBodyLeft = this.fixedColumnsBodyLeft;
      var bodyTable = this.tableBodyWrap;
      var fixedColumnsBodyRight = this.fixedColumnsBodyRight;
      var scrollTop = target.scrollTop;

      if (scrollTop !== tableStore.lastScrollTop) {
        if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) {
          fixedColumnsBodyLeft.scrollTop = scrollTop;
        }

        if (bodyTable && target !== bodyTable) {
          bodyTable.scrollTop = scrollTop;
        }

        if (fixedColumnsBodyRight && target !== fixedColumnsBodyRight) {
          fixedColumnsBodyRight.scrollTop = scrollTop;
        }

        var refSpin = this.refSpin;

        if (refSpin) {
          refSpin.style.display = 'block';
          this.setSpin();
        }

        this.tableStore.setLastScrollTop(scrollTop);
      }
    }
  }, {
    key: "handleBodyScrollLeft",
    value: function handleBodyScrollLeft(e, currentTarget) {
      var target = e.target;
      var tableStore = this.tableStore;
      var headTable = this.tableHeadWrap;
      var bodyTable = this.tableBodyWrap;
      var footTable = this.tableFootWrap;

      if (!tableStore.overflowX || currentTarget !== target || target === this.fixedColumnsBodyRight || target === this.fixedColumnsBodyLeft) {
        return;
      }

      var scrollLeft = target.scrollLeft;

      if (scrollLeft !== this.lastScrollLeft) {
        if ((0, _utils.isStickySupport)()) {
          (0, _toConsumableArray2["default"])(tableStore.editors.values()).forEach(function (editor) {
            if (editor.lock && editor.cellNode) {
              if (tableStore.inlineEdit) {
                editor.alignEditor(editor.cellNode);
              } else {
                editor.