@kdcloudjs/table 1.0.1 → 1.0.2

package/es/table/base/table.js

@@ -2,7 +2,6 @@ import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/co
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
 import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
-import _getIterator from "@babel/runtime-corejs3/core-js/get-iterator";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
@@ -12,14 +11,14 @@ import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleC
 import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 
-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; } } }; }
+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 = _sliceInstanceProperty(_context2 = Object.prototype.toString.call(o)).call(_context2, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 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; }
 
-import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -28,20 +27,21 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_R
 
 import cx from 'classnames';
 import React from 'react';
-import { animationFrameScheduler, BehaviorSubject, combineLatest, noop, of, Subscription, timer, Subject } from 'rxjs';
+import { BehaviorSubject, combineLatest, noop, Subscription, Subject } from 'rxjs';
 import * as op from 'rxjs/operators';
 import { calculateRenderInfo } from './calculations';
 import { EmptyHtmlTable } from './empty';
 import TableHeader from './header';
+import { getRichVisibleRectsStream } from './helpers/getRichVisibleRectsStream';
 import { getFullRenderRange, makeRowHeightManager } from './helpers/rowHeightManager';
 import { TableDOMHelper } from './helpers/TableDOMUtils';
-import { getVisiblePartObservable } from './helpers/visible-part';
 import { HtmlTable } from './html-table';
 import Loading from './loading';
 import { Classes, LOCK_SHADOW_PADDING, StyledArtTableWrapper, defaultCSSVariables } from './styles';
-import { addResizeObserver, getScrollbarSize, OVERSCAN_SIZE, shallowEqual, STYLED_REF_PROP, sum, syncScrollLeft, throttledWindowResize$ } from './utils';
+import { addResizeObserver, getScrollbarSize, OVERSCAN_SIZE, shallowEqual, STYLED_REF_PROP, sum, syncScrollLeft, throttledWindowResize$, getTableScrollFooterDOM, getTableScrollHeaderDOM } from './utils';
 import cssVars from 'css-vars-ponyfill';
