@kdcloudjs/table 1.1.2-canary.1 → 1.1.2-canary.2

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.
Files changed (15) hide show
  1. package/dist/@kdcloudjs/table.js +46 -4
  2. package/dist/@kdcloudjs/table.js.map +1 -1
  3. package/dist/@kdcloudjs/table.min.js +6 -6
  4. package/dist/@kdcloudjs/table.min.js.map +1 -1
  5. package/es/table/base/helpers/TableDOMUtils.js +12 -10
  6. package/es/table/base/styles.d.ts +0 -1
  7. package/es/table/base/styles.js +1 -2
  8. package/es/table/base/table.d.ts +7 -0
  9. package/es/table/base/table.js +43 -1
  10. package/lib/table/base/helpers/TableDOMUtils.js +12 -10
  11. package/lib/table/base/styles.d.ts +0 -1
  12. package/lib/table/base/styles.js +1 -2
  13. package/lib/table/base/table.d.ts +7 -0
  14. package/lib/table/base/table.js +42 -0
  15. package/package.json +1 -1
package/es/table/base/helpers/TableDOMUtils.js CHANGED
@@ -69,31 +69,33 @@ export var TableDOMHelper = /*#__PURE__*/function () {
69
69
  }, {
70
70
  key: "getTableRows",
71
71
  value: function getTableRows() {
72
- var htmlTable = this.getTableBodyHtmlTable();
73
- return htmlTable.querySelectorAll("tbody > .".concat(Classes.tableRow));
72
+ var _context2;
73
+
74
+ var tbody = this.artTable.querySelector(_concatInstanceProperty(_context2 = ".".concat(Classes.tableBody, " .")).call(_context2, Classes.virtual, " table tbody"));
75
+ return tbody.childNodes;
74
76
  }
75
77
  }, {
76
78
  key: "getTableBodyHtmlTable",
77
79
  value: function getTableBodyHtmlTable() {
78
- var _context2;
80
+ var _context3;
79
81
 
80
- return this.artTable.querySelector(_concatInstanceProperty(_context2 = ".".concat(Classes.tableBody, " .")).call(_context2, Classes.virtual, " table"));
82
+ return this.artTable.querySelector(_concatInstanceProperty(_context3 = ".".concat(Classes.tableBody, " .")).call(_context3, Classes.virtual, " table"));
81
83
  }
82
84
  }, {
83
85
  key: "getLeftLockShadow",
84
86
  value: function getLeftLockShadow() {
85
- var _context3;
87
+ var _context4;
86
88
 
87
- var selector = _concatInstanceProperty(_context3 = ".".concat(Classes.lockShadowMask, " .")).call(_context3, Classes.leftLockShadow);
89
+ var selector = _concatInstanceProperty(_context4 = ".".concat(Classes.lockShadowMask, " .")).call(_context4, Classes.leftLockShadow);
88
90
 
89
91
  return this.artTable.querySelector(selector);
90
92
  }
91
93
  }, {
92
94
  key: "getRightLockShadow",
93
95
  value: function getRightLockShadow() {
94
- var _context4;
96
+ var _context5;
95
97
 
96
- var selector = _concatInstanceProperty(_context4 = ".".concat(Classes.lockShadowMask, " .")).call(_context4, Classes.rightLockShadow);
98
+ var selector = _concatInstanceProperty(_context5 = ".".concat(Classes.lockShadowMask, " .")).call(_context5, Classes.rightLockShadow);
97
99
 
98
100
  return this.artTable.querySelector(selector);
99
101
  }
@@ -105,11 +107,11 @@ export var TableDOMHelper = /*#__PURE__*/function () {
105
107
  }, {
106
108
  key: "getRowTop",
107
109
  value: function getRowTop(rowIndex) {
108
- var _context5, _context6;
110
+ var _context6, _context7;
109
111
 
110
112
  if (rowIndex === 0) return 0;
111
113
 
112
- var selector = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = ".".concat(Classes.tableBody, " .")).call(_context6, Classes.tableRow, "[data-rowindex=\"")).call(_context5, rowIndex, "\"]");
114
+ var selector = _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = ".".concat(Classes.tableBody, " .")).call(_context7, Classes.tableRow, "[data-rowindex=\"")).call(_context6, rowIndex, "\"]");
113
115
 
