ukelli-ui/core/record-render/table-body.js

ukelli-ui 是基于 React 的 UI 库，提供简约和功能齐全的组件，可高度定制的组件接口，灵活的配置，提供给开发者另一种开发思路，也致力于尝试不同的组件使用和开发方向。

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _basicHelper = require("basic-helper");

var _classnames = _interopRequireDefault(require("classnames"));

var _mapperFilter = _interopRequireDefault(require("./mapper-filter"));

var _icon = require("../icon");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var isStringNumRegex = /\d+,?/;
var tdSpecClassMapper = {
  checkbox: 'check-td'
};
var scrollLeftClass = 'scroll-to-left';
var scrollRightClass = 'scroll-at-right';
var breakWordClass = 'break-word';
var autoWidthClass = 'auto-width';
var tdMaxWidth = 400;

var moneyFormat = function moneyFormat(text) {
  return (0, _basicHelper.HasValue)(text) ? text.toLocaleString('en-US') : '-';
}; // const excludeKey = (target, keys) => {
//   let res = Object.assign({}, target);
//   keys.forEach(item => {
//     res[item] = '';
//   });
//   return res;
// };
// const excludeKeys = ['records', 'keyMapper'];

/**
 * 提供一个快速的表格数据渲染容器，不需要关注具体如何渲染，只需要传入对应的数据和过滤器
 *
 * @export
 * @class Table
 * @extends {MapperFilter}
 */


