@kdcloudjs/table 1.0.1 → 1.0.2

package/lib/table/base/table.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
 var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
 
 var _sliceInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
@@ -10,9 +12,9 @@ var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
 
 var _getIteratorMethod = require("@babel/runtime-corejs3/core-js/get-iterator-method");
 
-var _getIterator = require("@babel/runtime-corejs3/core-js/get-iterator");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
-var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
@@ -21,10 +23,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BaseTable = void 0;
 
-var _flat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/flat"));
-
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
+var _flat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/flat"));
+
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -57,12 +59,12 @@ var _empty = require("./empty");
 
 var _header = _interopRequireDefault(require("./header"));
 
+var _getRichVisibleRectsStream = require("./helpers/getRichVisibleRectsStream");
+
 var _rowHeightManager = require("./helpers/rowHeightManager");
 
 var _TableDOMUtils = require("./helpers/TableDOMUtils");
 
-var _visiblePart = require("./helpers/visible-part");
-
 var _htmlTable = require("./html-table");
 
 var _loading = _interopRequireDefault(require("./loading"));
@@ -75,7 +77,13 @@ var _cssVarsPonyfill = _interopRequireDefault(require("css-vars-ponyfill"));
 
 var _utils2 = require("../utils");
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof _Symbol === "undefined" || _getIteratorMethod(o) == null) { 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(_e) { throw _e; }, 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 = _getIterator(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+var _renderTemplates = _interopRequireDefault(require("./renderTemplates"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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(_e) { throw _e; }, 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(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { var _context2; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty2(_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); }
 
@@ -99,7 +107,6 @@ var cssPolifill = function cssPolifill(_ref) {
     return;
   }
 
-  var t0 = performance.now();
   (0, _cssVarsPonyfill.default)({
     // exclude: 'link[href*="semantic-ui"]',
     // onlyLegacy: false,
@@ -107,13 +114,7 @@ var cssPolifill = function cssPolifill(_ref) {
     include: 'style[data-styled]',
     variables: (0, _extends2.default)({}, _styles.defaultCSSVariables, variables),
     watch: true,
-    silent: true,
-    onComplete: function onComplete() {
-      var t1 = performance.now();
-      var time = ((t1 - t0) / 1000).toFixed(2);
-
-      _utils2.console.log("css-vars-ponyfill completed in ".concat(time, " seconds"));
-    }
+    silent: true
   });
 };
 
@@ -142,6 +143,130 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     _this.rootSubscription = new _rxjs.Subscription();
     _this.hasScrollY = false;
     _this.resizeSubject = new _rxjs.Subject();
+
+    _this.getRowNodeListByEvent = function (e) {
+      var nodeList = null;
+      var rowIndex = e.currentTarget.dataset.rowindex;
+
+      if (rowIndex !== undefined) {
+        var _this$domHelper = _this.domHelper,
+            tableBody = _this$domHelper.tableBody,
+            tableFooter = _this$domHelper.tableFooter;
+        var targetParent = tableBody.contains(e.currentTarget) ? tableBody : tableFooter;
+        nodeList = targetParent.querySelectorAll("tr[data-rowindex=\"".concat(rowIndex, "\"]"));
+      }
+
+      return nodeList;
+    };
+
+    _this.handleRowMouseEnter = function (e) {
+      var nodeList = _this.getRowNodeListByEvent(e);
+
+      nodeList && nodeList.forEach(function (node) {
+        node.classList.add('row-hover');
+      });
+    };
+
+    _this.handleRowMouseLeave = function (e) {
+      var nodeList = _this.getRowNodeListByEvent(e);
+
+      nodeList && nodeList.forEach(function (node) {
+        node.classList.remove('row-hover');
+      });
+    };
+
+    _this.renderTableBody = function (info) {
+      // console.log('render body')
+      var _this$props = _this.props,
+          dataSource = _this$props.dataSource,
+          getRowProps = _this$props.getRowProps,
+          primaryKey = _this$props.primaryKey,
+          isLoading = _this$props.isLoading,
+          emptyCellHeight = _this$props.emptyCellHeight,
+          footerDataSource = _this$props.footerDataSource;
+      var tableBodyClassName = (0, _classnames.default)(_styles.Classes.tableBody, _styles.Classes.horizontalScrollContainer); // 低版本Edge浏览器下也会出现双滚动条，这里设置overflow: 'hidden'，先去掉edge的方向键控制滚动条的功能
+
+      var virtualStyle = _utils2.browserType.isIE || _utils2.browserType.isEdge ? {
+        overflow: 'hidden'
+      } : {};
+
+      if (dataSource.length === 0) {
+        var _this$props2 = _this.props,
+            components = _this$props2.components,
+            emptyContent = _this$props2.emptyContent;
+        var EmptyContent = components.EmptyContent;
+
+        if (EmptyContent == null && emptyContent != null) {
+          warnPropsDotEmptyContentIsDeprecated();
+
+          EmptyContent = function EmptyContent() {
+            return emptyContent;
+          };
+        }
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)(tableBodyClassName, 'empty')
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: _styles.Classes.virtual,
+          style: virtualStyle
+        }, /*#__PURE__*/_react.default.createElement(_empty.EmptyHtmlTable, {
+          descriptors: info.visible,
+          isLoading: isLoading,
+          EmptyContent: EmptyContent,
+          emptyCellHeight: emptyCellHeight
+        })));
+      }
+
+      var _info$verticalRenderR = info.verticalRenderRange,
+          topIndex = _info$verticalRenderR.topIndex,
+          bottomBlank = _info$verticalRenderR.bottomBlank,
+          topBlank = _info$verticalRenderR.topBlank,
+          bottomIndex = _info$verticalRenderR.bottomIndex;
+      var renderBody = (0, _renderTemplates.default)('body');
+
+      if (typeof renderBody === 'function') {
+        return renderBody(info, _this.props, {
+          rowProps: {
+            onMouseEnter: _this.handleRowMouseEnter,
+            onMouseLeave: _this.handleRowMouseLeave
+          },
+          hasScrollY: _this.hasScrollY
+        });
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: tableBodyClassName
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _styles.Classes.virtual,
+        style: virtualStyle
+      }, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
+        key: "top-blank",
+        className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'top'),
+        style: {
+          height: topBlank
+        }
+      }), /*#__PURE__*/_react.default.createElement(_htmlTable.HtmlTable, {
+        tbodyHtmlTag: "tbody",
+        getRowProps: getRowProps,
+        primaryKey: primaryKey,
+        data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex),
+        hasScrollY: _this.hasScrollY,
+        horizontalRenderInfo: info,
+        verticalRenderInfo: {
+          first: 0,
+          offset: topIndex,
+          limit: bottomIndex,
+          last: dataSource.length - 1
+        }
+      }), bottomBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
+        key: "bottom-blank",
+        className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'bottom'),
+        style: {
+          height: bottomBlank
+        }
+      })));
+    };
+
     _this.state = {
       hasScroll: true,
       hasScrollY: true,
@@ -173,10 +298,10 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     value: function updateStickyScroll() {
       var _a, _b;
 
-      var _this$domHelper = this.domHelper,
-          stickyScroll = _this$domHelper.stickyScroll,
-          artTable = _this$domHelper.artTable,
-          stickyScrollItem = _this$domHelper.stickyScrollItem;
+      var _this$domHelper2 = this.domHelper,
+          stickyScroll = _this$domHelper2.stickyScroll,
+          artTable = _this$domHelper2.artTable,
+          stickyScrollItem = _this$domHelper2.stickyScrollItem;
       var _lastHasScrollY = this.hasScrollY;
 
       if (!artTable) {
@@ -207,7 +332,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      if (this.domHelper.tableElement.offsetHeight > this.domHelper.tableBody.offsetHeight) {
+      if (this.domHelper.virtual.offsetHeight > this.domHelper.tableBody.offsetHeight) {
         //   if (!this.state.hasScroll) {
         //     this.setState({
         //       hasScrollY: true
@@ -215,7 +340,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         //   }
         this.hasScrollY = true;
       } else {
-        stickyScroll.style.marginRight = "".concat(stickyScrollHeight, "px"); //   this.setState({
+        stickyScroll.style.paddingRight = "".concat(stickyScrollHeight, "px"); //   this.setState({
         //     hasScrollY: false
         //   })
 
@@ -232,9 +357,14 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderTableHeader",
     value: function renderTableHeader(info) {
-      var _this$props = this.props,
-          stickyTop = _this$props.stickyTop,
-          hasHeader = _this$props.hasHeader; // console.log('render header')
+      var _this$props3 = this.props,
+          stickyTop = _this$props3.stickyTop,
+          hasHeader = _this$props3.hasHeader;
+      var renderHeader = (0, _renderTemplates.default)('header');
+
+      if (typeof renderHeader === 'function') {
+        return renderHeader(info, this.props);
+      }
 
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(_styles.Classes.tableHeader, 'no-scrollbar'),
@@ -244,6 +374,11 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react.default.createElement(_header.default, {
         info: info
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: _styles.Classes.verticalScrollPlaceholder,
+        style: this.hasScrollY ? {
+          width: (0, _utils.getScrollbarSize)().width
+        } : undefined
       }));
     }
   }, {
@@ -308,80 +443,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         return (0, _rowHeightManager.getFullRenderRange)(rowCount);
       }
     }
-  }, {
-    key: "renderTableBody",
-    value: function renderTableBody(info) {
-      // console.log('render body')
-      var _this$props2 = this.props,
-          dataSource = _this$props2.dataSource,
-          getRowProps = _this$props2.getRowProps,
-          primaryKey = _this$props2.primaryKey,
-          isLoading = _this$props2.isLoading,
-          emptyCellHeight = _this$props2.emptyCellHeight,
-          footerDataSource = _this$props2.footerDataSource;
-      var tableBodyClassName = (0, _classnames.default)(_styles.Classes.tableBody, _styles.Classes.horizontalScrollContainer);
-
-      if (dataSource.length === 0) {
-        var _this$props3 = this.props,
-            components = _this$props3.components,
-            emptyContent = _this$props3.emptyContent;
-        var EmptyContent = components.EmptyContent;
-
-        if (EmptyContent == null && emptyContent != null) {
-          warnPropsDotEmptyContentIsDeprecated();
-
-          EmptyContent = function EmptyContent() {
-            return emptyContent;
-          };
-        }
-
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _classnames.default)(tableBodyClassName, 'empty')
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: _styles.Classes.virtual
-        }, /*#__PURE__*/_react.default.createElement(_empty.EmptyHtmlTable, {
-          descriptors: info.visible,
-          isLoading: isLoading,
-          EmptyContent: EmptyContent,
-          emptyCellHeight: emptyCellHeight
-        })));
-      }
-
-      var _info$verticalRenderR = info.verticalRenderRange,
-          topIndex = _info$verticalRenderR.topIndex,
-          bottomBlank = _info$verticalRenderR.bottomBlank,
-          topBlank = _info$verticalRenderR.topBlank,
-          bottomIndex = _info$verticalRenderR.bottomIndex;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: tableBodyClassName
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _styles.Classes.virtual
-      }, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
-        key: "top-blank",
-        className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'top'),
-        style: {
-          height: topBlank
-        }
-      }), /*#__PURE__*/_react.default.createElement(_htmlTable.HtmlTable, {
-        tbodyHtmlTag: "tbody",
-        getRowProps: getRowProps,
-        primaryKey: primaryKey,
-        data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex),
-        horizontalRenderInfo: info,
-        verticalRenderInfo: {
-          first: 0,
-          offset: topIndex,
-          limit: bottomIndex,
-          last: dataSource.length - 1
-        }
-      }), bottomBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
-        key: "bottom-blank",
-        className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'bottom'),
-        style: {
-          height: bottomBlank
-        }
-      })));
-    }
   }, {
     key: "renderTableFooter",
     value: function renderTableFooter(info) {
@@ -392,6 +453,17 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           getRowProps = _this$props4.getRowProps,
           primaryKey = _this$props4.primaryKey,
           stickyBottom = _this$props4.stickyBottom;
+      var renderFooter = (0, _renderTemplates.default)('footer');
+
+      if (typeof renderFooter === 'function') {
+        return renderFooter(info, this.props, {
+          rowProps: {
+            onMouseEnter: this.handleRowMouseEnter,
+            onMouseLeave: this.handleRowMouseLeave
+          }
+        });
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(_styles.Classes.tableFooter, _styles.Classes.horizontalScrollContainer),
         style: {
@@ -409,6 +481,12 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           last: footerDataSource.length - 1,
           limit: Infinity
         }
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: _styles.Classes.verticalScrollPlaceholder,
+        style: this.hasScrollY ? {
+          width: (0, _utils.getScrollbarSize)().width,
+          visibility: 'initial'
+        } : undefined
       }));
     }
   }, {
@@ -477,7 +555,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         'has-header': hasHeader,
         'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
         'has-footer': footerDataSource.length > 0,
-        'sticky-footer': isStickyFooter
+        'sticky-footer': isStickyFooter,
+        'ie-polyfill-wrapper': _utils2.browserType.isIE
       }, className);
       var artTableWrapperProps = (0, _defineProperty2.default)({
         className: artTableWrapperClassName,
@@ -494,7 +573,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _a, _b; // console.log('did mount start')
+      var _a, _b, _c, _d; // console.log('did mount start')
       // console.log('update dom helper start')
 
 
@@ -512,6 +591,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         enableCSSVariables: enableCSSVariables
       });
       (_b = (_a = this.props).setTableWidth) === null || _b === void 0 ? void 0 : _b.call(_a, this.domHelper.tableBody.clientWidth);