114
116
  var row = this.artTable.querySelector(selector);
115
117
  var rowOffsetTop = row && row.offsetTop || 0;
package/es/table/base/styles.d.ts CHANGED
@@ -149,7 +149,6 @@ export declare const defaultCSSVariables: {
149
149
  '---cell-border-vertical': string;
150
150
  '--header-cell-border': string;
151
151
  '--header-cell-border-horizontal': string;
152
- '--header-cell-border-vertical': string;
153
152
  };
154
153
  export declare const variableConst: string;
155
154
  export declare const StyledArtTableWrapper: any;
package/es/table/base/styles.js CHANGED
@@ -117,8 +117,7 @@ export var defaultCSSVariables = {
117
117
  '--cell-border-horizontal': '1px solid #dfe3e8',
118
118
  '---cell-border-vertical': '1px solid #dfe3e8',
119
119
  '--header-cell-border': '1px solid #dfe3e8',
120
- '--header-cell-border-horizontal': '1px solid #dfe3e8',
121
- '--header-cell-border-vertical': '1px solid #dfe3e8'
120
+ '--header-cell-border-horizontal': '1px solid #dfe3e8'
122
121
  };
123
122
  export var variableConst = getCssVariableText(defaultCSSVariables);
124
123
  export var StyledArtTableWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n :root {\n ", "\n }\n ", "\n\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n user-select:none;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n \n\n &.sticky-header .", " {\n position: sticky;\n top: 0;\n z-index: ", ";\n }\n\n &.sticky-footer .", " {\n position: sticky;\n bottom: 0;\n z-index: ", ";\n }\n\n table {\n width: 0;\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0;\n display: table;\n margin: 0;\n padding: 0;\n flex-shrink: 0;\n flex-grow: 0;\n position:relative;\n }\n\n // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n tr:not(.no-hover):hover > td {\n background: var(--hover-bgcolor);\n }\n // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n tr:not(.no-highlight).highlight > td {\n background: var(--highlight-bgcolor);\n }\n\n th {\n font-weight: normal;\n text-align: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right:none\n }\n\n th.", " {\n border-right: none;\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region IE\u517C\u5BB9\n &.ie-polyfill-wrapper {\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 0;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n background: var(--bgcolor);\n }\n\n .", " {\n // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n height: 1px;\n visibility: hidden;\n }\n //#endregion\n\n //#region \u52A0\u8F7D\u6837\u5F0F\n .", " {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n\n .", " {\n filter: none;\n width: 100%;\n height: 100%;\n overflow: auto;\n display: flex;\n position: relative;\n flex-direction: column;\n }\n\n .", " {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .", " {\n position: sticky;\n z-index: ", ";\n transform: translateY(-50%);\n }\n }\n //#endregion\n \n //#region \u8868\u683C\u8FC7\u6EE4\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u6392\u5E8F\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n visibility: hidden;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder);
package/es/table/base/table.d.ts CHANGED
@@ -80,6 +80,12 @@ export interface BaseTableProps {
80
80
  [key: string]: any;
81
81
  };
82
82
  enableCSSVariables?: boolean;
83
+ scrollLoad?: {
84
+ /** 表格滚动加载回调 */
85
+ callback(startIndex: number): void;
86
+ /** 每个数据块的数据条数 */
87
+ blockSize?: number;
88
+ };
83
89
  }
