"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 _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(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 = exports.BaseTable = /*#__PURE__*/function (_React$Component) {
  function BaseTable(props) {
    var _this;
    (0, _classCallCheck2.default)(this, BaseTable);
    _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的方向键控制滚动条的功能
      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,
          tabIndex: -1,
          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
          }
        });
      }
      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", {
        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
        }
      }))));
    };
    _this.state = {
      hasScroll: true,
      hasScrollY: true,
      needRenderLock: true,
      offsetY: 0,
      offsetX: 0,
      // 因为 ResizeObserver 在一开始总是会调用一次所提供的回调函数
      // 故这里为 maxRenderHeight/maxRenderWidth 设置一个默认值即可（因为这两个默认值很快就会被覆盖）
      // https://stackoverflow.com/questions/60026223/does-resizeobserver-invokes-initially-on-page-load
      maxRenderHeight: 600,
      maxRenderWidth: 800
    };
    return _this;
  }
  /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
  (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;
      var _lastHasScrollY = this.hasScrollY;
      if (!artTable) {
        return;
      }
      var tableBodyHtmlTable = this.domHelper.getTableBodyHtmlTable();
      var innerTableWidth = tableBodyHtmlTable.offsetWidth;
      var artTableWidth = artTable.offsetWidth;
      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`
      // 设置滚动条高度
      stickyScroll.style.height = "".concat(stickyScrollHeight, "px");
      if (artTableWidth >= innerTableWidth) {
        if (this.state.hasScroll) {
          this.setState({
            hasScroll: false
          });
        }
      } else {
        if (!this.state.hasScroll && stickyScrollHeight > 5) {
          // 考虑下mac下面隐藏滚动条的情况
          this.setState({
            hasScroll: true
          });
        }
      }
      if (this.domHelper.virtual.offsetHeight > this.domHelper.tableBody.offsetHeight) {
        //   if (!this.state.hasScroll) {
        //     this.setState({
        //       hasScrollY: true
        //     })
        //   }
        this.hasScrollY = true;
      } else {
        // stickyScroll.style.paddingRight = `${stickyScrollHeight}px`
        //   this.setState({
        //     hasScrollY: false
        //   })
        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;
      var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth;
      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;
      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: {
          top: stickyTop === 0 ? undefined : stickyTop,
          display: hasHeader ? undefined : 'none'
        }
      }, /*#__PURE__*/_react.default.createElement(_header.default, {
        info: info,
        stickyRightOffset: stickyRightOffset
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: _styles.Classes.verticalScrollPlaceholder,
        style: this.hasScrollY ? {
          width: this.getScrollBarWidth()
        } : undefined
      }));
    }
  }, {
    key: "updateOffsetX",
    value: function updateOffsetX(nextOffsetX) {
      if (this.lastInfo.useVirtual.horizontal) {
        if (Math.abs(nextOffsetX - this.state.offsetX) >= _utils.OVERSCAN_SIZE / 2) {
          this.setState({
            offsetX: nextOffsetX
          });
        }
      }
    }
  }, {
    key: "syncHorizontalScrollFromTableBody",
    value: function syncHorizontalScrollFromTableBody() {
      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 {
          rightLockShadow.classList.remove('show-shadow');
        }
      }
    }
  }, {
    key: "getVerticalRenderRange",
    value: function getVerticalRenderRange(useVirtual) {
      var dataSource = this.props.dataSource;
      var _this$state = this.state,
        offsetY = _this$state.offsetY,
        maxRenderHeight = _this$state.maxRenderHeight;
      var rowCount = dataSource.length;
      if (useVirtual.vertical) {
        return this.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
      } else {
        return (0, _rowHeightManager.getFullRenderRange)(rowCount);
      }
    }
  }, {
    key: "renderTableFooter",
    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;
      var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
      var renderFooter = (0, _renderTemplates.default)('footer');
      if (typeof renderFooter === 'function') {
        return renderFooter(info, this.props, {
          rowProps: {
            onMouseEnter: this.handleRowMouseEnter,
            onMouseLeave: this.handleRowMouseLeave
          },
          stickyRightOffset: stickyRightOffset
        });
      }
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)(_styles.Classes.tableFooter, _styles.Classes.horizontalScrollContainer),
        style: {
          bottom: stickyBottom === 0 ? undefined : stickyBottom
        }
      }, /*#__PURE__*/_react.default.createElement(_htmlTable.HtmlTable, {
        tbodyHtmlTag: "tfoot",
        data: footerDataSource,
        horizontalRenderInfo: info,
        getRowProps: getRowProps,
        stickyRightOffset: stickyRightOffset,
        primaryKey: primaryKey,
        verticalRenderInfo: {
          offset: 0,
          first: 0,
          last: footerDataSource.length - 1,
          limit: Infinity
        }
      }), footerDataSource.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
        className: _styles.Classes.verticalScrollPlaceholder,
        style: this.hasScrollY ? {
          width: this.getScrollBarWidth(),
          visibility: 'initial'
        } : undefined
      }) : null);
    }
  }, {
    key: "renderLockShadows",
    value: function renderLockShadows(info) {
      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: {
          left: 0,
          width: info.leftLockTotalWidth + _styles.LOCK_SHADOW_PADDING
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)(_styles.Classes.lockShadow, _styles.Classes.leftLockShadow)
      })), /*#__PURE__*/_react.default.createElement("div", {
        className: _styles.Classes.lockShadowMask,
        style: {
          right: 0,
          width: info.rightLockTotalWidth + _styles.LOCK_SHADOW_PADDING + stickyRightOffset
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)(_styles.Classes.lockShadow, _styles.Classes.rightLockShadow)
      })));
    }
  }, {
    key: "renderStickyScroll",
    value: function renderStickyScroll(info) {
      // console.log('render stickyscroll')
      var _this$props5 = this.props,
        hasStickyScroll = _this$props5.hasStickyScroll,
        stickyBottom = _this$props5.stickyBottom;
      var hasScroll = this.state.hasScroll;
      var isScroll = hasStickyScroll && hasScroll;
      var stickyScrollContainerStyle = this.getStickyScrollContainerStyle();
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)(_styles.Classes.horizontalScrollContainer, _styles.Classes.horizontalStickyScrollContainer),
        style: stickyScrollContainerStyle
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)(_styles.Classes.horizontalScrollLeftSpacer),
        style: {
          width: info.leftLockTotalWidth,
          display: isScroll ? 'block' : 'none'
        }
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)(_styles.Classes.stickyScroll),
        style: {
          display: isScroll ? 'block' : 'none',
          bottom: stickyBottom
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: _styles.Classes.stickyScrollItem
      })), /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)(_styles.Classes.horizontalScrollRightSpacer),
        style: {
          width: info.rightLockTotalWidth,
          display: isScroll ? 'block' : 'none'
        }
      }));
    }
  }, {
    key: "getScrollBarWidth",
    value: function getScrollBarWidth() {
      return this.props.scrollbarWidth || (0, _utils.getScrollbarSize)().width;
    }
  }, {
    key: "getStickyScrollContainerStyle",
    value: function getStickyScrollContainerStyle() {
      var _this$props6 = this.props,
        hasStickyScroll = _this$props6.hasStickyScroll,
        stickyScrollHeight = _this$props6.stickyScrollHeight;
      var hasScroll = this.state.hasScroll;
      var isScroll = hasStickyScroll && hasScroll;
      var height = stickyScrollHeight === 'auto' ? this.getScrollBarWidth() : stickyScrollHeight;
      var stickyHeight = isScroll ? height : 0;
      return {
        height: stickyHeight,
        maxHeight: stickyHeight,
        minHeight: stickyHeight
      };
    }
  }, {
    key: "render",
    value: function render() {
      // 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, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
        'use-outer-border': useOuterBorder,
        empty: dataSource.length === 0,
        lock: info.hasLockColumn,
        'has-header': hasHeader,
        'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
        'has-footer': footerDataSource.length > 0,
        'sticky-footer': isStickyFooter
      }, _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(_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))));
    }
  }, {
    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')
      var _this$props8 = this.props,
        cssVariables = _this$props8.cssVariables,
        enableCSSVariables = _this$props8.enableCSSVariables,
        bordered = _this$props8.bordered;
      (0, _utils.cssPolifill)({
        variables: cssVariables || {},
        enableCSSVariables: enableCSSVariables,
        bordered: bordered
      });
      (_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);
      (_f = (_e = this.props).setRowHeightManager) === null || _f === void 0 ? void 0 : _f.call(_e, this.rowHeightManager);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var _a;
      // console.log('did update start')
      var _this$props9 = this.props,
        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 || {},
          enableCSSVariables: enableCSSVariables,
          bordered: bordered
        });
      }
      this.updateDOMHelper();
      this.props$.next(this.props);
      this.didMountOrUpdate(prevProps, prevState);
      // console.log('did update end')
    }
  }, {
    key: "didMountOrUpdate",
    value: function didMountOrUpdate(prevProps, prevState) {
      this.syncHorizontalScrollFromTableBody();
      this.updateStickyScroll();
      this.adjustNeedRenderLock();
      this.updateRowHeightManager();
      this.updateScrollLeftWhenLayoutChanged(prevProps, prevState);
    }
  }, {
    key: "updateScrollLeftWhenLayoutChanged",
    value: function updateScrollLeftWhenLayoutChanged(prevProps, prevState) {
      if (prevState != null) {
        if (!prevState.hasScroll && this.state.hasScroll) {
          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;
        }
      }
    }
  }, {
    key: "initSubscriptions",
    value: function initSubscriptions() {
      var _this2 = this;
      var _this$domHelper2 = this.domHelper,
        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.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(_mapInstanceProperty2(op).call(op, function (p) {
        return p.clipRect;
      }), 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];
        return prevProps == null || !prevProps.isLoading && props.isLoading;
      }))]).subscribe(function (_ref3) {
        var _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
          clipRect = _ref4[0];
        var loadingIndicator = _this2.domHelper.getLoadingIndicator();
        if (!loadingIndicator) {
          return;
        }
        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(_filterInstanceProperty(op).call(op, function () {
        var _this2$lastInfo$useVi = _this2.lastInfo.useVirtual,
          horizontal = _this2$lastInfo$useVi.horizontal,
          vertical = _this2$lastInfo$useVi.vertical;
        return horizontal || vertical;
      }), _mapInstanceProperty2(op).call(op, function (_ref5) {
        var clipRect = _ref5.clipRect,
          offsetY = _ref5.offsetY;
        return {
          maxRenderHeight: clipRect.bottom - clipRect.top,
          maxRenderWidth: clipRect.right - clipRect.left,
          offsetY: offsetY
        };
      }), op.distinctUntilChanged(function (x, y) {
        // 如果表格区域被隐藏， 不需要触发组件重渲染
        if (y.maxRenderHeight === 0 && y.maxRenderWidth === 0) {
          return true;
        }
        // 因为 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(_mapInstanceProperty2(op).call(op, function (_ref6) {
        var clipRect = _ref6.clipRect,
          offsetY = _ref6.offsetY;
        return {
          maxRenderHeight: clipRect.bottom - clipRect.top,
          maxRenderWidth: clipRect.right - clipRect.left,
          offsetY: offsetY
        };
      }), op.distinctUntilChanged(function (x, y) {
        return x.offsetY - y.offsetY === 0;
      }),
      // 计算得到当前行索引对应的数据块，blocks改成数组的形式，兼容快速拖动可视区域出现两个数据块的情况
      _mapInstanceProperty2(op).call(op, function (sizeAndOffset) {
        var _a;
        var offsetY = sizeAndOffset.offsetY,
          maxRenderHeight = sizeAndOffset.maxRenderHeight;
        var scrollDirection = offsetY - _this2.offsetY >= 0 ? 'down' : 'up';
        _this2.offsetY = offsetY;
        var rowCount = _this2.props.dataSource.length;
        var vertical = _this2.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
        var topIndex = vertical.topIndex,
          bottomIndex = vertical.bottomIndex;
        var blockSize = ((_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;
        return scrollDirection === 'down' ? [topBlockStartIndex, bottomBlockStartIndex] : [bottomBlockStartIndex, topBlockStartIndex];
      }), op.distinctUntilChanged(function (x, y) {
        return x[0] === y[0] && x[1] === y[1];
      }), op.switchMap(function (startIndexs) {
        var event$ = (0, _rxjs.from)(startIndexs);
        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);
      }));
    }
  }, {
    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() {
      this.domHelper = new _TableDOMUtils.TableDOMHelper(this.artTableWrapperRef.current);
    }
  }, {
    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;
      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 过大时，可能出现「渲染行数过少，无法覆盖可视范围」的情况
        // 出现这种情况时，我们判断「下一次渲染能够渲染更多行」是否满足，满足的话就直接调用 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();
          }
        }
      }
    }
    /** 计算表格所有列的渲染宽度之和，判断表格是否需要渲染锁列 */
  }, {
    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;
      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
          });
        }
      } else {
        if (needRenderLock) {
          this.setState({
            needRenderLock: false
          });
        }
      }
    }
  }]);
}(_react.default.Component);
BaseTable.defaultProps = {
  hasHeader: true,
  isStickyHeader: true,
  stickyTop: 0,
  footerDataSource: [],
  isStickyFooter: true,
  stickyBottom: 0,
  hasStickyScroll: true,
  stickyScrollHeight: 'auto',
  useVirtual: 'auto',
  estimatedRowHeight: 48,
  isLoading: false,
  components: {},
  getTableProps: _rxjs.noop,
  getRowProps: _rxjs.noop,
  dataSource: [],
  useOuterBorder: true
};