var Table =
/*#__PURE__*/
function (_MapperFilter) {
  _inherits(Table, _MapperFilter);

  function Table(props) {
    var _this;

    _classCallCheck(this, Table);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Table).call(this, props));

    _defineProperty(_assertThisInitialized(_this), "excludeFilterField", ['action', 'checkbox']);

    _defineProperty(_assertThisInitialized(_this), "sortIgnores", ['action', 'checkbox']);

    _defineProperty(_assertThisInitialized(_this), "firstTDDOMs", {});

    _defineProperty(_assertThisInitialized(_this), "firstRowNodes", {});

    _defineProperty(_assertThisInitialized(_this), "sameSortTime", 0);

    _defineProperty(_assertThisInitialized(_this), "fixedLeftGroup", []);

    _defineProperty(_assertThisInitialized(_this), "fixedRightGroup", []);

    _defineProperty(_assertThisInitialized(_this), "columnHeightInfo", {});

    _defineProperty(_assertThisInitialized(_this), "clearCheckeds", function () {
      _this.toggleAllItems(false);
    });

    _defineProperty(_assertThisInitialized(_this), "toggleSelectItem", function (item, idx) {
      var checkedItems = _this.state.checkedItems;

      var nextCheckedItems = _objectSpread({}, checkedItems);

      if (nextCheckedItems[idx]) {
        delete nextCheckedItems[idx];
      } else {
        nextCheckedItems[idx] = item;
      }

      _this.selectItems(nextCheckedItems, idx);
    });

    _defineProperty(_assertThisInitialized(_this), "getCheckbox", function (str, item, mapper, idx) {
      var checkedItems = _this.state.checkedItems;
      var checked = !!checkedItems[idx];
      return _react["default"].createElement("input", {
        type: "checkbox",
        checked: checked,
        onChange: function onChange(e) {
          return _this.toggleSelectItem(item, idx);
        }
      });
    });

    _defineProperty(_assertThisInitialized(_this), "getKeyMapper", function () {
      var _this$props = _this.props,
          _this$props$keyMapper = _this$props.keyMapper,
          keyMapper = _this$props$keyMapper === void 0 ? [] : _this$props$keyMapper,
          needCheck = _this$props.needCheck,
          checkWidth = _this$props.checkWidth;
      var result = keyMapper;

      if (needCheck) {
        var fixedLeft = keyMapper[0].fixed == 'left';
        var checkExtend = Object.assign({}, fixedLeft ? {
          fixed: 'left'
        } : {}, {
          key: 'checkbox',
          // w: checkWidth,
          filter: _this.getCheckbox
        });
        result = [checkExtend].concat(_toConsumableArray(keyMapper));
      }

      _this.saveFixedGroup(result);

      return result;
    });

    _defineProperty(_assertThisInitialized(_this), "saveFixedGroup", function (keyMapper) {
      if (_this.hadSaved) return;
      _this.hadSaved = true;
      var _this$props2 = _this.props,
          fixedRightKeys = _this$props2.fixedRightKeys,
          fixedLeftKeys = _this$props2.fixedLeftKeys;
      keyMapper.forEach(function (item, idx) {
        var key = item.key,
            fixed = item.fixed;

        var nextItem = _objectSpread({}, item, {
          idx: idx
        });

        switch (true) {
          case fixedLeftKeys.indexOf(key) !== -1:
          case fixed === 'left':
            _this.fixedLeftGroup.push(nextItem);

            break;

          case fixedRightKeys.indexOf(key) !== -1:
          case fixed === 'right':
            _this.fixedRightGroup.push(nextItem);

            break;
        }
      });
    });

    _defineProperty(_assertThisInitialized(_this), "setTableContainerClass", function (isAutoWidth) {
      if (_this.tableContainer) _this.tableContainer.classList.toggle(autoWidthClass, isAutoWidth);
    });

    _defineProperty(_assertThisInitialized(_this), "resetTableDOMInfo", function () {
      _this.tableContainerWidth = _this.tableContainer.offsetWidth;
    });

    _defineProperty(_assertThisInitialized(_this), "resizeCalcSize", function () {
      if (!_this.tableContainer) return;
      var tableWidth = _this.state.tableWidth;

      if (tableWidth != 'auto' && tableWidth < _this.tableContainer.offsetWidth) {
        _this.setTableContainerClass(true);

        _this.setState({
          tableWidth: 'auto',
          isAutoWidth: true
        }, function () {
          return _this.calcSize(_this.firstRowNodes);
        });
      } else {
        _this.calcSize(_this.firstRowNodes);
      }

      setTimeout(function () {
        _this.resetTableDOMInfo();
      }, 100);
    });

    _defineProperty(_assertThisInitialized(_this), "onChangeRecords", function () {
      setTimeout(function () {
        _this.reSaveFirstRow();

        _this.resizeCalcSize();
      }, 10);
    });

    _defineProperty(_assertThisInitialized(_this), "initTableContainer", function (e) {
      _this.tableContainer = e;

      if (e) {
        _this.tableContainerWidth = e.offsetWidth;
        setTimeout(function () {
          e.classList.add('ready');

          if (e && _this.state.tableWidth == 'auto') {
            e.classList.add(scrollRightClass);
          }
        }, 100);
      }

      _this.calcSize(_this.firstRowNodes);
    });

    _defineProperty(_assertThisInitialized(_this), "clearWatch", function () {
      _this.desplayWatcher && clearTimeout(_this.desplayWatcher);
    });

    _defineProperty(_assertThisInitialized(_this), "saveContainer", function (e) {
      /** 检测表格元素是否被隐藏了，如果被隐藏了，则设置监听器监听显示变化 */
      _this.clearWatch();

      var isHide = _this.isHidden(e);

      var _this$props3 = _this.props,
          records = _this$props3.records,
          watcherTimer = _this$props3.watcherTimer;
      var hasRecord = records.length > 0;

      if (!hasRecord || isHide) {
        _this.desplayWatcher = setTimeout(function () {
          _this.saveContainer(e);
        }, watcherTimer);
      } else {
        _this.initTableContainer(e);

        _this.desplayWatcher = null;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "getRowKey", function (record, idx) {
      var rowKey = _this.props.rowKey;
      var key;

      if (rowKey) {
        key = (0, _basicHelper.IsFunc)(rowKey) ? rowKey(record, idx) : record[rowKey] || idx;
      } else {
        key = idx;
        console.warn('需要设置 rowKey，为每一行设置唯一 key');
      }

      return key;
    });

    _defineProperty(_assertThisInitialized(_this), "saveCell", function (idx, isMain, rowKey) {
      return function (tdDOM) {
        if (tdDOM && tdDOM.offsetWidth > tdMaxWidth) tdDOM.classList.add(breakWordClass);

        if (tdDOM && isMain && idx === 0) {
          _this.columnHeightInfo[rowKey] = tdDOM.offsetHeight;
        }

        if (tdDOM && !isMain) {
          tdDOM.style.height = _this.columnHeightInfo[rowKey] + 'px';
        }
      };
    });

    _defineProperty(_assertThisInitialized(_this), "handleHoverRow", function (idx) {
      _this.setState({
        hoveringRow: idx
      });
    });

    _defineProperty(_assertThisInitialized(_this), "renderRow", function (options) {
      var records = options.records,
          other = _objectWithoutProperties(options, ["records"]);

      var hoveringRow = _this.state.hoveringRow;
      return records.map(function (record, idx) {
        if (!record) return;

        var _record$_highlight = record._highlight,
            _highlight = _record$_highlight === void 0 ? '' : _record$_highlight;

        var key = _this.getRowKey(record, idx);

        return _react["default"].createElement("tr", {
          key: key,
          onMouseEnter: function onMouseEnter(e) {
            return _this.handleHoverRow(idx);
          },
          className: "".concat(_highlight, " ").concat(hoveringRow === idx ? 'hovering' : '')
        }, _this.renderCell(_objectSpread({
          rowKey: key,
          record: record,
          parentIdx: idx
        }, other)));
      });
    });

    _defineProperty(_assertThisInitialized(_this), "calcTableWidth", function (keyMapper) {
      var headerWidthMapper = _this.state.headerWidthMapper;
      if (headerWidthMapper.length === 0) return;
      var res = 0;
      keyMapper.forEach(function (mapper, _idx) {
        var fixed = mapper.fixed,
            idx = mapper.idx;

        var __idx = idx || _idx; // if(fixed == 'right') {
        //   console.log([[...headerWidthMapper].reverse()], idx)
        //   res += [[...headerWidthMapper].reverse()][idx];
        // } else {


        res += headerWidthMapper[__idx]; // }
      });
      return res;
    });

    _defineProperty(_assertThisInitialized(_this), "renderTableHeader", function (options) {
      var needInnerSort = _this.props.needInnerSort;
      var _this$state = _this.state,
          tableWidth = _this$state.tableWidth,
          headerWidthMapper = _this$state.headerWidthMapper,
          sortField = _this$state.sortField,
          sortOutsideField = _this$state.sortOutsideField,
          isDescInner = _this$state.isDescInner,
          isDescOutside = _this$state.isDescOutside;
      var keyMapper = options.keyMapper,
          isAllCheck = options.isAllCheck,
          main = options.main;
      var style = {
        width: _this.calcTableWidth(keyMapper)
      };
      var isDesc = typeof isDescOutside == 'undefined' ? isDescInner : isDescOutside;
      return _react["default"].createElement("div", {
        key: "tableHead",
        className: "uke-table-scroll",
        style: style
      }, _react["default"].createElement("table", {
        className: "table nomargin table-header"
      }, _react["default"].createElement("thead", null, _react["default"].createElement("tr", null, keyMapper.map(function (item, _idx) {
        if (!item) return; // const { key, w } = item;
        // const cellWidth = w || headerWidthMapper[idx];

        var key = item.key,
            idx = item.idx,
            onSort = item.onSort;

        var __idx = idx || _idx;

        var cellWidth = headerWidthMapper[__idx];
        var needSort = needInnerSort || onSort;
        var title = '';

        if (key !== 'checkbox') {
          title = _this.titleFilter(item, __idx);
        } else {
          title = _react["default"].createElement("input", {
            type: "checkbox",
            checked: isAllCheck,
            onChange: function onChange(e) {
              return _this.toggleAllItems(e.target.checked);
            }
          });
        }

        var isOrdering = onSort ? sortOutsideField == key : sortField == key;
        var canOrder = needSort && !_this.ignoreFilter(key);

        var sortTip = canOrder && _react["default"].createElement("span", {
          className: "sort-caret-group ".concat(isDesc ? 'desc' : 'asc')
        }, _react["default"].createElement("span", {
          className: "caret up",
          style: {
            transform: "rotate(180deg)"
          }
        }), _react["default"].createElement("span", {
          className: "caret down"
        }));

        var clickHandlerForTh = needSort ? {
          onClick: function onClick() {
            if ((0, _basicHelper.IsFunc)(onSort)) {
              var _isDesc = onSort(item, isDescOutside);

              _this.setState({
                isDescOutside: !!_isDesc,
                sortOutsideField: key
              });
            } else {
              _this.orderRecord(key);
            }
          }
        } : {};
        return _react["default"].createElement("th", _extends({
          className: "".concat(isOrdering ? isDesc ? '_desc' : '_asc' : '', " ").concat(canOrder ? '_order _btn' : ''),
          key: key
        }, clickHandlerForTh, {
          style: {
            width: cellWidth
          }
        }), title, sortTip);
      })))));
    });

    _defineProperty(_assertThisInitialized(_this), "reSaveFirstRow", function () {
      _this.firstRowNodes = _this.mainTableBody ? _this.mainTableBody.querySelectorAll('tbody tr:first-child td') : null;
    });

    _defineProperty(_assertThisInitialized(_this), "saveTableBody", function (t) {
      _this.mainTableBody = t;
      _this.firstRowNodes = t ? t.querySelectorAll('tbody tr:first-child td') : null;
      t && _this.calcSize(_this.firstRowNodes);
    });

    _defineProperty(_assertThisInitialized(_this), "hasFixedGroup", function () {
      return _this.leftFixedTable || _this.rightFixedTable;
    });

    _defineProperty(_assertThisInitialized(_this), "renderTableBody", function (options) {
      var _this$props4 = _this.props,
          height = _this$props4.height,
          needCount = _this$props4.needCount;
      var _this$state2 = _this.state,
          tableWidth = _this$state2.tableWidth,
          isAutoWidth = _this$state2.isAutoWidth;
      var hasRecord = options.hasRecord,
          isSetWidth = options.isSetWidth,
          keyMapper = options.keyMapper,
          ref = options.ref,
          main = options.main;

      var hasFixedTable = _this.hasFixedGroup();
      /** 统计字段，每一次统计都是一个新对象 */


      var statistics = {
        _highlight: 'theme',
        id: 'statistics'
      };
      var style = Object.assign({}, {
        height: height,
        width: isAutoWidth ? tableWidth : _this.calcTableWidth(keyMapper)
      });
      return hasRecord ? _react["default"].createElement("div", {
        key: "tableBody",
        onScroll: !isAutoWidth && hasFixedTable ? _this.handleTableScroll : null,
        ref: ref,
        className: "uke-table-scroll",
        style: style
      }, _react["default"].createElement("table", {
        className: "table nomargin table-body",
        ref: main ? _this.saveTableBody : null
      }, _react["default"].createElement("tbody", null, _this.renderRow(_objectSpread({}, options, {
        needCount: needCount,

        /** 在渲染 body 的时候会做数据统计，以 statistics 对象做记录 */
        statistics: statistics
      }))), _react["default"].createElement("tfoot", null, needCount && _this.renderRow(_objectSpread({}, options, {
        records: [statistics],
        needAction: false,
        filter: moneyFormat
      }))))) : main && _react["default"].createElement("span", {
        className: "no-record-tip"
      }, _react["default"].createElement(_icon.Icon, {
        n: "noData"
      }), _react["default"].createElement("span", {
        className: "text"
      }, _this.gm('暂无记录')));
    });

    _defineProperty(_assertThisInitialized(_this), "renderTable", function (options, key) {
      var className = options.className,
          style = options.style;

      var tableHeader = _this.renderTableHeader(options);

      var tableBody = _this.renderTableBody(options);

      return _react["default"].createElement("div", {
        key: key,
        style: style,
        className: "uke-table-scroll-container ".concat(className || '')
      }, tableHeader, tableBody);
    });

    _defineProperty(_assertThisInitialized(_this), "saveDOM", function (ref) {
      return function (e) {
        _this[ref] = e;
      };
    });

    _defineProperty(_assertThisInitialized(_this), "saveLeftFixed", function (e) {
      _this.leftFixedTable = e;
    });

    _defineProperty(_assertThisInitialized(_this), "saveRightFixed", function (e) {
      _this.rightFixedTable = e;
    });

    _defineProperty(_assertThisInitialized(_this), "saveMainTable", function (e) {
      _this.mainTable = e;
    });

    _defineProperty(_assertThisInitialized(_this), "renderFixedGroup", function (options) {
      var hasLeft = _this.fixedLeftGroup.length > 0;
      var hasRight = _this.fixedRightGroup.length > 0;

      var leftFixedTable = hasLeft && _this.renderTable(_objectSpread({}, options, {
        className: 'table-fixed left',
        keyMapper: _this.fixedLeftGroup,
        ref: _this.saveLeftFixed
      }), 'table-fixed-left');

      var rightFixedTable = hasRight && _this.renderTable(_objectSpread({}, options, {
        className: 'table-fixed right',
        ref: _this.saveRightFixed,
        keyMapper: _this.fixedRightGroup
      }), 'table-fixed-right');

      return !hasLeft && !hasRight ? null : [leftFixedTable, rightFixedTable];
    });

    _defineProperty(_assertThisInitialized(_this), "renderMainTable", function (options) {
      return _this.renderTable(_objectSpread({}, options, {
        main: true,
        ref: _this.saveMainTable,
        isSetWidth: true
      }), 'mainTable');
    });

    _defineProperty(_assertThisInitialized(_this), "handleTableScroll", function (e) {
      var target = e.target;
      if (e.currentTarget !== target) return;
      var currScrollOffset = target.scrollTop;
      if (currScrollOffset === _this.lastScrollTop) return;

      var _assertThisInitialize = _assertThisInitialized(_this),
          rightFixedTable = _assertThisInitialize.rightFixedTable,
          leftFixedTable = _assertThisInitialize.leftFixedTable,
          mainTable = _assertThisInitialize.mainTable;

      if (target !== leftFixedTable && leftFixedTable) {
        leftFixedTable.scrollTop = currScrollOffset;
      }

      if (target !== rightFixedTable && rightFixedTable) {
        rightFixedTable.scrollTop = currScrollOffset;
      }

      if (target !== mainTable && mainTable) {
        mainTable.scrollTop = currScrollOffset;
      }

      _this.lastScrollTop = currScrollOffset;
    });

    _defineProperty(_assertThisInitialized(_this), "handleScrollHor", function (e) {
      // this.calcScroll(e, 'scrollLeft');
      var target = e.target;
      if (e.currentTarget !== target) return;
      var scrollLeft = target.scrollLeft;
      if (scrollLeft === _this.lastScrollTop) return;
      var tableWidth = _this.state.tableWidth;
      var scrollLeftEndPoint = tableWidth - _this.tableContainerWidth;

      if (scrollLeft > 0) {
        target.classList.add(scrollLeftClass);
      } else {
        target.classList.remove(scrollLeftClass);
      }

      if (scrollLeft === scrollLeftEndPoint) {
        target.classList.add(scrollRightClass);
      } else {
        target.classList.remove(scrollRightClass);
      }

      _this.lastScrollLeft = scrollLeft;
    });

    _this.state = {
      headerWidthMapper: [],
      tableWidth: 'auto',
      sortField: '',
      sortOutsideField: '',
      isDescInner: false,
      isDescOutside: undefined,
      hoveringRow: null,
      checkedItems: {}
    };
    return _this;
  }

  _createClass(Table, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener('resize', this.resizeCalcSize); // this.calcSize();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this.resizeCalcSize);
      this.clearWatch();
    } // componentDidUpdate() {
    //   // this.calcSize();
    // }

    /**
     * 清除所有已选择的内容
     *
     * @memberof TableBody
     * @public
     */

  }, {
    key: "toggleAllItems",
    value: function toggleAllItems(allCheck) {
      var checkedItems = this.state.checkedItems;

      var nextCheckedItems = _objectSpread({}, checkedItems);

      if (!allCheck) {
        nextCheckedItems = {};
      } else {
        this.props.records.forEach(function (item, idx) {
          return nextCheckedItems[idx] = item;
        });
      }

      this.selectItems(nextCheckedItems);
    }
  }, {
    key: "selectItems",
    value: function selectItems(nextState, idx) {
      var onCheck = this.props.onCheck;
      this.checkedItems = nextState;
      this.setState({
        checkedItems: nextState
      });
      (0, _basicHelper.Call)(onCheck, nextState, idx);
    }
  }, {
    key: "calcSize",
    value: function calcSize(firstRowNodes) {
      if (!this.tableContainer || !firstRowNodes) return; // if(Object.keys(this.firstTDDOMs).length === 0) return;

      var cellsLen = firstRowNodes.length;
      var headerWidthMapper = this.state.headerWidthMapper;
      var nextHeaderWidthMapper = [];
      var nextContainerWidth = 0;

      for (var i = 0; i < cellsLen; i++) {
        var currCell = firstRowNodes[i];
        var currCellWidth = currCell.offsetWidth || headerWidthMapper[i];
        if (!currCellWidth) continue;
        nextHeaderWidthMapper[i] = currCellWidth;
        nextContainerWidth += nextHeaderWidthMapper[i];
      } // const keyMapper = this.getKeyMapper();
      // keyMapper.forEach((_, tdIdx) => {
      //   let currTDDOM = this.firstTDDOMs[tdIdx];
      //   let currWidth = currTDDOM.offsetWidth || headerWidthMapper[tdIdx];
      //   nextHeaderWidthMapper[tdIdx] = currWidth;
      //   nextContainerWidth += nextHeaderWidthMapper[tdIdx];
      // });


      if (nextHeaderWidthMapper.join(',') !== headerWidthMapper.join(',')) {
        var tableContainerWidth = this.tableContainer.offsetWidth;
        var isTableMoreContainer = nextContainerWidth > tableContainerWidth;
        var isAutoWidth = !isTableMoreContainer;
        this.setTableContainerClass(isAutoWidth);
        this.setState({
          headerWidthMapper: nextHeaderWidthMapper,
          // tableWidth: nextContainerWidth
          tableWidth: isTableMoreContainer ? nextContainerWidth : 'auto',
          isAutoWidth: !isTableMoreContainer
        });
      }
    }
  }, {
    key: "ignoreFilter",
    value: function ignoreFilter(str) {
      return [].concat(_toConsumableArray(this.sortIgnores), _toConsumableArray(this.props.sortIgnores)).indexOf(str) !== -1;
    }
  }, {
    key: "recordsOrderFilter",
    value: function recordsOrderFilter() {
      var _this$state3 = this.state,
          sortField = _this$state3.sortField,
          isDescInner = _this$state3.isDescInner;
      var records = this.props.records;
      if (!sortField) return records;

      var result = _toConsumableArray(records);

      result.sort(function (itemPrev, itemNext) {
        var sortTargetPrev = itemPrev[sortField];
        var sortTargetNext = itemNext[sortField];
        var res;

        switch (true) {
          case typeof sortTargetPrev == 'string':
            res = sortTargetPrev.localeCompare(sortTargetNext);
            break;

          case typeof sortTargetPrev == 'number':
            res = sortTargetPrev - sortTargetNext;
            break;
        }

        return isDescInner ? res : res * -1;
      });
      return result;
    }
  }, {
    key: "orderRecord",
    value: function orderRecord(orderKey) {
      var _this2 = this;

      if (this.ignoreFilter(orderKey)) return;
      this.setState(function (_ref) {
        var isDescInner = _ref.isDescInner,
            sortField = _ref.sortField;
        var _isDesc = isDescInner;

        if (sortField == orderKey) {
          _this2.sameSortTime += 1;

          if (_this2.sameSortTime === 2) {
            _isDesc = false;
            orderKey = '';
            _this2.sameSortTime = 0;
          } else {
            _isDesc = !_isDesc;
          }
        } else {
          _this2.sameSortTime = 0;
          _isDesc = false;
        }

        return {
          sortField: orderKey,
          isDescInner: _isDesc
        };
      });
    }
  }, {
    key: "isHidden",
    value: function isHidden(el) {
      return el && el.offsetParent === null;
    }
  }, {
    key: "renderCell",
    value: function renderCell(options) {
      var _this3 = this;

      var record = options.record,
          parentIdx = options.parentIdx,
          needCount = options.needCount,
          rowKey = options.rowKey,
          keyMapper = options.keyMapper,
          _options$needAction = options.needAction,
          needAction = _options$needAction === void 0 ? true : _options$needAction,
          filter = options.filter,
          statistics = options.statistics,
          main = options.main;
      if (!record) return; // const keyMapper = this.getKeyMapper();

      var keyMapperLen = keyMapper.length;
      var result = [];

      var _loop = function _loop(_idx) {
        var mapperItem = keyMapper[_idx];
        if (!mapperItem) return "continue";
        var key = mapperItem.key,
            className = mapperItem.className,
            _mapperItem$count = mapperItem.count,
            count = _mapperItem$count === void 0 ? true : _mapperItem$count;
        var currText = record[key];
        var needFilter = needAction || _this3.excludeFilterField.indexOf(key) === -1;
        /** 优先使用 options 传入的 filter 作为过滤器，其次为 this.mapperFilter */

        var filterRes = '-';

        if ((0, _basicHelper.IsFunc)(filter)) {
          filterRes = filter(currText);
        } else if (needFilter) {
          filterRes = _this3.mapperFilter(mapperItem, record, parentIdx);
        } // filterRes = needFilter ? IsFunc(filter) ? filter(currText) : this.mapperFilter(mapperItem, record, parentIdx) : '-';


        if (needCount) {
          /** 
           * 进入统计流程
           * 1. 判断原始值 currText 是否为数字
           * 2. 判断当前记录是否需要纳入统计 count
           */
          var isNum = !isNaN(+currText) || isStringNumRegex.test(currText);

          if (count && isNum) {
            // 这里是处理累加的逻辑，如果为字符串的字段，则先把逗号去除
            var isNumbTxt = +(currText + '').replace(',', '');

            if (!isNaN(isNumbTxt) && typeof isNumbTxt === 'number') {
              statistics[key] = (statistics[key] || 0) + isNumbTxt;
            }
          }
        }

        var tdKey = "".concat(rowKey, "_").concat(key); // let style = {};

        var _className = "".concat(tdSpecClassMapper[key] || '', " ").concat(className || '');

        var tdDOM = _react["default"].createElement("td", {
          ref: function ref(e) {
            return _this3.saveCell(_idx, main, rowKey)(e);
          } // style={mapperItem.w ? {width: mapperItem.w, whiteSpace: 'pre-wrap'} : style}
          ,
          className: _className,
          key: tdKey
        }, filterRes);

        result.push(tdDOM);
      };

      for (var _idx = 0; _idx < keyMapperLen; _idx++) {
        var _ret = _loop(_idx);

        if (_ret === "continue") continue;
      }

      return result;
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var _this$props5 = this.props,
          whenCheckAction = _this$props5.whenCheckAction,
          needCheck = _this$props5.needCheck;
      var _this$state4 = this.state,
          checkedItems = _this$state4.checkedItems,
          tableWidth = _this$state4.tableWidth,
          isAutoWidth = _this$state4.isAutoWidth;
      var records = this.recordsOrderFilter();
      var hasRecord = records.length > 0;
      var keyMapper = this.getKeyMapper();
      var checkedItemLen = Object.keys(checkedItems).length;
      var hasChecked = checkedItemLen > 0;
      var isAllCheck = hasRecord && checkedItemLen == records.length;
      var renderTableConfig = {
        hasRecord: hasRecord,
        keyMapper: keyMapper,
        records: records,
        isAllCheck: isAllCheck
      };
      var mainTable = this.renderMainTable(renderTableConfig); // const fixedGroup = this.renderFixedGroup(mainTable);

      var fixedGroup = this.renderFixedGroup(renderTableConfig);

      var extendDOM = needCheck && whenCheckAction && _react["default"].createElement("div", {
        className: "checked-actions" + (hasChecked ? ' show' : '')
      }, _react["default"].createElement("span", {
        className: "mr10"
      }, _react["default"].createElement("span", {
        className: "mr10"
      }, this.gm('已选'), " ", _react["default"].createElement("span", {
        className: "t_theme"
      }, checkedItemLen), " ", this.gm('项')), _react["default"].createElement("span", {
        className: "link",
        onClick: this.clearCheckeds
      }, this.gm('清除'))), (0, _basicHelper.IsFunc)(whenCheckAction) ? whenCheckAction({
        checkedItems: checkedItems,
        clearCheckeds: this.clearCheckeds
      }) : whenCheckAction);

      return _react["default"].createElement("div", {
        className: "uke-table",
        onMouseLeave: function onMouseLeave(e) {
          return _this4.handleHoverRow(null);
        }
      }, extendDOM, _react["default"].createElement("div", {
        // className={"table-render" + (isAutoWidth ? ' auto-width' : '')}
        className: "table-render",
        onScroll: !isAutoWidth && fixedGroup ? this.handleScrollHor : undefined // className={"table-render" + (hasChecked ? ' has-checked' : '')}
        ,
        ref: this.saveContainer
      }, mainTable, fixedGroup));
    }
  }]);

  return Table;
}(_mapperFilter["default"]);