84
90
  export interface BaseTableState {
85
91
  /** 是否要展示自定义滚动条(stickyScroll) */
@@ -127,6 +133,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
127
133
  private hasScrollY;
128
134
  private resizeObserver?;
129
135
  private resizeSubject;
136
+ private offsetY;
130
137
  /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
131
138
  getDoms(): TableDOMHelper;
132
139
  constructor(props: Readonly<BaseTableProps>);
package/es/table/base/table.js CHANGED
@@ -27,7 +27,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_R
27
27
 
28
28
  import cx from 'classnames';
29
29
  import React from 'react';
30
- import { BehaviorSubject, combineLatest, noop, Subscription, Subject } from 'rxjs';
30
+ import { BehaviorSubject, combineLatest, noop, Subscription, Subject, from } from 'rxjs';
31
31
  import * as op from 'rxjs/operators';
32
32
  import { calculateRenderInfo } from './calculations';
33
33
  import { EmptyHtmlTable } from './empty';
@@ -93,6 +93,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
93
93
  _this.rootSubscription = new Subscription();
94
94
  _this.hasScrollY = false;
95
95
  _this.resizeSubject = new Subject();
96
+ _this.offsetY = 0;
96
97
 
97
98
  _this.getRowNodeListByEvent = function (e) {
98
99
  var nodeList = null;
@@ -662,6 +663,47 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
662
663
  })).subscribe(function (sizeAndOffset) {
663
664
  _this2.setState(sizeAndOffset);
664
665
  }));
