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

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

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import { __decorate } from "tslib";
import React, { Children, isValidElement } from 'react';
import { action, computed, get as _get, observable, runInAction, set } from 'mobx';
import sortBy from 'lodash/sortBy';
import debounce from 'lodash/debounce';
import isNil from 'lodash/isNil';
import isObject from 'lodash/isObject';
import isPlainObject from 'lodash/isPlainObject';
import isString from 'lodash/isString';
import isNumber from 'lodash/isNumber';
import measureScrollbar from '../../../es/_util/measureScrollbar';
import { isCalcSize, toPx } from '../../../es/_util/UnitConvertor';
import { getConfig, getCustomizable, getProPrefixCls } from '../../../es/configure';
import { getTooltip } from '../../../es/_util/TooltipUtils';
import Icon from '../../../es/icon';
import isFunction from 'lodash/isFunction';
import { ColumnDefaultProps } from './Column';
import CustomizationSettings from './customization-settings/CustomizationSettings';
import isFragment from '../_util/isFragment';
import ObserverCheckBox from '../check-box/CheckBox';
import ObserverRadio from '../radio/Radio';
import { DataSetSelection } from '../data-set/enum';
import { ColumnAlign, ColumnLock, DragColumnAlign, RowBoxPlacement, ScrollPosition, SelectionMode, TableAutoHeightType, TableColumnTooltip, TableEditMode, TableHeightType, TableMode } from './enum';
import { stopPropagation } from '../_util/EventManager';
import { getColumnKey, getHeader } from './utils';
import getReactNodeText from '../_util/getReactNodeText';
import ColumnGroups from './ColumnGroups';
import autobind from '../_util/autobind';
import { Size } from '../core/enum';
import { $l } from '../locale-context';
import CustomizationColumnHeader from './customization-settings/CustomizationColumnHeader';
import Dropdown from '../dropdown/Dropdown';
import Menu from '../menu';
import { treeSome } from '../_util/treeUtils';
export var SELECTION_KEY = '__selection-column__'; // TODO:Symbol

export var ROW_NUMBER_KEY = '__row-number-column__'; // TODO:Symbol

export var DRAG_KEY = '__drag-column__'; // TODO:Symbol

export var EXPAND_KEY = '__expand-column__'; // TODO:Symbol

export var CUSTOMIZED_KEY = '__customized-column__'; // TODO:Symbol

export var AGGREGATION_EXPAND_CELL_KEY = '__aggregation-expand-cell__'; // TODO:Symbol

function columnFilter(column) {
  return Boolean(column);
} // function hasProperty<T>(target: T, property: string): (keyof T) is undefined {
//   return property in target;
// }


export function getIdList(store) {
  var mouseBatchChooseStartId = store.mouseBatchChooseStartId,
      mouseBatchChooseEndId = store.mouseBatchChooseEndId,
      element = store.node.element,
      prefixCls = store.prefixCls;
  var rows = Array.from(element.querySelectorAll(".".concat(prefixCls, "-row")));
  var endId;
  var idList = [];
  rows.some(function (row) {
    var index = Number(row.dataset.index);

    if (!endId) {
      if (mouseBatchChooseStartId === index) {
        endId = mouseBatchChooseEndId;
      } else if (mouseBatchChooseEndId === index) {
        endId = mouseBatchChooseStartId;
      }
    }

    if (endId) {
      idList.push(index);
    }

    return endId === index;
  });
  return idList;
}

function getRowNumbers(record, dataSet, isTree) {
  if (record && dataSet) {
    var paging = dataSet.paging,
        currentPage = dataSet.currentPage,
        pageSize = dataSet.pageSize;
    var pageIndex = (isTree ? paging === 'server' : paging) ? (currentPage - 1) * pageSize : 0;

    if (isTree) {
      return record.path.map(function (r, index) {
        return r.indexInParent + 1 + (index === 0 ? pageIndex : 0);
      });
    }

    return [record.index + 1 + pageIndex];
  }

  return [0];
}

function hasCheckField(_ref, checkField) {
  var editor = _ref.editor,
      name = _ref.name,
      hidden = _ref.hidden;
  return !hidden && !!editor && checkField === name;
}