-import { console } from '../utils';
+import { console, browserType } from '../utils';
+import getTableRenderTemplate from './renderTemplates';
 
 var cssPolifill = function cssPolifill(_ref) {
   var variables = _ref.variables,
@@ -57,7 +57,6 @@ var cssPolifill = function cssPolifill(_ref) {
     return;
   }
 
-  var t0 = performance.now();
   cssVars({
     // exclude: 'link[href*="semantic-ui"]',
     // onlyLegacy: false,
@@ -65,12 +64,7 @@ var cssPolifill = function cssPolifill(_ref) {
     include: 'style[data-styled]',
     variables: _extends({}, defaultCSSVariables, variables),
     watch: true,
-    silent: true,
-    onComplete: function onComplete() {
-      var t1 = performance.now();
-      var time = ((t1 - t0) / 1000).toFixed(2);
-      console.log("css-vars-ponyfill completed in ".concat(time, " seconds"));
-    }
+    silent: true
   });
 };
 
@@ -99,6 +93,130 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     _this.rootSubscription = new Subscription();
     _this.hasScrollY = false;
     _this.resizeSubject = new 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 = cx(Classes.tableBody, Classes.horizontalScrollContainer); // 低版本Edge浏览器下也会出现双滚动条，这里设置overflow: 'hidden'，先去掉edge的方向键控制滚动条的功能
+
+      var virtualStyle = browserType.isIE || 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.createElement("div", {
+          className: cx(tableBodyClassName, 'empty')
+        }, /*#__PURE__*/React.createElement("div", {
+          className: Classes.virtual,
+          style: virtualStyle
+        }, /*#__PURE__*/React.createElement(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 = getTableRenderTemplate('body');
+
+      if (typeof renderBody === 'function') {
+        return renderBody(info, _this.props, {
+          rowProps: {
+            onMouseEnter: _this.handleRowMouseEnter,
+            onMouseLeave: _this.handleRowMouseLeave
+          },
+          hasScrollY: _this.hasScrollY
+        });
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: tableBodyClassName
+      }, /*#__PURE__*/React.createElement("div", {
+        className: Classes.virtual,
+        style: virtualStyle
+      }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
+        key: "top-blank",
+        className: cx(Classes.virtualBlank, 'top'),
+        style: {
+          height: topBlank
+        }
+      }), /*#__PURE__*/React.createElement(HtmlTable, {
+        tbodyHtmlTag: "tbody",
+        getRowProps: getRowProps,
+        primaryKey: primaryKey,
+        data: _sliceInstanceProperty(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.createElement("div", {
+        key: "bottom-blank",
+        className: cx(Classes.virtualBlank, 'bottom'),
+        style: {
+          height: bottomBlank
+        }
+      })));
+    };
+
     _this.state = {
       hasScroll: true,
       hasScrollY: true,
@@ -129,10 +247,10 @@ export 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) {
@@ -163,7 +281,7 @@ export 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
@@ -171,7 +289,7 @@ export 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
         //   })
 
@@ -188,9 +306,14 @@ export 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 = getTableRenderTemplate('header');
+
+      if (typeof renderHeader === 'function') {
+        return renderHeader(info, this.props);
+      }
 
       return /*#__PURE__*/React.createElement("div", {
         className: cx(Classes.tableHeader, 'no-scrollbar'),
@@ -200,6 +323,11 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/React.createElement(TableHeader, {
         info: info
+      }), /*#__PURE__*/React.createElement("div", {
+        className: Classes.verticalScrollPlaceholder,
+        style: this.hasScrollY ? {
+          width: getScrollbarSize().width
+        } : undefined
       }));
     }
   }, {
@@ -266,80 +394,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         return 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 = cx(Classes.tableBody, 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.createElement("div", {
-          className: cx(tableBodyClassName, 'empty')
-        }, /*#__PURE__*/React.createElement("div", {
-          className: Classes.virtual
-        }, /*#__PURE__*/React.createElement(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.createElement("div", {
-        className: tableBodyClassName
-      }, /*#__PURE__*/React.createElement("div", {
-        className: Classes.virtual
-      }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
-        key: "top-blank",
-        className: cx(Classes.virtualBlank, 'top'),
-        style: {
-          height: topBlank
-        }
-      }), /*#__PURE__*/React.createElement(HtmlTable, {
-        tbodyHtmlTag: "tbody",
-        getRowProps: getRowProps,
-        primaryKey: primaryKey,
-        data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex),
-        horizontalRenderInfo: info,
-        verticalRenderInfo: {
-          first: 0,
-          offset: topIndex,
-          limit: bottomIndex,
-          last: dataSource.length - 1
-        }
-      }), bottomBlank > 0 && /*#__PURE__*/React.createElement("div", {
-        key: "bottom-blank",
-        className: cx(Classes.virtualBlank, 'bottom'),
-        style: {
-          height: bottomBlank
-        }
-      })));
-    }
   }, {
     key: "renderTableFooter",
     value: function renderTableFooter(info) {
@@ -350,6 +404,17 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           getRowProps = _this$props4.getRowProps,
           primaryKey = _this$props4.primaryKey,
           stickyBottom = _this$props4.stickyBottom;
+      var renderFooter = getTableRenderTemplate('footer');
+
+      if (typeof renderFooter === 'function') {
+        return renderFooter(info, this.props, {
+          rowProps: {
+            onMouseEnter: this.handleRowMouseEnter,
+            onMouseLeave: this.handleRowMouseLeave
+          }
+        });
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         className: cx(Classes.tableFooter, Classes.horizontalScrollContainer),
         style: {
@@ -367,6 +432,12 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           last: footerDataSource.length - 1,
           limit: Infinity
         }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: Classes.verticalScrollPlaceholder,
+        style: this.hasScrollY ? {
+          width: getScrollbarSize().width,
+          visibility: 'initial'
+        } : undefined
       }));
     }
   }, {
@@ -435,7 +506,8 @@ export 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': browserType.isIE
       }, className);
 
       var artTableWrapperProps = _defineProperty({
@@ -454,7 +526,7 @@ export 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')
 
 
@@ -472,6 +544,7 @@ export 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",
@@ -504,7 +577,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         var currentHasFooter = this.props.footerDataSource.length > 0;
 
         if (!prevHasFooter && currentHasFooter) {
-          this.domHelper.tableFooter.scrollLeft = this.domHelper.tableBody.scrollLeft;
+          getTableScrollFooterDOM(this.domHelper).scrollLeft = this.domHelper.tableBody.scrollLeft;
         }
       }
     }
