@kdcloudjs/table 1.2.1-canary.6 → 1.2.2-canary.3

package/lib/table/base/table.js

@@ -1,166 +1,108 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
+var _mapInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/map");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
-
 var _sliceInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
-
 var _Array$from = require("@babel/runtime-corejs3/core-js-stable/array/from");
-
 var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
-
 var _getIteratorMethod = require("@babel/runtime-corejs3/core-js/get-iterator-method");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 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.BaseTable = void 0;
-
 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"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
-
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _rxjs = require("rxjs");
-
 var op = _interopRequireWildcard(require("rxjs/operators"));
-
 var _calculations = require("./calculations");
-
 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 _htmlTable = require("./html-table");
-
 var _loading = _interopRequireDefault(require("./loading"));
-
 var _styles = require("./styles");
-
+var _globalStyleComponent = _interopRequireDefault(require("./globalStyleComponent"));
 var _utils = require("./utils");
-
 var _utils2 = require("../utils");
-
 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(_e2) { throw _e2; }, 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(_e3) { didErr = true; err = _e3; }, 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); }
-
-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; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof _Symbol && _getIteratorMethod(r) || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { var _context2; if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = _sliceInstanceProperty2(_context2 = {}.toString.call(r)).call(_context2, 8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? _Array$from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var propsDotEmptyContentDeprecatedWarned = false;
-
 function warnPropsDotEmptyContentIsDeprecated() {
   if (!propsDotEmptyContentDeprecatedWarned) {
     propsDotEmptyContentDeprecatedWarned = true;
-
     _utils2.console.warn('BaseTable props.emptyContent 已经过时，请使用 props.components.EmptyContent 来自定义数据为空时的表格表现');
   }
 }
-
-var BaseTable = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(BaseTable, _React$Component);
-
-  var _super = _createSuper(BaseTable);
-
+var BaseTable = exports.BaseTable = /*#__PURE__*/function (_React$Component) {
   function BaseTable(props) {
     var _this;
-
     (0, _classCallCheck2.default)(this, BaseTable);
-    _this = _super.call(this, props);
+    _this = _callSuper(this, BaseTable, [props]);
     _this.rowHeightManager = (0, _rowHeightManager.makeRowHeightManager)(_this.props.dataSource.length, _this.props.estimatedRowHeight);
     _this.artTableWrapperRef = /*#__PURE__*/_react.default.createRef();
     _this.hasScrollY = false;
     _this.offsetY = 0;
-
     _this.handleRowMouseEnter = function (e) {
       var nodeList = _this.domHelper.getRowNodeListByEvent(e);
-
       nodeList && nodeList.forEach(function (node) {
         node.classList.add('row-hover');
       });
     };
-
     _this.handleRowMouseLeave = function (e) {
       var nodeList = _this.domHelper.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的方向键控制滚动条的功能
-
+        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;
+          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", {
@@ -174,14 +116,12 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           emptyCellHeight: emptyCellHeight
         })));
       }
-
       var _info$verticalRenderR = info.verticalRenderRange,
-          topIndex = _info$verticalRenderR.topIndex,
-          bottomBlank = _info$verticalRenderR.bottomBlank,
-          topBlank = _info$verticalRenderR.topBlank,
-          bottomIndex = _info$verticalRenderR.bottomIndex;
+        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: {
@@ -190,20 +130,19 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
-
       return /*#__PURE__*/_react.default.createElement("div", {
         className: tableBodyClassName
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.Classes.virtual,
         tabIndex: -1,
         style: virtualStyle
-      }, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      }, 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, {
+      })), /*#__PURE__*/_react.default.createElement(_htmlTable.HtmlTable, {
         tbodyHtmlTag: "tbody",
         getRowProps: getRowProps,
         primaryKey: primaryKey,
@@ -215,15 +154,14 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           limit: bottomIndex,
           last: dataSource.length - 1
         }
-      }), bottomBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      }), 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,
@@ -239,44 +177,37 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
   /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
