@kdcloudjs/table 1.2.0-canary.16 → 1.2.0-canary.16-hotfix
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +2047 -3489
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +16 -16
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/_utils/arrayUtil.js +0 -3
- package/es/_utils/devwarning.js +0 -1
- package/es/_utils/formatUtil.js +35 -96
- package/es/_utils/hooks.js +18 -42
- package/es/_utils/index.js +0 -2
- package/es/_utils/numberUtil.js +32 -55
- package/es/_utils/omit.js +0 -2
- package/es/_utils/type.js +0 -2
- package/es/_utils/usePopper.js +74 -137
- package/es/config-provider/compDefaultProps.js +0 -1
- package/es/config-provider/configProvider.js +2 -7
- package/es/config-provider/defaultConfig.js +0 -1
- package/es/index.js +0 -2
- package/es/locale/locale.js +5 -43
- package/es/table/base/calculations.js +22 -72
- package/es/table/base/colgroup.js +0 -1
- package/es/table/base/empty.js +4 -4
- package/es/table/base/header.js +14 -67
- package/es/table/base/helpers/SpanManager.js +3 -9
- package/es/table/base/helpers/TableDOMUtils.js +4 -27
- package/es/table/base/helpers/__test__/SpanManager.test.js +2 -2
- package/es/table/base/helpers/__test__/TableDOMUtils.test.js +0 -1
- package/es/table/base/helpers/getRichVisibleRectsStream.js +11 -44
- package/es/table/base/helpers/rowHeightManager.js +0 -28
- package/es/table/base/html-table.js +14 -35
- package/es/table/base/loading.js +6 -8
- package/es/table/base/renderTemplates.js +26 -44
- package/es/table/base/styles.js +0 -9
- package/es/table/base/table.js +95 -181
- package/es/table/base/utils.js +14 -54
- package/es/table/common-views.js +0 -7
- package/es/table/internals.js +0 -13
- package/es/table/pipeline/features/autoFill.js +11 -40
- package/es/table/pipeline/features/autoRowSpan.js +1 -14
- package/es/table/pipeline/features/colGroupExtendable.js +4 -19
- package/es/table/pipeline/features/columnDrag.d.ts +1 -0
- package/es/table/pipeline/features/columnDrag.js +236 -303
- package/es/table/pipeline/features/columnFilter.js +11 -48
- package/es/table/pipeline/features/columnHover.js +1 -7
- package/es/table/pipeline/features/columnRangeHover.js +1 -8
- package/es/table/pipeline/features/columnResizeWidth.js +51 -42
- package/es/table/pipeline/features/contextMenu.js +18 -89
- package/es/table/pipeline/features/filter/DefaultFilterContent.js +10 -25
- package/es/table/pipeline/features/filter/DefaultFilterIcon.js +1 -1
- package/es/table/pipeline/features/filter/Filter.js +25 -48
- package/es/table/pipeline/features/filter/FilterPanel.js +11 -25
- package/es/table/pipeline/features/filter/util.js +0 -4
- package/es/table/pipeline/features/footerDataSource.js +0 -3
- package/es/table/pipeline/features/mergeCellHover.js +0 -1
- package/es/table/pipeline/features/multiSelect.js +15 -57
- package/es/table/pipeline/features/rangeSelection.js +63 -142
- package/es/table/pipeline/features/rowDetail.js +2 -41
- package/es/table/pipeline/features/rowDrag.js +36 -71
- package/es/table/pipeline/features/rowGrouping.js +2 -35
- package/es/table/pipeline/features/singleSelect.js +0 -24
- package/es/table/pipeline/features/sort.js +31 -83
- package/es/table/pipeline/features/tips.js +0 -6
- package/es/table/pipeline/features/treeMode.js +9 -44
- package/es/table/pipeline/features/treeSelect.js +0 -26
- package/es/table/pipeline/features/utils/touchEventUtils.d.ts +15 -0
- package/es/table/pipeline/features/utils/touchEventUtils.js +65 -0
- package/es/table/pipeline/pipeline.js +11 -51
- package/es/table/pivot/cross-table/buildCrossTable.js +15 -64
- package/es/table/pivot/cross-table/cross-table.js +22 -28
- package/es/table/pivot/cross-tree-table/buildCrossTreeTable.js +14 -47
- package/es/table/pivot/cross-tree-table/cross-tree-table.js +28 -50
- package/es/table/pivot/pivot-utils/buildDrillTree.js +10 -23
- package/es/table/pivot/pivot-utils/builders.js +31 -71
- package/es/table/pivot/pivot-utils/convert-utils.js +13 -39
- package/es/table/pivot/pivot-utils/simpleEncode.js +0 -1
- package/es/table/transforms/autoRowSpan.js +1 -15
- package/es/table/transforms/autoWidth.js +10 -32
- package/es/table/transforms/buildTree.js +1 -2
- package/es/table/transforms/columnHover.js +9 -15
- package/es/table/transforms/columnRangeHover.js +12 -19
- package/es/table/transforms/columnResize.js +15 -37
- package/es/table/transforms/flatten.js +0 -3
- package/es/table/transforms/orderField.js +0 -3
- package/es/table/transforms/sort.js +36 -88
- package/es/table/transforms/tips.js +1 -6
- package/es/table/transforms/treeMode.js +30 -69
- package/es/table/transforms/visible.js +0 -2
- package/es/table/use/useResizeObserver.js +1 -4
- package/es/table/utils/applyTransforms.js +0 -1
- package/es/table/utils/buildTree.js +4 -19
- package/es/table/utils/collectNodes.js +1 -10
- package/es/table/utils/console.js +0 -14
- package/es/table/utils/copyToClipboard.js +0 -4
- package/es/table/utils/element.js +14 -41
- package/es/table/utils/exportTableAsExcel.js +4 -40
- package/es/table/utils/getTreeDepth.js +1 -9
- package/es/table/utils/groupBy.js +1 -10
- package/es/table/utils/layeredFilter.js +0 -4
- package/es/table/utils/layeredSort.js +0 -5
- package/es/table/utils/makeRecursiveMapper.js +1 -12
- package/es/table/utils/mergeCellProps.js +6 -13
- package/es/table/utils/others.js +3 -16
- package/es/table/utils/proto.js +2 -30
- package/es/table/utils/smartCompare.js +4 -12
- package/es/table/utils/traverseColumn.js +2 -15
- package/es/table/utils/tree-data-helpers/StrictTreeDataHelper.js +1 -22
- package/es/table/utils/tree-data-helpers/TreeDataHelper.js +15 -69
- package/lib/_utils/arrayUtil.js +0 -5
- package/lib/_utils/devwarning.js +0 -5
- package/lib/_utils/formatUtil.js +35 -100
- package/lib/_utils/hooks.js +18 -53
- package/lib/_utils/index.js +0 -6
- package/lib/_utils/numberUtil.js +32 -63
- package/lib/_utils/omit.js +0 -5
- package/lib/_utils/react-children.js +0 -5
- package/lib/_utils/type.js +0 -6
- package/lib/_utils/usePopper.js +74 -158
- package/lib/config-provider/ConfigContext.js +1 -4
- package/lib/config-provider/compDefaultProps.js +0 -1
- package/lib/config-provider/configProvider.js +3 -18
- package/lib/config-provider/defaultConfig.js +0 -5
- package/lib/config-provider/index.js +0 -6
- package/lib/index.js +2 -8
- package/lib/locale/index.js +0 -7
- package/lib/locale/locale.js +5 -57
- package/lib/table/base/calculations.js +22 -83
- package/lib/table/base/colgroup.js +0 -5
- package/lib/table/base/empty.js +4 -16
- package/lib/table/base/header.js +14 -77
- package/lib/table/base/helpers/SpanManager.js +3 -11
- package/lib/table/base/helpers/TableDOMUtils.js +2 -27
- package/lib/table/base/helpers/__test__/SpanManager.test.js +2 -4
- package/lib/table/base/helpers/__test__/TableDOMUtils.test.js +0 -5
- package/lib/table/base/helpers/__test__/rowHeightManager.test.js +0 -1
- package/lib/table/base/helpers/getRichVisibleRectsStream.js +11 -62
- package/lib/table/base/helpers/rowHeightManager.js +0 -33
- package/lib/table/base/html-table.js +14 -45
- package/lib/table/base/index.js +0 -2
- package/lib/table/base/loading.js +6 -12
- package/lib/table/base/renderTemplates.js +27 -58
- package/lib/table/base/styles.js +0 -21
- package/lib/table/base/table.js +95 -214
- package/lib/table/base/utils.js +14 -89
- package/lib/table/common-views.js +0 -16
- package/lib/table/index.js +0 -13
- package/lib/table/internals.js +0 -14
- package/lib/table/pipeline/features/autoFill.js +11 -47
- package/lib/table/pipeline/features/autoRowSpan.js +1 -19
- package/lib/table/pipeline/features/buildTree.js +0 -2
- package/lib/table/pipeline/features/colGroupExtendable.js +4 -32
- package/lib/table/pipeline/features/columnDrag.d.ts +1 -0
- package/lib/table/pipeline/features/columnDrag.js +236 -309
- package/lib/table/pipeline/features/columnFilter.js +11 -62
- package/lib/table/pipeline/features/columnHover.js +1 -11
- package/lib/table/pipeline/features/columnRangeHover.js +1 -13
- package/lib/table/pipeline/features/columnResizeWidth.js +51 -58
- package/lib/table/pipeline/features/contextMenu.js +18 -113
- package/lib/table/pipeline/features/filter/DefaultFilterContent.js +10 -43
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.js +1 -4
- package/lib/table/pipeline/features/filter/Filter.js +25 -70
- package/lib/table/pipeline/features/filter/FilterPanel.js +11 -40
- package/lib/table/pipeline/features/filter/index.js +0 -5
- package/lib/table/pipeline/features/filter/util.js +0 -7
- package/lib/table/pipeline/features/footerDataSource.js +0 -10
- package/lib/table/pipeline/features/index.js +0 -23
- package/lib/table/pipeline/features/mergeCellHover.js +0 -5
- package/lib/table/pipeline/features/multiSelect.js +15 -71
- package/lib/table/pipeline/features/rangeSelection.js +63 -159
- package/lib/table/pipeline/features/rowDetail.js +2 -65
- package/lib/table/pipeline/features/rowDrag.js +36 -81
- package/lib/table/pipeline/features/rowGrouping.js +2 -55
- package/lib/table/pipeline/features/singleSelect.js +0 -34
- package/lib/table/pipeline/features/sort.js +31 -103
- package/lib/table/pipeline/features/tips.js +0 -15
- package/lib/table/pipeline/features/treeMode.js +9 -65
- package/lib/table/pipeline/features/treeSelect.js +0 -34
- package/lib/table/pipeline/features/utils/touchEventUtils.d.ts +15 -0
- package/lib/table/pipeline/features/utils/touchEventUtils.js +76 -0
- package/lib/table/pipeline/index.js +0 -8
- package/lib/table/pipeline/pipeline.js +11 -60
- package/lib/table/pivot/cross-table/buildCrossTable.js +15 -75
- package/lib/table/pivot/cross-table/cross-table.js +22 -36
- package/lib/table/pivot/cross-table/index.js +0 -4
- package/lib/table/pivot/cross-tree-table/buildCrossTreeTable.js +14 -60
- package/lib/table/pivot/cross-tree-table/cross-tree-table.js +28 -60
- package/lib/table/pivot/cross-tree-table/index.js +0 -3
- package/lib/table/pivot/pivot-utils/buildDrillTree.js +10 -29
- package/lib/table/pivot/pivot-utils/builders.js +31 -82
- package/lib/table/pivot/pivot-utils/convert-utils.js +13 -57
- package/lib/table/pivot/pivot-utils/index.js +0 -7
- package/lib/table/pivot/pivot-utils/simpleEncode.js +0 -2
- package/lib/table/style/css.js +0 -1
- package/lib/table/style/index.js +0 -1
- package/lib/table/transforms/autoRowSpan.js +1 -21
- package/lib/table/transforms/autoWidth.js +10 -53
- package/lib/table/transforms/buildTree.js +1 -4
- package/lib/table/transforms/columnHover.js +9 -22
- package/lib/table/transforms/columnRangeHover.js +12 -27
- package/lib/table/transforms/columnResize.js +15 -56
- package/lib/table/transforms/flatten.js +0 -5
- package/lib/table/transforms/index.js +0 -12
- package/lib/table/transforms/orderField.js +0 -7
- package/lib/table/transforms/sort.js +36 -112
- package/lib/table/transforms/tips.js +1 -16
- package/lib/table/transforms/treeMode.js +30 -96
- package/lib/table/transforms/visible.js +0 -7
- package/lib/table/transforms/warnTransformsDeprecated.js +0 -4
- package/lib/table/use/useResizeObserver.js +1 -8
- package/lib/table/utils/applyTransforms.js +0 -2
- package/lib/table/utils/buildTree.js +4 -30
- package/lib/table/utils/collectNodes.js +1 -15
- package/lib/table/utils/console.js +0 -16
- package/lib/table/utils/copyToClipboard.js +0 -6
- package/lib/table/utils/element.js +14 -46
- package/lib/table/utils/exportTableAsExcel.js +4 -49
- package/lib/table/utils/getTreeDepth.js +1 -14
- package/lib/table/utils/groupBy.js +1 -14
- package/lib/table/utils/index.js +0 -21
- package/lib/table/utils/isGroupColumn.js +0 -3
- package/lib/table/utils/isLeafNode.js +0 -1
- package/lib/table/utils/layeredFilter.js +0 -10
- package/lib/table/utils/layeredSort.js +0 -10
- package/lib/table/utils/makeRecursiveMapper.js +1 -21
- package/lib/table/utils/mergeCellProps.js +6 -17
- package/lib/table/utils/others.js +3 -31
- package/lib/table/utils/proto.js +2 -33
- package/lib/table/utils/selectColumn.js +0 -1
- package/lib/table/utils/smartCompare.js +4 -13
- package/lib/table/utils/traverseColumn.js +2 -22
- package/lib/table/utils/tree-data-helpers/StrictTreeDataHelper.js +1 -30
- package/lib/table/utils/tree-data-helpers/TreeDataHelper.js +15 -82
- package/package.json +2 -1
package/es/table/base/table.js
CHANGED
|
@@ -10,21 +10,14 @@ import _createClass from "@babel/runtime-corejs3/helpers/createClass";
|
|
|
10
10
|
import _inherits from "@babel/runtime-corejs3/helpers/inherits";
|
|
11
11
|
import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
|
|
12
12
|
import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
|
|
13
|
-
|
|
14
13
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
15
|
-
|
|
16
14
|
function _unsupportedIterableToArray(o, minLen) { var _context2; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context2 = Object.prototype.toString.call(o)).call(_context2, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
17
|
-
|
|
18
15
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
19
|
-
|
|
20
16
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
21
17
|
import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
|
|
22
18
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
23
|
-
|
|
24
19
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
25
|
-
|
|
26
20
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
27
|
-
|
|
28
21
|
import cx from 'classnames';
|
|
29
22
|
import React from 'react';
|
|
30
23
|
import { BehaviorSubject, combineLatest, noop, Subscription, Subject, from } from 'rxjs';
|
|
@@ -42,75 +35,60 @@ import { addResizeObserver, getScrollbarSize, OVERSCAN_SIZE, shallowEqual, STYLE
|
|
|
42
35
|
import { console, browserType } from '../utils';
|
|
43
36
|
import getTableRenderTemplate from './renderTemplates';
|
|
44
37
|
var propsDotEmptyContentDeprecatedWarned = false;
|
|
45
|
-
|
|
46
38
|
function warnPropsDotEmptyContentIsDeprecated() {
|
|
47
39
|
if (!propsDotEmptyContentDeprecatedWarned) {
|
|
48
40
|
propsDotEmptyContentDeprecatedWarned = true;
|
|
49
41
|
console.warn('BaseTable props.emptyContent 已经过时,请使用 props.components.EmptyContent 来自定义数据为空时的表格表现');
|
|
50
42
|
}
|
|
51
43
|
}
|
|
52
|
-
|
|
53
44
|
export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
54
45
|
_inherits(BaseTable, _React$Component);
|
|
55
|
-
|
|
56
46
|
var _super = _createSuper(BaseTable);
|
|
57
|
-
|
|
58
47
|
function BaseTable(props) {
|
|
59
48
|
var _this;
|
|
60
|
-
|
|
61
49
|
_classCallCheck(this, BaseTable);
|
|
62
|
-
|
|
63
50
|
_this = _super.call(this, props);
|
|
64
51
|
_this.rowHeightManager = makeRowHeightManager(_this.props.dataSource.length, _this.props.estimatedRowHeight);
|
|
65
52
|
_this.artTableWrapperRef = /*#__PURE__*/React.createRef();
|
|
66
53
|
_this.hasScrollY = false;
|
|
67
54
|
_this.offsetY = 0;
|
|
68
|
-
|
|
69
55
|
_this.handleRowMouseEnter = function (e) {
|
|
70
56
|
var nodeList = _this.domHelper.getRowNodeListByEvent(e);
|
|
71
|
-
|
|
72
57
|
nodeList && nodeList.forEach(function (node) {
|
|
73
58
|
node.classList.add('row-hover');
|
|
74
59
|
});
|
|
75
60
|
};
|
|
76
|
-
|
|
77
61
|
_this.handleRowMouseLeave = function (e) {
|
|
78
62
|
var nodeList = _this.domHelper.getRowNodeListByEvent(e);
|
|
79
|
-
|
|
80
63
|
nodeList && nodeList.forEach(function (node) {
|
|
81
64
|
node.classList.remove('row-hover');
|
|
82
65
|
});
|
|
83
66
|
};
|
|
84
|
-
|
|
85
67
|
_this.renderTableBody = function (info) {
|
|
86
68
|
// console.log('render body')
|
|
87
69
|
var _this$props = _this.props,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
var tableBodyClassName = cx(Classes.tableBody, Classes.horizontalScrollContainer);
|
|
95
|
-
|
|
70
|
+
dataSource = _this$props.dataSource,
|
|
71
|
+
getRowProps = _this$props.getRowProps,
|
|
72
|
+
primaryKey = _this$props.primaryKey,
|
|
73
|
+
isLoading = _this$props.isLoading,
|
|
74
|
+
emptyCellHeight = _this$props.emptyCellHeight,
|
|
75
|
+
footerDataSource = _this$props.footerDataSource;
|
|
76
|
+
var tableBodyClassName = cx(Classes.tableBody, Classes.horizontalScrollContainer);
|
|
77
|
+
// 低版本Edge浏览器下也会出现双滚动条,这里设置overflow: 'hidden',先去掉edge的方向键控制滚动条的功能
|
|
96
78
|
var virtualStyle = browserType.isIE || browserType.isEdge ? {
|
|
97
79
|
overflow: 'hidden'
|
|
98
80
|
} : {};
|
|
99
|
-
|
|
100
81
|
if (dataSource.length === 0) {
|
|
101
82
|
var _this$props2 = _this.props,
|
|
102
|
-
|
|
103
|
-
|
|
83
|
+
components = _this$props2.components,
|
|
84
|
+
emptyContent = _this$props2.emptyContent;
|
|
104
85
|
var EmptyContent = components.EmptyContent;
|
|
105
|
-
|
|
106
86
|
if (EmptyContent == null && emptyContent != null) {
|
|
107
87
|
warnPropsDotEmptyContentIsDeprecated();
|
|
108
|
-
|
|
109
88
|
EmptyContent = function EmptyContent() {
|
|
110
89
|
return emptyContent;
|
|
111
90
|
};
|
|
112
91
|
}
|
|
113
|
-
|
|
114
92
|
return /*#__PURE__*/React.createElement("div", {
|
|
115
93
|
className: cx(tableBodyClassName, 'empty')
|
|
116
94
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -124,15 +102,13 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
124
102
|
emptyCellHeight: emptyCellHeight
|
|
125
103
|
})));
|
|
126
104
|
}
|
|
127
|
-
|
|
128
105
|
var _info$verticalRenderR = info.verticalRenderRange,
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
106
|
+
topIndex = _info$verticalRenderR.topIndex,
|
|
107
|
+
bottomBlank = _info$verticalRenderR.bottomBlank,
|
|
108
|
+
topBlank = _info$verticalRenderR.topBlank,
|
|
109
|
+
bottomIndex = _info$verticalRenderR.bottomIndex;
|
|
133
110
|
var stickyRightOffset = _this.hasScrollY ? _this.getScrollBarWidth() : 0;
|
|
134
111
|
var renderBody = getTableRenderTemplate('body');
|
|
135
|
-
|
|
136
112
|
if (typeof renderBody === 'function') {
|
|
137
113
|
return renderBody(info, _this.props, {
|
|
138
114
|
rowProps: {
|
|
@@ -142,7 +118,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
142
118
|
stickyRightOffset: stickyRightOffset
|
|
143
119
|
});
|
|
144
120
|
}
|
|
145
|
-
|
|
146
121
|
return /*#__PURE__*/React.createElement("div", {
|
|
147
122
|
className: tableBodyClassName
|
|
148
123
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -176,7 +151,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
176
151
|
}
|
|
177
152
|
})));
|
|
178
153
|
};
|
|
179
|
-
|
|
180
154
|
_this.state = {
|
|
181
155
|
hasScroll: true,
|
|
182
156
|
hasScrollY: true,
|
|
@@ -192,8 +166,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
192
166
|
return _this;
|
|
193
167
|
}
|
|
194
168
|
/** @deprecated BaseTable.getDoms() 已经过时,请勿调用 */
|
|
195
|
-
|
|
196
|
-
|
|
197
169
|
_createClass(BaseTable, [{
|
|
198
170
|
key: "getDoms",
|
|
199
171
|
value: function getDoms() {
|
|
@@ -201,34 +173,29 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
201
173
|
return this.domHelper;
|
|
202
174
|
}
|
|
203
175
|
/** 自定义滚动条宽度为table宽度,使滚动条滑块宽度相同 */
|
|
204
|
-
|
|
205
176
|
}, {
|
|
206
177
|
key: "updateStickyScroll",
|
|
207
178
|
value: function updateStickyScroll() {
|
|
208
179
|
var _a, _b;
|
|
209
|
-
|
|
210
180
|
var _this$domHelper = this.domHelper,
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
181
|
+
stickyScroll = _this$domHelper.stickyScroll,
|
|
182
|
+
artTable = _this$domHelper.artTable,
|
|
183
|
+
stickyScrollItem = _this$domHelper.stickyScrollItem;
|
|
214
184
|
var _lastHasScrollY = this.hasScrollY;
|
|
215
|
-
|
|
216
185
|
if (!artTable) {
|
|
217
186
|
return;
|
|
218
187
|
}
|
|
219
|
-
|
|
220
188
|
var tableBodyHtmlTable = this.domHelper.getTableBodyHtmlTable();
|
|
221
189
|
var innerTableWidth = tableBodyHtmlTable.offsetWidth;
|
|
222
190
|
var artTableWidth = artTable.offsetWidth;
|
|
223
|
-
var artTableHeight = artTable.offsetHeight;
|
|
224
|
-
|
|
191
|
+
var artTableHeight = artTable.offsetHeight;
|
|
192
|
+
// 表格隐藏后,不需要对表格的滚动条做额外的逻辑处理
|
|
225
193
|
if (artTableWidth === 0 && artTableHeight === 0) return;
|
|
226
194
|
var stickyScrollHeightProp = this.props.stickyScrollHeight;
|
|
227
|
-
var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp;
|
|
195
|
+
var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp;
|
|
196
|
+
// stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
|
|
228
197
|
// 设置滚动条高度
|
|
229
|
-
|
|
230
198
|
stickyScroll.style.height = "".concat(stickyScrollHeight, "px");
|
|
231
|
-
|
|
232
199
|
if (artTableWidth >= innerTableWidth) {
|
|
233
200
|
if (this.state.hasScroll) {
|
|
234
201
|
this.setState({
|
|
@@ -243,7 +210,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
243
210
|
});
|
|
244
211
|
}
|
|
245
212
|
}
|
|
246
|
-
|
|
247
213
|
if (this.domHelper.virtual.offsetHeight > this.domHelper.tableBody.offsetHeight) {
|
|
248
214
|
// if (!this.state.hasScroll) {
|
|
249
215
|
// this.setState({
|
|
@@ -252,36 +218,32 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
252
218
|
// }
|
|
253
219
|
this.hasScrollY = true;
|
|
254
220
|
} else {
|
|
255
|
-
stickyScroll.style.paddingRight = "".concat(stickyScrollHeight, "px");
|
|
221
|
+
stickyScroll.style.paddingRight = "".concat(stickyScrollHeight, "px");
|
|
222
|
+
// this.setState({
|
|
256
223
|
// hasScrollY: false
|
|
257
224
|
// })
|
|
258
|
-
|
|
259
225
|
this.hasScrollY = false;
|
|
260
226
|
}
|
|
261
|
-
|
|
262
227
|
if (_lastHasScrollY !== this.hasScrollY) {
|
|
263
228
|
(_b = (_a = this.props).setTableWidth) === null || _b === void 0 ? void 0 : _b.call(_a, this.domHelper.tableBody.clientWidth);
|
|
264
229
|
}
|
|
265
|
-
|
|
266
230
|
var _this$lastInfo = this.lastInfo,
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth;
|
|
270
|
-
|
|
231
|
+
leftLockTotalWidth = _this$lastInfo.leftLockTotalWidth,
|
|
232
|
+
rightLockTotalWidth = _this$lastInfo.rightLockTotalWidth;
|
|
233
|
+
var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth;
|
|
234
|
+
// 设置子节点宽度
|
|
271
235
|
stickyScrollItem.style.width = "".concat(innerTableWidth - lockTotalWidth, "px");
|
|
272
236
|
}
|
|
273
237
|
}, {
|
|
274
238
|
key: "renderTableHeader",
|
|
275
239
|
value: function renderTableHeader(info) {
|
|
276
240
|
var _this$props3 = this.props,
|
|
277
|
-
|
|
278
|
-
|
|
241
|
+
stickyTop = _this$props3.stickyTop,
|
|
242
|
+
hasHeader = _this$props3.hasHeader;
|
|
279
243
|
var renderHeader = getTableRenderTemplate('header');
|
|
280
|
-
|
|
281
244
|
if (typeof renderHeader === 'function') {
|
|
282
245
|
return renderHeader(info, this.props);
|
|
283
246
|
}
|
|
284
|
-
|
|
285
247
|
return /*#__PURE__*/React.createElement("div", {
|
|
286
248
|
className: cx(Classes.tableHeader, 'no-scrollbar'),
|
|
287
249
|
style: {
|
|
@@ -314,31 +276,23 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
314
276
|
this.syncHorizontalScroll(this.domHelper.virtual.scrollLeft);
|
|
315
277
|
}
|
|
316
278
|
/** 同步横向滚动偏移量 */
|
|
317
|
-
|
|
318
279
|
}, {
|
|
319
280
|
key: "syncHorizontalScroll",
|
|
320
281
|
value: function syncHorizontalScroll(x) {
|
|
321
282
|
this.updateOffsetX(x);
|
|
322
|
-
|
|
323
283
|
var flat = _flatInstanceProperty(this.lastInfo);
|
|
324
|
-
|
|
325
284
|
var leftLockShadow = this.domHelper.getLeftLockShadow();
|
|
326
|
-
|
|
327
285
|
if (leftLockShadow) {
|
|
328
286
|
var shouldShowLeftLockShadow = flat.left.length > 0 && this.state.needRenderLock && x > 0;
|
|
329
|
-
|
|
330
287
|
if (shouldShowLeftLockShadow) {
|
|
331
288
|
leftLockShadow.classList.add('show-shadow');
|
|
332
289
|
} else {
|
|
333
290
|
leftLockShadow.classList.remove('show-shadow');
|
|
334
291
|
}
|
|
335
292
|
}
|
|
336
|
-
|
|
337
293
|
var rightLockShadow = this.domHelper.getRightLockShadow();
|
|
338
|
-
|
|
339
294
|
if (rightLockShadow) {
|
|
340
295
|
var shouldShowRightLockShadow = flat.right.length > 0 && this.state.needRenderLock && x < this.domHelper.virtual.scrollWidth - this.domHelper.virtual.clientWidth;
|
|
341
|
-
|
|
342
296
|
if (shouldShowRightLockShadow) {
|
|
343
297
|
rightLockShadow.classList.add('show-shadow');
|
|
344
298
|
} else {
|
|
@@ -351,10 +305,9 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
351
305
|
value: function getVerticalRenderRange(useVirtual) {
|
|
352
306
|
var dataSource = this.props.dataSource;
|
|
353
307
|
var _this$state = this.state,
|
|
354
|
-
|
|
355
|
-
|
|
308
|
+
offsetY = _this$state.offsetY,
|
|
309
|
+
maxRenderHeight = _this$state.maxRenderHeight;
|
|
356
310
|
var rowCount = dataSource.length;
|
|
357
|
-
|
|
358
311
|
if (useVirtual.vertical) {
|
|
359
312
|
return this.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
|
|
360
313
|
} else {
|
|
@@ -366,13 +319,12 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
366
319
|
value: function renderTableFooter(info) {
|
|
367
320
|
// console.log('render footer')
|
|
368
321
|
var _this$props4 = this.props,
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
322
|
+
_this$props4$footerDa = _this$props4.footerDataSource,
|
|
323
|
+
footerDataSource = _this$props4$footerDa === void 0 ? [] : _this$props4$footerDa,
|
|
324
|
+
getRowProps = _this$props4.getRowProps,
|
|
325
|
+
primaryKey = _this$props4.primaryKey,
|
|
326
|
+
stickyBottom = _this$props4.stickyBottom;
|
|
374
327
|
var renderFooter = getTableRenderTemplate('footer');
|
|
375
|
-
|
|
376
328
|
if (typeof renderFooter === 'function') {
|
|
377
329
|
return renderFooter(info, this.props, {
|
|
378
330
|
rowProps: {
|
|
@@ -381,7 +333,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
381
333
|
}
|
|
382
334
|
});
|
|
383
335
|
}
|
|
384
|
-
|
|
385
336
|
return /*#__PURE__*/React.createElement("div", {
|
|
386
337
|
className: cx(Classes.tableFooter, Classes.horizontalScrollContainer),
|
|
387
338
|
style: {
|
|
@@ -434,8 +385,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
434
385
|
value: function renderStickyScroll(info) {
|
|
435
386
|
// console.log('render stickyscroll')
|
|
436
387
|
var _this$props5 = this.props,
|
|
437
|
-
|
|
438
|
-
|
|
388
|
+
hasStickyScroll = _this$props5.hasStickyScroll,
|
|
389
|
+
stickyBottom = _this$props5.stickyBottom;
|
|
439
390
|
var hasScroll = this.state.hasScroll;
|
|
440
391
|
var isScroll = hasStickyScroll && hasScroll;
|
|
441
392
|
var stickyScrollContainerStyle = this.getStickyScrollContainerStyle();
|
|
@@ -473,8 +424,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
473
424
|
key: "getStickyScrollContainerStyle",
|
|
474
425
|
value: function getStickyScrollContainerStyle() {
|
|
475
426
|
var _this$props6 = this.props,
|
|
476
|
-
|
|
477
|
-
|
|
427
|
+
hasStickyScroll = _this$props6.hasStickyScroll,
|
|
428
|
+
stickyScrollHeight = _this$props6.stickyScrollHeight;
|
|
478
429
|
var hasScroll = this.state.hasScroll;
|
|
479
430
|
var isScroll = hasStickyScroll && hasScroll;
|
|
480
431
|
var height = stickyScrollHeight === 'auto' ? this.getScrollBarWidth() : stickyScrollHeight;
|
|
@@ -489,24 +440,23 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
489
440
|
key: "render",
|
|
490
441
|
value: function render() {
|
|
491
442
|
var _cx;
|
|
492
|
-
|
|
493
443
|
// console.log('render table')
|
|
494
444
|
var info = calculateRenderInfo(this);
|
|
495
445
|
this.lastInfo = info;
|
|
496
446
|
var _this$props7 = this.props,
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
447
|
+
dataSource = _this$props7.dataSource,
|
|
448
|
+
className = _this$props7.className,
|
|
449
|
+
style = _this$props7.style,
|
|
450
|
+
hasHeader = _this$props7.hasHeader,
|
|
451
|
+
useOuterBorder = _this$props7.useOuterBorder,
|
|
452
|
+
isStickyHead = _this$props7.isStickyHead,
|
|
453
|
+
isStickyHeader = _this$props7.isStickyHeader,
|
|
454
|
+
isStickyFooter = _this$props7.isStickyFooter,
|
|
455
|
+
isLoading = _this$props7.isLoading,
|
|
456
|
+
getTableProps = _this$props7.getTableProps,
|
|
457
|
+
footerDataSource = _this$props7.footerDataSource,
|
|
458
|
+
components = _this$props7.components,
|
|
459
|
+
bordered = _this$props7.bordered;
|
|
510
460
|
var artTableWrapperClassName = cx(Classes.artTableWrapper, (_cx = {
|
|
511
461
|
'use-outer-border': useOuterBorder,
|
|
512
462
|
empty: dataSource.length === 0,
|
|
@@ -516,12 +466,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
516
466
|
'has-footer': footerDataSource.length > 0,
|
|
517
467
|
'sticky-footer': isStickyFooter
|
|
518
468
|
}, _defineProperty(_cx, Classes.artTableBordered, bordered), _defineProperty(_cx, 'ie-polyfill-wrapper', browserType.isIE), _cx), className);
|
|
519
|
-
|
|
520
469
|
var artTableWrapperProps = _defineProperty({
|
|
521
470
|
className: artTableWrapperClassName,
|
|
522
471
|
style: style
|
|
523
472
|
}, STYLED_REF_PROP, this.artTableWrapperRef);
|
|
524
|
-
|
|
525
473
|
var tableProps = getTableProps() || {};
|
|
526
474
|
return /*#__PURE__*/React.createElement(StyledArtTableWrapper, _extends({}, artTableWrapperProps), /*#__PURE__*/React.createElement(Loading, {
|
|
527
475
|
visible: isLoading,
|
|
@@ -535,18 +483,17 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
535
483
|
key: "componentDidMount",
|
|
536
484
|
value: function componentDidMount() {
|
|
537
485
|
var _a, _b, _c, _d, _e, _f;
|
|
538
|
-
|
|
539
486
|
this.rootSubscription = new Subscription();
|
|
540
487
|
this.resizeSubject = new Subject();
|
|
541
488
|
this.updateDOMHelper();
|
|
542
489
|
this.props$ = new BehaviorSubject(this.props);
|
|
543
490
|
this.initSubscriptions();
|
|
544
|
-
this.didMountOrUpdate();
|
|
545
|
-
|
|
491
|
+
this.didMountOrUpdate();
|
|
492
|
+
// console.log('did mount end')
|
|
546
493
|
var _this$props8 = this.props,
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
494
|
+
cssVariables = _this$props8.cssVariables,
|
|
495
|
+
enableCSSVariables = _this$props8.enableCSSVariables,
|
|
496
|
+
bordered = _this$props8.bordered;
|
|
550
497
|
cssPolifill({
|
|
551
498
|
variables: cssVariables || {},
|
|
552
499
|
enableCSSVariables: enableCSSVariables,
|
|
@@ -559,14 +506,12 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
559
506
|
}, {
|
|
560
507
|
key: "componentDidUpdate",
|
|
561
508
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
562
|
-
var _a;
|
|
563
|
-
|
|
564
|
-
|
|
509
|
+
var _a;
|
|
510
|
+
// console.log('did update start')
|
|
565
511
|
var _this$props9 = this.props,
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
512
|
+
cssVariables = _this$props9.cssVariables,
|
|
513
|
+
enableCSSVariables = _this$props9.enableCSSVariables,
|
|
514
|
+
bordered = _this$props9.bordered;
|
|
570
515
|
if (!shallowEqual(prevProps === null || prevProps === void 0 ? void 0 : prevProps.cssVariables, (_a = this.props) === null || _a === void 0 ? void 0 : _a.cssVariables)) {
|
|
571
516
|
cssPolifill({
|
|
572
517
|
variables: cssVariables || {},
|
|
@@ -574,10 +519,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
574
519
|
bordered: bordered
|
|
575
520
|
});
|
|
576
521
|
}
|
|
577
|
-
|
|
578
522
|
this.updateDOMHelper();
|
|
579
523
|
this.props$.next(this.props);
|
|
580
|
-
this.didMountOrUpdate(prevProps, prevState);
|
|
524
|
+
this.didMountOrUpdate(prevProps, prevState);
|
|
525
|
+
// console.log('did update end')
|
|
581
526
|
}
|
|
582
527
|
}, {
|
|
583
528
|
key: "didMountOrUpdate",
|
|
@@ -596,11 +541,9 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
596
541
|
this.domHelper.stickyScroll.scrollLeft = 0;
|
|
597
542
|
}
|
|
598
543
|
}
|
|
599
|
-
|
|
600
544
|
if (prevProps != null) {
|
|
601
545
|
var prevHasFooter = prevProps.footerDataSource.length > 0;
|
|
602
546
|
var currentHasFooter = this.props.footerDataSource.length > 0;
|
|
603
|
-
|
|
604
547
|
if (!prevHasFooter && currentHasFooter) {
|
|
605
548
|
getTableScrollFooterDOM(this.domHelper).scrollLeft = this.domHelper.virtual.scrollLeft;
|
|
606
549
|
}
|
|
@@ -610,64 +553,55 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
610
553
|
key: "initSubscriptions",
|
|
611
554
|
value: function initSubscriptions() {
|
|
612
555
|
var _this2 = this;
|
|
613
|
-
|
|
614
556
|
var _this$domHelper2 = this.domHelper,
|
|
615
|
-
|
|
616
|
-
|
|
557
|
+
virtual = _this$domHelper2.virtual,
|
|
558
|
+
stickyScroll = _this$domHelper2.stickyScroll;
|
|
617
559
|
this.rootSubscription.add(throttledWindowResize$.subscribe(function () {
|
|
618
560
|
_this2.updateStickyScroll();
|
|
619
|
-
|
|
620
561
|
_this2.adjustNeedRenderLock();
|
|
621
562
|
}));
|
|
622
563
|
this.resizeSubject.pipe(op.debounceTime(100)).subscribe(function () {
|
|
623
564
|
var _a, _b;
|
|
624
|
-
|
|
625
565
|
(_b = (_a = _this2.props).setTableWidth) === null || _b === void 0 ? void 0 : _b.call(_a, _this2.domHelper.tableBody.clientWidth);
|
|
626
566
|
});
|
|
627
|
-
|
|
628
567
|
var handleTableWrapperResize = function handleTableWrapperResize() {
|
|
629
568
|
_this2.resizeSubject.next();
|
|
630
569
|
};
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
570
|
+
this.resizeObserver = addResizeObserver(this.domHelper.artTableWrapper, handleTableWrapperResize);
|
|
571
|
+
// 滚动同步
|
|
634
572
|
this.rootSubscription.add(syncScrollLeft([getTableScrollHeaderDOM(this.domHelper), virtual, getTableScrollFooterDOM(this.domHelper), stickyScroll], function (scrollLeft) {
|
|
635
573
|
_this2.syncHorizontalScroll(scrollLeft);
|
|
636
574
|
}));
|
|
637
|
-
var richVisibleRects$ = getRichVisibleRectsStream(this.domHelper.virtual, this.props$.pipe(op.skip(1), op.mapTo('structure-may-change')), this.props.virtualDebugLabel).pipe(op.shareReplay());
|
|
638
|
-
|
|
575
|
+
var richVisibleRects$ = getRichVisibleRectsStream(this.domHelper.virtual, this.props$.pipe(op.skip(1), op.mapTo('structure-may-change')), this.props.virtualDebugLabel).pipe(op.shareReplay());
|
|
576
|
+
// 每当可见部分发生变化的时候,调整 loading icon 的未知(如果 loading icon 存在的话)
|
|
639
577
|
this.rootSubscription.add(combineLatest([richVisibleRects$.pipe(op.map(function (p) {
|
|
640
578
|
return p.clipRect;
|
|
641
579
|
}), op.distinctUntilChanged(shallowEqual)), this.props$.pipe(op.startWith(null), op.pairwise(), op.filter(function (_ref) {
|
|
642
580
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
581
|
+
prevProps = _ref2[0],
|
|
582
|
+
props = _ref2[1];
|
|
646
583
|
return prevProps == null || !prevProps.isLoading && props.isLoading;
|
|
647
584
|
}))]).subscribe(function (_ref3) {
|
|
648
585
|
var _ref4 = _slicedToArray(_ref3, 1),
|
|
649
|
-
|
|
650
|
-
|
|
586
|
+
clipRect = _ref4[0];
|
|
651
587
|
var loadingIndicator = _this2.domHelper.getLoadingIndicator();
|
|
652
|
-
|
|
653
588
|
if (!loadingIndicator) {
|
|
654
589
|
return;
|
|
655
590
|
}
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
591
|
+
var height = clipRect.bottom - clipRect.top;
|
|
592
|
+
// fixme 这里的定位在有些特殊情况下可能会出错 see #132
|
|
659
593
|
loadingIndicator.style.top = "".concat(height / 2, "px");
|
|
660
594
|
loadingIndicator.style.marginTop = "".concat(height / 2, "px");
|
|
661
|
-
}));
|
|
662
|
-
|
|
595
|
+
}));
|
|
596
|
+
// 每当可见部分发生变化的时候,如果开启了虚拟滚动,则重新触发 render
|
|
663
597
|
this.rootSubscription.add(richVisibleRects$.pipe(op.filter(function () {
|
|
664
598
|
var _this2$lastInfo$useVi = _this2.lastInfo.useVirtual,
|
|
665
|
-
|
|
666
|
-
|
|
599
|
+
horizontal = _this2$lastInfo$useVi.horizontal,
|
|
600
|
+
vertical = _this2$lastInfo$useVi.vertical;
|
|
667
601
|
return horizontal || vertical;
|
|
668
602
|
}), op.map(function (_ref5) {
|
|
669
603
|
var clipRect = _ref5.clipRect,
|
|
670
|
-
|
|
604
|
+
offsetY = _ref5.offsetY;
|
|
671
605
|
return {
|
|
672
606
|
maxRenderHeight: clipRect.bottom - clipRect.top,
|
|
673
607
|
maxRenderWidth: clipRect.right - clipRect.left,
|
|
@@ -677,16 +611,15 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
677
611
|
// 如果表格区域被隐藏, 不需要触发组件重渲染
|
|
678
612
|
if (y.maxRenderHeight === 0 && y.maxRenderWidth === 0) {
|
|
679
613
|
return true;
|
|
680
|
-
}
|
|
681
|
-
|
|
682
|
-
|
|
614
|
+
}
|
|
615
|
+
// 因为 overscan 的存在,滚动较小的距离时不需要触发组件重渲染
|
|
683
616
|
return Math.abs(x.maxRenderWidth - y.maxRenderWidth) < OVERSCAN_SIZE / 2 && Math.abs(x.maxRenderHeight - y.maxRenderHeight) < OVERSCAN_SIZE / 2 && Math.abs(x.offsetY - y.offsetY) < OVERSCAN_SIZE / 2;
|
|
684
617
|
})).subscribe(function (sizeAndOffset) {
|
|
685
618
|
_this2.setState(sizeAndOffset);
|
|
686
619
|
}));
|
|
687
620
|
this.rootSubscription.add(richVisibleRects$.pipe(op.map(function (_ref6) {
|
|
688
621
|
var clipRect = _ref6.clipRect,
|
|
689
|
-
|
|
622
|
+
offsetY = _ref6.offsetY;
|
|
690
623
|
return {
|
|
691
624
|
maxRenderHeight: clipRect.bottom - clipRect.top,
|
|
692
625
|
maxRenderWidth: clipRect.right - clipRect.left,
|
|
@@ -694,20 +627,18 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
694
627
|
};
|
|
695
628
|
}), op.distinctUntilChanged(function (x, y) {
|
|
696
629
|
return x.offsetY - y.offsetY === 0;
|
|
697
|
-
}),
|
|
630
|
+
}),
|
|
631
|
+
// 计算得到当前行索引对应的数据块,blocks改成数组的形式,兼容快速拖动可视区域出现两个数据块的情况
|
|
698
632
|
op.map(function (sizeAndOffset) {
|
|
699
633
|
var _a;
|
|
700
|
-
|
|
701
634
|
var offsetY = sizeAndOffset.offsetY,
|
|
702
|
-
|
|
635
|
+
maxRenderHeight = sizeAndOffset.maxRenderHeight;
|
|
703
636
|
var scrollDirection = offsetY - _this2.offsetY >= 0 ? 'down' : 'up';
|
|
704
637
|
_this2.offsetY = offsetY;
|
|
705
638
|
var rowCount = _this2.props.dataSource.length;
|
|
706
|
-
|
|
707
639
|
var vertical = _this2.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
|
|
708
|
-
|
|
709
640
|
var topIndex = vertical.topIndex,
|
|
710
|
-
|
|
641
|
+
bottomIndex = vertical.bottomIndex;
|
|
711
642
|
var blockSize = ((_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.blockSize) || 200;
|
|
712
643
|
var topBlockStartIndex = Math.floor(Math.max(topIndex - 1, 0) / blockSize) * blockSize;
|
|
713
644
|
var bottomBlockStartIndex = Math.floor((bottomIndex + 1) / blockSize) * blockSize;
|
|
@@ -719,10 +650,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
719
650
|
return event$.pipe(op.map(function (startIndex) {
|
|
720
651
|
return startIndex;
|
|
721
652
|
}));
|
|
722
|
-
}),
|
|
653
|
+
}),
|
|
654
|
+
// 过滤掉重复掉值
|
|
723
655
|
op.distinctUntilChanged()).subscribe(function (startIndex) {
|
|
724
656
|
var _a;
|
|
725
|
-
|
|
726
657
|
(_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.callback(startIndex);
|
|
727
658
|
}));
|
|
728
659
|
}
|
|
@@ -730,13 +661,11 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
730
661
|
key: "componentWillUnmount",
|
|
731
662
|
value: function componentWillUnmount() {
|
|
732
663
|
var _a;
|
|
733
|
-
|
|
734
664
|
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
735
665
|
this.rootSubscription.unsubscribe();
|
|
736
666
|
this.resizeSubject.unsubscribe();
|
|
737
667
|
}
|
|
738
668
|
/** 更新 DOM 节点的引用,方便其他方法直接操作 DOM */
|
|
739
|
-
|
|
740
669
|
}, {
|
|
741
670
|
key: "updateDOMHelper",
|
|
742
671
|
value: function updateDOMHelper() {
|
|
@@ -746,51 +675,42 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
746
675
|
key: "updateRowHeightManager",
|
|
747
676
|
value: function updateRowHeightManager() {
|
|
748
677
|
var _a;
|
|
749
|
-
|
|
750
678
|
var virtualTop = this.domHelper.getVirtualTop();
|
|
751
679
|
var virtualTopHeight = (_a = virtualTop === null || virtualTop === void 0 ? void 0 : virtualTop.clientHeight) !== null && _a !== void 0 ? _a : 0;
|
|
752
680
|
var maxTrRowIndex = -1;
|
|
753
681
|
var maxTrBottom = -1;
|
|
754
682
|
var zeroHeightRowCount = 0;
|
|
755
|
-
|
|
756
683
|
var _iterator = _createForOfIteratorHelper(this.domHelper.getTableRows()),
|
|
757
|
-
|
|
758
|
-
|
|
684
|
+
_step;
|
|
759
685
|
try {
|
|
760
686
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
761
687
|
var tr = _step.value;
|
|
762
688
|
var rowIndex = Number(tr.dataset.rowindex);
|
|
763
|
-
|
|
764
689
|
if (isNaN(rowIndex)) {
|
|
765
690
|
continue;
|
|
766
691
|
}
|
|
767
|
-
|
|
768
692
|
maxTrRowIndex = Math.max(maxTrRowIndex, rowIndex);
|
|
769
693
|
var offset = tr.offsetTop + virtualTopHeight;
|
|
770
694
|
var size = tr.offsetHeight;
|
|
771
|
-
|
|
772
695
|
if (size === 0) {
|
|
773
696
|
zeroHeightRowCount += 1;
|
|
774
697
|
} else {
|
|
775
698
|
// 渲染出来的行高度为0,说明是display=none情况,行高不存在该种异常情况,不保存当前的高度
|
|
776
699
|
this.rowHeightManager.updateRow(rowIndex, offset, size);
|
|
777
700
|
}
|
|
778
|
-
|
|
779
701
|
maxTrBottom = Math.max(maxTrBottom, offset + size);
|
|
780
|
-
}
|
|
702
|
+
}
|
|
703
|
+
// 当 estimatedRowHeight 过大时,可能出现「渲染行数过少,无法覆盖可视范围」的情况
|
|
781
704
|
// 出现这种情况时,我们判断「下一次渲染能够渲染更多行」是否满足,满足的话就直接调用 forceUpdate
|
|
782
705
|
// zeroHeightRowCount === 0 用于确保当前没有 display=none 的情况
|
|
783
|
-
|
|
784
706
|
} catch (err) {
|
|
785
707
|
_iterator.e(err);
|
|
786
708
|
} finally {
|
|
787
709
|
_iterator.f();
|
|
788
710
|
}
|
|
789
|
-
|
|
790
711
|
if (maxTrRowIndex !== -1 && zeroHeightRowCount === 0) {
|
|
791
712
|
if (maxTrBottom < this.state.offsetY + this.state.maxRenderHeight) {
|
|
792
713
|
var vertical = this.getVerticalRenderRange(this.lastInfo.useVirtual);
|
|
793
|
-
|
|
794
714
|
if (vertical.bottomIndex - 1 > maxTrRowIndex) {
|
|
795
715
|
this.forceUpdate();
|
|
796
716
|
}
|
|
@@ -798,24 +718,19 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
798
718
|
}
|
|
799
719
|
}
|
|
800
720
|
/** 计算表格所有列的渲染宽度之和,判断表格是否需要渲染锁列 */
|
|
801
|
-
|
|
802
721
|
}, {
|
|
803
722
|
key: "adjustNeedRenderLock",
|
|
804
723
|
value: function adjustNeedRenderLock() {
|
|
805
724
|
var needRenderLock = this.state.needRenderLock;
|
|
806
|
-
|
|
807
725
|
var _this$lastInfo2 = this.lastInfo,
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
726
|
+
flat = _flatInstanceProperty(_this$lastInfo2),
|
|
727
|
+
hasLockColumn = _this$lastInfo2.hasLockColumn;
|
|
811
728
|
if (hasLockColumn) {
|
|
812
729
|
var _context;
|
|
813
|
-
|
|
814
730
|
var sumOfColWidth = sum(_mapInstanceProperty(_context = flat.full).call(_context, function (col) {
|
|
815
731
|
return col.width;
|
|
816
732
|
}));
|
|
817
733
|
var nextNeedRenderLock = sumOfColWidth > this.domHelper.artTable.clientWidth;
|
|
818
|
-
|
|
819
734
|
if (needRenderLock !== nextNeedRenderLock) {
|
|
820
735
|
this.setState({
|
|
821
736
|
needRenderLock: nextNeedRenderLock
|
|
@@ -830,7 +745,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
830
745
|
}
|
|
831
746
|
}
|
|
832
747
|
}]);
|
|
833
|
-
|
|
834
748
|
return BaseTable;
|
|
835
749
|
}(React.Component);
|
|
836
750
|
BaseTable.defaultProps = {
|