@@ -513,11 +586,9 @@ export 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(throttledWindowResize$.subscribe(function () {
         _this2.updateStickyScroll();
 
@@ -535,36 +606,12 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
 
       this.resizeObserver = addResizeObserver(this.domHelper.artTableWrapper, handleTableWrapperResize); // 滚动同步
 
-      this.rootSubscription.add(syncScrollLeft([tableHeader, virtual, tableFooter, stickyScroll], function (scrollLeft) {
+      this.rootSubscription.add(syncScrollLeft([getTableScrollHeaderDOM(this.domHelper), virtual, 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 of(computedStyle.overflowY !== 'visible' ? wrapper : window);
-        } else if (flowRoot === 'self') {
-          return of(wrapper);
-        } else {
-          if (typeof flowRoot === 'function') {
-            // 在一些情况下 flowRoot 需要在父组件 didMount 时才会准备好
-            // 故这里使用 animationFrameScheduler 等下一个动画帧
-            return timer(0, animationFrameScheduler).pipe(op.map(flowRoot));
-          } else {
-            return of(flowRoot);
-          }
-        }
-      }), op.distinctUntilChanged()); // 表格在 flowRoot 中的可见部分
-
-      var visiblePart$ = resolvedFlowRoot$.pipe(op.switchMap(function (resolvedFlowRoot) {
-        return getVisiblePartObservable(_this2.domHelper.virtual, resolvedFlowRoot);
-      })); // 每当可见部分发生变化的时候，调整 loading icon 的未知（如果 loading icon 存在的话）
+      }));
+      var richVisibleRects$ = 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(combineLatest([visiblePart$.pipe(op.map(function (p) {
+      this.rootSubscription.add(combineLatest([richVisibleRects$.pipe(op.map(function (p) {
         return p.clipRect;
       }), op.distinctUntilChanged(shallowEqual)), this.props$.pipe(op.startWith(null), op.pairwise(), op.filter(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
@@ -582,12 +629,13 @@ export 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;
@@ -727,7 +775,6 @@ BaseTable.defaultProps = {
   components: {},
   getTableProps: noop,
   getRowProps: noop,
-  flowRoot: 'auto',
   dataSource: [],
   useOuterBorder: true
 };

package/es/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/es/table/base/utils.js

@@ -2,11 +2,10 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
 import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
-import _getIterator from "@babel/runtime-corejs3/core-js/get-iterator";
 import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 
-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; } } }; }
+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); }
 
@@ -19,6 +18,8 @@ import { asyncScheduler, BehaviorSubject, defer, fromEvent, Subscription } from
 import { map, throttleTime } from 'rxjs/operators';
 import ResizeObserver from 'resize-observer-polyfill';
 import * as styledComponents from 'styled-components';
+import mergeCellProps from '../utils/mergeCellProps';
+import { browserType } from '../utils';
 /** styled-components 类库的版本，ali-react-table 同时支持 v3 和 v5 */
 
 export var STYLED_VERSION = styledComponents.createGlobalStyle != null ? 'v5' : 'v3';
@@ -34,7 +35,9 @@ export function sum(arr) {
 } // 使用 defer 避免过早引用 window，导致在 SSR 场景下报错
 
 export var throttledWindowResize$ = defer(function () {
-  return fromEvent(window, 'resize').pipe(throttleTime(150, asyncScheduler, {
+  return fromEvent(window, 'resize', {
+    passive: true
+  }).pipe(throttleTime(150, asyncScheduler, {
     leading: true,
     trailing: true
   }));
@@ -161,11 +164,11 @@ export 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 某个官方库中复制过来的
  */
 
 export function shallowEqual(objA, objB) {
+  var hasOwnProperty = Object.prototype.hasOwnProperty;
+
   if (_Object$is(objA, objB)) {
     return true;
   }
@@ -184,10 +187,28 @@ export function shallowEqual(objA, objB) {
 
 
   for (var i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !_Object$is(objA[keysA[i]], objB[keysA[i]])) {
+    if (!hasOwnProperty.call(objB, keysA[i]) || !_Object$is(objA[keysA[i]], objB[keysA[i]])) {
       return false;
     }
   }
 
   return true;
+} // todo: 抽出mergeRowProps
+
+export function composeRowPropsGetter(getRowProps, pendingRowProps) {
+  var keys = _Object$keys(pendingRowProps);
+
+  if (keys.length) {
+    return function (row, rowIndex) {
+      return mergeCellProps(getRowProps(row, rowIndex), pendingRowProps);
+    };
+  }
+
+  return getRowProps;
+}
+export function getTableScrollHeaderDOM(domHelper) {
+  return browserType.isIE ? domHelper.tableHeaderMain : domHelper.tableHeader;
+}
+export function getTableScrollFooterDOM(domHelper) {
+  return browserType.isIE ? domHelper.tableFooterMain : domHelper.tableFooter;
 }

package/es/table/common-views.js

@@ -67,4 +67,4 @@ export var icons = {
   CaretRight: CaretRightIcon,
   Info: InfoIcon
 };
-export var ContextMenuStyleWrap = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), MenuClasses.menu, MenuClasses.menuList, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuList, MenuClasses.menuOptionActive, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuOptionText);
+export var ContextMenuStyleWrap = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), MenuClasses.menu, MenuClasses.menuList, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuList, MenuClasses.menuOptionActive, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuOptionText, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuOptionDisable);

package/es/table/pipeline/features/autoFill.js

@@ -3,6 +3,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import { getLeftNestedLockCount } from '../../base/calculations';
 import { isLeafNode, makeRecursiveMapper } from '../../utils';
+import { Classes } from '../../base/styles';
 export var FILL_COLUMN_CODE = '$_fill_column_&';
 export var tableWidthKey = 'tableWidth';
 var fillColumnWidthKey = 'fillColumnWidth';
@@ -26,10 +27,15 @@ export var autoFillTableWidth = function autoFillTableWidth() {
         width: width,
         features: {
           resizeable: false
+        },
+        getCellProps: function getCellProps(value, record, rowIndex) {
+          return {
+            className: Classes.emptyColCell
+          };
         }
       };
 
-      _spliceInstanceProperty(columns).call(columns, spliceIndex, 0, _fillColumns);
+      _spliceInstanceProperty(columns).call(columns, spliceIndex || columns.length, 0, _fillColumns);
     }
 
     pipeline.columns(columns);