exports["default"] = Table;

_defineProperty(Table, "propTypes", {
  /** 对应表格中的每一列（column）的 record 的 key 的映射的集合。表格渲染的核心配置，RecordRender 的机制是根据 keyMapper 配置遍历 records 中的每一个具体字段，找到对应的过滤器，实现通用的表格处理 */
  keyMapper: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    /** column 对应的 key */
    key: _propTypes["default"].string.isRequired,

    /** 处理数据源对应的字段的过滤器函数，可以返回任意类型 */
    filter: _propTypes["default"].func,

    /** 内置 filter，是否日期+时分秒 */
    datetime: _propTypes["default"].any,

    /** 内置 filter，是否日期 */
    date: _propTypes["default"].any,

    /** 内置 filter，是否格式化成金钱 */
    money: _propTypes["default"].any,

    /** 响应该字段的 sort 事件, 如果返回 true，则为正序，false 为倒叙 */
    onSort: _propTypes["default"].func,

    /** 单个格子的宽度 */
    // w: PropTypes.any,

    /** 内置 filter，是否以绝对值格式化成金钱 */
    abvMoney: _propTypes["default"].any,

    /** 内置 filter，是否以绝对值格式化成金钱 */
    count: _propTypes["default"].any,

    /** 内置 filter，字段映射 mapper */
    namesMapper: _propTypes["default"].shape({
      key: _propTypes["default"].string
    })
  })).isRequired,

  /** 表格的数据源，用于每一行（row）的数据填充 */
  records: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,

  /** 用于获取 row key */
  rowKey: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]),

  /** 是否需要统计 */
  needCount: _propTypes["default"].bool,

  /** 是否固定头部 */
  fixHead: _propTypes["default"].bool,

  /** 一些表头的选择器 onChange 的回调, 回调参数 [emitVal, selectorConfig] */
  onChange: _propTypes["default"].func,

  /** 是否需要内部排序 */
  needInnerSort: _propTypes["default"].bool,

  /** 是否多选 */
  needCheck: _propTypes["default"].bool,

  /** 右边固定表格的列的集合 */
  fixedRightKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),

  /** 左边固定表格的列的集合 */
  fixedLeftKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),

  /** checkbox 的宽度 */
  checkWidth: _propTypes["default"].number,

  /** 监听器的 timer */
  watcherTimer: _propTypes["default"].number,

  /** 表格的高度，用于固定表头 */
  height: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),

  /** 无视的排序字段 */
  sortIgnores: _propTypes["default"].arrayOf(_propTypes["default"].string),

  /** 当选中时往表格顶部嵌入的内容 */
  whenCheckAction: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].any])
});

_defineProperty(Table, "defaultProps", {
  sortIgnores: [],
  fixedLeftKeys: [],
  fixedRightKeys: [],
  needCheck: false,
  height: 'auto',
  needInnerSort: false,
  watcherTimer: 1000,
  fixHead: true,
  checkWidth: 30,
  needCount: false
});