choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,451 lines (1,242 loc) • 69.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React from 'react';
import classNames from 'classnames';
import ResizeObserver from 'resize-observer-polyfill';
import raf from 'raf';
import { observer } from 'mobx-react';
import pick from 'lodash/pick';
import omit from 'lodash/omit';
import isString from 'lodash/isString';
import isNil from 'lodash/isNil';
import isUndefined from 'lodash/isUndefined';
import noop from 'lodash/noop';
import { action, runInAction, toJS } from 'mobx';
import { DragDropContext } from 'react-beautiful-dnd';
import warning from '../../../es/_util/warning';
import { isCalcSize, isPercentSize, 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 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 { TableContextProvider } from './TableContext';
import TableWrapper from './TableWrapper';
import Profiler from './Profiler';
import TableTBody from './TableTBody';
import ExpandableTableTBody from './ExpandableTableTBody';
import TableFooter from './TableFooter';
import { ColumnLock, RowBoxPlacement, ScrollPosition, SelectionMode, TableHeightType, TableMode, TablePaginationPosition } 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 ComboBar from './query-bar/TableComboBar';
import DynamicFilterBar from './query-bar/TableDynamicFilterBar';
import FilterSelect from './query-bar/FilterSelect';
import { findCell, findIndexedSibling, findRow, getHeight, getPaginationPosition, isCanEdictingRow, isDropresult, isStickySupport, onlyCustomizedColumn } from './utils';
import TableBody from './TableBody';
import VirtualWrapper from './VirtualWrapper';
import SelectionTips from './SelectionTips';
import { DataSetEvents, DataSetSelection } from '../data-set/enum';
import { Size } from '../core/enum';
import StickyShadow from './StickyShadow';
import { getUniqueFieldNames } from '../data-set/utils';
import mergeProps from '../_util/mergeProps';
import ErrorBar from './ErrorBar';
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');
if (wrapperClassName) {
table.className = wrapperClassName;
}
var thead = document.createElement('thead');
thead.className = "".concat(prefixCls, "-thead");
table.appendChild(thead);
var headtr = document.createElement('tr');
thead.appendChild(headtr);
var tbody = document.createElement('tbody');
tbody.className = "".concat(prefixCls, "-tbody");
table.appendChild(tbody);
if (!document.body) {
throw new Error('document.body required a body to append');
}
document.body.appendChild(table);
return {
tbody: tbody,
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 = [];
return _this;
}
_createClass(Table, [{
key: "currentRow",
get: function get() {
var prefixCls = this.prefixCls;
return this.element.querySelector(".".concat(prefixCls, "-row-current"));
}
}, {
key: "firstRow",
get: function get() {
var prefixCls = this.prefixCls;
return this.element.querySelector(".".concat(prefixCls, "-row:first-child"));
}
}, {
key: "lastRow",
get: function get() {
var prefixCls = this.prefixCls;
return this.element.querySelector(".".concat(prefixCls, "-row:last-child"));
}
}, {
key: "saveResizeRef",
value: function saveResizeRef(node) {
this.resizeLine = node;
}
}, {
key: "saveContentRef",
value: function saveContentRef(node) {
this.tableContentWrap = node;
}
}, {
key: "useFocusedClassName",
value: function useFocusedClassName() {
return false;
}
}, {
key: "setCode",
value: function setCode(props) {
var customizedCode = props.customizedCode;
if (customizedCode) {
this.code = customizedCode;
} else {
_get(_getPrototypeOf(Table.prototype), "setCode", this).call(this, props);
}
}
}, {
key: "handleResize",
value: function handleResize(width) {
var element = this.element,
tableStore = this.tableStore,
wrapperWidth = this.wrapperWidth;
if (width !== undefined) {
var duplicate = wrapperWidth.includes(width);
wrapperWidth.unshift(width);
window.clearTimeout(this.wrapperWidthTimer);
this.wrapperWidthTimer = window.setTimeout(function () {
wrapperWidth.pop();
}, 500);
if (wrapperWidth.length > 2) {
wrapperWidth.pop();
}
if (duplicate) {
return;
}
}
if (!element.offsetParent) {
tableStore.styledHidden = true;
} else if (!tableStore.hidden) {
this.syncSizeInFrame(width);
} else {
tableStore.styledHidden = false;
}
}
}, {
key: "handleWindowResize",
value: function handleWindowResize() {
this.handleResize();
}
}, {
key: "handleDataSetLoad",
value: function handleDataSetLoad() {
var tableStore = this.tableStore;
if (tableStore.performanceEnabled) {
tableStore.performanceOn = true;
}
this.initDefaultExpandedRows();
}
}, {
key: "handleDataSetCreate",
value: function handleDataSetCreate(_ref) {
var record = _ref.record,
dataSet = _ref.dataSet;
var tableStore = this.tableStore;
if (tableStore.inlineEdit) {
if (tableStore.currentEditRecord) {
tableStore.currentEditRecord.reset();
dataSet.remove(record);
} else {
tableStore.currentEditRecord = record;
}
}
}
}, {
key: "handleDataSetValidateSelf",
value: function handleDataSetValidateSelf(props) {
var onValidateSelf = this.getContextConfig('onValidateSelf');
if (onValidateSelf) {
onValidateSelf(props);
}
}
}, {
key: "handleDataSetValidate",
value: function handleDataSetValidate(props) {
var valid = props.valid,
dataSet = props.dataSet,
validationErrors = props.errors,
noLocate = props.noLocate;
var autoValidationLocate = this.props.autoValidationLocate;
var onValidate = this.getContextConfig('onValidate');
if (onValidate) {
onValidate(props);
}
if (autoValidationLocate !== false && !noLocate && !valid) {
var tableStore = this.tableStore;
var _validationErrors = _slicedToArray(validationErrors, 1),
firstInvalidRecord = _validationErrors[0];
if (firstInvalidRecord) {
var errors = firstInvalidRecord.errors,
record = firstInvalidRecord.record;
if (errors.length) {
if (!tableStore.showCachedSelection) {
if (dataSet.cachedRecords.includes(record)) {
runInAction(function () {
tableStore.showCachedSelection = true;
});
}
}
var _errors = _slicedToArray(errors, 1),
name = _errors[0].field.name;
if (tableStore.virtual && !findRow(tableStore, record)) {
var tableBodyWrap = this.tableBodyWrap;
if (tableBodyWrap) {
var rowMetaData = tableStore.rowMetaData;
if (rowMetaData) {
var metaData = rowMetaData.find(function (m) {
return m.record === record;
});
if (metaData) {
tableBodyWrap.scrollTop = metaData.offset;
}
} else {
tableBodyWrap.scrollTop = record.index * tableStore.virtualRowHeight;
}
}
}
raf(function () {
var cell = findCell(tableStore, name, undefined, record);
if (cell) {
cell.focus();
}
});
}
}
}
}
}, {
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 _this$tableStore, dataSet, editors;
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
_this$tableStore = this.tableStore, dataSet = _this$tableStore.dataSet, editors = _this$tableStore.editors;
if (editors.size) {
e.preventDefault();
dataSet.create({}, 0);
}
case 2:
case "end":
return _context4.stop();
}
}
}, _callee4, this);
}));
function handleKeyDownCTRLN(_x4) {
return _handleKeyDownCTRLN.apply(this, arguments);
}
return handleKeyDownCTRLN;
}() // TODO: To be optimized
}, {
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, 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
uniqueFieldNames = getUniqueFieldNames(dataSet);
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: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return _get(_getPrototypeOf(Table.prototype), "getOmitPropsKeys", this).call(this).concat(['columns', 'header', 'showHeader', 'footer', 'border', 'columnEditorBorder', 'selectionMode', 'rowBoxPlacement', 'alwaysShowRowBox', 'showSelectionTips', 'showSelectionCachedButton', 'showCachedSelection', 'onShowCachedSelectionChange', 'showAllPageSelectionButton', 'onRow', 'onColumnResize', 'rowRenderer', 'buttons', 'buttonsLimit', 'rowHeight', 'headerRowHeight', 'footerRowHeight', 'queryFields', 'queryFieldsLimit', 'summaryFieldsLimit', 'summaryBarFieldWidth', 'queryBar', 'queryBarProps', 'autoFocus', 'summaryBar', 'defaultRowExpanded', 'expandRowByClick', 'expandedRowRenderer', 'expandIconColumnIndex', 'indentSize', 'filter', 'mode', 'editMode', 'filterBarFieldName', 'filterBarPlaceholder', 'pagination', 'highLightRow', 'selectedHighLightRow', 'columnResizable', 'columnTitleEditable', 'pristine', 'expandIcon', 'spin', 'virtual', 'virtualCell', 'virtualSpin', 'autoWidth', 'autoHeight', 'autoFootHeight', 'useMouseBatchChoose', 'autoMaxWidth', 'dragColumnAlign', 'columnDraggable', 'rowDraggable', 'onDragEnd', 'rowDragRender', 'columnsDragRender', 'editorNextKeyEnterDown', 'onDragEndBefore', 'keyboard', 'dynamicFilterBar', 'parityRow', 'rowNumber', 'treeAsync', 'treeLoadData', 'customizable', 'customizedCode', 'dragColumn', 'dragRow', 'clientExportQuantity', 'treeQueryExpanded', 'summary', 'aggregation', 'onAggregationChange', 'showRemovedRow', 'searchCode', 'groups', 'onScrollLeft', 'onScrollTop', 'bodyExpandable', 'defaultBodyExpanded', 'bodyExpanded', 'onBodyExpanded']);
}
}, {
key: "getWrapperProps",
value: function getWrapperProps() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var autoWidth = this.props.autoWidth;
var wrapperProps = _objectSpread({}, props);
if (autoWidth) {
var _this$tableStore2 = this.tableStore,
columnGroups = _this$tableStore2.columnGroups,
overflowY = _this$tableStore2.overflowY,
border = _this$tableStore2.border;
wrapperProps.style = {
width: columnGroups.width + (overflowY ? measureScrollbar() : 0) + (border ? 2 : 0)
};
}
return _get(_getPrototypeOf(Table.prototype), "getWrapperProps", this).call(this, wrapperProps);
}
}, {
key: "getOtherProps",
value: function getOtherProps() {
var otherProps = _get(_getPrototypeOf(Table.prototype), "getOtherProps", this).call(this);
otherProps.onKeyDown = this.handleKeyDown;
var rowHeight = this.tableStore.rowHeight;
if (rowHeight === 'auto') {
delete otherProps.style;
} else {
otherProps.style = {
lineHeight: pxToRem(rowHeight)
};
}
return otherProps;
}
}, {
key: "getClassName",
value: function getClassName() {
var _get$call;
var _this$tableStore3 = this.tableStore,
border = _this$tableStore3.border,
parityRow = _this$tableStore3.parityRow,
aggregation = _this$tableStore3.aggregation,
size = _this$tableStore3.size,
prefixCls = this.prefixCls;
return _get(_getPrototypeOf(Table.prototype), "getClassName", this).call(this, (_get$call = {}, _defineProperty(_get$call, "".concat(prefixCls, "-").concat(size), size !== Size["default"]), _defineProperty(_get$call, "".concat(prefixCls, "-bordered"), border), _defineProperty(_get$call, "".concat(prefixCls, "-parity-row"), parityRow), _defineProperty(_get$call, "".concat(prefixCls, "-aggregation"), aggregation), _get$call));
}
/**
* 获取传入的 Spin props
*/
}, {
key: "getSpinProps",
value: function getSpinProps() {
var _this$props3 = this.props,
spin = _this$props3.spin,
dataSet = _this$props3.dataSet;
if (spin && !isUndefined(spin.spinning)) return _objectSpread({}, spin);
var loading = this.tableStore.loading;
if (loading) {
return _objectSpread(_objectSpread({}, spin), {}, {
spinning: true
});
}
return _objectSpread(_objectSpread({}, spin), {}, {
dataSet: dataSet
});
}
}, {
key: "componentWillMount",
value: function componentWillMount() {
this.initDefaultExpandedRows();
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
_get(_getPrototypeOf(Table.prototype), "componentDidMount", this).call(this);
this.connect();
this.syncSize();
this.syncSizeInFrame();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var tableStore = this.tableStore;
var currentEditorName = tableStore.currentEditorName;
if (currentEditorName) {
var length = tableStore.columns.length;
var currentEditor = tableStore.editors.get(currentEditorName);
if (currentEditor && length !== this.columnsSize) {
this.columnsSize = length;
currentEditor.alignEditor();
}
}
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps, nextContext) {
_get(_getPrototypeOf(Table.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);
this.disconnect();
this.columnsSize = this.tableStore.columns.length;
this.tableStore.updateProps(nextProps);
this.connect();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.disconnect();
if (this.scrollId !== undefined) {
raf.cancel(this.scrollId);
}
}
}, {
key: "syncParentSize",
value: function syncParentSize(entries) {
var _entries = _slicedToArray(entries, 1),
entry = _entries[0];
var height = entry.contentRect.height;
var tableStore = this.tableStore,
element = this.element,
wrapper = this.wrapper;
var wrapperHeight = wrapper.getBoundingClientRect().height;
if (wrapperHeight !== height) {
tableStore.parentHeight = height;
tableStore.parentPaddingTop = element.getBoundingClientRect().top - entry.target.getBoundingClientRect().top;
}
}
}, {
key: "connect",
value: function connect() {
this.processDataSetListener(true);
var _this$tableStore4 = this.tableStore,
styleMaxHeight = _this$tableStore4.styleMaxHeight,
styleMinHeight = _this$tableStore4.styleMinHeight,
styleHeight = _this$tableStore4.styleHeight,
heightType = _this$tableStore4.heightType;
if (isString(styleHeight) && isPercentSize(styleHeight) || isString(styleMaxHeight) && isPercentSize(styleMaxHeight) || isString(styleMinHeight) && isPercentSize(styleMinHeight)) {
var wrapper = this.wrapper;
if (wrapper) {
var parentNode = wrapper.parentNode;
if (parentNode) {
var resizeObserver = new ResizeObserver(this.syncParentSize);
resizeObserver.observe(parentNode);
this.resizeObserver = resizeObserver;
}
}
}
if (heightType === TableHeightType.flex || isString(styleMaxHeight) && isCalcSize(styleMaxHeight) || isString(styleMinHeight) && isCalcSize(styleMinHeight)) {
window.addEventListener('resize', this.handleWindowResize, false);
}
}
}, {
key: "disconnect",
value: function disconnect() {
var resizeObserver = this.resizeObserver;
if (resizeObserver) {
resizeObserver.disconnect();
delete this.resizeObserver;
}
this.processDataSetListener(false);
window.removeEventListener('resize', this.handleWindowResize, false);
}
}, {
key: "processDataSetListener",
value: function processDataSetListener(flag) {
var _this$tableStore5 = this.tableStore,
dataSet = _this$tableStore5.dataSet,
inlineEdit = _this$tableStore5.inlineEdit;
if (dataSet) {
var handler = flag ? dataSet.addEventListener : dataSet.removeEventListener;
handler.call(dataSet, DataSetEvents.load, this.handleDataSetLoad);
if (inlineEdit) {
handler.call(dataSet, DataSetEvents.create, this.handleDataSetCreate);
}
handler.call(dataSet, DataSetEvents.validate, this.handleDataSetValidate);
handler.call(dataSet, DataSetEvents.validateSelf, this.handleDataSetValidateSelf);
}
}
}, {
key: "render",
value: function render() {
var _this$tableStore6 = this.tableStore,
overflowX = _this$tableStore6.overflowX,
overflowY = _this$tableStore6.overflowY,
isAnyColumnsLeftLock = _this$tableStore6.isAnyColumnsLeftLock,
isAnyColumnsRightLock = _this$tableStore6.isAnyColumnsRightLock,
isFold = _this$tableStore6.isFold,
_this$props4 = this.props,
dataSet = _this$props4.dataSet,
treeQueryExpanded = _this$props4.treeQueryExpanded,
virtualSpin = _this$props4.virtualSpin,
buttons = _this$props4.buttons,
buttonsLimit = _this$props4.buttonsLimit,
queryFields = _this$props4.queryFields,
queryFieldsLimit = _this$props4.queryFieldsLimit,
summaryFieldsLimit = _this$props4.summaryFieldsLimit,
summaryBarFieldWidth = _this$props4.summaryBarFieldWidth,
filterBarFieldName = _this$props4.filterBarFieldName,
filterBarPlaceholder = _this$props4.filterBarPlaceholder,
summaryBar = _this$props4.summaryBar,
dynamicFilterBar = _this$props4.dynamicFilterBar,
clientExportQuantity = _this$props4.clientExportQuantity,
indentSize = _this$props4.indentSize,
selectionMode = _this$props4.selectionMode,
rowRenderer = _this$props4.rowRenderer,
onRow = _this$props4.onRow,
onColumnResize = _this$props4.onColumnResize,
expandedRowRenderer = _this$props4.expandedRowRenderer,
expandRowByClick = _this$props4.expandRowByClick,
rowDragRender = _this$props4.rowDragRender,
columnsDragRender = _this$props4.columnsDragRender,
mode = _this$props4.mode,
pristine = _this$props4.pristine,
showSelectionCachedButton = _this$props4.showSelectionCachedButton,
onShowCachedSelectionChange = _this$props4.onShowCachedSelectionChange,
autoMaxWidth = _this$props4.autoMaxWidth,
summary = _this$props4.summary,
searchCode = _this$props4.searchCode,
tableStore = this.tableStore,
prefixCls = this.prefixCls;
var content = this.getTable();
var pagination = this.getPagination(TablePaginationPosition.top);
var tableSpinProps = mergeProps(this.getContextConfig('tableSpinProps'), this.getSpinProps());
var tableButtonsLimit = isNil(buttonsLimit) ? this.getContextConfig('tableButtonsLimit') : buttonsLimit;
return /*#__PURE__*/React.createElement(ReactResizeObserver, {
resizeProp: "width",
onResize: this.handleResize
}, /*#__PURE__*/React.createElement("div", _extends({}, this.getWrapperProps()), /*#__PURE__*/React.createElement(TableContextProvider, {
code: this.code,
prefixCls: prefixCls,
dataSet: dataSet,
tableStore: tableStore,
indentSize: indentSize,
selectionMode: selectionMode,
onRow: onRow,
onColumnResize: onColumnResize,
rowRenderer: rowRenderer,
expandedRowRenderer: expandedRowRenderer,
expandRowByClick: expandRowByClick,
rowDragRender: rowDragRender,
columnsDragRender: columnsDragRender,
showSelectionCachedButton: showSelectionCachedButton,
onShowCachedSelectionChange: onShowCachedSelectionChange,
autoMaxWidth: autoMaxWidth,
pristine: pristine,
summary: summary,
virtualSpin: virtualSpin,
spinProps: tableSpinProps,
isTree: mode === TableMode.tree
}, !isFold && this.getHeader(), /*#__PURE__*/React.createElement(TableQueryBar, {
buttons: buttons,
buttonsLimit: tableButtonsLimit,
pagination: pagination,
queryFields: queryFields,
clientExportQuantity: clientExportQuantity,
summaryBar: summaryBar,
dynamicFilterBar: dynamicFilterBar,
queryFieldsLimit: queryFieldsLimit,
summaryBarFieldWidth: summaryBarFieldWidth,
summaryFieldsLimit: summaryFieldsLimit,
filterBarFieldName: filterBarFieldName,
filterBarPlaceholder: filterBarPlaceholder,
treeQueryExpanded: treeQueryExpanded,
searchCode: searchCode
}), !isFold && /*#__PURE__*/React.createElement(ErrorBar, {
dataSet: dataSet,
prefixCls: prefixCls
}), !isFold && /*#__PURE__*/React.createElement(Spin, _extends({}, tableSpinProps, {
key: "content"
}), /*#__PURE__*/React.createElement("div", _extends({}, this.getOtherProps()), /*#__PURE__*/React.createElement("div", {
className: classNames("".concat(prefixCls, "-content"), _defineProperty({}, "".concat(prefixCls, "-content-overflow"), isStickySupport() && overflowX && !overflowY)),
ref: this.saveContentRef,
onScroll: this.handleBodyScroll
}, !isStickySupport() && isAnyColumnsLeftLock && overflowX && this.getLeftFixedTable(), content, !isStickySupport() && isAnyColumnsRightLock && overflowX && this.getRightFixedTable()), isStickySupport() && overflowX && /*#__PURE__*/React.createElement(StickyShadow, {
position: "left"
}), isStickySupport() && overflowX && /*#__PURE__*/React.createElement(StickyShadow, {
position: "right"
}), /*#__PURE__*/React.createElement("div", {
ref: this.saveResizeRef,
className: "".concat(prefixCls, "-split-line")
}))), !isFold && this.getFooter(), !isFold && this.getPagination(TablePaginationPosition.bottom))));
}
}, {
key: "reorderDataSet",
value: function reorderDataSet(startIndex, endIndex) {
var dataSet = this.tableStore.dataSet;
dataSet.move(startIndex, endIndex);
}
/**
* 触发组合或拖拽排序, 移除原纪录
* @param currentRecord
*/
}, {
key: "removeSourceRecord",
value: function removeSourceRecord(currentRecord) {
var parent = currentRecord.parent;
if (parent) {
var children = parent.children;
if (children) {
var index = children.indexOf(currentRecord);
if (index !== -1) {
children.splice(index, 1);
}
if (!children.length) {
parent.children = undefined;
}
}
}
}
}, {
key: "handleDragStart",
value: function handleDragStart(initial, provided) {
var dragDropContextProps = this.props.dragDropContextProps;
var _this$tableStore7 = this.tableStore,
rowMetaData = _this$tableStore7.rowMetaData,
isTree = _this$tableStore7.isTree;
if (isTree && rowMetaData) {
var source = initial.source;
var currentRecord = rowMetaData[source.index].record;
if (currentRecord.children && currentRecord.children.length) {
currentRecord.isExpanded = false;
}
}
if (dragDropContextProps && dragDropContextProps.onDragStart) {
dragDropContextProps.onDragStart(initial, provided);
}
}
}, {
key: "handleDragEnd",
value: function handleDragEnd(resultDrag, provided) {
var _this$tableStore8 = this.tableStore,
dataSet = _this$tableStore8.dataSet,
rowMetaData = _this$tableStore8.rowMetaData,
isTree = _this$tableStore8.isTree;
var _dataSet$props = dataSet.props,
parentField = _dataSet$props.parentField,
idField = _dataSet$props.idField,
childrenField = _dataSet$props.childrenField;
var _this$props5 = this.props,
onDragEnd = _this$props5.onDragEnd,
onDragEndBefore = _this$props5.onDragEndBefore,
dragDropContextProps = _this$props5.dragDropContextProps;
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 && isTree && rowMetaData) {
var _resultBefore = resultBefore,
destination = _resultBefore.destination,
source = _resultBefore.source,
combine = _resultBefore.combine;
var currentRecord = rowMetaData[source.index].record; // 平铺数据
if (!childrenField && parentField && idField) {
// 拖拽组合关联
if (combine) {
var parentRecord = dataSet.find(function (record) {
return String(record.key) === combine.draggableId;
});
currentRecord.set(parentField, parentRecord.get(idField));
parentRecord.isExpanded = true;
} // 拖拽排序更新
if (destination && destination.index !== source.index && rowMetaData) {
var destinationRecord = rowMetaData[destination.index].record;
var parent = destinationRecord.parent;
if (parent) {
if (currentRecord.parent !== parent && parent !== currentRecord && parent.children) {
currentRecord.set(parentField, parent.get(idField));
} else if (parent.children) {
var childIndex = parent.children.indexOf(destinationRecord);
this.removeSourceRecord(currentRecord);
parent.children.splice(childIndex, 0, currentRecord);
}
} else {
currentRecord.set(parentField, undefined);
dataSet.move(currentRecord.index, destinationRecord.index);
}
}
} // 树形数据
if (childrenField) {
// 拖拽组合关联
if (combine) {
var _parentRecord = dataSet.find(function (record) {
return String(record.key) === combine.draggableId;
});
this.removeSourceRecord(currentRecord);
currentRecord.parent = _parentRecord;
if (_parentRecord.children && _parentRecord.children.length) {
_parentRecord.children.unshift(currentRecord);
} else {
_parentRecord.children = [currentRecord];
}
_parentRecord.isExpanded = true;
} // 拖拽排序更新
if (destination && destination.index !== source.index && rowMetaData) {
var _destinationRecord = rowMetaData[destination.index].record;
var _parent = _destinationRecord.parent;
if (_parent) {
if (currentRecord.parent !== _parent && _parent !== currentRecord && _parent.children) {
var _childIndex = _parent.children.indexOf(_destinationRecord);
this.removeSourceRecord(currentRecord);
currentRecord.parent = _parent;
_parent.children.splice(_childIndex, 0, currentRecord);
} else if (_parent.children) {
var _childIndex2 = _parent.children.indexOf(_destinationRecord);
this.removeSourceRecord(currentRecord);
_parent.children.splice(_childIndex2, 0, currentRecord);
}
} else {
if (currentRecord.parent) {
this.removeSourceRecord(currentRecord);
currentRecord.parent = undefined;
}
dataSet.move(currentRecord.index, _destinationRecord.index);
}
}
}
} else if (resultBefore && resultBefore.destination) {
if (resultBefore.so