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