function _renderSelectionBox(_ref2) {
  var record = _ref2.record,
      store = _ref2.store;
  var dataSet = record.dataSet;

  if (dataSet) {
    var selection = dataSet.selection;

    var handleChange = function handleChange(value) {
      if (store.props.selectionMode === SelectionMode.mousedown) {
        // 将处理逻辑交给 mousedown 的处理逻辑 不然会两次触发导致不被勾选上
        return;
      }

      if (value) {
        dataSet.select(record);
      } else {
        dataSet.unSelect(record);
      }
    };

    var handleClick = function handleClick(e) {
      stopPropagation(e);

      if (selection === DataSetSelection.multiple) {
        var lastSelected = store.lastSelected;

        if (lastSelected) {
          var nativeEvent = e.nativeEvent;
          var startIndex = -1;
          var endIndex = -1;

          if (nativeEvent.shiftKey) {
            var pointKeys = new Set([lastSelected.key, record.key]);
            dataSet.some(function (pointRecord, index) {
              if (pointKeys.has(pointRecord.key)) {
                if (startIndex === -1) {
                  startIndex = index;
                } else {
                  endIndex = index;
                  return true;
                }
              }

              return false;
            });
          }

          if (endIndex !== -1 && startIndex !== endIndex) {
            // Batch update selections
            var rangeRecords = dataSet.slice(startIndex, endIndex + 1);
            var changedRecords = [];
            var selectedKeys = new Set(dataSet.selected.map(function (selected) {
              return selected.key;
            }));

            if (record.isSelected) {
              rangeRecords.forEach(function (rangeRecord) {
                if (selectedKeys.has(rangeRecord.key)) {
                  changedRecords.push(rangeRecord);
                }
              });
              dataSet.batchUnSelect(changedRecords);
            } else {
              rangeRecords.forEach(function (rangeRecord) {
                if (!selectedKeys.has(rangeRecord.key)) {
                  changedRecords.push(rangeRecord);
                }
              });
              dataSet.batchSelect(changedRecords);
            }
          }
        }

        store.lastSelected = record;
      } else if (record.isSelected) {
        dataSet.unSelect(record);
      }
    };

    if (selection === DataSetSelection.multiple) {
      var batchSelectProps = {};
      var handleDragMouseUp = action(function () {
        var mouseBatchChooseIdList = store.mouseBatchChooseIdList;

        if (store.mouseBatchChooseState) {
          store.mouseBatchChooseState = false;
          store.changeMouseBatchChooseIdList([]);
          var mouseBatchChooseStartId = store.mouseBatchChooseStartId,
              mouseBatchChooseEndId = store.mouseBatchChooseEndId;

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

          var startRecord = dataSet.findRecordById(mouseBatchChooseStartId);

          var _ref3 = startRecord || {},
              isSelected = _ref3.isSelected;

          if (isSelected) {
            dataSet.batchUnSelect(mouseBatchChooseIdList);
          } else {
            dataSet.batchSelect(mouseBatchChooseIdList);
          }
        }

        document.removeEventListener('pointerup', handleDragMouseUp);
      });

      if (store.useMouseBatchChoose) {
        batchSelectProps.onMouseDown = action(function () {
          store.mouseBatchChooseStartId = record.id;
          store.mouseBatchChooseEndId = record.id;
          store.mouseBatchChooseState = 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

          document.addEventListener('pointerup', handleDragMouseUp);
        });

        batchSelectProps.onMouseEnter = function () {
          if (store.mouseBatchChooseState) {
            store.mouseBatchChooseEndId = record.id;
            store.changeMouseBatchChooseIdList(getIdList(store));
          }
        };
      }

      return React.createElement(ObserverCheckBox, _extends({}, batchSelectProps, {
        checked: record.isSelected,
        onChange: handleChange,
        onClick: handleClick,
        disabled: !record.selectable,
        "data-selection-key": SELECTION_KEY,
        value: true
      }));
    }

    if (selection === DataSetSelection.single) {
      return React.createElement(ObserverRadio, {
        checked: record.isSelected,
        onChange: handleChange,
        onClick: handleClick,
        disabled: !record.selectable,
        "data-selection-key": SELECTION_KEY,
        value: true
      });
    }
  }
}

