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

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

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

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

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

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import raf from 'raf';
import { observer } from 'mobx-react';
import omit from 'lodash/omit';
import isNumber from 'lodash/isNumber';
import isUndefined from 'lodash/isUndefined';
import debounce from 'lodash/debounce';
import noop from 'lodash/noop';
import classes from 'component-classes';
import { action, get, toJS } from 'mobx';
import { DragDropContext } from 'react-beautiful-dnd';
import { getConfig } from '../../../es/configure';
import warning from '../../../es/_util/warning';
import { pxToRem, toPx } from '../../../es/_util/UnitConvertor';
import measureScrollbar from '../../../es/_util/measureScrollbar';
import KeyCode from '../../../es/_util/KeyCode';
import ReactResizeObserver from '../../../es/_util/resizeObserver';
import Column, { defaultMinWidth } from './Column';
import TableRow from './TableRow';
import TableHeaderCell from './TableHeaderCell';
import TableStore from './TableStore';
import TableHeader from './TableHeader';
import autobind from '../_util/autobind';
import Pagination from '../pagination/Pagination';
import Spin from '../spin';
import DataSetComponent from '../data-set/DataSetComponent';
import TableContext from './TableContext';
import TableWrapper from './TableWrapper';
import TableTBody from './TableTBody';
import TableFooter from './TableFooter';
import { ColumnLock, DragColumnAlign, HighLightRowType, ScrollPosition, SelectionMode, TableAutoHeightType, TableButtonType, TableEditMode, TableHeightType, TableMode, TablePaginationPosition, TableQueryBarType } from './enum';
import TableQueryBar from './query-bar';
import ToolBar from './query-bar/TableToolBar';
import FilterBar from './query-bar/TableFilterBar';
import AdvancedQueryBar from './query-bar/TableAdvancedQueryBar';
import ProfessionalBar from './query-bar/TableProfessionalBar';
import DynamicFilterBar from './query-bar/TableDynamicFilterBar';
import { findIndexedSibling, getHeight, getPaginationPosition, isCanEdictingRow, isDropresult, isStickySupport } from './utils';
import TableBody from './TableBody';
import VirtualWrapper from './VirtualWrapper';
import ModalProvider from '../modal-provider/ModalProvider';
import SelectionTips from './SelectionTips';
import { DataSetSelection } from '../data-set/enum';
export var buttonsEnumType = PropTypes.oneOf([TableButtonType.add, TableButtonType.save, TableButtonType.remove, TableButtonType["delete"], TableButtonType.reset, TableButtonType.query, TableButtonType["export"], TableButtonType.expandAll, TableButtonType.collapseAll]);

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


export 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();
};

