UNPKG

choerodon-ui

Version:

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

1,521 lines (1,199 loc) 116 kB
"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