+      (_d = (_c = this.props).setTableDomHelper) === null || _d === void 0 ? void 0 : _d.call(_c, this.domHelper);
     }
   }, {
     key: "componentDidUpdate",
@@ -544,7 +624,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         var currentHasFooter = this.props.footerDataSource.length > 0;
 
         if (!prevHasFooter && currentHasFooter) {
-          this.domHelper.tableFooter.scrollLeft = this.domHelper.tableBody.scrollLeft;
+          (0, _utils.getTableScrollFooterDOM)(this.domHelper).scrollLeft = this.domHelper.tableBody.scrollLeft;
         }
       }
     }
@@ -553,11 +633,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     value: function initSubscriptions() {
       var _this2 = this;
 
-      var _this$domHelper2 = this.domHelper,
-          tableHeader = _this$domHelper2.tableHeader,
-          virtual = _this$domHelper2.virtual,
-          tableFooter = _this$domHelper2.tableFooter,
-          stickyScroll = _this$domHelper2.stickyScroll;
+      var _this$domHelper3 = this.domHelper,
+          virtual = _this$domHelper3.virtual,
+          stickyScroll = _this$domHelper3.stickyScroll;
       this.rootSubscription.add(_utils.throttledWindowResize$.subscribe(function () {
         _this2.updateStickyScroll();
 
@@ -575,36 +653,12 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
 
       this.resizeObserver = (0, _utils.addResizeObserver)(this.domHelper.artTableWrapper, handleTableWrapperResize); // 滚动同步
 
-      this.rootSubscription.add((0, _utils.syncScrollLeft)([tableHeader, virtual, tableFooter, stickyScroll], function (scrollLeft) {
+      this.rootSubscription.add((0, _utils.syncScrollLeft)([(0, _utils.getTableScrollHeaderDOM)(this.domHelper), virtual, (0, _utils.getTableScrollFooterDOM)(this.domHelper), stickyScroll], function (scrollLeft) {
         _this2.syncHorizontalScroll(scrollLeft);
-      })); // 表格所处的 flowRoot / BFC
-
-      var resolvedFlowRoot$ = this.props$.pipe(op.map(function (props) {
-        return props.flowRoot;
-      }), op.switchMap(function (flowRoot) {
-        var wrapper = _this2.domHelper.tableBody;
-
-        if (flowRoot === 'auto') {
-          var computedStyle = getComputedStyle(wrapper);
-          return (0, _rxjs.of)(computedStyle.overflowY !== 'visible' ? wrapper : window);
-        } else if (flowRoot === 'self') {
-          return (0, _rxjs.of)(wrapper);
-        } else {
-          if (typeof flowRoot === 'function') {
-            // 在一些情况下 flowRoot 需要在父组件 didMount 时才会准备好
-            // 故这里使用 animationFrameScheduler 等下一个动画帧
-            return (0, _rxjs.timer)(0, _rxjs.animationFrameScheduler).pipe(op.map(flowRoot));
-          } else {
-            return (0, _rxjs.of)(flowRoot);
-          }
-        }
-      }), op.distinctUntilChanged()); // 表格在 flowRoot 中的可见部分
-
-      var visiblePart$ = resolvedFlowRoot$.pipe(op.switchMap(function (resolvedFlowRoot) {
-        return (0, _visiblePart.getVisiblePartObservable)(_this2.domHelper.virtual, resolvedFlowRoot);
-      })); // 每当可见部分发生变化的时候，调整 loading icon 的未知（如果 loading icon 存在的话）
+      }));
+      var richVisibleRects$ = (0, _getRichVisibleRectsStream.getRichVisibleRectsStream)(this.domHelper.virtual, this.props$.pipe(op.skip(1), op.mapTo('structure-may-change')), this.props.virtualDebugLabel).pipe(op.shareReplay()); // 每当可见部分发生变化的时候，调整 loading icon 的未知（如果 loading icon 存在的话）
 
-      this.rootSubscription.add((0, _rxjs.combineLatest)([visiblePart$.pipe(op.map(function (p) {
+      this.rootSubscription.add((0, _rxjs.combineLatest)([richVisibleRects$.pipe(op.map(function (p) {
         return p.clipRect;
       }), op.distinctUntilChanged(_utils.shallowEqual)), this.props$.pipe(op.startWith(null), op.pairwise(), op.filter(function (_ref2) {
         var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
@@ -622,12 +676,13 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           return;
         }
 
-        var height = clipRect.bottom - clipRect.top;
+        var height = clipRect.bottom - clipRect.top; // fixme 这里的定位在有些特殊情况下可能会出错 see #132
+
         loadingIndicator.style.top = "".concat(height / 2, "px");
         loadingIndicator.style.marginTop = "".concat(height / 2, "px");
       })); // 每当可见部分发生变化的时候，如果开启了虚拟滚动，则重新触发 render
 
-      this.rootSubscription.add(visiblePart$.pipe(op.filter(function () {
+      this.rootSubscription.add(richVisibleRects$.pipe(op.filter(function () {
         var _this2$lastInfo$useVi = _this2.lastInfo.useVirtual,
             horizontal = _this2$lastInfo$useVi.horizontal,
             vertical = _this2$lastInfo$useVi.vertical;
@@ -767,7 +822,6 @@ BaseTable.defaultProps = {
   components: {},
   getTableProps: _rxjs.noop,
   getRowProps: _rxjs.noop,
-  flowRoot: 'auto',
   dataSource: [],
   useOuterBorder: true
 };

package/lib/table/base/utils.d.ts

@@ -1,5 +1,7 @@
+import React from 'react';
 import { Subscription } from 'rxjs';
 import ResizeObserver from 'resize-observer-polyfill';
+import { TableDOMHelper } from './helpers/TableDOMUtils';
 /** styled-components 类库的版本，ali-react-table 同时支持 v3 和 v5 */
 export declare const STYLED_VERSION: string;
 export declare const STYLED_REF_PROP: string;
@@ -29,8 +31,9 @@ export declare function syncScrollLeft(elements: HTMLElement[], callback: (scrol
  * Performs equality by iterating through keys on an object and returning false
  * when any key has values which are not strictly equal between the arguments.
  * Returns true when the values of all keys are strictly equal.
- *
- * 这个函数是从 facebook 某个官方库中复制过来的
  */
-export declare function shallowEqual(objA: any, objB: any): boolean;
+export declare function shallowEqual<T>(objA: T, objB: T): boolean;
+export declare function composeRowPropsGetter(getRowProps: (record: any, rowIndex: number) => React.HTMLAttributes<HTMLTableRowElement>, pendingRowProps?: React.HTMLAttributes<HTMLTableRowElement>): (record: any, rowIndex: number) => React.HTMLAttributes<HTMLTableRowElement>;
+export declare function getTableScrollHeaderDOM(domHelper: TableDOMHelper): HTMLDivElement;
+export declare function getTableScrollFooterDOM(domHelper: TableDOMHelper): HTMLDivElement;
 export {};

package/lib/table/base/utils.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _typeof3 = require("@babel/runtime-corejs3/helpers/typeof");
+
 var _mapInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/map");
 
 var _sliceInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
@@ -10,20 +12,24 @@ var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
 
 var _getIteratorMethod = require("@babel/runtime-corejs3/core-js/get-iterator-method");
 
-var _getIterator = require("@babel/runtime-corejs3/core-js/get-iterator");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
-var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sum = sum;
+exports.addResizeObserver = exports.STYLED_VERSION = exports.STYLED_REF_PROP = exports.OVERSCAN_SIZE = exports.AUTO_VIRTUAL_THRESHOLD = void 0;
+exports.composeRowPropsGetter = composeRowPropsGetter;
 exports.getScrollbarSize = getScrollbarSize;
-exports.syncScrollLeft = syncScrollLeft;
+exports.getTableScrollFooterDOM = getTableScrollFooterDOM;
+exports.getTableScrollHeaderDOM = getTableScrollHeaderDOM;
 exports.shallowEqual = shallowEqual;
-exports.addResizeObserver = exports.throttledWindowResize$ = exports.AUTO_VIRTUAL_THRESHOLD = exports.OVERSCAN_SIZE = exports.STYLED_REF_PROP = exports.STYLED_VERSION = void 0;
+exports.sum = sum;
+exports.syncScrollLeft = syncScrollLeft;
+exports.throttledWindowResize$ = void 0;
 
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
@@ -43,7 +49,15 @@ var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-po
 
 var styledComponents = _interopRequireWildcard(require("styled-components"));
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof _Symbol === "undefined" || _getIteratorMethod(o) == null) { 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(_e) { throw _e; }, 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 = _getIterator(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+var _mergeCellProps = _interopRequireDefault(require("../utils/mergeCellProps"));
+
+var _utils = require("../utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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(_e) { throw _e; }, 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(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { var _context; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context = Object.prototype.toString.call(o)).call(_context, 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); }
 
@@ -69,7 +83,9 @@ function sum(arr) {
 
 
 var throttledWindowResize$ = (0, _rxjs.defer)(function () {
-  return (0, _rxjs.fromEvent)(window, 'resize').pipe((0, _operators.throttleTime)(150, _rxjs.asyncScheduler, {
+  return (0, _rxjs.fromEvent)(window, 'resize', {
+    passive: true
+  }).pipe((0, _operators.throttleTime)(150, _rxjs.asyncScheduler, {
     leading: true,
     trailing: true
   }));
@@ -202,12 +218,12 @@ function syncScrollLeft(elements, callback) {
  * Performs equality by iterating through keys on an object and returning false
  * when any key has values which are not strictly equal between the arguments.
  * Returns true when the values of all keys are strictly equal.
- *
- * 这个函数是从 facebook 某个官方库中复制过来的
  */
 
 
 function shallowEqual(objA, objB) {
+  var hasOwnProperty = Object.prototype.hasOwnProperty;
+
   if ((0, _is.default)(objA, objB)) {
     return true;
   }
@@ -225,10 +241,31 @@ function shallowEqual(objA, objB) {
 
 
   for (var i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !(0, _is.default)(objA[keysA[i]], objB[keysA[i]])) {
+    if (!hasOwnProperty.call(objB, keysA[i]) || !(0, _is.default)(objA[keysA[i]], objB[keysA[i]])) {
       return false;
     }
   }
 
   return true;
+} // todo: 抽出mergeRowProps
+
+
+function composeRowPropsGetter(getRowProps, pendingRowProps) {
+  var keys = (0, _keys.default)(pendingRowProps);
+
+  if (keys.length) {
+    return function (row, rowIndex) {
+      return (0, _mergeCellProps.default)(getRowProps(row, rowIndex), pendingRowProps);
+    };
+  }
+
+  return getRowProps;
+}
+
+function getTableScrollHeaderDOM(domHelper) {
+  return _utils.browserType.isIE ? domHelper.tableHeaderMain : domHelper.tableHeader;
+}
+
+function getTableScrollFooterDOM(domHelper) {
+  return _utils.browserType.isIE ? domHelper.tableFooterMain : domHelper.tableFooter;
 }

package/lib/table/common-views.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ContextMenuStyleWrap = exports.icons = exports.ExpansionCell = exports.InlineFlexCell = void 0;
+exports.icons = exports.InlineFlexCell = exports.ExpansionCell = exports.ContextMenuStyleWrap = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -85,6 +85,6 @@ var icons = {
 };
 exports.icons = icons;
 
-var ContextMenuStyleWrap = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &.", "{\n    border: 1px solid #e9ecf1;\n    border-radius: 2px;\n    background-color: #Fff;\n    box-shadow: 0px 0px 5px 0px rgb(154 154 154 / 50%);\n    cursor: default;\n    font-size: 13px;\n    position:absolute;\n    z-index: 1050;\n    width:120px;\n  }\n\n  .", "{\n    width:100%;\n    display: table;\n  }\n\n  .", " .", "{\n    display: table-row;\n  }\n\n  .", " .", "{\n    background-color: #f5f5f5;\n  }\n\n  .", " .", " .", "{\n    display: table-cell;\n    padding: 5px 8px;\n    color: #666666;\n  }\n\n"])), _styles.MenuClasses.menu, _styles.MenuClasses.menuList, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOptionActive, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionText);
+var ContextMenuStyleWrap = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &.", "{\n    border: 1px solid #e9ecf1;\n    border-radius: 2px;\n    background-color: #Fff;\n    box-shadow: 0px 0px 5px 0px rgb(154 154 154 / 50%);\n    cursor: default;\n    font-size: 13px;\n    position:absolute;\n    z-index: 1050;\n    width:120px;\n  }\n\n  .", "{\n    width:100%;\n    display: table;\n  }\n\n  .", " .", "{\n    display: table-row;\n    color: #666666;\n  }\n\n  .", " .", "{\n    background-color: #f5f5f5;\n  }\n\n  .", " .", " .", "{\n    display: table-cell;\n    padding: 5px 8px;\n  }\n  .", " .", ".", "{\n    opacity: .5;\n  }\n\n"])), _styles.MenuClasses.menu, _styles.MenuClasses.menuList, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOptionActive, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionText, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionDisable);
 
 exports.ContextMenuStyleWrap = ContextMenuStyleWrap;