666
+ this.rootSubscription.add(richVisibleRects$.pipe(op.map(function (_ref7) {
667
+ var clipRect = _ref7.clipRect,
668
+ offsetY = _ref7.offsetY;
669
+ return {
670
+ maxRenderHeight: clipRect.bottom - clipRect.top,
671
+ maxRenderWidth: clipRect.right - clipRect.left,
672
+ offsetY: offsetY
673
+ };
674
+ }), op.distinctUntilChanged(function (x, y) {
675
+ return x.offsetY - y.offsetY === 0;
676
+ }), // 计算得到当前行索引对应的数据块，blocks改成数组的形式，兼容快速拖动可视区域出现两个数据块的情况
677
+ op.map(function (sizeAndOffset) {
678
+ var _a;
679
+
680
+ var offsetY = sizeAndOffset.offsetY,
681
+ maxRenderHeight = sizeAndOffset.maxRenderHeight;
682
+ var scrollDirection = offsetY - _this2.offsetY >= 0 ? 'down' : 'up';
683
+ _this2.offsetY = offsetY;
684
+ var rowCount = _this2.props.dataSource.length;
685
+
686
+ var vertical = _this2.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
687
+
688
+ var topIndex = vertical.topIndex,
689
+ bottomIndex = vertical.bottomIndex;
690
+ var blockSize = ((_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.blockSize) || 200;
691
+ var topBlockStartIndex = Math.floor(Math.max(topIndex - 1, 0) / blockSize) * blockSize;
692
+ var bottomBlockStartIndex = Math.floor((bottomIndex + 1) / blockSize) * blockSize;
693
+ return scrollDirection === 'down' ? [topBlockStartIndex, bottomBlockStartIndex] : [bottomBlockStartIndex, topBlockStartIndex];
694
+ }), op.distinctUntilChanged(function (x, y) {
695
+ return x[0] === y[0] && x[1] === y[1];
696
+ }), op.switchMap(function (startIndexs) {
697
+ var event$ = from(startIndexs);
698
+ return event$.pipe(op.map(function (startIndex) {
699
+ return startIndex;
700
+ }));
701
+ }), // 过滤掉重复掉值
702
+ op.distinctUntilChanged()).subscribe(function (startIndex) {
703
+ var _a;
704
+
705
+ (_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.callback(startIndex);
706
+ }));
665
707
  }
666
708
  }, {
667
709
  key: "componentWillUnmount",
package/lib/table/base/helpers/TableDOMUtils.js CHANGED
@@ -79,30 +79,32 @@ var TableDOMHelper = /*#__PURE__*/function () {
79
79
  }, {
80
80
  key: "getTableRows",
81
81
  value: function getTableRows() {
82
- var htmlTable = this.getTableBodyHtmlTable();
83
- return htmlTable.querySelectorAll("tbody > .".concat(_styles.Classes.tableRow));
82
+ var _context2;
83
+
84
+ var tbody = this.artTable.querySelector((0, _concat.default)(_context2 = ".".concat(_styles.Classes.tableBody, " .")).call(_context2, _styles.Classes.virtual, " table tbody"));
85
+ return tbody.childNodes;
84
86
  }
85
87
  }, {
86
88
  key: "getTableBodyHtmlTable",
87
89
  value: function getTableBodyHtmlTable() {
88
- var _context2;
90
+ var _context3;
89
91
 
90
- return this.artTable.querySelector((0, _concat.default)(_context2 = ".".concat(_styles.Classes.tableBody, " .")).call(_context2, _styles.Classes.virtual, " table"));
92
+ return this.artTable.querySelector((0, _concat.default)(_context3 = ".".concat(_styles.Classes.tableBody, " .")).call(_context3, _styles.Classes.virtual, " table"));
91
93
  }
92
94
  }, {
93
95
  key: "getLeftLockShadow",
94
96
  value: function getLeftLockShadow() {
95
- var _context3;
97
+ var _context4;
96
98
 
97
- var selector = (0, _concat.default)(_context3 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context3, _styles.Classes.leftLockShadow);
99
+ var selector = (0, _concat.default)(_context4 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context4, _styles.Classes.leftLockShadow);
98
100
  return this.artTable.querySelector(selector);
99
101
  }
100
102
  }, {
101
103
  key: "getRightLockShadow",
102
104
  value: function getRightLockShadow() {
103
- var _context4;
105
+ var _context5;
104
106
 
105
- var selector = (0, _concat.default)(_context4 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context4, _styles.Classes.rightLockShadow);
107
+ var selector = (0, _concat.default)(_context5 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context5, _styles.Classes.rightLockShadow);
106
108
  return this.artTable.querySelector(selector);
107
109
  }
108
110
  }, {
@@ -113,10 +115,10 @@ var TableDOMHelper = /*#__PURE__*/function () {
113
115
  }, {
114
116
  key: "getRowTop",
115
117
  value: function getRowTop(rowIndex) {
116
- var _context5, _context6;
118
+ var _context6, _context7;
117
119
 
118
120
  if (rowIndex === 0) return 0;
119
- var selector = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = ".".concat(_styles.Classes.tableBody, " .")).call(_context6, _styles.Classes.tableRow, "[data-rowindex=\"")).call(_context5, rowIndex, "\"]");
121
+ var selector = (0, _concat.default)(_context6 = (0, _concat.default)(_context7 = ".".concat(_styles.Classes.tableBody, " .")).call(_context7, _styles.Classes.tableRow, "[data-rowindex=\"")).call(_context6, rowIndex, "\"]");
120
122
  var row = this.artTable.querySelector(selector);
121
123
  var rowOffsetTop = row && row.offsetTop || 0;
122
124
  var tableOffsetTop = this.tableElement.offsetTop || 0;
package/lib/table/base/styles.d.ts CHANGED
@@ -149,7 +149,6 @@ export declare const defaultCSSVariables: {
149
149
  '---cell-border-vertical': string;
150
150
  '--header-cell-border': string;
151
151
  '--header-cell-border-horizontal': string;
152
- '--header-cell-border-vertical': string;
153
152
  };
154
153
  export declare const variableConst: string;
155
154
  export declare const StyledArtTableWrapper: any;
package/lib/table/base/styles.js CHANGED
@@ -142,8 +142,7 @@ var defaultCSSVariables = {
142
142
  '--cell-border-horizontal': '1px solid #dfe3e8',
143
143
  '---cell-border-vertical': '1px solid #dfe3e8',
144
144
  '--header-cell-border': '1px solid #dfe3e8',
145
- '--header-cell-border-horizontal': '1px solid #dfe3e8',
146
- '--header-cell-border-vertical': '1px solid #dfe3e8'
145
+ '--header-cell-border-horizontal': '1px solid #dfe3e8'
147
146
  };
148
147
  exports.defaultCSSVariables = defaultCSSVariables;
149
148
  var variableConst = getCssVariableText(defaultCSSVariables);
package/lib/table/base/table.d.ts CHANGED
@@ -80,6 +80,12 @@ export interface BaseTableProps {
80
80
  [key: string]: any;
81
81
  };
82
82
  enableCSSVariables?: boolean;
83
+ scrollLoad?: {
84
+ /** 表格滚动加载回调 */
85
+ callback(startIndex: number): void;
86
+ /** 每个数据块的数据条数 */
87
+ blockSize?: number;
88
+ };
83
89
  }
84
90
  export interface BaseTableState {
85
91
  /** 是否要展示自定义滚动条(stickyScroll) */
@@ -127,6 +133,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
127
133
  private hasScrollY;
128
134
  private resizeObserver?;
129
135
  private resizeSubject;
136
+ private offsetY;
130
137
  /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
131
138
  getDoms(): TableDOMHelper;
132
139
  constructor(props: Readonly<BaseTableProps>);
package/lib/table/base/table.js CHANGED
@@ -143,6 +143,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
143
143
  _this.rootSubscription = new _rxjs.Subscription();
144
144
  _this.hasScrollY = false;
145
145
  _this.resizeSubject = new _rxjs.Subject();
146
+ _this.offsetY = 0;
146
147
 
147
148
  _this.getRowNodeListByEvent = function (e) {
148
149
  var nodeList = null;
@@ -709,6 +710,47 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
709
710
  })).subscribe(function (sizeAndOffset) {
710
711
  _this2.setState(sizeAndOffset);
711
712
  }));
