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

package/dist/@kdcloudjs/table.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/table v1.1.1
+ *   @kdcloudjs/table v1.1.2
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.

package/dist/@kdcloudjs/table.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/table v1.1.1
+ *   @kdcloudjs/table v1.1.2
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -1955,8 +1955,8 @@ var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getTableRows",
     value: function getTableRows() {
-      var htmlTable = this.getTableBodyHtmlTable();
-      return htmlTable.querySelectorAll("tbody > .".concat(_styles__WEBPACK_IMPORTED_MODULE_4__["Classes"].tableRow));
+      var tbody = this.artTable.querySelector(".".concat(_styles__WEBPACK_IMPORTED_MODULE_4__["Classes"].tableBody, " .").concat(_styles__WEBPACK_IMPORTED_MODULE_4__["Classes"].virtual, " table tbody"));
+      return tbody.childNodes;
     }
   }, {
     key: "getTableBodyHtmlTable",
@@ -3311,8 +3311,7 @@ var defaultCSSVariables = {
   '--cell-border-horizontal': '1px solid #dfe3e8',
   '---cell-border-vertical': '1px solid #dfe3e8',
   '--header-cell-border': '1px solid #dfe3e8',
-  '--header-cell-border-horizontal': '1px solid #dfe3e8',
-  '--header-cell-border-vertical': '1px solid #dfe3e8'
+  '--header-cell-border-horizontal': '1px solid #dfe3e8'
 };
 var variableConst = getCssVariableText(defaultCSSVariables);
 var StyledArtTableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject2 || (_templateObject2 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\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);
@@ -3528,6 +3527,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
 
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_17___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_13___default()(_this), "resizeSubject", new rxjs__WEBPACK_IMPORTED_MODULE_28__["Subject"]());
 
+    _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_17___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_13___default()(_this), "offsetY", 0);
+
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_17___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_13___default()(_this), "getRowNodeListByEvent", function (e) {
       var nodeList = null;
       var rowIndex = e.currentTarget.dataset.rowindex;
@@ -4090,11 +4091,57 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           offsetY: offsetY
         };
       }), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["distinctUntilChanged"](function (x, y) {
-        // 因为 overscan 的存在，滚动较小的距离时不需要触发组件重渲染
+        // 如果表格区域被隐藏， 不需要触发组件重渲染
+        if (y.maxRenderHeight === 0 && y.maxRenderWidth === 0) {
+          return true;
+        } // 因为 overscan 的存在，滚动较小的距离时不需要触发组件重渲染
+
+
         return Math.abs(x.maxRenderWidth - y.maxRenderWidth) < _utils__WEBPACK_IMPORTED_MODULE_39__["OVERSCAN_SIZE"] / 2 && Math.abs(x.maxRenderHeight - y.maxRenderHeight) < _utils__WEBPACK_IMPORTED_MODULE_39__["OVERSCAN_SIZE"] / 2 && Math.abs(x.offsetY - y.offsetY) < _utils__WEBPACK_IMPORTED_MODULE_39__["OVERSCAN_SIZE"] / 2;
       })).subscribe(function (sizeAndOffset) {
         _this2.setState(sizeAndOffset);
       }));
+      this.rootSubscription.add(richVisibleRects$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["map"](function (_ref7) {
+        var clipRect = _ref7.clipRect,
+            offsetY = _ref7.offsetY;
+        return {
+          maxRenderHeight: clipRect.bottom - clipRect.top,
+          maxRenderWidth: clipRect.right - clipRect.left,
+          offsetY: offsetY
+        };
+      }), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["distinctUntilChanged"](function (x, y) {
+        return x.offsetY - y.offsetY === 0;
+      }), // 计算得到当前行索引对应的数据块，blocks改成数组的形式，兼容快速拖动可视区域出现两个数据块的情况
+      rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["map"](function (sizeAndOffset) {
+        var _this2$props$scrollLo;
+
+        var offsetY = sizeAndOffset.offsetY,
+            maxRenderHeight = sizeAndOffset.maxRenderHeight;
+        var scrollDirection = offsetY - _this2.offsetY >= 0 ? 'down' : 'up';
+        _this2.offsetY = offsetY;
+        var rowCount = _this2.props.dataSource.length;
+
+        var vertical = _this2.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
+
+        var topIndex = vertical.topIndex,
+            bottomIndex = vertical.bottomIndex;
+        var blockSize = ((_this2$props$scrollLo = _this2.props.scrollLoad) === null || _this2$props$scrollLo === void 0 ? void 0 : _this2$props$scrollLo.blockSize) || 200;
+        var topBlockStartIndex = Math.floor(Math.max(topIndex - 1, 0) / blockSize) * blockSize;
+        var bottomBlockStartIndex = Math.floor((bottomIndex + 1) / blockSize) * blockSize;
+        return scrollDirection === 'down' ? [topBlockStartIndex, bottomBlockStartIndex] : [bottomBlockStartIndex, topBlockStartIndex];
+      }), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["distinctUntilChanged"](function (x, y) {
+        return x[0] === y[0] && x[1] === y[1];
+      }), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["switchMap"](function (startIndexs) {
+        var event$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_28__["from"])(startIndexs);
+        return event$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["map"](function (startIndex) {
+          return startIndex;
+        }));
+      }), // 过滤掉重复掉值
+      rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["distinctUntilChanged"]()).subscribe(function (startIndex) {
+        var _this2$props$scrollLo2;
+
+        (_this2$props$scrollLo2 = _this2.props.scrollLoad) === null || _this2$props$scrollLo2 === void 0 ? void 0 : _this2$props$scrollLo2.callback(startIndex);
+      }));
     }
   }, {
     key: "componentWillUnmount",
@@ -4142,10 +4189,12 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
 
           if (size === 0) {
             zeroHeightRowCount += 1;
+          } else {
+            // 渲染出来的行高度为0，说明是display=none情况，行高不存在该种异常情况，不保存当前的高度
+            this.rowHeightManager.updateRow(_rowIndex, offset, size);
           }
 
           maxTrBottom = Math.max(maxTrBottom, offset + size);
-          this.rowHeightManager.updateRow(_rowIndex, offset, size);
         } // 当 estimatedRowHeight 过大时，可能出现「渲染行数过少，无法覆盖可视范围」的情况
         // 出现这种情况时，我们判断「下一次渲染能够渲染更多行」是否满足，满足的话就直接调用 forceUpdate
         // zeroHeightRowCount === 0 用于确保当前没有 display=none 的情况