var Table =
/*#__PURE__*/
function (_DataSetComponent) {
  _inherits(Table, _DataSetComponent);

  var _super = _createSuper(Table);

  function Table() {
    var _this;

    _classCallCheck(this, Table);

    _this = _super.apply(this, arguments);
    _this.tableStore = new TableStore(_assertThisInitialized(_this));
    _this.wrapperWidth = [];
    /**
     * 滚动结束隐藏spin
     */

    _this.setSpin = debounce(function () {
      var _assertThisInitialize = _assertThisInitialized(_this),
          refSpin = _assertThisInitialize.refSpin;

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

  _createClass(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.UP:
              if (shiftKey && keyboard) {
                this.handleKeyDownUpShift(e);
              } else {
                this.handleKeyDownUp(e);
              }

              break;

            case KeyCode.DOWN:
              if (shiftKey && keyboard) {
                this.handleKeyDownDownShift(e);
              } else {
                this.handleKeyDownDown(e);
              }

              break;

            case KeyCode.RIGHT:
              this.handleKeyDownRight(e);
              break;

            case KeyCode.LEFT:
              this.handleKeyDownLeft(e);
              break;

            case KeyCode.PAGE_UP:
              e.preventDefault();
              dataSet.prePage();
              break;

            case KeyCode.PAGE_DOWN:
              e.preventDefault();
              dataSet.nextPage();
              break;

            case KeyCode.HOME:
              this.handleKeyDownHome(e);
              break;

            case KeyCode.END:
              this.handleKeyDownEnd(e);
              break;

            case KeyCode.S:
              if (ctrlKey === true && keyboard) this.handleKeyDownCTRLS(e);
              break;

            case KeyCode.N:
              if (altKey === true && keyboard) this.handleKeyDownCTRLN(e);
              break;

            case KeyCode.D:
              if (ctrlKey === true && keyboard) this.handleKeyDownCTRLD(e);
              break;

            case KeyCode.DELETE:
              if (altKey === true && keyboard) this.handleKeyDownCTRLDELETE(e);
              break;

            default:
          }
        } catch (error) {
          warning(false, error.message);
        }
      }

      var _this$props$onKeyDown = this.props.onKeyDown,
          onKeyDown = _this$props$onKeyDown === void 0 ? noop : _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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee(e) {
        var dataSet;
        return _regeneratorRuntime.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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee2(e) {
        var dataSet;
        return _regeneratorRuntime.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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee3(e) {
        var dataSet;
        return _regeneratorRuntime.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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee4(e) {
        var dataSet;
        return _regeneratorRuntime.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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee5(e) {
        var currentRow, tableStore, dataSet, currentElementSibling, previousElementSibling, index, currentIndex, record, currentRecord, cloneRecodData, dealCloneRecodData, editeColumn, uniqueFieldIterator, uniqueFieldNames;
        return _regeneratorRuntime.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 (isCanEdictingRow(currentRow)) {
                  currentElementSibling = currentRow;
                }

                if (currentElementSibling && tableStore && dataSet) {
                  previousElementSibling = 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(_toConsumableArray(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(_toConsumableArray(dataSet.fields.entries()).filter(function (_ref2) {
                          var _ref3 = _slicedToArray(_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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee6(e) {
        var dataSet;
        return _regeneratorRuntime.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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee7(e) {
        var currentRow, returnRecod, previousElementSibling, dataSet;
        return _regeneratorRuntime.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 = 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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee8(e) {
        var currentRow, returnRecod, nextElementSibling, dataSet;
        return _regeneratorRuntime.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 = 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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee9(e) {
        var dataSet, currentRow, index, record, currentRecord;
        return _regeneratorRuntime.wrap(function _callee9$(_context9) {
          while (1) {
            switch (_context9.prev = _context9.next) {
              case 0:
                e.preventDefault();
                dataSet = this.tableStore.dataSet;
                currentRow = this.currentRow;

                if (!(currentRow && 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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee10(e) {
        var dataSet, currentRow, index, record, currentRecord;
        return _regeneratorRuntime.wrap(function _callee10$(_context10) {
          while (1) {
            switch (_context10.prev = _context10.next) {
              case 0:
                e.preventDefault();
                dataSet = this.tableStore.dataSet;
                currentRow = this.currentRow;

                if (!(currentRow && 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 = omit(_get(_getPrototypeOf(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: 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 _get(_getPrototypeOf(Table.prototype), "getClassName", this).call(this, "".concat(prefixCls, "-scroll-position-left"), (_get$call = {}, _defineProperty(_get$call, "".concat(prefixCls, "-bordered"), border), _defineProperty(_get$call, "".concat(prefixCls, "-parity-row"), parityRow), _defineProperty(_get$call, "".concat(prefixCls, "-row-height-fixed"), isNumber(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 = omit(style, ['width', 'height']);

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

      return _get(_getPrototypeOf(Table.prototype), "getWrapperProps", this).call(this, _objectSpread({
        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 && !isUndefined(spin.spinning)) return _objectSpread({}, spin);
      var loading = this.tableStore.loading;

      if (loading) {
        return _objectSpread({}, spin, {
          spinning: true
        });
      }

      return _objectSpread({}, 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() {
      _get(_getPrototypeOf(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) {
      _get(_getPrototypeOf(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.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 === 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(TablePaginationPosition.top);
      var tableSpinProps = getConfig('tableSpinProps');
      var styleHeight = style ? toPx(style.height) : 0;
      return React.createElement(ReactResizeObserver, {
        resizeProp: "width",
        onResize: this.handleResize
      }, React.createElement("div", _extends({}, this.getWrapperProps()), React.createElement(TableContext.Provider, {
        value: context
      }, React.createElement(ModalProvider, null, this.getHeader(), React.createElement(TableQueryBar, {
        buttons: buttons,
        pagination: pagination,
        queryFields: queryFields,
        clientExportQuantity: clientExportQuantity,
        summaryBar: summaryBar,
        dynamicFilterBar: dynamicFilterBar,
        queryFieldsLimit: queryFieldsLimit,
        summaryFieldsLimit: summaryFieldsLimit,
        filterBarFieldName: filterBarFieldName,
        filterBarPlaceholder: filterBarPlaceholder,
        treeQueryExpanded: treeQueryExpanded
      }), React.createElement(Spin, _extends({}, tableSpinProps, this.getSpinProps(), {
        key: "content"
      }), virtual && virtualSpin && React.createElement("div", {
        ref: this.saveVirtualSpinRef,
        style: {
          display: 'none'
        }
      }, React.createElement(Spin, _extends({
        key: "virtual",
        spinning: true,
        style: {
          height: pxToRem(styleHeight),
          lineHeight: pxToRem(styleHeight),
          position: 'absolute',
          width: '100%',
          zIndex: 4
        }
      }, tableSpinProps, spin))), React.createElement("div", _extends({}, this.getOtherProps()), React.createElement("div", {
        className: classNames("".concat(prefixCls, "-content"), _defineProperty({}, "".concat(prefixCls, "-content-overflow"), isStickySupport() && overflowX && !overflowY)),
        onScroll: this.handleBodyScroll
      }, !isStickySupport() && isAnyColumnsLeftLock && overflowX && this.getLeftFixedTable(), content, !isStickySupport() && isAnyColumnsRightLock && overflowX && this.getRightFixedTable()), React.createElement("div", {
        ref: this.saveResizeRef,
        className: "".concat(prefixCls, "-split-line")
      }), this.getFooter())), this.getPagination(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, toJS(this.tableStore.columns), resultDrag, provided);

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

        if (isDropresult(result)) {
          resultBefore = result;
        }
      }

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


      if (onDragEnd) {
        onDragEnd(this.tableStore.dataSet, 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 (isStickySupport()) {
        handle();
      } else {
        e.persist();
        this.scrollId = raf(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 (isStickySupport() && !virtual || ![TableHeightType.fixed, 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 (isStickySupport()) {
          _toConsumableArray(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(ScrollPosition.both);
          } else if (scrollToLeft) {
            this.setScrollPosition(ScrollPosition.left);
          } else if (scrollToRight) {
            this.setScrollPosition(ScrollPosition.right);
          } else {
            this.setScrollPosition(ScrollPosition.middle);
          }
        }
      }
    }
  }, {
    key: "setScrollPosition",
    value: function setScrollPosition(position) {
      if (this.scrollPosition !== position) {
        this.scrollPosition = position;
        var prefixCls = this.tableStore.prefixCls;
        var cls = classes(this.element).remove(new RegExp("^".concat(prefixCls, "-scroll-position-.+$")));

        if (position === 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.createElement(React.Fragment, null, hasHeader && React.createElement(TableWrapper, {
        key: "tableWrapper-header",
        lock: lock,
        hasBody: hasBody,
        hasHeader: hasHeader,
        hasFooter: hasFooter
      }, this.getTableHeader(lock)), hasBody && React.createElement(VirtualWrapper, null, React.createElement(TableWrapper, {
        key: "tableWrapper-body",
        lock: lock,
        hasBody: hasBody,
        hasHeader: hasHeader,
        hasFooter: hasFooter
      }, this.getTableBody(lock))), hasFooter && React.createElement(TableWrapper, {
        key: "tableWrapper-footer",
        lock: lock,
        hasBody: hasBody,
        hasHeader: hasFooter,
        hasFooter: hasFooter
      }, this.getTableFooter(lock))) : React.createElement(TableWrapper, {
        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.createElement("div", {
          key: "header",
          className: "".concat(prefixCls, "-header")
        }, typeof header === 'function' ? header(data) : header);
      }
    }
  }, {
    key: "getFooter",
    value: function getFooter() {
      var _this$props7 = this.props,
          footer = _this$props7.footer,
          dataSet = _this$props7.dataSet;

      if (footer) {
        var prefixCls = this.tableStore.prefixCls;
        var data = dataSet ? dataSet.records : [];
        return React.createElement("div", {
          key: "footer",
          className: "".concat(prefixCls, "-footer")
        }, typeof footer === 'function' ? footer(data) : footer);
      }
    }
  }, {
    key: "getPagination",
    value: function getPagination(position) {
      var _this$props8 = this.props,
          dataSet = _this$props8.dataSet,
          selectionMode = _this$props8.selectionMode,
          _this$tableStore7 = this.tableStore,
          prefixCls = _this$tableStore7.prefixCls,
          pagination = _this$tableStore7.pagination,
          showSelectionTips = _this$tableStore7.showSelectionTips;

      if (pagination !== false && dataSet && dataSet.paging) {
        var paginationPosition = getPaginationPosition(pagination);

        if (paginationPosition === TablePaginationPosition.both || paginationPosition === position) {
          var paginationProps = omit(pagination, 'position');
          return React.createElement(Pagination, _extends({
            key: "pagination-".concat(position)
          }, paginationProps, {
            className: classNames("".concat(prefixCls, "-pagination"), paginationProps.className, _defineProperty({}, "".concat(prefixCls, "-pagination-with-selection-tips"), showSelectionTips)),
            dataSet: dataSet
          }), selectionMode !== SelectionMode.none && dataSet.selection === DataSetSelection.multiple && React.createElement(SelectionTips, null));
        }
      }
    }
  }, {
    key: "getTable",
    value: function getTable(lock) {
      var _this3 = this;

      var _this$tableStore8 = this.tableStore,
          overflowX = _this$tableStore8.overflowX,
          heightType = _this$tableStore8.heightType,
          footer = _this$tableStore8.hasFooter;
      var tableHead;
      var tableBody;
      var tableFooter;

      if (!isStickySupport() && overflowX || [TableHeightType.flex, TableHeightType.fixed].includes(heightType)) {
        var _this$tableStore9 = this.tableStore,
            prefixCls = _this$tableStore9.prefixCls,
            leftLeafColumnsWidth = _this$tableStore9.leftLeafColumnsWidth,
            rightLeafColumnsWidth = _this$tableStore9.rightLeafColumnsWidth,
            overflowY = _this$tableStore9.overflowY;
        var tableHeadRef;
        var tableBodyRef;
        var tableFootRef;

        if (!lock) {
          tableHeadRef = function tableHeadRef(node) {
            return _this3.tableHeadWrap = node;
          };

          tableFootRef = function tableFootRef(node) {
            return _this3.tableFootWrap = node;
          };

          tableBodyRef = function tableBodyRef(node) {
            return _this3.tableBodyWrap = node;
          };
        } else if (lock === ColumnLock.right) {
          tableBodyRef = function tableBodyRef(node) {
            _this3.fixedColumnsBodyRight = node;

            if (node) {
              _this3.syncSize();
            }
          };
        } else {
          tableBodyRef = function tableBodyRef(node) {
            _this3.fixedColumnsBodyLeft = node;

            if (node) {
              _this3.syncSize();
            }
          };
        }

        var style = lock