713
+ this.rootSubscription.add(richVisibleRects$.pipe(op.map(function (_ref7) {
714
+ var clipRect = _ref7.clipRect,
715
+ offsetY = _ref7.offsetY;
716
+ return {
717
+ maxRenderHeight: clipRect.bottom - clipRect.top,
718
+ maxRenderWidth: clipRect.right - clipRect.left,
719
+ offsetY: offsetY
720
+ };
721
+ }), op.distinctUntilChanged(function (x, y) {
722
+ return x.offsetY - y.offsetY === 0;
723
+ }), // 计算得到当前行索引对应的数据块，blocks改成数组的形式，兼容快速拖动可视区域出现两个数据块的情况
724
+ op.map(function (sizeAndOffset) {
725
+ var _a;
726
+
727
+ var offsetY = sizeAndOffset.offsetY,
728
+ maxRenderHeight = sizeAndOffset.maxRenderHeight;
729
+ var scrollDirection = offsetY - _this2.offsetY >= 0 ? 'down' : 'up';
730
+ _this2.offsetY = offsetY;
731
+ var rowCount = _this2.props.dataSource.length;
732
+
733
+ var vertical = _this2.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
734
+
735
+ var topIndex = vertical.topIndex,
736
+ bottomIndex = vertical.bottomIndex;
737
+ var blockSize = ((_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.blockSize) || 200;
738
+ var topBlockStartIndex = Math.floor(Math.max(topIndex - 1, 0) / blockSize) * blockSize;
739
+ var bottomBlockStartIndex = Math.floor((bottomIndex + 1) / blockSize) * blockSize;
740
+ return scrollDirection === 'down' ? [topBlockStartIndex, bottomBlockStartIndex] : [bottomBlockStartIndex, topBlockStartIndex];
741
+ }), op.distinctUntilChanged(function (x, y) {
742
+ return x[0] === y[0] && x[1] === y[1];
743
+ }), op.switchMap(function (startIndexs) {
744
+ var event$ = (0, _rxjs.from)(startIndexs);
745
+ return event$.pipe(op.map(function (startIndex) {
746
+ return startIndex;
747
+ }));
748
+ }), // 过滤掉重复掉值
749
+ op.distinctUntilChanged()).subscribe(function (startIndex) {
750
+ var _a;
751
+
752
+ (_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.callback(startIndex);
753
+ }));
712
754
  }
713
755
  }, {
714
756
  key: "componentWillUnmount",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kdcloudjs/table",
3
- "version": "1.1.2-canary.1",
3
+ "version": "1.1.2-canary.2",
4
4
  "description": "金蝶 react table 组件",
5
5
  "title": "table",
6
6
  "keywords": [