export function mergeDefaultProps(originalColumns, tableAggregation, customizedColumns) {
  var parent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
  var defaultKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [0];
  var columnSort = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {
    left: 0,
    center: 0,
    right: 0
  };
  var columns = [];
  var leftColumns = [];
  var rightColumns = [];
  var hasAggregationColumn = false;
  originalColumns.forEach(function (column) {
    if (isPlainObject(column)) {
      var newColumn = _objectSpread({}, ColumnDefaultProps, {}, column);

      if (isNil(getColumnKey(newColumn))) {
        newColumn.key = "anonymous-".concat(defaultKey[0]++);
      }

      var children = newColumn.children,
          aggregation = newColumn.aggregation;

      if (!hasAggregationColumn && aggregation) {
        hasAggregationColumn = true;
      }

      if (tableAggregation || !aggregation) {
        if (customizedColumns) {
          _extends(newColumn, customizedColumns[getColumnKey(newColumn).toString()]);
        }

        if (parent) {
          newColumn.lock = parent.lock;
        }

        if (children) {
          var _mergeDefaultProps = mergeDefaultProps(children, tableAggregation, customizedColumns, newColumn, defaultKey),
              _mergeDefaultProps2 = _slicedToArray(_mergeDefaultProps, 4),
              childrenColumns = _mergeDefaultProps2[1],
              childrenHasAffregationColumn = _mergeDefaultProps2[3];

          newColumn.children = childrenColumns;

          if (!hasAggregationColumn && childrenHasAffregationColumn) {
            hasAggregationColumn = childrenHasAffregationColumn;
          }
        }

        if (parent || !newColumn.lock) {
          if (newColumn.sort === undefined) {
            newColumn.sort = columnSort.center;
          }

          columnSort.center++;
          columns.push(newColumn);
        } else if (newColumn.lock === true || newColumn.lock === ColumnLock.left) {
          if (newColumn.sort === undefined) {
            newColumn.sort = columnSort.left;
          }

          columnSort.left++;
          leftColumns.push(newColumn);
        } else {
          if (newColumn.sort === undefined) {
            newColumn.sort = columnSort.right;
          }

          columnSort.right++;
          rightColumns.push(newColumn);
        }
      } else if (children) {
        var _mergeDefaultProps3 = mergeDefaultProps(children, tableAggregation, customizedColumns, parent, defaultKey, parent ? undefined : columnSort),
            _mergeDefaultProps4 = _slicedToArray(_mergeDefaultProps3, 4),
            nodes = _mergeDefaultProps4[1],
            _childrenHasAffregationColumn = _mergeDefaultProps4[3];

        if (!hasAggregationColumn && _childrenHasAffregationColumn) {
          hasAggregationColumn = _childrenHasAffregationColumn;
        }

        if (parent) {
          parent.children = nodes;
        } else {
          nodes.forEach(function (node) {
            if (!node.lock) {
              columns.push(node);
            } else if (node.lock === true || node.lock === ColumnLock.left) {
              leftColumns.push(node);
            } else {
              rightColumns.push(node);
            }
          });
        }
      }
    }
  }, []);

  if (parent) {
    return [[], sortBy(columns, function (_ref4) {
      var sort = _ref4.sort;
      return sort;
    }), [], hasAggregationColumn];
  }

  return [sortBy(leftColumns, function (_ref5) {
    var sort = _ref5.sort;
    return sort;
  }), sortBy(columns, function (_ref6) {
    var sort = _ref6.sort;
    return sort;
  }), sortBy(rightColumns, function (_ref7) {
    var sort = _ref7.sort;
    return sort;
  }), hasAggregationColumn];
}
export function normalizeColumns(elements, tableAggregation, customizedColumns) {
  var parent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
  var defaultKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [0];
  var columnSort = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {
    left: 0,
    center: 0,
    right: 0
  };
  var columns = [];
  var leftColumns = [];
  var rightColumns = [];
  var hasAggregationColumn = false;

  var normalizeColumn = function normalizeColumn(element) {
    if (isValidElement(element)) {
      var props = element.props,
          key = element.key,
          type = element.type;

      if (isFragment(element)) {
        var children = props.children;

        if (children) {
          Children.forEach(children, normalizeColumn);
        }
      } else if (type.__PRO_TABLE_COLUMN) {
        var column = _objectSpread({}, props);

        if (key) {
          column.key = key;
        } else if (isNil(getColumnKey(column))) {
          column.key = "anonymous-".concat(defaultKey[0]++);
        }

        var _children = column.children,
            aggregation = column.aggregation;

        if (!hasAggregationColumn && aggregation) {
          hasAggregationColumn = true;
        }

        if (tableAggregation || !aggregation) {
          if (customizedColumns) {
            _extends(column, customizedColumns[getColumnKey(column).toString()]);
          }

          if (parent) {
            column.lock = parent.lock;
          }

          var _normalizeColumns = normalizeColumns(_children, tableAggregation, customizedColumns, column, defaultKey),
              _normalizeColumns2 = _slicedToArray(_normalizeColumns, 4),
              childrenColumns = _normalizeColumns2[1],
              childrenHasAffregationColumn = _normalizeColumns2[3];

          column.children = childrenColumns;

          if (!hasAggregationColumn && childrenHasAffregationColumn) {
            hasAggregationColumn = childrenHasAffregationColumn;
          }

          if (parent || !column.lock) {
            if (column.sort === undefined) {
              column.sort = columnSort.center;
            }

            columnSort.center++;
            columns.push(column);
          } else if (column.lock === true || column.lock === ColumnLock.left) {
            if (column.sort === undefined) {
              column.sort = columnSort.left;
            }

            columnSort.left++;
            leftColumns.push(column);
          } else {
            if (column.sort === undefined) {
              column.sort = columnSort.right;
            }

            columnSort.right++;
            rightColumns.push(column);
          }
        } else {
          var _normalizeColumns3 = normalizeColumns(_children, tableAggregation, customizedColumns, parent, defaultKey, parent ? undefined : columnSort),
              _normalizeColumns4 = _slicedToArray(_normalizeColumns3, 4),
              nodes = _normalizeColumns4[1],
              _childrenHasAffregationColumn2 = _normalizeColumns4[3];

          if (!hasAggregationColumn && _childrenHasAffregationColumn2) {
            hasAggregationColumn = _childrenHasAffregationColumn2;
          }

          if (parent) {
            parent.children = nodes;
          } else {
            nodes.forEach(function (node) {
              if (!node.lock) {
                columns.push(node);
              } else if (node.lock === true || node.lock === ColumnLock.left) {
                leftColumns.push(node);
              } else {
                rightColumns.push(node);
              }
            });
          }
        }
      }
    }
  };

  Children.forEach(elements, normalizeColumn);

  if (parent) {
    return [[], sortBy(columns, function (_ref8) {
      var sort = _ref8.sort;
      return sort;
    }), [], hasAggregationColumn];
  }

  return [sortBy(leftColumns, function (_ref9) {
    var sort = _ref9.sort;
    return sort;
  }), sortBy(columns, function (_ref10) {
    var sort = _ref10.sort;
    return sort;
  }), sortBy(rightColumns, function (_ref11) {
    var sort = _ref11.sort;
    return sort;
  }), hasAggregationColumn];
}

function getHeaderTexts(_x, _x2, _x3) {
  return _getHeaderTexts.apply(this, arguments);
}

function _getHeaderTexts() {
  _getHeaderTexts = _asyncToGenerator(
  /*#__PURE__*/
  _regeneratorRuntime.mark(function _callee3(dataSet, columns, aggregation) {
    var headers,
        column,
        _args3 = arguments;
    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            headers = _args3.length > 3 && _args3[3] !== undefined ? _args3[3] : [];
            column = columns.shift();

            if (!column) {
              _context3.next = 10;
              break;
            }

            _context3.t0 = headers;
            _context3.t1 = column.name;
            _context3.next = 7;
            return getReactNodeText(getHeader(column, dataSet, aggregation));

          case 7:
            _context3.t2 = _context3.sent;
            _context3.t3 = {
              name: _context3.t1,
              label: _context3.t2
            };

            _context3.t0.push.call(_context3.t0, _context3.t3);

          case 10:
            if (!columns.length) {
              _context3.next = 13;
              break;
            }

            _context3.next = 13;
            return getHeaderTexts(dataSet, columns, aggregation, headers);

          case 13:
            return _context3.abrupt("return", headers);

          case 14:
          case "end":
            return _context3.stop();
        }
      }
    }, _callee3);
  }));
  return _getHeaderTexts.apply(this, arguments);
}

