choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,521 lines (1,199 loc) • 116 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.TableQueryBarType = exports.CUSTOMIZED_KEY = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var React = _interopRequireWildcard(require("react"));
var _mobx = require("mobx");
var _classnames = _interopRequireDefault(require("classnames"));
var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
var _flatten = _interopRequireDefault(require("lodash/flatten"));
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));
var _eq = _interopRequireDefault(require("lodash/eq"));
var _omit = _interopRequireDefault(require("lodash/omit"));
var _merge = _interopRequireDefault(require("lodash/merge"));
var _uniq = _interopRequireDefault(require("lodash/uniq"));
var _core = _interopRequireDefault(require("@better-scroll/core"));
var _elementResizeEvent = _interopRequireWildcard(require("element-resize-event"));
var _translateDOMPositionXY = require("dom-lib/lib/transition/translateDOMPositionXY");
var _domLib = require("dom-lib");
var _reactBeautifulDnd = require("react-beautiful-dnd");
var _isPromise = _interopRequireDefault(require("is-promise"));
var _ConfigContext = _interopRequireDefault(require("../../../lib/config-provider/ConfigContext"));
var _UnitConvertor = require("../../../lib/_util/UnitConvertor");
var _LocaleReceiver = _interopRequireDefault(require("../../../lib/locale-provider/LocaleReceiver"));
var _default = _interopRequireDefault(require("../../../lib/locale-provider/default"));
var _warning = _interopRequireDefault(require("../../../lib/_util/warning"));
var _EventManager = require("../_util/EventManager");
var _ModalProvider = _interopRequireDefault(require("../modal-provider/ModalProvider"));
var _Row = _interopRequireDefault(require("./Row"));
var _CellGroup = _interopRequireDefault(require("./CellGroup"));
var _Scrollbar = _interopRequireDefault(require("./Scrollbar"));
var _SelectionBox = _interopRequireDefault(require("./SelectionBox"));
var _SelectionCheckboxAll = _interopRequireDefault(require("./SelectionCheckboxAll"));
var _TableContext = _interopRequireDefault(require("./TableContext"));
var _constants = require("./constants");
var _utils = require("./utils");
var _isMobile = _interopRequireDefault(require("../_util/isMobile"));
var _ColumnGroup = _interopRequireDefault(require("./ColumnGroup"));
var _Column = _interopRequireDefault(require("./Column"));
var _Cell = _interopRequireDefault(require("./Cell"));
var _HeaderCell = _interopRequireDefault(require("./HeaderCell"));
var _spin = _interopRequireDefault(require("../spin"));
var _queryBar = _interopRequireDefault(require("./query-bar"));
var _TableProfessionalBar = _interopRequireDefault(require("./query-bar/TableProfessionalBar"));
var _TableDynamicFilterBar = _interopRequireDefault(require("./query-bar/TableDynamicFilterBar"));
var _TableStore = _interopRequireDefault(require("./TableStore"));
var _toolBar = _interopRequireDefault(require("./tool-bar"));
var _enum = require("../table/enum");
var _utils2 = require("../table/utils");
var _utils3 = require("../data-set/utils");
var _localeContext = require("../locale-context");
var _excluded = ["depth", "rowIndex", "isHeaderRow"],
_excluded2 = ["children", "columns", "className", "data", "width", "style", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "classPrefix", "loading", "showHeader", "queryBar"];
var TableQueryBarType;
exports.TableQueryBarType = TableQueryBarType;
(function (TableQueryBarType) {
TableQueryBarType["professionalBar"] = "professionalBar";
TableQueryBarType["filterBar"] = "filterBar";
})(TableQueryBarType || (exports.TableQueryBarType = TableQueryBarType = {}));
var SORT_TYPE = {
DESC: 'desc',
ASC: 'asc'
};
var propTypeKeys = ['columns', 'autoHeight', 'affixHeader', 'affixHorizontalScrollbar', 'bordered', 'bodyRef', 'className', 'classPrefix', 'children', 'cellBordered', 'clickScrollLength', 'data', 'defaultExpandAllRows', 'defaultExpandedRowKeys', 'defaultSortType', 'disabledScroll', 'expandedRowKeys', 'hover', 'height', 'headerHeight', 'locale', 'loading', 'loadAnimation', 'minHeight', 'rowKey', 'rowHeight', 'renderTreeToggle', 'renderRowExpanded', 'rowExpandedHeight', 'renderEmpty', 'renderLoading', 'rowClassName', 'rtl', 'style', 'sortColumn', 'sortType', 'showHeader', 'showScrollArrow', 'shouldUpdateScroll', 'translate3d', 'wordWrap', 'width', 'virtualized', 'isTree', 'onRowClick', 'onRowContextMenu', 'onScroll', 'onSortColumn', 'onExpandChange', 'onTouchStart', 'onTouchMove', 'onDataUpdated', 'highLightRow', 'queryBar', 'customizedCode', 'customizable', 'columnDraggable', 'columnTitleEditable', 'columnsDragRender', 'rowSelection', 'rowDraggable', 'onDragEndBefore', 'onDragEnd', 'onDragStart'];
var CUSTOMIZED_KEY = '__customized-column__'; // TODO:Symbol
exports.CUSTOMIZED_KEY = CUSTOMIZED_KEY;
function getRowSelection(props) {
return props.rowSelection || {};
}
var PerformanceTable = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(PerformanceTable, _React$Component);
var _super = (0, _createSuper2["default"])(PerformanceTable);
function PerformanceTable(props, context) {
var _this;
(0, _classCallCheck2["default"])(this, PerformanceTable);
_this = _super.call(this, props, context);
_this.translateDOMPositionXY = null;
_this.scrollListener = null;
_this.bscroll = null;
_this.tableRows = {};
_this.mounted = false;
_this.disableEventsTimeoutId = null;
_this.scrollY = 0;
_this.scrollX = 0;
_this.rowSpanList = [];
_this.nextRowZIndex = [];
_this.calcStartRowSpan = {
rowIndex: 0,
rowSpan: 0,
height: 0
};
_this._cacheCalcStartRowSpan = []; // 缓存合并行的计算结果
_this._cacheCells = null;
_this._cacheScrollX = 0;
_this._cacheRenderCols = [];
_this._cacheChildrenSize = 0;
_this._visibleRows = [];
_this.tableStore = new _TableStore["default"]((0, _assertThisInitialized2["default"])(_this));
_this.setSelectionColumn = function (props) {
var rowSelection = props.rowSelection,
_props$columns = props.columns,
columns = _props$columns === void 0 ? [] : _props$columns,
_props$children = props.children,
children = _props$children === void 0 ? [] : _props$children;
var index = columns.findIndex(function (column) {
return column.key === 'rowSelection';
});
if (rowSelection) {
if (index > -1) columns.splice(index, 1);
var rowSelectionFixed = 'left';
if ('fixed' in rowSelection) {
rowSelectionFixed = rowSelection.fixed;
}
if (columns && columns.length) {
var columnsWithRowSelectionProps = {
title: (0, _localeContext.$l)('Table', 'select_current_page'),
key: 'rowSelection',
width: 50,
align: 'center',
fixed: rowSelectionFixed
};
columns.splice(rowSelection.columnIndex || 0, 0, columnsWithRowSelectionProps);
}
if (children && children.length) {
var columnsWithRowSelection = _this.renderRowSelection(rowSelectionFixed);
if (columnsWithRowSelection) {
if (rowSelectionFixed) {
children.splice(rowSelectionFixed === true || 'left' ? rowSelection.columnIndex || 0 : rowSelection.columnIndex || children.length, 0, columnsWithRowSelection);
_this.setState({
shouldFixedColumn: true
});
} else {
children.splice(rowSelection.columnIndex || 0, 0, columnsWithRowSelection);
}
}
}
}
_this.tableStore.originalColumns = columns;
_this.tableStore.originalChildren = children;
};
_this.listenWheel = function (deltaX, deltaY) {
_this.handleWheel(deltaX, deltaY);
var xRef = _this.scrollbarXRef.current;
if (xRef && xRef.onWheelScroll) {
xRef.onWheelScroll(deltaX);
}
var yRef = _this.scrollbarYRef.current;
if (yRef && yRef.onWheelScroll) {
yRef.onWheelScroll(deltaY);
}
};
_this.getRecordKey = function (record, index) {
var rowKey = _this.props.rowKey;
var recordKey = record[rowKey];
(0, _warning["default"])(recordKey !== undefined, 'Each record in dataSource of table should have a unique `key` prop, ' + 'or set `rowKey` of Table to an unique primary key.');
return recordKey === undefined ? index : recordKey;
};
_this.getCheckboxPropsByItem = function (item, index) {
var rowSelection = getRowSelection(_this.props);
if (!rowSelection.getCheckboxProps) {
return {};
}
var key = _this.getRecordKey(item, index); // Cache checkboxProps
if (!_this.tableStore.checkboxPropsCache[key]) {
_this.tableStore.checkboxPropsCache[key] = rowSelection.getCheckboxProps(item) || {};
var checkboxProps = _this.tableStore.checkboxPropsCache[key];
(0, _warning["default"])(!('checked' in checkboxProps) && !('defaultChecked' in checkboxProps), 'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.');
}
return _this.tableStore.checkboxPropsCache[key];
};
_this.handleSelect = function (record, rowIndex, e) {
var checked = e.target.checked;
var nativeEvent = e.nativeEvent;
var defaultSelection = _this.tableStore.selectionDirty ? [] : _this.getDefaultSelection(); // @ts-ignore
var selectedRowKeys = _this.tableStore.selectedRowKeys.concat(defaultSelection);
var key = _this.getRecordKey(record, rowIndex);
var _this$state = _this.state,
pivot = _this$state.pivot,
data = _this$state.data;
var rows = (0, _objectSpread2["default"])({}, data);
var realIndex = rowIndex;
if (_this.props.expandedRowRender) {
realIndex = rows.findIndex(function (row) {
return _this.getRecordKey(row, rowIndex) === key;
});
}
if (nativeEvent.shiftKey && pivot !== undefined && realIndex !== pivot) {
var changeRowKeys = [];
var direction = Math.sign(pivot - realIndex);
var dist = Math.abs(pivot - realIndex);
var step = 0;
var _loop = function _loop() {
var i = realIndex + step * direction;
step += 1;
var row = rows[i];
var rowKey = _this.getRecordKey(row, i);
var checkboxProps = _this.getCheckboxPropsByItem(row, i);
if (!checkboxProps.disabled) {
if (selectedRowKeys.includes(rowKey)) {
if (!checked) {
selectedRowKeys = selectedRowKeys.filter(function (j) {
return rowKey !== j;
});
changeRowKeys.push(rowKey);
}
} else if (checked) {
selectedRowKeys.push(rowKey);
changeRowKeys.push(rowKey);
}
}
};
while (step <= dist) {
_loop();
}
_this.setState({
pivot: realIndex
});
_this.tableStore.selectionDirty = true;
_this.setSelectedRowKeys(selectedRowKeys, {
selectWay: 'onSelectMultiple',
record: record,
checked: checked,
changeRowKeys: changeRowKeys,
nativeEvent: nativeEvent
});
} else {
if (checked) {
selectedRowKeys.push(_this.getRecordKey(record, realIndex));
} else {
selectedRowKeys = selectedRowKeys.filter(function (i) {
return key !== i;
});
}
_this.setState({
pivot: realIndex
});
_this.setSelectedRowKeys(selectedRowKeys, {
selectWay: 'onSelect',
record: record,
checked: checked,
changeRowKeys: undefined,
nativeEvent: nativeEvent
});
}
};
_this.handleSelectRow = function (selectionKey, index, onSelectFunc) {
var data = _this.state.data;
var defaultSelection = _this.tableStore.selectionDirty ? [] : _this.getDefaultSelection(); //@ts-ignore
var selectedRowKeys = _this.tableStore.selectedRowKeys.concat(defaultSelection);
var changeableRowKeys = data.filter(function (item, i) {
return !_this.getCheckboxPropsByItem(item, i).disabled;
}).map(function (item, i) {
return _this.getRecordKey(item, i);
});
var changeRowKeys = [];
var selectWay = 'onSelectAll';
var checked; // handle default selection
switch (selectionKey) {
case 'all':
changeableRowKeys.forEach(function (key) {
if (selectedRowKeys.indexOf(key) < 0) {
selectedRowKeys.push(key);
changeRowKeys.push(key);
}
});
selectWay = 'onSelectAll';
checked = true;
break;
case 'removeAll':
changeableRowKeys.forEach(function (key) {
if (selectedRowKeys.indexOf(key) >= 0) {
selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1);
changeRowKeys.push(key);
}
});
selectWay = 'onSelectAll';
checked = false;
break;
case 'invert':
changeableRowKeys.forEach(function (key) {
if (selectedRowKeys.indexOf(key) < 0) {
selectedRowKeys.push(key);
} else {
selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1);
}
changeRowKeys.push(key);
selectWay = 'onSelectInvert';
});
break;
default:
break;
}
_this.tableStore.selectionDirty = true; // when select custom selection, callback selections[n].onSelect
var rowSelection = _this.props.rowSelection;
var customSelectionStartIndex = 2;
if (rowSelection && rowSelection.hideDefaultSelections) {
customSelectionStartIndex = 0;
}
if (index >= customSelectionStartIndex && typeof onSelectFunc === 'function') {
return onSelectFunc(changeableRowKeys);
}
_this.setSelectedRowKeys(selectedRowKeys, {
selectWay: selectWay,
checked: checked,
changeRowKeys: changeRowKeys
});
};
_this.handleRadioSelect = function (record, rowIndex, e) {
var checked = e.target.checked;
var nativeEvent = e.nativeEvent;
var key = _this.getRecordKey(record, rowIndex);
var selectedRowKeys = [key];
_this.tableStore.selectionDirty = true;
_this.setSelectedRowKeys(selectedRowKeys, {
selectWay: 'onSelect',
record: record,
checked: checked,
changeRowKeys: undefined,
nativeEvent: nativeEvent
});
};
_this.renderSelectionBox = function (type, rowData, rowIndex) {
var rowKey = _this.getRecordKey(rowData, rowIndex);
var props = _this.getCheckboxPropsByItem(rowData, rowIndex);
var handleChange = function handleChange(e) {
return type === 'radio' ? _this.handleRadioSelect(rowData, rowIndex, e) : _this.handleSelect(rowData, rowIndex, e);
};
return /*#__PURE__*/React.createElement("span", {
onClick: _EventManager.stopPropagation
}, /*#__PURE__*/React.createElement(_SelectionBox["default"], (0, _extends2["default"])({
store: _this.tableStore,
type: type,
rowIndex: rowKey,
onChange: handleChange,
defaultSelection: _this.getDefaultSelection()
}, props)));
};
_this.setOffsetByAffix = function () {
var _this$props = _this.props,
affixHeader = _this$props.affixHeader,
affixHorizontalScrollbar = _this$props.affixHorizontalScrollbar;
var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
headerWrapperRef = _assertThisInitialize.headerWrapperRef,
tableRef = _assertThisInitialize.tableRef;
var headerNode = headerWrapperRef && headerWrapperRef.current;
if ((0, _utils.isNumberOrTrue)(affixHeader) && headerNode) {
_this.setState(function () {
return {
headerOffset: (0, _domLib.getOffset)(headerNode)
};
});
}
var tableNode = tableRef && tableRef.current;
if ((0, _utils.isNumberOrTrue)(affixHorizontalScrollbar) && tableNode) {
_this.setState(function () {
return {
tableOffset: (0, _domLib.getOffset)(tableNode)
};
});
}
};
_this.handleWindowScroll = function () {
var _this$props2 = _this.props,
affixHeader = _this$props2.affixHeader,
affixHorizontalScrollbar = _this$props2.affixHorizontalScrollbar;
if ((0, _utils.isNumberOrTrue)(affixHeader)) {
_this.affixTableHeader();
}
if ((0, _utils.isNumberOrTrue)(affixHorizontalScrollbar)) {
_this.affixHorizontalScrollbar();
}
};
_this.affixHorizontalScrollbar = function () {
var scrollY = window.scrollY || window.pageYOffset;
var windowHeight = (0, _domLib.getHeight)(window);
var height = _this.getTableHeight();
var _this$state2 = _this.state,
tableOffset = _this$state2.tableOffset,
fixedHorizontalScrollbar = _this$state2.fixedHorizontalScrollbar;
var affixHorizontalScrollbar = _this.props.affixHorizontalScrollbar;
var headerHeight = _this.getTableHeaderHeight();
var bottom = typeof affixHorizontalScrollbar === 'number' ? affixHorizontalScrollbar : 0;
var offset = (0, _defaultTo["default"])(tableOffset && tableOffset.top, 0) + bottom;
var fixedScrollbar = // @ts-ignore
scrollY + windowHeight < height + offset && // @ts-ignore
scrollY + windowHeight - headerHeight > offset;
var _assertThisInitialize2 = (0, _assertThisInitialized2["default"])(_this),
scrollbarXRef = _assertThisInitialize2.scrollbarXRef;
if (scrollbarXRef) {
var current = scrollbarXRef.current;
if (current) {
var barRef = current.barRef;
if (barRef && barRef.current && fixedHorizontalScrollbar !== fixedScrollbar) {
_this.setState({
fixedHorizontalScrollbar: fixedScrollbar
});
}
}
}
};
_this.affixTableHeader = function () {
var affixHeader = _this.props.affixHeader;
var top = typeof affixHeader === 'number' ? affixHeader : 0;
var _this$state3 = _this.state,
headerOffset = _this$state3.headerOffset,
contentHeight = _this$state3.contentHeight;
var scrollY = window.scrollY || window.pageYOffset;
var fixedHeader = // @ts-ignore
scrollY - (headerOffset.top - top) >= 0 && scrollY < headerOffset.top - top + contentHeight;
if (_this.affixHeaderWrapperRef.current) {
(0, _utils.toggleClass)(_this.affixHeaderWrapperRef.current, 'fixed', fixedHeader);
}
};
_this.handleSortColumn = function (dataKey) {
var sortType = _this.getSortType();
var _this$props3 = _this.props,
onSortColumn = _this$props3.onSortColumn,
sortColumn = _this$props3.sortColumn;
if (sortColumn === dataKey) {
switch (sortType) {
case SORT_TYPE.ASC:
sortType = SORT_TYPE.DESC;
break;
case SORT_TYPE.DESC:
sortType = undefined;
break;
default:
sortType = SORT_TYPE.ASC;
}
_this.setState({
sortType: sortType
});
}
if (onSortColumn) {
onSortColumn(dataKey, sortType);
}
};
_this.handleShowMouseArea = function (width, left, fixed) {
var tableColumnResizeTrigger = _this.tableStore.tableColumnResizeTrigger;
if (tableColumnResizeTrigger !== _enum.TableColumnResizeTriggerType.hover) return;
_this.handleColumnResizeMove(width, left, !!fixed);
};
_this.handleHideMouseArea = function () {
var tableColumnResizeTrigger = _this.tableStore.tableColumnResizeTrigger;
if (tableColumnResizeTrigger !== _enum.TableColumnResizeTriggerType.hover) return;
(0, _domLib.addStyle)(_this.mouseAreaRef.current, {
display: 'none'
});
};
_this.handleColumnResizeEnd = function (columnWidth, _cursorDelta, dataKey, index) {
_this._cacheCells = null;
if (_this.tableStore.customizable) {
_this.tableStore.changeCustomizedColumnValue(dataKey, {
width: columnWidth
});
}
_this.setState((0, _defineProperty2["default"])({
isColumnResizing: false
}, "".concat(dataKey, "_").concat(index, "_width"), columnWidth));
(0, _domLib.addStyle)(_this.mouseAreaRef.current, {
display: 'none'
});
};
_this.handleColumnResizeStart = function (width, left, fixed) {
_this.setState({
isColumnResizing: true
});
_this.handleColumnResizeMove(width, left, fixed);
};
_this.handleColumnResizeMove = function (width, left, fixed) {
var mouseAreaLeft = width + left;
var x = mouseAreaLeft;
var dir = 'left';
if (_this.isRTL()) {
mouseAreaLeft += _this.minScrollX + _constants.SCROLLBAR_WIDTH;
dir = 'right';
}
if (!fixed) {
x = mouseAreaLeft + (_this.isRTL() ? -_this.scrollX : _this.scrollX);
}
(0, _domLib.addStyle)(_this.mouseAreaRef.current, (0, _defineProperty2["default"])({
display: 'block'
}, dir, "".concat(x, "px")));
};
_this.handleTreeToggle = function (rowKey, _rowIndex, rowData) {
var expandedRowKeys = _this.getExpandedRowKeys();
var open = false;
var nextExpandedRowKeys = [];
for (var i = 0; i < expandedRowKeys.length; i++) {
var key = expandedRowKeys[i];
if (key === rowKey) {
open = true;
} else {
// @ts-ignore
nextExpandedRowKeys.push(key);
}
}
if (!open) {
// @ts-ignore
nextExpandedRowKeys.push(rowKey);
}
_this.setState({
expandedRowKeys: nextExpandedRowKeys
});
var onExpandChange = _this.props.onExpandChange;
if (onExpandChange) {
onExpandChange(!open, rowData);
}
};
_this.handleScrollX = function (delta) {
_this.handleWheel(delta, 0);
};
_this.handleScrollY = function (delta) {
_this.handleWheel(0, delta);
};
_this.handleWheel = function (deltaX, deltaY) {
var _this$props4 = _this.props,
onScroll = _this$props4.onScroll,
virtualized = _this$props4.virtualized;
var _this$state4 = _this.state,
contentWidth = _this$state4.contentWidth,
width = _this$state4.width;
if (!_this.tableRef.current) {
return;
}
var nextScrollX = contentWidth <= width ? 0 : _this.scrollX - deltaX;
var nextScrollY = _this.scrollY - deltaY;
_this.scrollY = Math.min(0, nextScrollY < _this.minScrollY ? _this.minScrollY : nextScrollY);
_this.scrollX = Math.min(0, nextScrollX < _this.minScrollX ? _this.minScrollX : nextScrollX);
_this.updatePosition();
if (onScroll) {
onScroll(_this.scrollX, _this.scrollY);
}
if (virtualized) {
_this.setState({
isScrolling: true,
scrollY: _this.scrollY,
scrollX: _this.scrollX
});
if (_this.disableEventsTimeoutId) {
// @ts-ignore
(0, _utils.cancelAnimationTimeout)(_this.disableEventsTimeoutId);
} // @ts-ignore
_this.disableEventsTimeoutId = (0, _utils.requestAnimationTimeout)(_this.debounceScrollEndedCallback, 150);
}
};
_this.debounceScrollEndedCallback = function () {
_this.disableEventsTimeoutId = null;
_this.setState({
isScrolling: false
});
}; // 处理移动端 Touch 事件, Start 的时候初始化 x,y
_this.handleTouchStart = function (event) {
if (event.touches) {
var _event$touches$ = event.touches[0],
pageX = _event$touches$.pageX,
pageY = _event$touches$.pageY;
_this.touchX = pageX;
_this.touchY = pageY;
}
var onTouchStart = _this.props.onTouchStart;
if (onTouchStart) {
onTouchStart(event);
}
}; // 处理移动端 Touch 事件, Move 的时候初始化，更新 scroll
_this.handleTouchMove = function (_ref) {
var e = _ref.e;
var _this$props5 = _this.props,
autoHeight = _this$props5.autoHeight,
onTouchMove = _this$props5.onTouchMove;
if (e.touches) {
var _e$touches$ = e.touches[0],
pageX = _e$touches$.pageX,
pageY = _e$touches$.pageY;
var deltaX = _this.touchX - pageX;
var deltaY = autoHeight ? 0 : _this.touchY - pageY;
if (!_this.shouldHandleWheelY(deltaY) && !_this.shouldHandleWheelX(deltaX)) {
return;
}
if (e.preventDefault) {
e.preventDefault();
}
_this.handleWheel(deltaX, deltaY);
var xRef = _this.scrollbarXRef.current;
if (xRef && xRef.onWheelScroll) {
xRef.onWheelScroll(deltaX);
}
var yRef = _this.scrollbarYRef.current;
if (yRef && yRef.onWheelScroll) {
yRef.onWheelScroll(deltaY);
}
_this.touchX = pageX;
_this.touchY = pageY;
}
if (onTouchMove) {
onTouchMove(e);
}
};
/**
* 当用户在 Table 内使用 tab 键，触发了 onScroll 事件，这个时候应该更新滚动条位置
* https://github.com/rsuite/rsuite/issues/234
*/
_this.handleBodyScroll = function (event) {
if (event.target !== _this.tableBodyRef.current) {
return;
}
var left = (0, _domLib.scrollLeft)(event.target);
var top = (0, _domLib.scrollTop)(event.target);
if (top === 0 && left === 0) {
return;
}
_this.listenWheel(left, top);
(0, _domLib.scrollLeft)(event.target, 0);
(0, _domLib.scrollTop)(event.target, 0);
};
_this.handleDragStart = function (initial, provided) {
var onDragStart = _this.props.onDragStart;
if ((0, _isFunction["default"])(onDragStart)) {
onDragStart(initial, provided);
}
};
_this.handleDragEnd = /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(resultDrag, provided) {
var _this$props6, onDragEnd, onDragEndBefore, data, resultBefore, resultStatus, result, resData;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_this$props6 = _this.props, onDragEnd = _this$props6.onDragEnd, onDragEndBefore = _this$props6.onDragEndBefore;
data = _this.state.data;
resultBefore = resultDrag;
if (!onDragEndBefore) {
_context.next = 16;
break;
}
resultStatus = onDragEndBefore(resultDrag, provided);
if (!(0, _isPromise["default"])(resultStatus)) {
_context.next = 11;
break;
}
_context.next = 8;
return resultStatus;
case 8:
_context.t0 = _context.sent;
_context.next = 12;
break;
case 11:
_context.t0 = resultStatus;
case 12:
result = _context.t0;
if (result) {
_context.next = 15;
break;
}
return _context.abrupt("return");
case 15:
if ((0, _utils2.isDropresult)(result)) {
resultBefore = result;
}
case 16:
if (resultBefore && resultBefore.destination) {
resData = (0, _toConsumableArray2["default"])(data);
(0, _utils3.arrayMove)(resData, resultBefore.source.index, resultBefore.destination.index); // 使setState变成同步处理
setTimeout(function () {
_this.setState({
data: resData
});
});
if (onDragEnd) {
onDragEnd(resultBefore, provided, resData);
}
}
case 17:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function (_x, _x2) {
return _ref2.apply(this, arguments);
};
}();
_this.shouldHandleWheelX = function (delta) {
var _this$props7 = _this.props,
disabledScroll = _this$props7.disabledScroll,
loading = _this$props7.loading;
if (delta === 0 || disabledScroll || loading) {
return false;
}
return true;
};
_this.shouldHandleWheelY = function (delta) {
var _this$props8 = _this.props,
disabledScroll = _this$props8.disabledScroll,
loading = _this$props8.loading;
if (delta === 0 || disabledScroll || loading) {
return false;
}
return delta >= 0 && _this.scrollY > _this.minScrollY || delta < 0 && _this.scrollY < 0;
};
_this.addPrefix = function (name) {
return (0, _utils.prefix)(_this.props.classPrefix)(name);
};
_this.calculateTableWidth = function () {
var table = _this.tableRef && _this.tableRef.current;
var width = _this.state.width;
if (table) {
var nextWidth = (0, _domLib.getWidth)(table);
if (width !== nextWidth) {
_this.scrollX = 0;
var current = _this.scrollbarXRef && _this.scrollbarXRef.current;
current && current.resetScrollBarPosition();
_this._cacheCells = null;
}
if (nextWidth !== 0) {
_this.setState({
width: nextWidth
});
}
}
_this.setOffsetByAffix();
};
/**
* public method
*/
_this.scrollTop = function () {
var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var _this$getControlledSc = _this.getControlledScrollTopValue(top),
_this$getControlledSc2 = (0, _slicedToArray2["default"])(_this$getControlledSc, 2),
scrollY = _this$getControlledSc2[0],
handleScrollY = _this$getControlledSc2[1];
_this.scrollY = scrollY;
var current = _this.scrollbarYRef && _this.scrollbarYRef.current;
current && current.resetScrollBarPosition && current.resetScrollBarPosition(handleScrollY);
_this.updatePosition();
/**
* 当开启 virtualized，调用 scrollTop 后会出现白屏现象，
* 原因是直接操作 DOM 的坐标，但是组件没有重新渲染，需要调用 forceUpdate 重新进入 render。
* Fix: rsuite#1044
*/
if (_this.props.virtualized && _this.state.contentHeight > _this.getTableHeight()) {
_this.forceUpdate();
}
}; // public method
_this.scrollLeft = function () {
var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var _this$getControlledSc3 = _this.getControlledScrollLeftValue(left),
_this$getControlledSc4 = (0, _slicedToArray2["default"])(_this$getControlledSc3, 2),
scrollX = _this$getControlledSc4[0],
handleScrollX = _this$getControlledSc4[1];
_this.scrollX = scrollX;
var current = _this.scrollbarXRef && _this.scrollbarXRef.current;
current && current.resetScrollBarPosition && current.resetScrollBarPosition(handleScrollX);
_this.updatePosition();
};
_this.scrollTo = function (coord) {
var _ref3 = coord || {},
x = _ref3.x,
y = _ref3.y;
if (typeof x === 'number') {
_this.scrollLeft(x);
}
if (typeof y === 'number') {
_this.scrollTop(y);
}
};
_this.bindTableRowsRef = function (index, rowData, provided) {
return function (ref) {
if (ref) {
_this.tableRows[index] = [ref, rowData];
if (provided) {
provided.innerRef(ref);
}
}
};
};
_this.bindRowClick = function (rowIndex, index, rowData) {
return function (event) {
_this.onRowClick(rowData, event, rowIndex, index);
};
};
_this.bindRowContextMenu = function (rowData) {
return function (event) {
var onRowContextMenu = _this.props.onRowContextMenu;
if (onRowContextMenu) {
onRowContextMenu(rowData, event);
}
};
};
var width = props.width,
height = props.height,
data = props.data,
rowKey = props.rowKey,
defaultExpandAllRows = props.defaultExpandAllRows,
renderRowExpanded = props.renderRowExpanded,
defaultExpandedRowKeys = props.defaultExpandedRowKeys,
_props$children2 = props.children,
children = _props$children2 === void 0 ? [] : _props$children2,
_props$columns2 = props.columns,
columns = _props$columns2 === void 0 ? [] : _props$columns2,
isTree = props.isTree,
defaultSortType = props.defaultSortType;
var expandedRowKeys = defaultExpandAllRows ? (0, _utils.findRowKeys)(data, rowKey, (0, _isFunction["default"])(renderRowExpanded)) : defaultExpandedRowKeys || [];
var shouldFixedColumn = Array.from(children).some(function (child) {
return child && child.props && child.props.fixed;
});
if (columns && columns.length) {
shouldFixedColumn = Array.from(columns).some(function (child) {
return child && child.fixed;
});
}
if (isTree && !rowKey) {
throw new Error('The `rowKey` is required when set isTree');
}
_this.state = {
isTree: isTree,
expandedRowKeys: expandedRowKeys,
shouldFixedColumn: shouldFixedColumn,
cacheData: data,
data: isTree ? (0, _utils.flattenData)(data) : data,
width: width || 0,
height: height || 0,
columnWidth: 0,
dataKey: 0,
contentHeight: 0,
contentWidth: 0,
tableRowsMaxHeight: [],
sortType: defaultSortType,
scrollY: 0,
isScrolling: false,
fixedHeader: false,
searchText: '',
pivot: undefined,
selectedRowKeys: []
};
_this.scrollY = 0;
_this.scrollX = 0;
_this._cacheScrollX = 0;
_this._cacheRenderCols = [];
_this.wheelHandler = new _domLib.WheelHandler(_this.listenWheel, _this.shouldHandleWheelX, _this.shouldHandleWheelY, false);
_this._cacheChildrenSize = (0, _flatten["default"])(children || columns).length;
_this.translateDOMPositionXY = (0, _translateDOMPositionXY.getTranslateDOMPositionXY)({
enable3DTransform: props.translate3d
});
_this.tableRef = /*#__PURE__*/React.createRef();
_this.scrollbarYRef = /*#__PURE__*/React.createRef();
_this.scrollbarXRef = /*#__PURE__*/React.createRef();
_this.tableBodyRef = /*#__PURE__*/React.createRef();
_this.affixHeaderWrapperRef = /*#__PURE__*/React.createRef();
_this.mouseAreaRef = /*#__PURE__*/React.createRef();
_this.headerWrapperRef = /*#__PURE__*/React.createRef();
_this.wheelWrapperRef = /*#__PURE__*/React.createRef();
_this.tableHeaderRef = /*#__PURE__*/React.createRef();
(0, _mobx.runInAction)(function () {
return _this.setSelectionColumn(props);
});
return _this;
}
(0, _createClass2["default"])(PerformanceTable, [{
key: "componentDidMount",
value: function componentDidMount() {
this.calculateTableWidth();
this.calculateTableContextHeight();
this.calculateRowMaxHeight();
this.setOffsetByAffix();
this.initPosition();
(0, _elementResizeEvent["default"])(this.tableRef.current, (0, _debounce["default"])(this.calculateTableWidth, 400));
var options = {
passive: false
};
var tableBody = this.tableBodyRef.current;
if (tableBody) {
if ((0, _isMobile["default"])()) {
this.initBScroll(tableBody);
}
this.wheelListener = (0, _domLib.on)(tableBody, 'wheel', this.wheelHandler.onWheel, options); // this.touchStartListener = on(tableBody, 'touchstart', this.handleTouchStart, options);
// this.touchMoveListener = on(tableBody, 'touchmove', this.handleTouchMove, options);
}
var _this$props9 = this.props,
affixHeader = _this$props9.affixHeader,
affixHorizontalScrollbar = _this$props9.affixHorizontalScrollbar,
bodyRef = _this$props9.bodyRef;
if ((0, _utils.isNumberOrTrue)(affixHeader) || (0, _utils.isNumberOrTrue)(affixHorizontalScrollbar)) {
this.scrollListener = (0, _domLib.on)(window, 'scroll', this.handleWindowScroll);
}
if (bodyRef) {
bodyRef(this.wheelWrapperRef.current);
}
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
var _this2 = this;
var _cacheChildrenSize = (0, _flatten["default"])(nextProps.children || nextProps.columns || []).length;
/**
* 单元格列的信息在初始化后会被缓存，在某些属性被更新以后，需要清除缓存。
*/
if (_cacheChildrenSize !== this._cacheChildrenSize) {
this._cacheChildrenSize = _cacheChildrenSize;
this._cacheCells = null;
this.tableStore.updateProps(nextProps, this);
} else if (this.props.children !== nextProps.children || this.props.columns !== nextProps.columns || this.props.sortColumn !== nextProps.sortColumn || this.props.sortType !== nextProps.sortType) {
this._cacheCells = null;
this.tableStore.updateProps(nextProps, this);
} else if (this.props.data !== nextProps.data && this._cacheCells) {
var rowSelection = nextProps.rowSelection;
if (rowSelection && rowSelection.type !== 'radio') {
var flatData = nextState.data.filter(function (item, index) {
if (rowSelection.getCheckboxProps) {
return !_this2.getCheckboxPropsByItem(item, index).disabled;
}
return true;
});
var checkboxAllDisabled = flatData.every(function (item, index) {
return _this2.getCheckboxPropsByItem(item, index).disabled;
});
var checkboxAllHeaderCell = /*#__PURE__*/React.cloneElement(this._cacheCells.headerCells[0], {
children: /*#__PURE__*/React.cloneElement(this._cacheCells.headerCells[0].props.children, {
disabled: checkboxAllDisabled,
data: flatData
})
});
this._cacheCells.headerCells[0] = checkboxAllHeaderCell;
}
}
var flag = this.props.columns !== nextProps.columns || this.props.children !== nextProps.children || this.props.rowSelection !== nextProps.rowSelection;
if (flag) {
(0, _mobx.runInAction)(function () {
return _this2.setSelectionColumn(nextProps);
});
}
return !(0, _eq["default"])(this.props, nextProps) || !(0, _isEqual["default"])(this.state, nextState);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var _this3 = this;
var rowHeight = prevProps.rowHeight,
data = prevProps.data,
height = prevProps.height,
virtualized = prevProps.virtualized,
children = prevProps.children,
columns = prevProps.columns;
var props = this.props,
state = this.state;
var nextData = props.data,
onDataUpdated = props.onDataUpdated,
shouldUpdateScroll = props.shouldUpdateScroll,
nextColumns = props.columns,
rowSelection = props.rowSelection,
nextChildren = props.children;
if (data !== nextData) {
this.calculateRowMaxHeight();
if (onDataUpdated) {
onDataUpdated(nextData, this.scrollTo);
}
var maxHeight = nextData.length * (typeof rowHeight === 'function' ? rowHeight({}) : rowHeight); // 当开启允许更新滚动条，或者滚动条位置大于表格的最大高度，则初始滚动条位置
if (shouldUpdateScroll || Math.abs(this.scrollY) > maxHeight) {
this.scrollTo({
x: 0,
y: 0
});
}
} else {
this.updatePosition();
}
if (columns !== nextColumns || children !== nextChildren || this.tableStore.customizable) {
var shouldFixedColumn = false;
if ((!columns || columns.length === 0) && rowSelection && nextColumns && nextColumns.length) {
var rowSelectionFixed = 'left';
if ('fixed' in rowSelection) {
rowSelectionFixed = rowSelection.fixed;
}
var columnsWithRowSelectionProps = {
title: (0, _localeContext.$l)('Table', 'select_current_page'),
key: 'rowSelection',
width: 50,
align: 'center',
fixed: rowSelectionFixed
};
(0, _mobx.runInAction)(function () {
_this3.tableStore.originalColumns = nextColumns.splice(rowSelection.columnIndex || 0, 0, columnsWithRowSelectionProps);
});
}
if (nextChildren) {
shouldFixedColumn = Array.from(nextChildren).some(function (child) {
return child && child.props && child.props.fixed;
});
}
var originalColumns = this.tableStore.originalColumns;
if (originalColumns && originalColumns.length) {
shouldFixedColumn = Array.from(originalColumns).some(function (child) {
return child && child.fixed;
});
}
this.setState({
shouldFixedColumn: shouldFixedColumn
});
}
if ( // 当 Table 的 data 发生变化，需要重新计算高度
data !== nextData || // 当 Table 内容区的高度发生变化需要重新计算
height !== props.height || // 当 Table 内容区的高度发生变化需要重新计算
prevState.contentHeight !== state.contentHeight || // 当 expandedRowKeys 发生变化，需要重新计算 Table 高度，如果重算会导致滚动条不显示。
prevState.expandedRowKeys !== state.expandedRowKeys || prevProps.expandedRowKeys !== props.expandedRowKeys) {
this.calculateTableContextHeight(prevProps);
}
this.calculateTableContentWidth(prevProps);
if (virtualized) {
this.calculateTableWidth();
}
var tableBody = this.tableBodyRef.current;
if (!this.wheelListener && tableBody) {
var options = {
passive: false
};
if ((0, _isMobile["default"])()) {
this.initBScroll(tableBody);
}
this.wheelListener = (0, _domLib.on)(tableBody, 'wheel', this.wheelHandler.onWheel, options);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.wheelHandler = null;
var current = this.tableRef.current;
if (current) {
(0, _elementResizeEvent.unbind)(current);
}
var wheelListener = this.wheelListener,
touchStartListener = this.touchStartListener,
touchMoveListener = this.touchMoveListener,
scrollListener = this.scrollListener;
if (wheelListener) {
wheelListener.off();
}
if (touchStartListener) {
touchStartListener.off();
}
if (touchMoveListener) {
touchMoveListener.off();
}
if (scrollListener) {
scrollListener.off();
}
}
}, {
key: "getExpandedRowKeys",
value: function getExpandedRowKeys() {
var expandedRowKeys = this.props.expandedRowKeys;
return typeof expandedRowKeys === 'undefined' ? this.state.expandedRowKeys : expandedRowKeys;
}
}, {
key: "getSortType",
value: function getSortType() {
var sortType = this.props.sortType;
return typeof sortType === 'undefined' ? this.state.sortType : sortType;
}
}, {
key: "getScrollCellGroups",
value: function getScrollCellGroups() {
var current = this.tableRef.current;
return current && current.querySelectorAll(".".concat(this.addPrefix('cell-group-scroll')));
}
}, {
key: "getFixedLeftCellGroups",
value: function getFixedLeftCellGroups() {
var current = this.tableRef.current;
return current && current.querySelectorAll(".".concat(this.addPrefix('cell-group-fixed-left')));
}
}, {
key: "getFixedRightCellGroups",
value: function getFixedRightCellGroups() {
var current = this.tableRef.current;
return current && current.querySelectorAll(".".concat(this.addPrefix('cell-group-fixed-right')));
}
}, {
key: "isRTL",
value: function isRTL() {
return this.props.rtl || (0, _utils.isRTL)();
}
}, {
key: "getRowHeight",
value: function getRowHeight() {
var rowData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var rowHeight = this.props.rowHeight;
return typeof rowHeight === 'function' ? rowHeight(rowData) : rowHeight;
}
/**
* 获取表头高度
*/
}, {
key: "getTableHeaderHeight",
value: function getTableHeaderHeight() {
var _this$props10 = this.props,
headerHeight = _this$props10.headerHeight,
showHeader = _this$props10.showHeader;
return showHeader ? headerHeight : 0;
}
/**
* Table 个性化高度变更
*/
}, {
key: "handleHeightTypeChange",
value: function handleHeightTypeChange() {
this.calculateTableContextHeight();
}
/**
* 获取 Table 需要渲染的高度
*/
}, {
key: "getTableHeight",
value: function getTableHeight() {
var contentHeight = this.state.contentHeight;
var _this$props11 = this.props,
minHeight = _this$props11.minHeight,
height = _this$props11.height,
autoHeight = _this$props11.autoHeight,
data = _this$props11.data,
showScrollArrow = _this$props11.showScrollArrow;
var headerHeight = this.getTableHeaderHeight();
var _this$tableStore = this.tableStore,
_this$tableStore$cust = _this$tableStore.customized,
heightType = _this$tableStore$cust.heightType,
cusHeight = _this$tableStore$cust.height,
heightDiff = _this$tableStore$cust.heightDiff,
tempCustomized = _this$tableStore.tempCustomized;
var tableHeight = height;
if (this.tableStore.customizable) {
var tempHeightType = (0, _mobx.get)(tempCustomized, 'heightType');
if (tempHeightType) {
if (tempHeightType === _enum.TableHeightType.fixed) {
tableHeight = (0, _mobx.get)(tempCustomized, 'height');
}
if (tempHeightType === _enum.TableHeightType.flex) {
tableHeight = document.documentElement.clientHeight - ((0, _mobx.get)(tempCustomized, 'heightDiff') || 0);
}
}
if (heightType) {
if (heightType === _enum.TableHeightType.fixed) {
tableHeight = cusHeight;
}
if (heightType === _enum.TableHeightType.flex) {
tableHeight = document.documentElement.clientHeight - (heightDiff || 0);
}
}
this.setState({
height: tableHeight
});
}
if (data.length === 0 && autoHeight) {
return tableHeight;
}
if (autoHeight) {
if (showScrollArrow) {
return Math.max(headerHeight + contentHeight + _constants.SCROLLBAR_LARGE_WIDTH, minHeight + _constants.SCROLLBAR_LARGE_WIDTH);
} else {
return Math.max(headerHeight + contentHeight + _constants.SCROLLBAR_WIDTH, minHeight + _constants.SCROLLBAR_WIDTH);
}
} else {
return tableHeight;
}
}
/**
* 处理 column props
* @param column
*/
}, {
key: "getColumnProps",
value: function getColumnProps(column) {
return (0, _omit["default"])(column, ['title', 'dataIndex', 'key', 'render']);
}
/**
* 处理columns json -> reactNode
* @param columns
*/
}, {
key: "processTableColumns",
value: function processTableColumns(columns) {
var _this4 = this;
var visibleColumn = columns.fil