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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

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

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

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 _omit = _interopRequireDefault(require("lodash/omit"));

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 _componentClasses = _interopRequireDefault(require("component-classes"));

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 = _interopRequireWildcard(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 = _interopRequireDefault(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 _ModalProvider = _interopRequireDefault(require("../modal-provider/ModalProvider"));

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

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

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');
    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: "saveTableHeader",
    value: function saveTableHeader(tableHeader) {
      this.tableHeader = tableHeader;
    }
  }, {
    key: "saveTableFooter",
    value: function saveTableFooter(tableFooter) {
      this.tableFooter = tableFooter;
    }
  }, {
    key: "useFocusedClassName",
    value: function useFocusedClassName() {
      return false;
    }
  }, {
    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() {
      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: "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 _callee(e) {
        var dataSet;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                e.preventDefault();
                dataSet = this.props.dataSet;

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

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

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

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

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

      return handleKeyDownHome;
    }()
  }, {
    key: "handleKeyDownEnd",
    value: function () {
      var _handleKeyDownEnd = (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.last();

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

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

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

      return handleKeyDownEnd;
    }()
  }, {
    key: "handleKeyDownCTRLS",
    value: function () {
      var _handleKeyDownCTRLS = (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.tableStore.dataSet;
                dataSet.submit();

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

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

      return handleKeyDownCTRLS;
    }()
  }, {
    key: "handleKeyDownCTRLN",
    value: function () {
      var _handleKeyDownCTRLN = (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.create({}, 0);

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

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

      return handleKeyDownCTRLN;
    }()
  }, {
    key: "handleKeyDownCTRLD",
    value: function () {
      var _handleKeyDownCTRLD = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee5(e) {
        var currentRow, tableStore, dataSet, currentElementSibling, previousElementSibling, index, currentIndex, record, currentRecord, cloneRecodData, dealCloneRecodData, editeColumn, uniqueFieldIterator, uniqueFieldNames;
        return _regenerator["default"].wrap(function _callee5$(_context5) {
          while (1) {
            switch (_context5.prev = _context5.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 (_ref2) {
                          var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
                              _key = _ref3[0],
                              field = _ref3[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 _context5.stop();
            }
          }
        }, _callee5, this);
      }));

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      return handleKeyDownUp;
    }()
  }, {
    key: "handleKeyDownDown",
    value: function () {
      var _handleKeyDownDown = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee8(e) {
        var currentRow, returnRecod, nextElementSibling, 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;
                }

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

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

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

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

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

              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 handleKeyDownDown(_x8) {
        return _handleKeyDownDown.apply(this, arguments);
      }

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

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

                index = currentRow.dataset.index;

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

                record = dataSet.findRecordById(index);

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

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

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

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

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

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

              case 18:
                currentRecord = _context9.sent;

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

              case 20:
                _context9.next = 23;
                break;

              case 22:
                this.handleKeyDownDown(e);

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

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

      return handleKeyDownDownShift;
    }()
  }, {
    key: "handleKeyDownUpShift",
    value: function () {
      var _handleKeyDownUpShift = (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.handleKeyDownUp(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.handleKeyDownUp(e);

              case 18:
                currentRecord = _context10.sent;

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

              case 20:
                _context10.next = 23;
                break;

              case 22:
                this.handleKeyDownUp(e);

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

      function handleKeyDownUpShift(_x10) {
        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: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = (0, _omit["default"])((0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "getOtherProps", this).call(this), ['columns', 'header', 'footer', 'border', 'style', 'selectionMode', 'alwaysShowRowBox', 'onRow', 'rowRenderer', 'buttons', 'rowHeight', 'queryFields', 'queryFieldsLimit', 'summaryFieldsLimit', 'queryBar', 'autoFocus', 'summaryBar', 'defaultRowExpanded', 'expandRowByClick', 'expandedRowRenderer', 'expandIconColumnIndex', 'indentSize', 'filter', 'mode', 'editMode', 'filterBarFieldName', 'filterBarPlaceholder', 'pagination', 'highLightRow', 'selectedHighLightRow', 'columnResizable', 'columnTitleEditable', 'pristine', 'expandIcon', 'spin', 'virtual', 'virtualCell', 'virtualSpin', 'autoHeight', 'autoFootHeight', 'useMouseBatchChoose', 'autoMaxWidth', 'dragColumnAlign', 'columnDraggable', 'rowDraggable', 'onDragEnd', 'rowDragRender', 'columnsDragRender', 'editorNextKeyEnterDown', 'onDragEndBefore', 'keyboard', 'dynamicFilterBar', 'parityRow', 'rowNumber', 'treeAsync', 'treeLoadData', 'customizable', 'customizedCode', 'dragColumn', 'dragRow', 'clientExportQuantity', 'treeQueryExpanded']);
      otherProps.onKeyDown = this.handleKeyDown;
      var rowHeight = this.tableStore.rowHeight;

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

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

      var _this$tableStore = this.tableStore,
          prefixCls = _this$tableStore.prefixCls,
          border = _this$tableStore.border,
          rowHeight = _this$tableStore.rowHeight,
          parityRow = _this$tableStore.parityRow;
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "getClassName", this).call(this, "".concat(prefixCls, "-scroll-position-left"), (_get$call = {}, (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, "-row-height-fixed"), (0, _isNumber["default"])(rowHeight)), _get$call));
    }
  }, {
    key: "getWrapperProps",
    value: function getWrapperProps() {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var style = this.props.style;
      var tableStore = this.tableStore;
      var newStyle = (0, _omit["default"])(style, ['width', 'height']);

      if (style && style.width !== undefined && style.width !== 'auto') {
        newStyle.width = Math.max(style.width, tableStore.leftLeafColumnsWidth + tableStore.rightLeafColumnsWidth + _Column.defaultMinWidth);
      }

      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "getWrapperProps", this).call(this, (0, _objectSpread2["default"])({
        style: newStyle
      }, props));
    }
    /**
     * 获取传入的 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: "handleDragMouseUp",
    value: function handleDragMouseUp() {
      var _this$tableStore2 = this.tableStore,
          dataSet = _this$tableStore2.dataSet,
          mouseBatchChooseIdList = _this$tableStore2.mouseBatchChooseIdList;

      if (this.tableStore.mouseBatchChooseState) {
        this.tableStore.mouseBatchChooseState = false;
        var _this$tableStore3 = this.tableStore,
            mouseBatchChooseStartId = _this$tableStore3.mouseBatchChooseStartId,
            mouseBatchChooseEndId = _this$tableStore3.mouseBatchChooseEndId;

        if (mouseBatchChooseStartId === mouseBatchChooseEndId) {
          return;
        }

        (mouseBatchChooseIdList || []).forEach(function (id) {
          var record = dataSet.find(function (innerRecord) {
            return innerRecord.id === id;
          });

          if (record) {
            dataSet.select(record);
          }
        });
      }
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Table.prototype), "componentWillMount", this).call(this);
      this.initDefaultExpandedRows();
      this.connect();
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      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);
      }
    }
  }, {
    key: "connect",
    value: function connect() {
      this.processDataSetListener(true); // 为什么使用 pointerup
      // 因为需要对disabled的元素进行特殊处理
      // 因为状态的改变依赖 mouseup 而在disabled的元素上 无法触发mouseup事件
      // 导致状态无法进行修正
      // 以下两种方案通过 pointer-events:none 进行处理
      // https://stackoverflow.com/questions/322378/javascript-check-if-mouse-button-down
      // https://stackoverflow.com/questions/62081666/the-event-of-the-document-is-not-triggered-when-it-is-on-a-disabled-element
      // 而使用指针事件可以突破disabled的限制
      // https://stackoverflow.com/questions/62126515/how-to-get-the-state-of-the-mouse-through-javascript/62127845#62127845

      if (this.tableStore.useMouseBatchChoose) {
        document.addEventListener('pointerup', this.handleDragMouseUp);
      }

      if (this.tableStore.heightType === _enum.TableHeightType.flex) {
        window.addEventListener('resize', this.handleWindowResize, false);
      }
    }
  }, {
    key: "disconnect",
    value: function disconnect() {
      this.processDataSetListener(false);

      if (this.tableStore.useMouseBatchChoose) {
        document.removeEventListener('pointerup', this.handleDragMouseUp);
      }

      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;

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

        if (isTree) {
          handler.call(dataSet, 'load', this.handleDataSetLoad);
        }

        if (inlineEdit) {
          handler.call(dataSet, 'create', this.handleDataSetCreate);
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var tableStore = this.tableStore,
          _this$tableStore5 = this.tableStore,
          prefixCls = _this$tableStore5.prefixCls,
          virtual = _this$tableStore5.virtual,
          overflowX = _this$tableStore5.overflowX,
          overflowY = _this$tableStore5.overflowY,
          isAnyColumnsLeftLock = _this$tableStore5.isAnyColumnsLeftLock,
          isAnyColumnsRightLock = _this$tableStore5.isAnyColumnsRightLock,
          _this$props4 = this.props,
          style = _this$props4.style,
          treeQueryExpanded = _this$props4.treeQueryExpanded,
          spin = _this$props4.spin,
          virtualSpin = _this$props4.virtualSpin,
          buttons = _this$props4.buttons,
          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;
      var content = this.getTable();
      var context = {
        tableStore: tableStore
      };
      var pagination = this.getPagination(_enum.TablePaginationPosition.top);
      var tableSpinProps = (0, _configure.getConfig)('tableSpinProps');
      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["default"].Provider, {
        value: context
      }, _react["default"].createElement(_ModalProvider["default"], null, this.getHeader(), _react["default"].createElement(_queryBar["default"], {
        buttons: buttons,
        pagination: pagination,
        queryFields: queryFields,
        clientExportQuantity: clientExportQuantity,
        summaryBar: summaryBar,
        dynamicFilterBar: dynamicFilterBar,
        queryFieldsLimit: queryFieldsLimit,
        summaryFieldsLimit: summaryFieldsLimit,
        filterBarFieldName: filterBarFieldName,
        filterBarPlaceholder: filterBarPlaceholder,
        treeQueryExpanded: treeQueryExpanded
      }), _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()), _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 _this$tableStore6 = this.tableStore,
          virtual = _this$tableStore6.virtual,
          heightType = _this$tableStore6.heightType,
          lastScrollTop = _this$tableStore6.lastScrollTop;

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

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

      if (scrollTop !== 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.hideEditor();
              }
            }
          });
        }

        if (headTable && target !== headTable) {
          headTable.scrollLeft = scrollLeft;
        }

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

        if (footTable && target !== footTable) {
          footTable.scrollLeft = scrollLeft;
        }

        this.setScrollPositionClassName(target);
      }

      this.lastScrollLeft = scrollLeft;
    }
  }, {
    key: "setScrollPositionClassName",
    value: function setScrollPositionClassName(target) {
      if (this.tableStore.isAnyColumnsLock) {
        var node = target || this.tableBodyWrap;

        if (node) {
          var scrollToLeft = node.scrollLeft === 0;
          var table = node.querySelector('table');
          var scrollToRight = table && node.scrollLeft >= table.offsetWidth - node.offsetWidth;

          if (scrollToLeft && scrollToRight) {
            this.setScrollPosition(_enum.ScrollPosition.both);
          } else if (scrollToLeft) {
            this.setScrollPosition(_enum.ScrollPosition.left);
          } else if (scrollToRight) {
            this.setScrollPosition(_enum.ScrollPosition.right);
          } else {
            this.setScrollPosition(_enum.ScrollPosition.middle);
          }
        }
      }
    }
  }, {
    key: "setScrollPosition",
    value: function setScrollPosition(position) {
      if (this.scrollPosition !== position) {
        this.scrollPosition = position;
        var prefixCls = this.tableStore.prefixCls;
        var cls = (0, _componentClasses["default"])(this.element).remove(new RegExp("^".concat(prefixCls, "-scroll-position-.+$")));

        if (position === _enum.ScrollPosition.both) {
          cls.add("".concat(prefixCls, "-scroll-position-left")).add("".concat(prefixCls, "-scroll-position-right"));
        } else {
          cls.add("".concat(prefixCls, "-scroll-position-").concat(position));
        }
      }
    }
  }, {
    key: "renderTable",
    value: function renderTable(hasHeader, hasBody, hasFooter, lock) {
      var virtual = this.tableStore.virtual;
      return virtual ? _react["default"].createElement(_react["default"].Fragment, null, hasHeader && _react["default"].createElement(_TableWrapper["default"], {
        key: "tableWrapper-header",
        lock: lock,
        hasBody: hasBody,
        hasHeader: hasHeader,
        hasFooter: hasFooter
      }, this.getTableHeader(lock)), hasBody && _react["default"].createElement(_VirtualWrapper["default"], null, _react["default"].createElement(_TableWrapper["default"], {
        key: "tableWrapper-body",
        lock: lock,
        hasBody: hasBody,
        hasHeader: hasHeader,
        hasFooter: hasFooter
      }, this.getTableBody(lock))), hasFooter && _react["default"].createElement(_TableWrapper["default"], {
        key: "tableWrapper-footer",
        lock: lock,
        hasBody: hasBody,
        hasHeader: hasFooter,
        hasFooter: hasFooter
      }, this.getTableFooter(lock))) : _react["default"].createElement(_TableWrapper["default"], {
        key: "tableWrapper",
        lock: lock,
        hasBody: hasBody,
        hasHeader: hasHeader,
        hasFooter: hasFooter
      }, hasHeader && this.getTableHeader(lock), hasBody && this.getTableBody(lock), hasFooter && this.getTableFooter(lock));
    }
  }, {
    key: "getHeader",
    value: function getHeader() {
      var _this$props6 = this.props,
          header = _this$props6.header,
          dataSet = _this$props6.dataSet;

      if (header) {
        var prefixCls = this.tableStore.prefixCls;
        var data = dataSet ? dataSet.records : [];
        return _react["default"].createElement("div", {
          key: "header",
          className: "".concat(prefixCls, "-header")
        }, typeof header === 'function' ? header(data) : header);