-
-
-  (0, _createClass2.default)(BaseTable, [{
+  (0, _inherits2.default)(BaseTable, _React$Component);
+  return (0, _createClass2.default)(BaseTable, [{
     key: "getDoms",
     value: function getDoms() {
       _utils2.console.warn('[kd-table] BaseTable.getDoms() 已经过时');
-
       return this.domHelper;
     }
     /** 自定义滚动条宽度为table宽度，使滚动条滑块宽度相同 */
-
   }, {
     key: "updateStickyScroll",
     value: function updateStickyScroll() {
       var _a, _b;
-
       var _this$domHelper = this.domHelper,
-          stickyScroll = _this$domHelper.stickyScroll,
-          artTable = _this$domHelper.artTable,
-          stickyScrollItem = _this$domHelper.stickyScrollItem;
+        stickyScroll = _this$domHelper.stickyScroll,
+        artTable = _this$domHelper.artTable,
+        stickyScrollItem = _this$domHelper.stickyScrollItem;
       var _lastHasScrollY = this.hasScrollY;
-
       if (!artTable) {
         return;
       }
-
       var tableBodyHtmlTable = this.domHelper.getTableBodyHtmlTable();
       var innerTableWidth = tableBodyHtmlTable.offsetWidth;
       var artTableWidth = artTable.offsetWidth;
-      var artTableHeight = artTable.offsetHeight; // 表格隐藏后，不需要对表格的滚动条做额外的逻辑处理
-
+      var artTableHeight = artTable.offsetHeight;
+      // 表格隐藏后，不需要对表格的滚动条做额外的逻辑处理
       if (artTableWidth === 0 && artTableHeight === 0) return;
       var stickyScrollHeightProp = this.props.stickyScrollHeight;
-      var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
+      var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp;
+      // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
       // 设置滚动条高度
-
       stickyScroll.style.height = "".concat(stickyScrollHeight, "px");
-
       if (artTableWidth >= innerTableWidth) {
         if (this.state.hasScroll) {
           this.setState({
@@ -291,7 +222,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
-
       if (this.domHelper.virtual.offsetHeight > this.domHelper.tableBody.offsetHeight) {
         //   if (!this.state.hasScroll) {
         //     this.setState({
@@ -306,34 +236,30 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         //   })
         this.hasScrollY = false;
       }
-
       if (_lastHasScrollY !== this.hasScrollY) {
         (_b = (_a = this.props).setTableWidth) === null || _b === void 0 ? void 0 : _b.call(_a, this.domHelper.tableBody.clientWidth);
       }
-
       var _this$lastInfo = this.lastInfo,
-          leftLockTotalWidth = _this$lastInfo.leftLockTotalWidth,
-          rightLockTotalWidth = _this$lastInfo.rightLockTotalWidth;
+        leftLockTotalWidth = _this$lastInfo.leftLockTotalWidth,
+        rightLockTotalWidth = _this$lastInfo.rightLockTotalWidth;
       var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth;
-      var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0; // 设置子节点宽度
-
+      var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
+      // 设置子节点宽度
       stickyScrollItem.style.width = "".concat(innerTableWidth - lockTotalWidth + stickyRightOffset, "px");
     }
   }, {
     key: "renderTableHeader",
     value: function renderTableHeader(info) {
       var _this$props3 = this.props,
-          stickyTop = _this$props3.stickyTop,
-          hasHeader = _this$props3.hasHeader;
+        stickyTop = _this$props3.stickyTop,
+        hasHeader = _this$props3.hasHeader;
       var renderHeader = (0, _renderTemplates.default)('header');
       var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
-
       if (typeof renderHeader === 'function') {
         return renderHeader(info, this.props, {
           stickyRightOffset: stickyRightOffset
         });
       }
-
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(_styles.Classes.tableHeader, 'no-scrollbar'),
         style: {
@@ -367,29 +293,23 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       this.syncHorizontalScroll(this.domHelper.virtual.scrollLeft);
     }
     /** 同步横向滚动偏移量 */
-
   }, {
     key: "syncHorizontalScroll",
     value: function syncHorizontalScroll(x) {
       this.updateOffsetX(x);
       var flat = (0, _flat.default)(this.lastInfo);
       var leftLockShadow = this.domHelper.getLeftLockShadow();
-
       if (leftLockShadow) {
         var shouldShowLeftLockShadow = flat.left.length > 0 && this.state.needRenderLock && x > 0;
-
         if (shouldShowLeftLockShadow) {
           leftLockShadow.classList.add('show-shadow');
         } else {
           leftLockShadow.classList.remove('show-shadow');
         }
       }
-
       var rightLockShadow = this.domHelper.getRightLockShadow();
-
       if (rightLockShadow) {
         var shouldShowRightLockShadow = flat.right.length > 0 && this.state.needRenderLock && x < this.domHelper.virtual.scrollWidth - this.domHelper.virtual.clientWidth;
-
         if (shouldShowRightLockShadow) {
           rightLockShadow.classList.add('show-shadow');
         } else {
@@ -402,10 +322,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     value: function getVerticalRenderRange(useVirtual) {
       var dataSource = this.props.dataSource;
       var _this$state = this.state,
-          offsetY = _this$state.offsetY,
-          maxRenderHeight = _this$state.maxRenderHeight;
+        offsetY = _this$state.offsetY,
+        maxRenderHeight = _this$state.maxRenderHeight;
       var rowCount = dataSource.length;
-
       if (useVirtual.vertical) {
         return this.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
       } else {
@@ -417,14 +336,13 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     value: function renderTableFooter(info) {
       // console.log('render footer')
       var _this$props4 = this.props,
-          _this$props4$footerDa = _this$props4.footerDataSource,
-          footerDataSource = _this$props4$footerDa === void 0 ? [] : _this$props4$footerDa,
-          getRowProps = _this$props4.getRowProps,
-          primaryKey = _this$props4.primaryKey,
-          stickyBottom = _this$props4.stickyBottom;
+        _this$props4$footerDa = _this$props4.footerDataSource,
+        footerDataSource = _this$props4$footerDa === void 0 ? [] : _this$props4$footerDa,
+        getRowProps = _this$props4.getRowProps,
+        primaryKey = _this$props4.primaryKey,
+        stickyBottom = _this$props4.stickyBottom;
       var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
       var renderFooter = (0, _renderTemplates.default)('footer');
-
       if (typeof renderFooter === 'function') {
         return renderFooter(info, this.props, {
           rowProps: {
@@ -434,7 +352,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           stickyRightOffset: stickyRightOffset
         });
       }
-
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(_styles.Classes.tableFooter, _styles.Classes.horizontalScrollContainer),
         style: {
@@ -464,8 +381,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderLockShadows",
     value: function renderLockShadows(info) {
-      var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0; // console.log('render LockShadows')
-
+      var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
+      // console.log('render LockShadows')
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.Classes.lockShadowMask,
         style: {
@@ -489,8 +406,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     value: function renderStickyScroll(info) {
       // console.log('render stickyscroll')
       var _this$props5 = this.props,
-          hasStickyScroll = _this$props5.hasStickyScroll,
-          stickyBottom = _this$props5.stickyBottom;
+        hasStickyScroll = _this$props5.hasStickyScroll,
+        stickyBottom = _this$props5.stickyBottom;
       var hasScroll = this.state.hasScroll;
       var isScroll = hasStickyScroll && hasScroll;
       var stickyScrollContainerStyle = this.getStickyScrollContainerStyle();
@@ -528,8 +445,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     key: "getStickyScrollContainerStyle",
     value: function getStickyScrollContainerStyle() {
       var _this$props6 = this.props,
-          hasStickyScroll = _this$props6.hasStickyScroll,
-          stickyScrollHeight = _this$props6.stickyScrollHeight;
+        hasStickyScroll = _this$props6.hasStickyScroll,
+        stickyScrollHeight = _this$props6.stickyScrollHeight;
       var hasScroll = this.state.hasScroll;
       var isScroll = hasStickyScroll && hasScroll;
       var height = stickyScrollHeight === 'auto' ? this.getScrollBarWidth() : stickyScrollHeight;
@@ -543,26 +460,24 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _cx;
-
       // console.log('render table')
       var info = (0, _calculations.calculateRenderInfo)(this);
       this.lastInfo = info;
       var _this$props7 = this.props,
-          dataSource = _this$props7.dataSource,
-          className = _this$props7.className,
-          style = _this$props7.style,
-          hasHeader = _this$props7.hasHeader,
-          useOuterBorder = _this$props7.useOuterBorder,
-          isStickyHead = _this$props7.isStickyHead,
-          isStickyHeader = _this$props7.isStickyHeader,
-          isStickyFooter = _this$props7.isStickyFooter,
-          isLoading = _this$props7.isLoading,
-          getTableProps = _this$props7.getTableProps,
-          footerDataSource = _this$props7.footerDataSource,
-          components = _this$props7.components,
-          bordered = _this$props7.bordered;
-      var artTableWrapperClassName = (0, _classnames.default)(_styles.Classes.artTableWrapper, (_cx = {
+        dataSource = _this$props7.dataSource,
+        className = _this$props7.className,
+        style = _this$props7.style,
+        hasHeader = _this$props7.hasHeader,
+        useOuterBorder = _this$props7.useOuterBorder,
+        isStickyHead = _this$props7.isStickyHead,
+        isStickyHeader = _this$props7.isStickyHeader,
+        isStickyFooter = _this$props7.isStickyFooter,
+        isLoading = _this$props7.isLoading,
+        getTableProps = _this$props7.getTableProps,
+        footerDataSource = _this$props7.footerDataSource,
+        components = _this$props7.components,
+        bordered = _this$props7.bordered;
+      var artTableWrapperClassName = (0, _classnames.default)(_styles.Classes.artTableWrapper, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
         'use-outer-border': useOuterBorder,
         empty: dataSource.length === 0,
         lock: info.hasLockColumn,
@@ -570,36 +485,35 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
         'has-footer': footerDataSource.length > 0,
         'sticky-footer': isStickyFooter
-      }, (0, _defineProperty2.default)(_cx, _styles.Classes.artTableBordered, bordered), (0, _defineProperty2.default)(_cx, 'ie-polyfill-wrapper', _utils2.browserType.isIE), (0, _defineProperty2.default)(_cx, 'sticky-polyfill-wrapper', (0, _utils2.isStickyUIDegrade)()), _cx), className);
+      }, _styles.Classes.artTableBordered, bordered), 'ie-polyfill-wrapper', _utils2.browserType.isIE), 'sticky-polyfill-wrapper', (0, _utils2.isStickyUIDegrade)()), className);
       var artTableWrapperProps = (0, _defineProperty2.default)({
         className: artTableWrapperClassName,
         style: style
       }, _utils.STYLED_REF_PROP, this.artTableWrapperRef);
       var tableProps = getTableProps() || {};
-      return /*#__PURE__*/_react.default.createElement(_styles.StyledArtTableWrapper, (0, _extends2.default)({}, artTableWrapperProps), /*#__PURE__*/_react.default.createElement(_loading.default, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_globalStyleComponent.default, null), /*#__PURE__*/_react.default.createElement(_styles.StyledArtTableWrapper, (0, _extends2.default)({}, artTableWrapperProps), /*#__PURE__*/_react.default.createElement(_loading.default, {
         visible: isLoading,
         LoadingIcon: components.LoadingIcon,
         LoadingContentWrapper: components.LoadingContentWrapper
       }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, tableProps, {
         className: (0, _classnames.default)(_styles.Classes.artTable, tableProps.className)
-      }), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info)));
+      }), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info))));
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _a, _b, _c, _d, _e, _f;
-
       this.rootSubscription = new _rxjs.Subscription();
       this.resizeSubject = new _rxjs.Subject();
       this.updateDOMHelper();
       this.props$ = new _rxjs.BehaviorSubject(this.props);
       this.initSubscriptions();
-      this.didMountOrUpdate(); // console.log('did mount end')
-
+      this.didMountOrUpdate();
+      // console.log('did mount end')
       var _this$props8 = this.props,
-          cssVariables = _this$props8.cssVariables,
-          enableCSSVariables = _this$props8.enableCSSVariables,
-          bordered = _this$props8.bordered;
+        cssVariables = _this$props8.cssVariables,
+        enableCSSVariables = _this$props8.enableCSSVariables,
+        bordered = _this$props8.bordered;
       (0, _utils.cssPolifill)({
         variables: cssVariables || {},
         enableCSSVariables: enableCSSVariables,
@@ -612,14 +526,12 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _a; // console.log('did update start')
-
-
+      var _a;
+      // console.log('did update start')
       var _this$props9 = this.props,
-          cssVariables = _this$props9.cssVariables,
-          enableCSSVariables = _this$props9.enableCSSVariables,
-          bordered = _this$props9.bordered;
-
+        cssVariables = _this$props9.cssVariables,
+        enableCSSVariables = _this$props9.enableCSSVariables,
+        bordered = _this$props9.bordered;
       if (!(0, _utils.shallowEqual)(prevProps === null || prevProps === void 0 ? void 0 : prevProps.cssVariables, (_a = this.props) === null || _a === void 0 ? void 0 : _a.cssVariables)) {
         (0, _utils.cssPolifill)({
           variables: cssVariables || {},
@@ -627,10 +539,10 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           bordered: bordered
         });
       }
-
       this.updateDOMHelper();
       this.props$.next(this.props);
-      this.didMountOrUpdate(prevProps, prevState); // console.log('did update end')
+      this.didMountOrUpdate(prevProps, prevState);
+      // console.log('did update end')
     }
   }, {
     key: "didMountOrUpdate",
@@ -649,11 +561,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           this.domHelper.stickyScroll.scrollLeft = 0;
         }
       }
-
       if (prevProps != null) {
         var prevHasFooter = prevProps.footerDataSource.length > 0;
         var currentHasFooter = this.props.footerDataSource.length > 0;
-
         if (!prevHasFooter && currentHasFooter) {
           (0, _utils.getTableScrollFooterDOM)(this.domHelper).scrollLeft = this.domHelper.virtual.scrollLeft;
         }
@@ -663,64 +573,55 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     key: "initSubscriptions",
     value: function initSubscriptions() {
       var _this2 = this;
-
       var _this$domHelper2 = this.domHelper,
-          virtual = _this$domHelper2.virtual,
-          stickyScroll = _this$domHelper2.stickyScroll;
+        virtual = _this$domHelper2.virtual,
+        stickyScroll = _this$domHelper2.stickyScroll;
       this.rootSubscription.add(_utils.throttledWindowResize$.subscribe(function () {
         _this2.updateStickyScroll();
-
         _this2.adjustNeedRenderLock();
       }));
       this.resizeSubject.pipe(op.debounceTime(100)).subscribe(function () {
         var _a, _b;
-
         (_b = (_a = _this2.props).setTableWidth) === null || _b === void 0 ? void 0 : _b.call(_a, _this2.domHelper.tableBody.clientWidth);
       });
-
       var handleTableWrapperResize = function handleTableWrapperResize() {
         _this2.resizeSubject.next();
       };
-
-      this.resizeObserver = (0, _utils.addResizeObserver)(this.domHelper.artTableWrapper, handleTableWrapperResize); // 滚动同步
-
+      this.resizeObserver = (0, _utils.addResizeObserver)(this.domHelper.artTableWrapper, handleTableWrapperResize);
+      // 滚动同步
       this.rootSubscription.add((0, _utils.syncScrollLeft)([(0, _utils.getTableScrollHeaderDOM)(this.domHelper), virtual, (0, _utils.getTableScrollFooterDOM)(this.domHelper), stickyScroll], function (scrollLeft) {
         _this2.syncHorizontalScroll(scrollLeft);
       }));
-      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)([richVisibleRects$.pipe(op.map(function (p) {
+      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)([richVisibleRects$.pipe(_mapInstanceProperty2(op).call(op, function (p) {
         return p.clipRect;
-      }), op.distinctUntilChanged(_utils.shallowEqual)), this.props$.pipe(op.startWith(null), op.pairwise(), op.filter(function (_ref) {
+      }), op.distinctUntilChanged(_utils.shallowEqual)), this.props$.pipe(op.startWith(null), op.pairwise(), _filterInstanceProperty(op).call(op, function (_ref) {
         var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-            prevProps = _ref2[0],
-            props = _ref2[1];
-
+          prevProps = _ref2[0],
+          props = _ref2[1];
         return prevProps == null || !prevProps.isLoading && props.isLoading;
       }))]).subscribe(function (_ref3) {
         var _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
-            clipRect = _ref4[0];
-
+          clipRect = _ref4[0];
         var loadingIndicator = _this2.domHelper.getLoadingIndicator();
-
         if (!loadingIndicator) {
           return;
         }
-
-        var height = clipRect.bottom - clipRect.top; // fixme 这里的定位在有些特殊情况下可能会出错 see #132
-
+        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(richVisibleRects$.pipe(op.filter(function () {
+      }));
+      // 每当可见部分发生变化的时候，如果开启了虚拟滚动，则重新触发 render
+      this.rootSubscription.add(richVisibleRects$.pipe(_filterInstanceProperty(op).call(op, function () {
         var _this2$lastInfo$useVi = _this2.lastInfo.useVirtual,
-            horizontal = _this2$lastInfo$useVi.horizontal,
-            vertical = _this2$lastInfo$useVi.vertical;
+          horizontal = _this2$lastInfo$useVi.horizontal,
+          vertical = _this2$lastInfo$useVi.vertical;
         return horizontal || vertical;
-      }), op.map(function (_ref5) {
+      }), _mapInstanceProperty2(op).call(op, function (_ref5) {
         var clipRect = _ref5.clipRect,
-            offsetY = _ref5.offsetY;
+          offsetY = _ref5.offsetY;
         return {
           maxRenderHeight: clipRect.bottom - clipRect.top,
           maxRenderWidth: clipRect.right - clipRect.left,
@@ -730,16 +631,15 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         // 如果表格区域被隐藏， 不需要触发组件重渲染
         if (y.maxRenderHeight === 0 && y.maxRenderWidth === 0) {
           return true;
-        } // 因为 overscan 的存在，滚动较小的距离时不需要触发组件重渲染
-
-
+        }
+        // 因为 overscan 的存在，滚动较小的距离时不需要触发组件重渲染
         return Math.abs(x.maxRenderWidth - y.maxRenderWidth) < _utils.OVERSCAN_SIZE / 2 && Math.abs(x.maxRenderHeight - y.maxRenderHeight) < _utils.OVERSCAN_SIZE / 2 && Math.abs(x.offsetY - y.offsetY) < _utils.OVERSCAN_SIZE / 2;
       })).subscribe(function (sizeAndOffset) {
         _this2.setState(sizeAndOffset);
       }));
-      this.rootSubscription.add(richVisibleRects$.pipe(op.map(function (_ref6) {
+      this.rootSubscription.add(richVisibleRects$.pipe(_mapInstanceProperty2(op).call(op, function (_ref6) {
         var clipRect = _ref6.clipRect,
-            offsetY = _ref6.offsetY;
+          offsetY = _ref6.offsetY;
         return {
           maxRenderHeight: clipRect.bottom - clipRect.top,
           maxRenderWidth: clipRect.right - clipRect.left,
@@ -747,20 +647,18 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         };
       }), op.distinctUntilChanged(function (x, y) {
         return x.offsetY - y.offsetY === 0;
-      }), // 计算得到当前行索引对应的数据块，blocks改成数组的形式，兼容快速拖动可视区域出现两个数据块的情况
-      op.map(function (sizeAndOffset) {
+      }),
+      // 计算得到当前行索引对应的数据块，blocks改成数组的形式，兼容快速拖动可视区域出现两个数据块的情况
+      _mapInstanceProperty2(op).call(op, function (sizeAndOffset) {
         var _a;
-
         var offsetY = sizeAndOffset.offsetY,
-            maxRenderHeight = sizeAndOffset.maxRenderHeight;
+          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;
+          bottomIndex = vertical.bottomIndex;
         var blockSize = ((_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.blockSize) || 200;
         var topBlockStartIndex = Math.floor(Math.max(topIndex - 1, 0) / blockSize) * blockSize;
         var bottomBlockStartIndex = Math.floor((bottomIndex + 1) / blockSize) * blockSize;
@@ -769,13 +667,13 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         return x[0] === y[0] && x[1] === y[1];
       }), op.switchMap(function (startIndexs) {
         var event$ = (0, _rxjs.from)(startIndexs);
-        return event$.pipe(op.map(function (startIndex) {
+        return event$.pipe(_mapInstanceProperty2(op).call(op, function (startIndex) {
           return startIndex;
         }));
-      }), // 过滤掉重复掉值
+      }),
+      // 过滤掉重复掉值
       op.distinctUntilChanged()).subscribe(function (startIndex) {
         var _a;
-
         (_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.callback(startIndex);
       }));
     }
@@ -783,13 +681,11 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var _a;
-
       (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
       this.rootSubscription.unsubscribe();
       this.resizeSubject.unsubscribe();
     }
     /** 更新 DOM 节点的引用，方便其他方法直接操作 DOM */
-
   }, {
     key: "updateDOMHelper",
     value: function updateDOMHelper() {
@@ -799,51 +695,42 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     key: "updateRowHeightManager",
     value: function updateRowHeightManager() {
       var _a;
-
       var virtualTop = this.domHelper.getVirtualTop();
       var virtualTopHeight = (_a = virtualTop === null || virtualTop === void 0 ? void 0 : virtualTop.clientHeight) !== null && _a !== void 0 ? _a : 0;
       var maxTrRowIndex = -1;
       var maxTrBottom = -1;
       var zeroHeightRowCount = 0;
-
       var _iterator = _createForOfIteratorHelper(this.domHelper.getTableRows()),
-          _step;
-
+        _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var tr = _step.value;
           var rowIndex = Number(tr.dataset.rowindex);
-
           if (isNaN(rowIndex)) {
             continue;
           }
-
           maxTrRowIndex = Math.max(maxTrRowIndex, rowIndex);
           var offset = tr.offsetTop + virtualTopHeight;
           var size = tr.offsetHeight;
-
           if (size === 0) {
             zeroHeightRowCount += 1;
           } else {
             // 渲染出来的行高度为0，说明是display=none情况，行高不存在该种异常情况，不保存当前的高度
             this.rowHeightManager.updateRow(rowIndex, offset, size);
           }
-
           maxTrBottom = Math.max(maxTrBottom, offset + size);
-        } // 当 estimatedRowHeight 过大时，可能出现「渲染行数过少，无法覆盖可视范围」的情况
+        }
+        // 当 estimatedRowHeight 过大时，可能出现「渲染行数过少，无法覆盖可视范围」的情况
         // 出现这种情况时，我们判断「下一次渲染能够渲染更多行」是否满足，满足的话就直接调用 forceUpdate
         // zeroHeightRowCount === 0 用于确保当前没有 display=none 的情况
-
       } catch (err) {
         _iterator.e(err);
       } finally {
         _iterator.f();
       }
-
       if (maxTrRowIndex !== -1 && zeroHeightRowCount === 0) {
         if (maxTrBottom < this.state.offsetY + this.state.maxRenderHeight) {
           var vertical = this.getVerticalRenderRange(this.lastInfo.useVirtual);
-
           if (vertical.bottomIndex - 1 > maxTrRowIndex) {
             this.forceUpdate();
           }
@@ -851,23 +738,19 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       }
     }
     /** 计算表格所有列的渲染宽度之和，判断表格是否需要渲染锁列 */
-
   }, {
     key: "adjustNeedRenderLock",
     value: function adjustNeedRenderLock() {
       var needRenderLock = this.state.needRenderLock;
       var _this$lastInfo2 = this.lastInfo,
-          flat = (0, _flat.default)(_this$lastInfo2),
-          hasLockColumn = _this$lastInfo2.hasLockColumn;
-
+        flat = (0, _flat.default)(_this$lastInfo2),
+        hasLockColumn = _this$lastInfo2.hasLockColumn;
       if (hasLockColumn) {
         var _context;
-
         var sumOfColWidth = (0, _utils.sum)((0, _map.default)(_context = flat.full).call(_context, function (col) {
           return col.width;
         }));
         var nextNeedRenderLock = sumOfColWidth > this.domHelper.artTable.clientWidth;
-
         if (needRenderLock !== nextNeedRenderLock) {
           this.setState({
             needRenderLock: nextNeedRenderLock
@@ -882,10 +765,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       }
     }
   }]);
-  return BaseTable;
 }(_react.default.Component);
-
-exports.BaseTable = BaseTable;
 BaseTable.defaultProps = {
   hasHeader: true,
   isStickyHeader: true,