var TableStore =
/*#__PURE__*/
function () {
  function TableStore(node) {
    var _this = this;

    _classCallCheck(this, TableStore);

    this.editors = new Map();
    this.mouseBatchChooseStartId = 0;
    this.mouseBatchChooseEndId = 0;
    this.inBatchExpansion = false;
    this.performanceOn = false;
    this.timing = {
      renderStart: 0,
      renderEnd: 0
    };
    this.handleSelectAllChange = action(function (value) {
      var _this$props = _this.props,
          dataSet = _this$props.dataSet,
          filter = _this$props.filter;
      var isSelectAll = value ? dataSet.currentSelected.length === dataSet.records.filter(function (record) {
        return record.selectable;
      }).length : !value;

      if (!isSelectAll) {
        dataSet.selectAll(filter);
      } else {
        dataSet.unSelectAll();

        if (_this.showCachedSelection) {
          dataSet.clearCachedSelected();
        }
      }
    });
    this.saveCustomizedDebounce = debounce(this.saveCustomized, 1000);
    runInAction(function () {
      _this.scrollPosition = ScrollPosition.left;
      _this.mouseBatchChooseIdList = [];
      _this.mouseBatchChooseState = false;
      _this.showCachedSelection = false;
      _this.lockColumnsHeadRowsHeight = {};
      _this.lockColumnsBodyRowsHeight = {};
      _this.lockColumnsFootRowsHeight = {};
      _this.node = node;
      _this.expandedRows = [];
      _this.lastScrollTop = 0;
      _this.customizedActiveKey = ['columns'];
      _this.leftOriginalColumns = [];
      _this.originalColumns = [];
      _this.rightOriginalColumns = [];
      _this.tempCustomized = {
        columns: {}
      };
      _this.customized = {
        columns: {}
      };

      _this.setProps(node.props);

      if (_this.customizable) {
        _this.loadCustomized().then(_this.handleLoadCustomized);
      } else {
        _this.initColumns();
      }
    });
  }

  _createClass(TableStore, [{
    key: "customizedColumnHeader",
    value: function customizedColumnHeader() {
      return React.createElement(CustomizationColumnHeader, {
        onHeaderClick: this.openCustomizationModal
      });
    }
  }, {
    key: "handleLoadCustomized",
    value: function handleLoadCustomized() {
      this.initColumns();
      var _this$props2 = this.props,
          onAggregationChange = _this$props2.onAggregationChange,
          aggregation = _this$props2.aggregation;
      var customAggregation = this.customized.aggregation;

      if (onAggregationChange && customAggregation !== undefined && customAggregation !== aggregation) {
        onAggregationChange(customAggregation);
      }
    }
  }, {
    key: "isBuiltInColumn",
    value: function isBuiltInColumn(_ref12) {
      var key = _ref12.key;

      if (isString(key)) {
        return [DRAG_KEY, SELECTION_KEY, ROW_NUMBER_KEY, CUSTOMIZED_KEY, EXPAND_KEY].includes(key);
      }
    }
  }, {
    key: "getColumnTooltip",
    value: function getColumnTooltip(column) {
      var tooltip = column.tooltip;

      if (tooltip) {
        return tooltip;
      }

      return getTooltip('table-cell');
    }
  }, {
    key: "getColumnHeaders",
    value: function getColumnHeaders() {
      var leafNamedColumns = this.leafNamedColumns,
          dataSet = this.dataSet;
      return getHeaderTexts(dataSet, leafNamedColumns.slice(), this.aggregation);
    }
  }, {
    key: "showEditor",
    value: function showEditor(name) {
      this.currentEditorName = name;
    }
  }, {
    key: "setLastScrollTop",
    value: function setLastScrollTop(lastScrollTop) {
      this.lastScrollTop = lastScrollTop;
    }
  }, {
    key: "hideEditor",
    value: function hideEditor() {
      this.currentEditorName = undefined;
    }
  }, {
    key: "changeMouseBatchChooseIdList",
    value: function changeMouseBatchChooseIdList(idList) {
      this.mouseBatchChooseIdList = idList;
    }
  }, {
    key: "showNextEditor",
    value: function showNextEditor(name, reserve) {
      if (reserve) {
        this.dataSet.pre();
      } else {
        this.dataSet.next();
      }

      this.showEditor(name);
    }
  }, {
    key: "setProps",
    value: function setProps(props) {
      this.props = props;
      var showCachedSelection = props.showCachedSelection;

      if (showCachedSelection !== undefined) {
        this.showCachedSelection = showCachedSelection;
      }
    }
  }, {
    key: "updateProps",
    value: function updateProps(props) {
      var customizedCode = this.props.customizedCode;
      this.setProps(props);

      if (this.customizable) {
        if (customizedCode !== props.customizedCode) {
          this.loadCustomized().then(this.handleLoadCustomized);
          return;
        }

        var aggregation = props.aggregation;
        var customized = this.customized;

        if (!isNil(aggregation) && aggregation !== customized.aggregation) {
          customized.aggregation = aggregation;
          this.saveCustomized();
        }
      }

      this.initColumns();
    }
  }, {
    key: "initColumns",
    value: function initColumns() {
      var customized = this.customized,
          customizable = this.customizable,
          aggregation = this.aggregation,
          selectionColumn = this.selectionColumn;
      var _this$props3 = this.props,
          columns = _this$props3.columns,
          children = _this$props3.children,
          rowBoxPlacement = _this$props3.rowBoxPlacement;
      var customizedColumns = customizable ? customized.columns : undefined;

      var _ref13 = columns ? mergeDefaultProps(columns, aggregation, customizedColumns) : normalizeColumns(children, aggregation, customizedColumns),
          _ref14 = _slicedToArray(_ref13, 4),
          leftOriginalColumns = _ref14[0],
          originalColumns = _ref14[1],
          rightOriginalColumns = _ref14[2],
          hasAggregationColumn = _ref14[3];

      if (isNumber(rowBoxPlacement) && this.hasRowBox) {
        originalColumns.splice(rowBoxPlacement, 0, selectionColumn);
      }

      this.leftOriginalColumns = leftOriginalColumns;
      this.originalColumns = originalColumns;
      this.rightOriginalColumns = rightOriginalColumns;
      this.hasAggregationColumn = hasAggregationColumn;
    }
  }, {
    key: "isAggregationCellExpanded",
    value: function isAggregationCellExpanded(record, key) {
      var expandedKeys = record.getState(AGGREGATION_EXPAND_CELL_KEY);

      if (expandedKeys) {
        return expandedKeys.includes(key);
      }

      return false;
    }
  }, {
    key: "setAggregationCellExpanded",
    value: function setAggregationCellExpanded(record, key, expanded) {
      var expandedKeys = record.getState(AGGREGATION_EXPAND_CELL_KEY) || [];
      var index = expandedKeys.indexOf(key);

      if (expanded) {
        if (index === -1) {
          expandedKeys.push(key);
        }
      } else if (index !== -1) {
        expandedKeys.splice(index, 1);
      }

      record.setState(AGGREGATION_EXPAND_CELL_KEY, expandedKeys);
    }
  }, {
    key: "isRowExpanded",
    value: function isRowExpanded(record) {
      var _record$isExpanded = record.isExpanded,
          isExpanded = _record$isExpanded === void 0 ? this.expandedRows.indexOf(record.key) !== -1 : _record$isExpanded;
      return isExpanded && (!this.isTree || !record.parent || this.isRowExpanded(record.parent));
    }
    /**
     *
     * @param record 想修改的record
     * @param expanded 设置是否展开
     * @param disHandler 设置是否需要触发展开事件
     */

  }, {
    key: "setRowExpanded",
    value: function setRowExpanded(record, expanded, disHandler) {
      record.isExpanded = expanded;

      if (!this.inBatchExpansion) {
        var index = this.expandedRows.indexOf(record.key);

        if (expanded) {
          if (index === -1) {
            this.expandedRows.push(record.key);
          }
        } else if (index !== -1) {
          this.expandedRows.splice(index, 1);
        }
      }

      var onExpand = this.props.onExpand;

      if (onExpand && !disHandler) {
        onExpand(expanded, record);
      }

      if (expanded && this.canTreeLoadData) {
        this.onTreeNodeLoad({
          record: record
        });
      }
    }
  }, {
    key: "isRowPending",
    value: function isRowPending(record) {
      return record.pending === true;
    }
  }, {
    key: "setRowPending",
    value: function setRowPending(record, pending) {
      record.pending = pending;
    }
  }, {
    key: "isRowLoaded",
    value: function isRowLoaded(record) {
      return record.childrenLoaded === true;
    }
  }, {
    key: "setRowLoaded",
    value: function setRowLoaded(record, loaded) {
      record.childrenLoaded = loaded;
    }
  }, {
    key: "isRowHover",
    value: function isRowHover(record) {
      return this.hoverRow === record;
    }
  }, {
    key: "setRowHover",
    value: function setRowHover(record, hover) {
      this.hoverRow = hover ? record : undefined;
    }
  }, {
    key: "expandAll",
    value: function expandAll() {
      var _this2 = this;

      this.inBatchExpansion = true;
      this.expandedRows = this.dataSet.records.map(function (record) {
        _this2.setRowExpanded(record, true);

        return record.key;
      });
      this.inBatchExpansion = false;
    }
  }, {
    key: "collapseAll",
    value: function collapseAll() {
      var _this3 = this;

      this.inBatchExpansion = true;
      this.dataSet.records.forEach(function (record) {
        return _this3.setRowExpanded(record, false);
      });
      this.expandedRows = [];
      this.inBatchExpansion = false;
    }
  }, {
    key: "onTreeNodeLoad",
    value: function () {
      var _onTreeNodeLoad = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee(_ref15) {
        var record, _this$props4, dataSet, treeLoadData, treeAsync, promises;

        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                record = _ref15.record;
                _this$props4 = this.props, dataSet = _this$props4.dataSet, treeLoadData = _this$props4.treeLoadData, treeAsync = _this$props4.treeAsync;
                promises = [];
                this.setRowPending(record, true);

                if (treeAsync && dataSet) {
                  promises.push(dataSet.queryMoreChild(record));
                }

                if (treeLoadData) {
                  promises.push(treeLoadData({
                    record: record,
                    dataSet: dataSet
                  }));
                }

                _context.prev = 6;
                _context.next = 9;
                return Promise.all(promises);

              case 9:
                this.setRowLoaded(record, true);

              case 10:
                _context.prev = 10;
                this.setRowPending(record, false);
                return _context.finish(10);

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

      function onTreeNodeLoad(_x4) {
        return _onTreeNodeLoad.apply(this, arguments);
      }

      return onTreeNodeLoad;
    }()
  }, {
    key: "renderSelectionBox",
    value: function renderSelectionBox(_ref16) {
      var record = _ref16.record;
      return _renderSelectionBox({
        record: record,
        store: this
      });
    }
  }, {
    key: "renderRowNumber",
    value: function renderRowNumber(_ref17) {
      var record = _ref17.record,
          dataSet = _ref17.dataSet;
      var isTree = this.isTree,
          rowNumber = this.props.rowNumber;
      var numbers = getRowNumbers(record, dataSet, isTree);
      var number = numbers.join('-');

      if (typeof rowNumber === 'function') {
        return rowNumber({
          record: record,
          dataSet: dataSet,
          text: number,
          pathNumbers: numbers
        });
      }

      return number;
    }
  }, {
    key: "renderDragBox",
    value: function renderDragBox(_ref18) {
      var record = _ref18.record;
      var rowDragRender = this.props.rowDragRender;

      if (rowDragRender && isFunction(rowDragRender.renderIcon)) {
        return rowDragRender.renderIcon({
          record: record
        });
      }

      return React.createElement(Icon, {
        type: "baseline-drag_indicator"
      });
    }
  }, {
    key: "changeCustomizedColumnValue",
    value: function changeCustomizedColumnValue(column, value) {
      var columns = this.customized.columns;
      set(column, value);
      var columnKey = getColumnKey(column).toString();

      var oldCustomized = _get(columns, columnKey);

      set(columns, columnKey, _objectSpread({}, oldCustomized, {}, value));
      this.saveCustomizedDebounce();
    }
  }, {
    key: "saveCustomized",
    value: function saveCustomized(customized) {
      if (this.customizable && this.customizedLoaded) {
        var customizedCode = this.props.customizedCode;

        if (customized) {
          this.customized = customized;
        }

        if (customizedCode) {
          var tableCustomizedSave = getConfig('tableCustomizedSave') || getConfig('customizedSave');
          tableCustomizedSave(customizedCode, this.customized, 'Table');
        }
      }
    }
  }, {
    key: "openCustomizationModal",
    value: function openCustomizationModal(modal) {
      var element = this.node.element,
          height = this.height;

      if (height === undefined) {
        this.totalHeight = element.offsetHeight;
      }

      var customizedCode = this.props.customizedCode;
      var modalProps = {
        drawer: true,
        size: Size.small,
        title: $l('Table', 'customization_settings'),
        children: React.createElement(CustomizationSettings, null),
        bodyStyle: {
          overflow: 'hidden auto',
          padding: 0
        }
      };

      if (customizedCode) {
        modalProps.okText = $l('Table', 'save_button');
      }

      modal.open(modalProps);
    }
  }, {
    key: "loadCustomized",
    value: function () {
      var _loadCustomized = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee2() {
        var _this4 = this;

        var customizedCode, tableCustomizedLoad, customized;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                customizedCode = this.props.customizedCode;

                if (!(this.customizable && customizedCode)) {
                  _context2.next = 13;
                  break;
                }

                tableCustomizedLoad = getConfig('tableCustomizedLoad') || getConfig('customizedLoad');
                runInAction(function () {
                  delete _this4.customizedLoaded;
                  _this4.loading = true;
                });
                _context2.prev = 4;
                _context2.next = 7;
                return tableCustomizedLoad(customizedCode, 'Table');

              case 7:
                customized = _context2.sent;
                runInAction(function () {
                  _this4.customized = _objectSpread({
                    columns: {}
                  }, customized);
                });
                this.customizedLoaded = true;

              case 10:
                _context2.prev = 10;
                runInAction(function () {
                  _this4.loading = false;
                });
                return _context2.finish(10);

              case 13:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this, [[4,, 10, 13]]);
      }));

      function loadCustomized() {
        return _loadCustomized.apply(this, arguments);
      }

      return loadCustomized;
    }()
  }, {
    key: "handleAllPageSelectionMenuClick",
    value: function handleAllPageSelectionMenuClick(_ref19) {
      var key = _ref19.key;
      var dataSet = this.dataSet;
      var isAllPageSelection = dataSet.isAllPageSelection;

      switch (key) {
        case 'current':
          {
            if (this.allChecked) {
              dataSet.unSelectAll();
            } else {
              var filter = this.props.filter;
              dataSet.selectAll(filter);
            }

            break;
          }

        case 'all':
          dataSet.setAllPageSelection(!isAllPageSelection);
          break;

        default:
      }
    }
  }, {
    key: "renderAllPageSelectionMenu",
    value: function renderAllPageSelectionMenu() {
      var isAllPageSelection = this.dataSet.isAllPageSelection,
          allChecked = this.allChecked,
          prefixCls = this.prefixCls;
      return React.createElement(Menu, {
        prefixCls: "".concat(prefixCls, "-dropdown-menu"),
        onClick: this.handleAllPageSelectionMenuClick
      }, React.createElement(Menu.Item, {
        key: "current"
      }, $l('Table', allChecked ? 'unselect_current_page' : 'select_current_page')), React.createElement(Menu.Item, {
        key: "all"
      }, $l('Table', isAllPageSelection ? 'unselect_all_page' : 'select_all_page')));
    }
  }, {
    key: "multipleSelectionRenderer",
    value: function multipleSelectionRenderer() {
      var buttons = [React.createElement(ObserverCheckBox, {
        key: "selectAll",
        checked: this.allChecked,
        indeterminate: this.indeterminate,
        onChange: this.handleSelectAllChange,
        value: true
      })];

      if (this.props.showAllPageSelectionButton) {
        buttons.push(React.createElement(Dropdown, {
          key: "selectAllPage",
          overlay: this.renderAllPageSelectionMenu
        }, React.createElement(Icon, {
          type: "baseline-arrow_drop_down"
        })));
      }

      return buttons;
    }
  }, {
    key: "bodyHeight",
    get: function get() {
      return this.virtual ? this.virtualHeight : this.calcBodyHeight;
    }
  }, {
    key: "stickyLeft",
    get: function get() {
      return [ScrollPosition.right, ScrollPosition.middle].includes(this.scrollPosition);
    }
  }, {
    key: "stickyRight",
    get: function get() {
      return [ScrollPosition.left, ScrollPosition.middle].includes(this.scrollPosition);
    }
  }, {
    key: "performanceEnabled",
    get: function get() {
      var performanceEnabled = getConfig('performanceEnabled');
      return performanceEnabled && performanceEnabled.Table;
    }
  }, {
    key: "dataSet",
    get: function get() {
      return this.props.dataSet;
    }
  }, {
    key: "prefixCls",
    get: function get() {
      var _this$props5 = this.props,
          suffixCls = _this$props5.suffixCls,
          prefixCls = _this$props5.prefixCls;
      return getProPrefixCls(suffixCls, prefixCls);
    }
  }, {
    key: "customizable",
    get: function get() {
      var customizedCode = this.props.customizedCode;

      if (customizedCode && (this.columnTitleEditable || this.columnDraggable || this.columnHideable)) {
        if ('customizable' in this.props) {
          return this.props.customizable;
        }

        return getConfig('tableCustomizable') || getCustomizable('Table');
      }

      return false;
    }
  }, {
    key: "aggregation",
    get: function get() {
      var aggregation = this.customized.aggregation;

      if (aggregation !== undefined) {
        return aggregation;
      }

      var propAggregation = this.props.aggregation;
      return propAggregation;
    }
  }, {
    key: "aggregationExpandType",
    get: function get() {
      return this.customized.aggregationExpandType || 'cell';
    }
  }, {
    key: "autoHeight",
    get: function get() {
      var autoHeight = this.props.autoHeight;

      if (autoHeight) {
        var defaultAutoHeight = {
          type: TableAutoHeightType.minHeight,
          diff: getConfig('tableAutoHeightDiff') || 80
        };

        if (isObject(autoHeight)) {
          return _objectSpread({}, defaultAutoHeight, {}, autoHeight);
        }

        return defaultAutoHeight;
      }

      return undefined;
    }
  }, {
    key: "heightType",
    get: function get() {
      var tempHeightType = _get(this.tempCustomized, 'heightType');

      if (tempHeightType !== undefined) {
        return tempHeightType;
      }

      var heightType = this.customized.heightType;

      if (heightType !== undefined) {
        return heightType;
      }

      return this.originalHeightType;
    }
  }, {
    key: "originalHeightType",
    get: function get() {
      var _this$props6 = this.props,
          style = _this$props6.style,
          autoHeight = _this$props6.autoHeight;

      if (autoHeight) {
        return TableHeightType.flex;
      }

      if (style) {
        var height = style.height;

        if (isString(height) && isCalcSize(height)) {
          return TableHeightType.flex;
        }

        if (isNumber(toPx(height))) {
          return TableHeightType.fixed;
        }
      }

      return TableHeightType.auto;
    }
  }, {
    key: "virtualCell",
    get: function get() {
      if ('virtualCell' in this.props) {
        return this.props.virtualCell;
      }

      return getConfig('tableVirtualCell');
    }
    /**
     * number 矫正虚拟滚动由于样式问题导致的高度不符问题
     */

  }, {
    key: "virtualRowHeight",
    get: function get() {
      var virtualRowHeight = this.props.virtualRowHeight;

      if (virtualRowHeight) {
        return virtualRowHeight;
      }

      return isNumber(this.rowHeight) ? this.rowHeight + 3 : 33;
    }
  }, {
    key: "virtual",
    get: function get() {
      if (this.height !== undefined && isNumber(this.virtualRowHeight)) {
        if ('virtual' in this.props) {
          return this.props.virtual;
        }

        return getConfig('tableVirtual');
      }

      return false;
    }
  }, {
    key: "virtualHeight",
    get: function get() {
      var virtualRowHeight = this.virtualRowHeight,
          data = this.data;
      return Math.round(data.length * virtualRowHeight);
    }
  }, {
    key: "virtualStartIndex",
    get: function get() {
      var virtualRowHeight = this.virtualRowHeight,
          lastScrollTop = this.lastScrollTop;
      return Math.max(Math.round(lastScrollTop / virtualRowHeight - 3), 0);
    }
  }, {
    key: "virtualEndIndex",
    get: function get() {
      var virtualRowHeight = this.virtualRowHeight,
          lastScrollTop = this.lastScrollTop,
          height = this.height,
          data = this.data;
      return Math.min(height !== undefined ? Math.round((lastScrollTop + height) / virtualRowHeight) + 3 : Infinity, data.length);
    }
  }, {
    key: "virtualTop",
    get: function get() {
      var virtualRowHeight = this.virtualRowHeight,
          virtualStartIndex = this.virtualStartIndex;
      return virtualStartIndex * virtualRowHeight;
    }
  }, {
    key: "virtualData",
    get: function get() {
      var data = this.data,
          virtual = this.virtual;

      if (virtual) {
        var virtualEndIndex = this.virtualEndIndex,
            virtualStartIndex = this.virtualStartIndex;
        return data.slice(virtualStartIndex, virtualEndIndex);
      }

      return data;
    }
  }, {
    key: "hidden",
    get: function get() {
      return this.styledHidden || this.props.hidden;
    }
  }, {
    key: "alwaysShowRowBox",
    get: function get() {
      if ('alwaysShowRowBox' in this.props) {
        return this.props.alwaysShowRowBox;
      }

      var alwaysShowRowBox = getConfig('tableAlwaysShowRowBox');

      if (typeof alwaysShowRowBox !== 'undefined') {
        return alwaysShowRowBox;
      }

      return false;
    }
  }, {
    key: "keyboard",
    get: function get() {
      if ('keyboard' in this.props) {
        return this.props.keyboard;
      }

      var keyboard = getConfig('tableKeyboard');

      if (typeof keyboard !== 'undefined') {
        return keyboard;
      }

      return false;
    }
  }, {
    key: "columnResizable",
    get: function get() {
      if (this.currentEditRecord) {
        return false;
      }

      if ('columnResizable' in this.props) {
        return this.props.columnResizable;
      }

      return getConfig('tableColumnResizable') !== false;
    }
  }, {
    key: "columnHideable",
    get: function get() {
      if ('columnHideable' in this.props) {
        return this.props.columnHideable;
      }

      return getConfig('tableColumnHideable') !== false;
    }
    /**
     * 表头支持编辑
     */

  }, {
    key: "columnTitleEditable",
    get: function get() {
      if ('columnTitleEditable' in this.props) {
        return this.props.columnTitleEditable;
      }

      return getConfig('tableColumnTitleEditable') === true;
    }
  }, {
    key: "pagination",
    get: function get() {
      if ('pagination' in this.props) {
        return this.props.pagination;
      }

      return getConfig('pagination');
    }
  }, {
    key: "dragColumnAlign",
    get: function get() {
      if ('dragColumnAlign' in this.props) {
        return this.props.dragColumnAlign;
      }

      return getConfig('tableDragColumnAlign');
    }
  }, {
    key: "columnDraggable",
    get: function get() {
      if ('columnDraggable' in this.props) {
        return this.props.columnDraggable;
      }

      if ('dragColumn' in this.props) {
        return this.props.dragColumn;
      }

      if (getConfig('tableColumnDraggable') === true) {
        return true;
      }

      return getConfig('tableDragColumn') === true;
    }
  }, {
    key: "rowDraggable",
    get: function get() {
      if (this.isTree) {
        return false;
      }

      if ('rowDraggable' in this.props) {
        return this.props.rowDraggable;
      }

      if ('dragRow' in this.props) {
        return this.props.dragRow;
      }

      if (getConfig('tableRowDraggable') === true) {
        return true;
      }

      return getConfig('tableDragRow') === true;
    }
  }, {
    key: "size",
    get: function get() {
      var size = this.customized.size;

      if (size !== undefined) {
        return size;
      }

      return this.props.size || Size["default"];
    }
  }, {
    key: "rowHeight",
    get: function get() {
      var rowHeight = 30;

      if ('rowHeight' in this.props) {
        rowHeight = this.props.rowHeight;
      } else {
        var tableRowHeight = getConfig('tableRowHeight');

        if (typeof tableRowHeight !== 'undefined') {
          rowHeight = tableRowHeight;
        }
      }

      if (isNumber(rowHeight)) {
        switch (this.size) {
          case Size.large:
            return rowHeight + 2;

          case Size.small:
            return rowHeight - 2;

          default:
        }
      }

      return rowHeight;
    }
  }, {
    key: "autoFootHeight",
    get: function get() {
      if ('autoFootHeight' in this.props) {
        return this.props.autoFootHeight;
      }

      return false;
    }
  }, {
    key: "emptyText",
    get: function get() {
      return getConfig('renderEmpty')('Table');
    }
  }, {
    key: "highLightRow",
    get: function get() {
      if ('highLightRow' in this.props) {
        return this.props.highLightRow;
      }

      return getConfig('tableHighLightRow');
    }
  }, {
    key: "parityRow",
    get: function get() {
      var parityRow = this.customized.parityRow;

      if (parityRow !== undefined) {
        return parityRow;
      }

      if ('parityRow' in this.props) {
        return this.props.parityRow;
      }

      return getConfig('tableParityRow') === true;
    }
  }, {
    key: "showRemovedRow",
    get: function get() {
      if ('showRemovedRow' in this.props) {
        return this.props.showRemovedRow;
      }

      return getConfig('tableShowRemovedRow') === true;
    }
  }, {
    key: "autoFocus",
    get: function get() {
      if ('autoFocus' in this.props) {
        return this.props.autoFocus;
      }

      return getConfig('tableAutoFocus') !== false;
    }
  }, {
    key: "selectedHighLightRow",
    get: function get() {
      if ('selectedHighLightRow' in this.props) {
        return this.props.selectedHighLightRow;
      }

      return getConfig('tableSelectedHighLightRow') !== false;
    }
  }, {
    key: "editorNextKeyEnterDown",
    get: function get() {
      if ('editorNextKeyEnterDown' in this.props) {
        return this.props.editorNextKeyEnterDown;
      }

      return getConfig('tableEditorNextKeyEnterDown') !== false;
    }
  }, {
    key: "border",
    get: function get() {
      if ('border' in this.props) {
        return this.props.border;
      }

      return getConfig('tableBorder') !== false;
    }
  }, {
    key: "columnEditorBorder",
    get: function get() {
      if ('columnEditorBorder' in this.props) {
        return this.props.columnEditorBorder;
      }

      var tableColumnEditorBorder = getConfig('tableColumnEditorBorder');

      if (tableColumnEditorBorder !== undefined) {
        return tableColumnEditorBorder;
      }

      return this.border;
    }
  }, {
    key: "queryBar",
    get: function get() {
      return this.props.queryBar || getConfig('queryBar');
    }
  }, {
    key: "expandIcon",
    get: function get() {
      return this.props.expandIcon || getConfig('tableExpandIcon');
    } // get pristine(): boolean | undefined {
    //   return this.props.pristine;
    // }

  }, {
    key: "currentEditRecord",
    get: function get() {
      return this.dataSet.find(function (record) {
        return record.editing === true;
      });
    },
    set: function set(record) {
      var _this5 = this;

      runInAction(function () {
        var currentEditRecord = _this5.currentEditRecord,
            dataSet = _this5.dataSet;

        if (currentEditRecord) {
          if (currentEditRecord.isNew) {
            dataSet.remove(currentEditRecord);
          } else {
            currentEditRecord.reset();
            currentEditRecord.editing = false;
          }
        }

        if (record) {
          record.editing = true;
        }
      });
    }
  }, {
    key: "isTree",
    get: function get() {
      return this.props.mode === TableMode.tree;
    }
  }, {
    key: "editing",
    get: function get() {
      return this.currentEditorName !== undefined || this.currentEditRecord !== undefined;
    }
  }, {
    key: "hasRowBox",
    get: function get() {
      var _this$props7 = this.props,
          dataSet = _this$props7.dataSet,
          selectionMode = _this$props7.selectionMode;
      var alwaysShowRowBox = this.alwaysShowRowBox;

      if (dataSet) {
        var selection = dataSet.selection;
        return selection && (selectionMode === SelectionMode.r