choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,502 lines (1,287 loc) • 69.3 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 _regeneratorRuntime from "@babel/runtime/regenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 defaultTo from 'lodash/defaultTo';
import pick from 'lodash/pick';
import omit from 'lodash/omit';
import isString from 'lodash/isString';
import isNil from 'lodash/isNil';
import isNumber from 'lodash/isNumber';
import isUndefined from 'lodash/isUndefined';
import debounce from 'lodash/debounce';
import noop from 'lodash/noop';
import { action, get, reaction, toJS } from 'mobx';
import { DragDropContext } from 'react-beautiful-dnd';
import { getConfig } from '../../../es/configure';
import warning from '../../../es/_util/warning';
import { isCalcSize, 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 TableTBody from './TableTBody';
import TableFooter from './TableFooter';
import { ColumnLock, DragColumnAlign, HighLightRowType, ScrollPosition, SelectionMode, TableAutoHeightType, TableButtonType, TableEditMode, TableHeightType, TableMode, TablePaginationPosition, TableQueryBarType, RowBoxPlacement } 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 { findCell, findIndexedSibling, 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';
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');
if (wrapperClassName) {
table.className = wrapperClassName;
}
var thead = document.createElement('thead');
thead.className = "".concat(prefixCls, "-thead");
table.appendChild(thead);
var headtr = document.createElement('tr');
thead.appendChild(headtr);
var tbody = document.createElement('tbody');
tbody.className = "".concat(prefixCls, "-tbody");
table.appendChild(tbody);
if (!document.body) {
throw new Error('document.body required a body to append');
}
document.body.appendChild(table);
return {
// @ts-ignore
tbody: tbody,
// @ts-ignore
headtr: headtr
};
};
if (_instance) {
return _instance;
}
return _instance = _tableContain();
};
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: "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: "handleDataSetValidate",
value: function () {
var _handleDataSetValidate = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee(_ref2) {
var result, dataSet, _dataSet$getValidatio, _dataSet$getValidatio2, firstInvalidRecord, errors, record, _errors, name, cell;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
result = _ref2.result, dataSet = _ref2.dataSet;
_context.next = 3;
return result;
case 3:
if (_context.sent) {
_context.next = 6;
break;
}
_dataSet$getValidatio = dataSet.getValidationErrors(), _dataSet$getValidatio2 = _slicedToArray(_dataSet$getValidatio, 1), firstInvalidRecord = _dataSet$getValidatio2[0];
if (firstInvalidRecord) {
errors = firstInvalidRecord.errors, record = firstInvalidRecord.record;
if (errors.length) {
_errors = _slicedToArray(errors, 1), name = _errors[0].field.name;
cell = findCell(this.tableStore, name, undefined, record);
if (cell) {
cell.focus();
}
}
}
case 6:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
function handleDataSetValidate(_x) {
return _handleDataSetValidate.apply(this, arguments);
}
return handleDataSetValidate;
}()
}, {
key: "handleKeyDown",
value: function handleKeyDown(e) {
var tableStore = this.tableStore;
var keyboard = tableStore.keyboard;
if (!tableStore.editing) {
try {
var dataSet = this.props.dataSet;
var ctrlKey = e.ctrlKey || e.metaKey;
var altKey = e.altKey;
var shiftKey = e.shiftKey;
switch (e.keyCode) {
case KeyCode.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 _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.first();
case 5:
this.focusRow(this.firstRow);
case 6:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
}));
function handleKeyDownHome(_x2) {
return _handleKeyDownHome.apply(this, arguments);
}
return handleKeyDownHome;
}()
}, {
key: "handleKeyDownEnd",
value: function () {
var _handleKeyDownEnd = _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.props.dataSet;
if (this.tableStore.isTree) {
_context3.next = 5;
break;
}
_context3.next = 5;
return dataSet.last();
case 5:
this.focusRow(this.lastRow);
case 6:
case "end":
return _context3.stop();
}
}
}, _callee3, this);
}));
function handleKeyDownEnd(_x3) {
return _handleKeyDownEnd.apply(this, arguments);
}
return handleKeyDownEnd;
}()
}, {
key: "handleKeyDownCTRLS",
value: function () {
var _handleKeyDownCTRLS = _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.submit();
case 3:
case "end":
return _context4.stop();
}
}
}, _callee4, this);
}));
function handleKeyDownCTRLS(_x4) {
return _handleKeyDownCTRLS.apply(this, arguments);
}
return handleKeyDownCTRLS;
}()
}, {
key: "handleKeyDownCTRLN",
value: function () {
var _handleKeyDownCTRLN = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee5(e) {
var _this$tableStore, dataSet, editors;
return _regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
_this$tableStore = this.tableStore, dataSet = _this$tableStore.dataSet, editors = _this$tableStore.editors;
if (editors.size) {
e.preventDefault();
dataSet.create({}, 0);
}
case 2:
case "end":
return _context5.stop();
}
}
}, _callee5, this);
}));
function handleKeyDownCTRLN(_x5) {
return _handleKeyDownCTRLN.apply(this, arguments);
}
return handleKeyDownCTRLN;
}() // TODO: To be optimized
}, {
key: "handleKeyDownCTRLD",
value: function () {
var _handleKeyDownCTRLD = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee6(e) {
var currentRow, tableStore, dataSet, currentElementSibling, previousElementSibling, index, currentIndex, record, currentRecord, cloneRecodData, dealCloneRecodData, editeColumn, uniqueFieldIterator, uniqueFieldNames;
return _regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
e.preventDefault();
currentRow = this.currentRow, tableStore = this.tableStore;
dataSet = tableStore.dataSet;
currentElementSibling = null; // to justice it can be change or standards compliant
if (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 (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
_key = _ref4[0],
field = _ref4[1];
return !!field.get('unique');
})).keys();
uniqueFieldNames = Array.from(uniqueFieldIterator);
if (uniqueFieldNames && uniqueFieldNames.length > 0) {
uniqueFieldNames.forEach(function (element) {
if (element) {
delete dealCloneRecodData[element];
}
});
}
currentRecord.set(dealCloneRecodData);
}
}
}
}
case 6:
case "end":
return _context6.stop();
}
}
}, _callee6, this);
}));
function handleKeyDownCTRLD(_x6) {
return _handleKeyDownCTRLD.apply(this, arguments);
}
return handleKeyDownCTRLD;
}()
}, {
key: "handleKeyDownCTRLDELETE",
value: function () {
var _handleKeyDownCTRLDELETE = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee7(e) {
var dataSet;
return _regeneratorRuntime.wrap(function _callee7$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
case 0:
e.preventDefault();
dataSet = this.tableStore.dataSet;
dataSet["delete"](dataSet.selected);
case 3:
case "end":
return _context7.stop();
}
}
}, _callee7, this);
}));
function handleKeyDownCTRLDELETE(_x7) {
return _handleKeyDownCTRLDELETE.apply(this, arguments);
}
return handleKeyDownCTRLDELETE;
}()
}, {
key: "handleKeyDownUp",
value: function () {
var _handleKeyDownUp = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee8(e) {
var currentRow, returnRecod, previousElementSibling, 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;
}
previousElementSibling = findIndexedSibling(currentRow, -1);
if (!previousElementSibling) {
_context8.next = 8;
break;
}
returnRecod = this.focusRow(previousElementSibling);
_context8.next = 12;
break;
case 8:
dataSet = this.props.dataSet;
_context8.next = 11;
return dataSet.prePage();
case 11:
returnRecod = this.focusRow(this.lastRow);
case 12:
if (!returnRecod) {
_context8.next = 14;
break;
}
return _context8.abrupt("return", Promise.resolve(returnRecod));
case 14:
return _context8.abrupt("return", Promise.reject());
case 15:
case "end":
return _context8.stop();
}
}
}, _callee8, this);
}));
function handleKeyDownUp(_x8) {
return _handleKeyDownUp.apply(this, arguments);
}
return handleKeyDownUp;
}()
}, {
key: "handleKeyDownDown",
value: function () {
var _handleKeyDownDown = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee9(e) {
var currentRow, returnRecod, nextElementSibling, dataSet;
return _regeneratorRuntime.wrap(function _callee9$(_context9) {
while (1) {
switch (_context9.prev = _context9.next) {
case 0:
e.preventDefault();
currentRow = this.currentRow;
if (!currentRow) {
_context9.next = 14;
break;
}
nextElementSibling = findIndexedSibling(currentRow, 1);
if (!nextElementSibling) {
_context9.next = 8;
break;
}
returnRecod = this.focusRow(nextElementSibling);
_context9.next = 12;
break;
case 8:
dataSet = this.props.dataSet;
_context9.next = 11;
return dataSet.nextPage();
case 11:
returnRecod = this.focusRow(this.firstRow);
case 12:
if (!returnRecod) {
_context9.next = 14;
break;
}
return _context9.abrupt("return", Promise.resolve(returnRecod));
case 14:
return _context9.abrupt("return", Promise.reject());
case 15:
case "end":
return _context9.stop();
}
}
}, _callee9, this);
}));
function handleKeyDownDown(_x9) {
return _handleKeyDownDown.apply(this, arguments);
}
return handleKeyDownDown;
}()
}, {
key: "handleKeyDownDownShift",
value: function () {
var _handleKeyDownDownShift = _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.handleKeyDownDown(e);
_context10.next = 20;
break;
case 12:
if (record.isSelected) {
_context10.next = 16;
break;
}
dataSet.select(record);
_context10.next = 20;
break;
case 16:
_context10.next = 18;
return this.handleKeyDownDown(e);
case 18:
currentRecord = _context10.sent;
if (currentRecord && dataSet) {
dataSet.select(currentRecord);
}
case 20:
_context10.next = 23;
break;
case 22:
this.handleKeyDownDown(e);
case 23:
case "end":
return _context10.stop();
}
}
}, _callee10, this);
}));
function handleKeyDownDownShift(_x10) {
return _handleKeyDownDownShift.apply(this, arguments);
}
return handleKeyDownDownShift;
}()
}, {
key: "handleKeyDownUpShift",
value: function () {
var _handleKeyDownUpShift = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee11(e) {
var dataSet, currentRow, index, record, currentRecord;
return _regeneratorRuntime.wrap(function _callee11$(_context11) {
while (1) {
switch (_context11.prev = _context11.next) {
case 0:
e.preventDefault();
dataSet = this.tableStore.dataSet;
currentRow = this.currentRow;
if (!(currentRow && isCanEdictingRow(currentRow))) {
_context11.next = 22;
break;
}
index = currentRow.dataset.index;
if (!index) {
_context11.next = 20;
break;
}
record = dataSet.findRecordById(index);
if (!record) {
_context11.next = 20;
break;
}
if (record.selectable) {
_context11.next = 12;
break;
}
this.handleKeyDownUp(e);
_context11.next = 20;
break;
case 12:
if (record.isSelected) {
_context11.next = 16;
break;
}
dataSet.select(record);
_context11.next = 20;
break;
case 16:
_context11.next = 18;
return this.handleKeyDownUp(e);
case 18:
currentRecord = _context11.sent;
if (currentRecord) {
dataSet.select(currentRecord);
}
case 20:
_context11.next = 23;
break;
case 22:
this.handleKeyDownUp(e);
case 23:
case "end":
return _context11.stop();
}
}
}, _callee11, this);
}));
function handleKeyDownUpShift(_x11) {
return _handleKeyDownUpShift.apply(this, arguments);
}
return handleKeyDownUpShift;
}()
}, {
key: "handleKeyDownRight",
value: function handleKeyDownRight(e) {
var tableStore = this.tableStore,
_this$props = this.props,
expandedRowRenderer = _this$props.expandedRowRenderer,
dataSet = _this$props.dataSet;
if (tableStore.isTree || expandedRowRenderer) {
var current = dataSet.current;
if (current) {
e.preventDefault();
tableStore.setRowExpanded(current, true);
}
}
}
}, {
key: "handleKeyDownLeft",
value: function handleKeyDownLeft(e) {
var tableStore = this.tableStore,
_this$props2 = this.props,
expandedRowRenderer = _this$props2.expandedRowRenderer,
dataSet = _this$props2.dataSet;
if (tableStore.isTree || expandedRowRenderer) {
var current = dataSet.current;
if (current) {
e.preventDefault();
tableStore.setRowExpanded(current, false);
}
}
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return _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', 'queryFields', 'queryFieldsLimit', 'summaryFieldsLimit', 'queryBar', 'queryBarProps', 'autoFocus', 'summaryBar', 'defaultRowExpanded', 'expandRowByClick', 'expandedRowRenderer', 'expandIconColumnIndex', 'indentSize', 'filter', 'mode', 'editMode', 'filterBarFieldName', 'filterBarPlaceholder', 'pagination', 'highLightRow', 'selectedHighLightRow', 'columnResizable', 'columnTitleEditable', 'pristine', 'expandIcon', 'spin', 'virtual', 'virtualCell', 'virtualSpin', 'autoWidth', 'autoHeight', 'autoFootHeight', 'useMouseBatchChoose', 'autoMaxWidth', 'dragColumnAlign', 'columnDraggable', 'rowDraggable', 'onDragEnd', 'rowDragRender', 'columnsDragRender', 'editorNextKeyEnterDown', 'onDragEndBefore', 'keyboard', 'dynamicFilterBar', 'parityRow', 'rowNumber', 'treeAsync', 'treeLoadData', 'customizable', 'customizedCode', 'dragColumn', 'dragRow', 'clientExportQuantity', 'treeQueryExpanded', 'summary', 'aggregation', 'onAggregationChange', 'showRemovedRow', 'searchCode']);
}
}, {
key: "getWrapperProps",
value: function getWrapperProps() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var autoWidth = this.props.autoWidth;
var wrapperProps = _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({}, spin, {
spinning: true
});
}
return _objectSpread({}, spin, {
dataSet: dataSet
});
}
}, {
key: "componentWillMount",
value: function componentWillMount() {
this.initDefaultExpandedRows();
this.connect();
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
_get(_getPrototypeOf(Table.prototype), "componentDidMount", this).call(this);
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);
}
var bodyHeightReaction = this.bodyHeightReaction;
if (bodyHeightReaction) {
bodyHeightReaction();
}
}
}, {
key: "connect",
value: function connect() {
this.processDataSetListener(true);
var style = this.props.style;
var _ref5 = style || {},
maxHeight = _ref5.maxHeight,
minHeight = _ref5.minHeight;
if (this.tableStore.heightType === TableHeightType.flex || isString(maxHeight) && isCalcSize(maxHeight) || isString(minHeight) && isCalcSize(minHeight)) {
window.addEventListener('resize', this.handleWindowResize, false);
}
}
}, {
key: "disconnect",
value: function disconnect() {
this.processDataSetListener(false);
window.removeEventListener('resize', this.handleWindowResize, false);
}
}, {
key: "processDataSetListener",
value: function processDataSetListener(flag) {
var _this$tableStore4 = this.tableStore,
isTree = _this$tableStore4.isTree,
dataSet = _this$tableStore4.dataSet,
inlineEdit = _this$tableStore4.inlineEdit,
performanceEnabled = _this$tableStore4.performanceEnabled;
if (dataSet) {
var handler = flag ? dataSet.addEventListener : dataSet.removeEventListener;
if (isTree || performanceEnabled) {
handler.call(dataSet, DataSetEvents.load, this.handleDataSetLoad);
}
if (inlineEdit) {
handler.call(dataSet, DataSetEvents.create, this.handleDataSetCreate);
}
handler.call(dataSet, DataSetEvents.validate, this.handleDataSetValidate);
}
}
}, {
key: "render",
value: function render() {
var _this$tableStore5 = this.tableStore,
virtual = _this$tableStore5.virtual,
overflowX = _this$tableStore5.overflowX,
overflowY = _this$tableStore5.overflowY,
isAnyColumnsLeftLock = _this$tableStore5.isAnyColumnsLeftLock,
isAnyColumnsRightLock = _this$tableStore5.isAnyColumnsRightLock,
_this$props4 = this.props,
dataSet = _this$props4.dataSet,
style = _this$props4.style,
treeQueryExpanded = _this$props4.treeQueryExpanded,
spin = _this$props4.spin,
virtualSpin = _this$props4.virtualSpin,
buttons = _this$props4.buttons,
buttonsLimit = _this$props4.buttonsLimit,
queryFields = _this$props4.queryFields,
queryFieldsLimit = _this$props4.queryFieldsLimit,
summaryFieldsLimit = _this$props4.summaryFieldsLimit,
filterBarFieldName = _this$props4.filterBarFieldName,
filterBarPlaceholder = _this$props4.filterBarPlaceholder,
summaryBar = _this$props4.summaryBar,
dynamicFilterBar = _this$props4.dynamicFilterBar,
clientExportQuantity = _this$props4.clientExportQuantity,
indentSize = _this$props4.indentSize,
selectionMode = _this$props4.selectionMode,
rowRenderer = _this$props4.rowRenderer,
onRow = _this$props4.onRow,
onColumnResize = _this$props4.onColumnResize,
expandedRowRenderer = _this$props4.expandedRowRenderer,
expandRowByClick = _this$props4.expandRowByClick,
rowDragRender = _this$props4.rowDragRender,
columnsDragRender = _this$props4.columnsDragRender,
mode = _this$props4.mode,
pristine = _this$props4.pristine,
showSelectionCachedButton = _this$props4.showSelectionCachedButton,
onShowCachedSelectionChange = _this$props4.onShowCachedSelectionChange,
autoMaxWidth = _this$props4.autoMaxWidth,
summary = _this$props4.summary,
searchCode = _this$props4.searchCode,
tableStore = this.tableStore,
prefixCls = this.prefixCls;
var content = this.getTable();
var pagination = this.getPagination(TablePaginationPosition.top);
var tableSpinProps = getConfig('tableSpinProps');
var tableButtonsLimit = isNil(buttonsLimit) ? getConfig('tableButtonsLimit') : buttonsLimit;
var styleHeight = style ? toPx(style.height) : 0;
return React.createElement(ReactResizeObserver, {
resizeProp: "width",
onResize: this.handleResize
}, React.createElement("div", _extends({}, this.getWrapperProps()), 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,
isTree: mode === TableMode.tree
}, this.getHeader(), React.createElement(TableQueryBar, {
buttons: buttons,
buttonsLimit: tableButtonsLimit,
pagination: pagination,
queryFields: queryFields,
clientExportQuantity: clientExportQuantity,
summaryBar: summaryBar,
dynamicFilterBar: dynamicFilterBar,
queryFieldsLimit: queryFieldsLimit,
summaryFieldsLimit: summaryFieldsLimit,
filterBarFieldName: filterBarFieldName,
filterBarPlaceholder: filterBarPlaceholder,
treeQueryExpanded: treeQueryExpanded,
searchCode: searchCode
}), React.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()), isStickySupport() && overflowX && React.createElement(StickyShadow, {
position: "left"
}), isStickySupport() && overflowX && React.createElement(StickyShadow, {
position: "right"
}), 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 tableStore = this.tableStore;
if (isStickySupport() && !tableStore.virtual || // (![TableHeightType.fixed, TableHeightType.flex].includes(tableStore.heightType)) ||
!tableStore.overflowY || currentTarget !== target || target === this.tableFootWrap) {
return;
}
var fixedColumnsBodyLeft = this.fixedColumnsBodyLeft;
var bodyTable = this.tableBodyWrap;
var fixedColumnsBodyRight = this.fixedColumnsBodyRight;
var scrollTop = target.scrollTop;
if (scrollTop !== tableStore.lastScrollTop) {
if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) {
fixedColumnsBodyLeft.scrollTop = scrollTop;
}
if (bodyTable && target !== bodyTable) {
bodyTable.scrollTop = scrollTop;
}
if (fixedColumnsBodyRight && target !== fixedColumnsBodyRight) {
fixedColumnsBodyRight.scrollTop = scrollTop;
}
var refSpin = this.refSpin;
if (refSpin) {
refSpin.style.display = 'block';
this.setSpin();
}
this.tableStore.setLastScrollTop(scrollTop);
}
}
}, {
key: "handleBodyScrollLeft",
value: function handleBodyScrollLeft(e, currentTarget) {
var target = e.target;
var tableStore = this.tableStore;
var headTable = this.tableHeadWrap;
var bodyTable = this.tableBodyWrap;
var footTable = this.tableFootWrap;
if (!tableStore.overflowX || currentTarget !== target || target === this.fixedColumnsBodyRight || target === this.fixedColumnsBodyLeft) {
return;
}
var scrollLeft = target.scrollLeft;
if (scrollLeft !== this.lastScrollLeft) {
if (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) {
var tableStore = this.tableStore;
if (tableStore.isAnyColumnsLock && tableStore.overflowX) {
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) {
var tableStore = this.tableStore;
if (tableStore.scrollPosition !== position) {
tableStore.scrollPosition = position;
}
}
}, {
key: "renderTable",
value: function renderTable(hasHeader, hasBody, hasFooter, lock) {
var tableStore = this.tableStore;
var columnGroups = function () {
if (lock === ColumnLock.right) {
return tableStore.rightColumnGroups;
}
if (lock) {
return tableStore.leftColumnGroups;
}
return tableStore.columnGroups;
}();
return tableStore.virtual ? React.createElement(React.Fragment, null, hasHeader && React.createElement(TableWrapper, {
key: "tableWrapper-header",
lock: lock,
hasBody: hasBody,
hasHeader: hasHeader,
hasFooter: hasFooter,
columnGroups: columnGroups
}, this.getTableHeader(lock)), hasBody && React.createElement(VirtualWrapper, null, React.createElement(TableWrapper, {
key: "tableWrapper-body",
lock: lock,
hasBody: hasBody,
hasHeader: hasHeader,
hasFooter: hasFooter,
columnGroups: columnGroups
}, this.getTableBody(columnGroups, lock))), hasFooter && React.createElement(TableWrapper, {
key: "tableWrapper-footer",
lock: lock,
hasBody: hasBody,
hasHeader: hasFooter,
hasFooter: hasFooter,
columnGroups: columnGroups
}, this.getTableFooter(columnGroups, lock))) : React.createElement(TableWrapper, {
key: "tableWrapper",
lock: lock,
hasBody: hasBody,
hasHeader: hasHeader,
hasFooter: hasFooter,
columnGroups: columnGroups
}, hasHeader && this.getTableHeader(lock), hasBody && this.getTableBody(columnGroups, lock), hasFooter && this.getTableFooter(columnGroups, lock));
}
}, {
key: "getHeader",
value: function getHeader() {
var _this$props6 = this.props,
header = _this$props6