choerodon-ui/es/table/Table.js

An enterprise-class UI design language and React-based implementation

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _typeof from "@babel/runtime/helpers/typeof";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["onResize", "onDrag", "width"],
    _excluded2 = ["autoHeight", "bodyStyle", "showHeader", "empty", "scroll", "resizable"];
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import omit from 'lodash/omit';
import noop from 'lodash/noop';
import scrollIntoView from 'scroll-into-view-if-needed';
import smoothScrollIntoView from 'smooth-scroll-into-view-if-needed';
import isEqual from 'lodash/isEqual';
import classes from 'component-classes';
import Pagination from '../pagination';
import Icon from '../icon';
import Spin from '../spin';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale-provider/default';
import warning from '../_util/warning';
import FilterDropdown from './filterDropdown';
import createStore from './createStore';
import SelectionBox from './SelectionBox';
import SelectionCheckboxAll from './SelectionCheckboxAll';
import Column from './Column';
import Button from '../button';
import ColumnGroup from './ColumnGroup';
import createBodyRow from './createBodyRow';
import { findColumnByFilterValue, flatArray, flatFilter, getColumnKey as _getColumnKey, getHeight, getLeafColumns, isNumber, normalizeColumns, removeHiddenColumns, TableRowContext, treeMap } from './util';
import FilterBar from './FilterBar';
import { VALUE_OR } from './FilterSelect';
import RcTable from '../rc-components/table';
import { Size } from '../_util/enum';
import Resizable from './Resizable';
import ColumnFilterMenu from './ColumnFilterMenu';
import ConfigContext from '../config-provider/ConfigContext';

var ResizeableTitle = function ResizeableTitle(props) {
  var onResize = props.onResize,
      onDrag = props.onDrag,
      width = props.width,
      restProps = _objectWithoutProperties(props, _excluded);

  if (!width) {
    return /*#__PURE__*/React.createElement("th", _extends({}, restProps));
  }

  return /*#__PURE__*/React.createElement(Resizable, {
    onResize: onResize,
    onDrag: onDrag
  }, /*#__PURE__*/React.createElement("th", _extends({}, restProps)));
};

function findBodyDom(dom, reg) {
  if (dom.childElementCount > 0) {
    for (var i = 0; i < dom.childElementCount; i += 1) {
      if (reg.test(dom.children[i].className)) {
        return dom.children[i];
      }

      if (dom.childElementCount > 0) {
        var childFound = findBodyDom(dom.children[i], reg);

        if (childFound !== null) {
          return childFound;
        }
      }
    }
  }

  return null;
}

function stopPropagation(e) {
  e.stopPropagation();

  if (e.nativeEvent.stopImmediatePropagation) {
    e.nativeEvent.stopImmediatePropagation();
  }
}

function getRowSelection(props) {
  return props.rowSelection || {};
}

function defaultRenderSorter(props) {
  var column = props.column,
      isSortColumn = props.isSortColumn,
      sortOrder = props.sortOrder,
      prefixCls = props.prefixCls,
      changeOrder = props.changeOrder;
  var isAscend = isSortColumn && sortOrder === 'ascend';
  column.className = classNames(column.className, _defineProperty({}, "".concat(prefixCls, "-sort-").concat(sortOrder), isSortColumn));
  var onHeaderCell = column.onHeaderCell;

  column.onHeaderCell = function (col) {
    var customProps = onHeaderCell && onHeaderCell(col) || {};
    var _onClick = customProps.onClick;
    return _objectSpread(_objectSpread({}, customProps), {}, {
      onClick: function onClick(e) {
        if (!e.isDefaultPrevented()) {
          if (typeof _onClick === 'function') {
            _onClick(e);
          }

          if (!e.isDefaultPrevented()) {
            changeOrder(isAscend ? 'descend' : 'ascend');
          }
        }
      }
    });
  };

  return /*#__PURE__*/React.createElement(Icon, {
    type: "arrow_upward",
    className: "".concat(prefixCls, "-sort-icon")
  });
}

var defaultPagination = {
  onChange: noop,
  onShowSizeChange: noop
};
/**
 * Avoid creating new object, so that parent component's shouldComponentUpdate
 * can works appropriately。
 */

var emptyObject = {};

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

  var _super = _createSuper(Table);

  function Table(props) {
    var _this;

    _classCallCheck(this, Table);

    _this = _super.call(this, props);

    _this.setElementRef = function (node) {
      if (node && node.tableContent) {
        _this.element = node.tableContent;
      }
    };

    _this.saveRef = function (ref) {
      _this.refTable = ref;
      _this.wrapper = ref;
    };

    _this.getCheckboxPropsByItem = function (item, index) {
      var rowSelection = getRowSelection(_this.props);

      if (!rowSelection.getCheckboxProps) {
        return {};
      }

      var key = _this.getRecordKey(item, index); // Cache checkboxProps


      if (!_this.CheckboxPropsCache[key]) {
        _this.CheckboxPropsCache[key] = rowSelection.getCheckboxProps(item);
      }

      return _this.CheckboxPropsCache[key];
    };

    _this.onRow = function (record, index) {
      var onRow = _this.props.onRow;

      var prefixCls = _this.getPrefixCls();

      var custom = onRow ? onRow(record, index) : {};
      return _objectSpread(_objectSpread({}, custom), {}, {
        prefixCls: prefixCls,
        store: _this.store,
        rowKey: _this.getRecordKey(record, index)
      });
    };

    _this.handleFilter = function (column, nextFilters) {
      var stateFilters = _this.state.filters;

      var filters = _objectSpread(_objectSpread({}, stateFilters), {}, _defineProperty({}, _this.getColumnKey(column), nextFilters)); // Remove filters not in current columns


      var currentColumnKeys = [];
      treeMap(_this.columns, function (c) {
        if (!c.children) {
          currentColumnKeys.push(_this.getColumnKey(c));
        }
      });
      Object.keys(filters).forEach(function (columnKey) {
        if (currentColumnKeys.indexOf(columnKey) < 0) {
          delete filters[columnKey];
        }
      });

      _this.setNewFilterState({
        filters: filters
      });
    };

    _this.handleFilterSelectClear = function () {
      var filters = _this.state.filters;
      Object.keys(filters).map(function (key) {
        return filters[key] = [];
      });

      _this.setNewFilterState({
        barFilters: [],
        filters: filters
      });
    };

    _this.handleFilterSelectChange = function (barFilters) {
      var onFilterSelectChange = _this.props.onFilterSelectChange;

      if (onFilterSelectChange) {
        onFilterSelectChange(barFilters);
      }

      _this.setNewFilterState({
        barFilters: barFilters
      });
    };

    _this.handleColumnFilterChange = function (e) {
      var onColumnFilterChange = _this.props.onColumnFilterChange;

      if (onColumnFilterChange) {
        onColumnFilterChange(e);
      }

      _this.forceUpdate();
    };

    _this.handleSelect = function (record, rowIndex, e) {
      var checked = e.target.checked;
      var nativeEvent = e.nativeEvent;
      var defaultSelection = _this.store.getState().selectionDirty ? [] : _this.getDefaultSelection();

      var selectedRowKeys = _this.store.getState().selectedRowKeys.concat(defaultSelection);

      var key = _this.getRecordKey(record, rowIndex);

      if (checked) {
        selectedRowKeys.push(_this.getRecordKey(record, rowIndex));
      } else {
        selectedRowKeys = selectedRowKeys.filter(function (i) {
          return key !== i;
        });
      }

      _this.store.setState({
        selectionDirty: true
      });

      _this.setSelectedRowKeys(selectedRowKeys, {
        selectWay: 'onSelect',
        record: record,
        checked: checked,
        changeRowKeys: undefined,
        nativeEvent: nativeEvent
      }, _this.getSelectedRows({
        e: e,
        record: record,
        rowIndex: rowIndex
      }));
    };

    _this.handleRadioSelect = function (record, rowIndex, e) {
      var checked = e.target.checked;
      var nativeEvent = e.nativeEvent;
      var defaultSelection = _this.store.getState().selectionDirty ? [] : _this.getDefaultSelection();

      var selectedRowKeys = _this.store.getState().selectedRowKeys.concat(defaultSelection);

      var key = _this.getRecordKey(record, rowIndex);

      selectedRowKeys = [key];

      _this.store.setState({
        selectionDirty: true
      });

      _this.setSelectedRowKeys(selectedRowKeys, {
        selectWay: 'onSelect',
        record: record,
        checked: checked,
        changeRowKeys: undefined,
        nativeEvent: nativeEvent
      }, _this.getSelectedRows({
        record: record,
        rowIndex: rowIndex
      }));
    };

    _this.handleSelectRow = function (selectionKey, index, onSelectFunc) {
      var data = _this.getFlatCurrentPageData();

      var defaultSelection = _this.store.getState().selectionDirty ? [] : _this.getDefaultSelection();

      var selectedRowKeys = _this.store.getState().selectedRowKeys.concat(defaultSelection);

      var changeableRowKeys = data.filter(function (item, i) {
        return !_this.getCheckboxPropsByItem(item, i).disabled;
      }).map(function (item, i) {
        return _this.getRecordKey(item, i);
      });
      var changeRowKeys = [];
      var selectWay = 'onSelectAll';
      var checked; // handle default selection

      switch (selectionKey) {
        case 'all':
          changeableRowKeys.forEach(function (key) {
            if (selectedRowKeys.indexOf(key) < 0) {
              selectedRowKeys.push(key);
              changeRowKeys.push(key);
            }
          });
          selectWay = 'onSelectAll';
          checked = true;
          break;

        case 'removeAll':
          changeableRowKeys.forEach(function (key) {
            if (selectedRowKeys.indexOf(key) >= 0) {
              selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1);
              changeRowKeys.push(key);
            }
          });
          selectWay = 'onSelectAll';
          checked = false;
          break;

        case 'invert':
          changeableRowKeys.forEach(function (key) {
            if (selectedRowKeys.indexOf(key) < 0) {
              selectedRowKeys.push(key);
            } else {
              selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1);
            }

            changeRowKeys.push(key);
            selectWay = 'onSelectInvert';
          });
          break;

        default:
          break;
      }

      _this.store.setState({
        selectionDirty: true
      }); // when select custom selection, callback selections[n].onSelect


      var rowSelection = _this.props.rowSelection;
      var customSelectionStartIndex = 2;

      if (rowSelection && rowSelection.hideDefaultSelections) {
        customSelectionStartIndex = 0;
      }

      if (index >= customSelectionStartIndex && typeof onSelectFunc === 'function') {
        return onSelectFunc(changeableRowKeys);
      }

      _this.setSelectedRowKeys(selectedRowKeys, {
        selectWay: selectWay,
        checked: checked,
        changeRowKeys: changeRowKeys
      }, _this.getSelectedRows({
        selectionKey: selectionKey
      }));
    };

    _this.handlePageChange = function (current) {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          autoScroll = _this$props.autoScroll,
          propsPagination = _this$props.pagination;
      var statePagination = _this.state.pagination;

      var pagination = _objectSpread({}, statePagination);

      if (autoScroll) {
        var _assertThisInitialize = _assertThisInitialized(_this),
            refTable = _assertThisInitialize.refTable;

        setTimeout(function () {
          var scrollIntoViewSmoothly = 'scrollBehavior' in document.documentElement.style ? scrollIntoView : smoothScrollIntoView;

          if (refTable) {
            if (refTable.clientHeight > document.body.clientHeight) {
              scrollIntoViewSmoothly(refTable, {
                block: 'start',
                behavior: 'smooth',
                scrollMode: 'if-needed'
              });
            } else if ('scrollIntoViewIfNeeded' in refTable) {
              refTable.scrollIntoViewIfNeeded({
                block: 'start'
              });
            } else {
              scrollIntoViewSmoothly(refTable, {
                block: 'start',
                behavior: 'smooth',
                scrollMode: 'if-needed'
              });
            }
          }
        }, 10);

        if (refTable) {
          var dom = findBodyDom(refTable, new RegExp("".concat(_this.getPrefixCls(), "-body")));

          if (dom !== null && dom.scroll) {
            dom.scrollTop = 0;
          }
        }
      }

      if (current) {
        pagination.current = current;
      } else {
        pagination.current = pagination.current || 1;
      }

      for (var _len = arguments.length, otherArguments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        otherArguments[_key - 1] = arguments[_key];
      }

      pagination.onChange.apply(pagination, [pagination.current].concat(otherArguments));
      var newState = {
        pagination: pagination
      }; // Controlled current prop will not respond user interaction

      if (propsPagination && _typeof(propsPagination) === 'object' && 'current' in propsPagination) {
        newState.pagination = _objectSpread(_objectSpread({}, pagination), {}, {
          current: statePagination.current
        });
      }

      _this.setState(newState);

      _this.store.setState({
        selectionDirty: false
      });

      if (onChange) {
        onChange.apply(void 0, _toConsumableArray(_this.prepareParamsArguments(_objectSpread(_objectSpread({}, _this.state), {}, {
          pagination: pagination
        }))));
      }
    };

    _this.renderSelectionBox = function (type) {
      return function (_, record, index) {
        var rowIndex = _this.getRecordKey(record, index); // 从 1 开始


        var props = _this.getCheckboxPropsByItem(record, index);

        var handleChange = function handleChange(e) {
          if (type === 'radio') {
            _this.handleRadioSelect(record, rowIndex, e);
          } else {
            _this.handleSelect(record, rowIndex, e);
          }
        };

        var _this$props2 = _this.props,
            radioPrefixCls = _this$props2.radioPrefixCls,
            checkboxPrefixCls = _this$props2.checkboxPrefixCls;
        return /*#__PURE__*/React.createElement("span", {
          onClick: stopPropagation
        }, /*#__PURE__*/React.createElement(SelectionBox, _extends({
          radioPrefixCls: radioPrefixCls,
          checkboxPrefixCls: checkboxPrefixCls,
          type: type,
          store: _this.store,
          rowIndex: rowIndex,
          onChange: handleChange,
          defaultSelection: _this.getDefaultSelection()
        }, props)));
      };
    };

    _this.getRecordKey = function (record, index) {
      var rowKey = _this.props.rowKey;
      var recordKey = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
      warning(recordKey !== undefined, 'Each record in dataSource of table should have a unique `key` prop, or set `rowKey` to an unique primary key');
      return recordKey === undefined ? index : recordKey;
    };

    _this.getPopupContainer = function () {
      return findDOMNode(_assertThisInitialized(_this));
    }; // 根据 customColumns 返回新的 columns


    _this.renderCustomColumns = function (columns) {
      var customColumns = _this.getCustomColumns() || [];

      if (customColumns.length === 0) {
        return columns.map(function (column, colIndex) {
          return _objectSpread(_objectSpread({}, column), {}, {
            orderSeq: colIndex
          });
        });
      }

      var newColumns = [];

      var _loop = function _loop(colIndex) {
        var column = columns[colIndex];
        var customColumn = customColumns.find(function (fCustomColumn) {
          return fCustomColumn.fieldKey === _this.getColumnKey(column);
        });

        if (!customColumn) {
          // 该字段没有自定义, 将排序设置为默认的顺序, 继续
          newColumns.push(_objectSpread(_objectSpread({}, column), {}, {
            orderSeq: colIndex
          }));
          return "continue";
        }

        if (customColumn.hidden === 1) {
          // 该字段隐藏了 不需要显示, 继续
          return "continue";
        }

        var newColumn = _objectSpread({}, column);

        if (customColumn.fixedLeft === 1) {
          newColumn.fixed = 'left';
        } // else if (customColumn.fixedRight) {
        //   newColumn.fixed = 'right';
        // }


        newColumn.orderSeq = customColumn.orderSeq === undefined ? colIndex : customColumn.orderSeq;
        newColumns.push(newColumn);
      };

      for (var colIndex = 0; colIndex < columns.length; colIndex++) {
        var _ret = _loop(colIndex);

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

      var noFixedColumns = [];
      var fixedLeftColumns = [];
      var fixedRightColumns = [];
      var actionColumns = newColumns.length === 0 ? [] : [newColumns[newColumns.length - 1]];

      for (var _colIndex = 0; _colIndex < newColumns.length - 1; _colIndex += 1) {
        var column = newColumns[_colIndex];

        if (column.fixed) {
          if (column.fixed === 'left') {
            fixedLeftColumns.push(column);
          } else if (column.fixed === 'right') {
            fixedRightColumns.push(column);
          } else {
            noFixedColumns.push(column);
          }
        } else {
          noFixedColumns.push(column);
        }
      }

      fixedLeftColumns.sort(function (a, b) {
        return a.orderSeq - b.orderSeq;
      });
      noFixedColumns.sort(function (a, b) {
        return a.orderSeq - b.orderSeq;
      });
      return [].concat(fixedLeftColumns, noFixedColumns, fixedRightColumns, actionColumns);
    };
    /**
     * 用户个性化 Table 编辑
     */


    _this.handleCustomColumnFilter = function () {
      var onCustomColumnFilter = _this.props.onCustomColumnFilter;

      var _this$store$getState = _this.store.getState(),
          _this$store$getState$ = _this$store$getState.customColumns,
          customColumns = _this$store$getState$ === void 0 ? [] : _this$store$getState$;

      _this.setCustomState(customColumns);

      if (onCustomColumnFilter) {
        onCustomColumnFilter(customColumns);
      }
    };

    _this.handleShowSizeChange = function (current, pageSize) {
      var pagination = _this.state.pagination;
      pagination.onShowSizeChange(current, pageSize);

      var nextPagination = _objectSpread(_objectSpread({}, pagination), {}, {
        pageSize: pageSize,
        current: current
      });

      _this.setState({
        pagination: nextPagination
      });

      var onChange = _this.props.onChange;

      if (onChange) {
        onChange.apply(void 0, _toConsumableArray(_this.prepareParamsArguments(_objectSpread(_objectSpread({}, _this.state), {}, {
          pagination: nextPagination
        }))));
      }
    };

    _this.handleResize = function (col) {
      return function (_, dragCallbackData) {
        var columnAdjust = _this.state.columnAdjust;

        var _this$store$getState2 = _this.store.getState(),
            scroll = _this$store$getState2.scroll;

        var index = -1;

        for (var i = 0; i < _this.columns.length; i++) {
          if (_this.columns[i].key === col.key || _this.columns[i].dataIndex === col.dataIndex) {
            index = i;
          }
        }

        var width = _this.columns[index].width + dragCallbackData.x;

        if (index !== -1) {
          var key = _this.columns[index].dataIndex;
          /**
           * 使用以前存储的拖动的宽度值
           */

          if (columnAdjust && key && columnAdjust[key] && typeof columnAdjust[key] === 'number' && columnAdjust[key] >= 50) {
            width = columnAdjust[key] + dragCallbackData.x;
          }

          if (width <= 50) {
            width = 50;
          }

          if (key) {
            columnAdjust[key] = width;

            if (scroll && scroll.x) {
              _this.store.setState({
                scroll: _objectSpread(_objectSpread({}, scroll), {}, {
                  x: scroll.x + dragCallbackData.x
                })
              });
            }
          }

          _this.setState({
            columnAdjust: columnAdjust
          });
        }
      };
    };

    _this.getContentHeight = function () {
      var _assertThisInitialize2 = _assertThisInitialized(_this),
          refTable = _assertThisInitialize2.refTable,
          element = _assertThisInitialize2.element,
          autoHeight = _assertThisInitialize2.props.autoHeight;

      if (autoHeight && refTable && refTable.parentNode) {
        var _refTable$parentNode$ = refTable.parentNode.getBoundingClientRect(),
            parentTop = _refTable$parentNode$.top,
            parentHeight = _refTable$parentNode$.height;

        var _element$getBoundingC = element.getBoundingClientRect(),
            tableTop = _element$getBoundingC.top;

        var diff = 80;

        if (autoHeight && autoHeight !== true && isNumber(autoHeight.diff)) {
          diff = autoHeight.diff || 80;
        }

        if (refTable) {
          return parentHeight - (tableTop - parentTop) - diff || 0;
        }
      }

      return 0;
    };

    _this.syncSize = function () {
      var _assertThisInitialize3 = _assertThisInitialized(_this),
          element = _assertThisInitialize3.element;

      if (element) {
        var prefixCls = _this.getPrefixCls();

        var height = _this.getContentHeight();

        if (element && isNumber(height)) {
          var tableTitle = element.querySelector(".".concat(prefixCls, "-title"));
          var tableHeader = element.querySelector(".".concat(prefixCls, "-thead"));
          var tableFooter = element.querySelector(".".concat(prefixCls, "-footer"));
          var tableFootWrap = element.querySelector(".".concat(prefixCls, "-foot"));

          if (tableTitle) {
            height -= getHeight(tableTitle);
          }

          if (tableHeader) {
            height -= getHeight(tableHeader);
          }

          if (tableFooter) {
            height -= getHeight(tableFooter);
          }

          if (tableFootWrap) {
            height -= getHeight(tableFootWrap);
          }

          return height;
        }
      }

      return 0;
    };

    _this.renderTable = function (contextLocale, loading) {
      var _classNames2;

      var _assertThisInitialize4 = _assertThisInitialized(_this),
          props = _assertThisInitialize4.props;

      var locale = _objectSpread(_objectSpread({}, contextLocale), props.locale);

      var autoHeight = props.autoHeight,
          tableBodyStyle = props.bodyStyle,
          showHeader = props.showHeader,
          empty = props.empty,
          scroll = props.scroll,
          resizable = props.resizable,
          restProps = _objectWithoutProperties(props, _excluded2);

      var prefixCls = _this.getPrefixCls();

      var data = _this.getCurrentPageData();

      var expandIconAsCell = props.expandedRowRender && props.expandIconAsCell !== false;
      var tableAutoHeight = _this.state.tableAutoHeight;

      var tableScroll = _this.store.getState().scroll;

      var bodyStyle = _objectSpread({}, tableBodyStyle);

      if (tableAutoHeight && tableAutoHeight > 0 && autoHeight) {
        if (autoHeight !== true && autoHeight.type === "maxHeight"
        /* maxHeight */
        ) {
          bodyStyle = _objectSpread(_objectSpread({}, bodyStyle), {}, {
            maxHeight: tableAutoHeight
          });
        } else {
          bodyStyle = _objectSpread(_objectSpread({}, bodyStyle), {}, {
            height: tableAutoHeight
          });
        }
      }

      var classString = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-").concat(props.size), true), _defineProperty(_classNames2, "".concat(prefixCls, "-bordered"), props.bordered), _defineProperty(_classNames2, "".concat(prefixCls, "-empty"), !data.length), _defineProperty(_classNames2, "".concat(prefixCls, "-without-column-header"), !showHeader), _defineProperty(_classNames2, 'resizable-table', resizable), _classNames2));

      var columns = _this.columns.concat(); // 为了不更改原先的 columns


      columns = _this.renderColumnsDropdown(columns, locale); // 先执行: renderColumnsDropDown, 可能会更改 columns 的 fixed 或者 数量

      columns = _this.renderCustomColumns(columns); // 改变了 columns, 依赖于 columns 的 fixed: left;

      columns = _this.renderRowSelection(columns, locale);
      columns = columns.map(function (column, i) {
        var newColumn = _objectSpread({}, column);

        newColumn.key = _this.getColumnKey(newColumn, i);
        return newColumn;
      });
      columns = removeHiddenColumns(columns);
      var expandIconColumnIndex = 'expandIconColumnIndex' in restProps ? restProps.expandIconColumnIndex : columns[0] && columns[0].key === 'selection-column' ? 1 : 0;

      if (resizable) {
        var _this$state$columnAdj = _this.state.columnAdjust,
            columnAdjust = _this$state$columnAdj === void 0 ? {} : _this$state$columnAdj;
        var keys = Object.keys(columnAdjust);
        columns = columns.map(function (col) {
          var otherProp = {};
          var colWidth = col.width;

          if (typeof colWidth === 'number') {
            var key = col.dataIndex;

            if (key && keys.indexOf(key) !== -1) {
              otherProp.width = columnAdjust[key];
            }
          }

          return _objectSpread(_objectSpread(_objectSpread({}, col), otherProp), {}, {
            onCell: function onCell(record, _col) {
              var _mCol = _col || col;

              var cellProps = {};

              if (col.onCell) {
                cellProps = col.onCell(record) || {};
              }

              cellProps = _objectSpread(_objectSpread({}, cellProps), {}, {
                style: _objectSpread(_objectSpread({}, cellProps.style || {}), {}, {
                  maxWidth: _mCol.width,
                  minWidth: _mCol.width
                })
              });
              return cellProps;
            },
            onHeaderCell: function onHeaderCell(column) {
              var headerCellProps = {};

              if (col.onHeaderCell) {
                headerCellProps = col.onHeaderCell(column) || {};
              }

              headerCellProps = _objectSpread(_objectSpread({}, headerCellProps), {}, {
                width: column.width,
                style: _objectSpread(_objectSpread({}, headerCellProps.style || {}), {}, {
                  maxWidth: col.width,
                  minWidth: col.width
                }),
                onResize: _this.handleResize(col)
              });
              return headerCellProps;
            }
          });
        });
      }

      var omits = ['style', 'filterBarMultiple', 'filterBarPlaceholder', 'filterBar', 'dataSource', 'filters'];
      return /*#__PURE__*/React.createElement(RcTable, _extends({
        key: "table"
      }, omit(restProps, omits), {
        ref: _this.setElementRef,
        scroll: tableScroll || scroll,
        resizable: resizable,
        onRow: _this.onRow,
        components: _this.components,
        prefixCls: prefixCls,
        data: data,
        bodyStyle: bodyStyle,
        columns: columns,
        showHeader: showHeader,
        className: classString,
        expandIconColumnIndex: expandIconColumnIndex,
        expandIconAsCell: expandIconAsCell,
        emptyText: !loading.spinning && (empty || locale.emptyText)
      }));
    };

    _this.renderExportButton = function (props) {
      var dataParam = props.dataParam,
          method = props.method,
          action = props.action;

      _this.store.setState({
        exportStoreProps: props
      });

      if (!dataParam) {
        dataParam = {};
      }

      if (!method) {
        method = 'get';
      }

      if (!action) {
        action = '';
      }

      var exportProps = {
        dataParam: dataParam,
        method: method,
        action: action
      };

      var onClick = function onClick() {
        _this.handleExport(exportProps);
      };

      var buttonProps = _this.props.buttonProps;
      return /*#__PURE__*/React.createElement(Button, _extends({}, buttonProps, {
        type: "primary",
        disabled: _this.store.getState().exported,
        loading: _this.store.getState().exported
      }, props, {
        onClick: onClick
      }));
    };

    _this.handleExport = function (exportedProps) {
      var dataParam = exportedProps.dataParam,
          method = exportedProps.method,
          action = exportedProps.action;

      var _assertThisInitialize5 = _assertThisInitialized(_this),
          iframe = _assertThisInitialize5.iframe;

      var exportStoreProps = _this.store.getState().exportStoreProps;

      if (exportStoreProps && exportStoreProps.onClick && typeof exportStoreProps.onClick === 'function') {
        exportStoreProps.onClick(exportedProps);
      } else {
        if (!iframe) {
          iframe = document.createElement('iframe');
          iframe.id = '_export_window';
          iframe.name = '_export_window';
          iframe.style.cssText = 'position:absolute;left:-10000px;top:-10000px;width:1px;height:1px;display:none';
          document.body.appendChild(iframe);
        }

        _this.store.setState({
          exported: true
        });

        var form = document.createElement('form');
        form.target = '_export_window';
        form.method = method;
        form.action = action;
        var s = document.createElement('input');
        s.id = '_request_data';
        s.type = 'hidden';
        s.name = '_request_data';
        s.value = JSON.stringify(dataParam);
        form.appendChild(s);
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);

        _this.store.setState({
          exported: false
        });
      }
    };

    warning(!('columnsPageRange' in props || 'columnsPageSize' in props), '`columnsPageRange` and `columnsPageSize` are removed, please use fixed columns instead');
    _this.columns = props.columns || normalizeColumns(props.children);

    _this.createComponents(props.components);

    var customColumns = _this.getCustomColumns() || [];
    _this.state = _objectSpread(_objectSpread({}, _this.getDefaultSortOrder(_this.columns)), {}, {
      // 减少状态
      filters: _this.getFiltersFromColumns(),
      barFilters: props.filters || [],
      pagination: _this.getDefaultPagination(props),
      columnAdjust: {},
      customColumns: customColumns,
      tableAutoHeight: 0
    });
    _this.CheckboxPropsCache = {};
    _this.store = createStore({
      selectedRowKeys: getRowSelection(props).selectedRowKeys || [],
      selectionDirty: false,
      customColumns: customColumns,
      exported: false,
      exportStoreProps: undefined,
      scroll: props.scroll
    });
    return _this;
  }

  _createClass(Table, [{
    key: "getPrefixCls",
    value: function getPrefixCls() {
      var prefixCls = this.props.prefixCls;
      var context = this.context;
      return context.getPrefixCls('table', prefixCls);
    }
  }, {
    key: "getDefaultSelection",
    value: function getDefaultSelection() {
      var _this2 = this;

      var rowSelection = getRowSelection(this.props);

      if (!rowSelection.getCheckboxProps) {
        return [];
      }

      return this.getFlatData().filter(function (item, rowIndex) {
        return _this2.getCheckboxPropsByItem(item, rowIndex).defaultChecked;
      }).map(function (record, rowIndex) {
        return _this2.getRecordKey(record, rowIndex);
      });
    }
  }, {
    key: "getDefaultPagination",
    value: function getDefaultPagination(props) {
      var pagination = props.pagination || {};
      return this.hasPagination(props) ? _objectSpread(_objectSpread(_objectSpread({}, defaultPagination), {}, {
        size: props.size
      }, pagination), {}, {
        current: pagination.defaultCurrent || pagination.current || 1,
        pageSize: pagination.defaultPageSize || pagination.pageSize || 10
      }) : {};
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      this.columns = nextProps.columns || normalizeColumns(nextProps.children);

      if ('pagination' in nextProps || 'pagination' in this.props) {
        this.setState(function (previousState) {
          var newPagination = _objectSpread(_objectSpread(_objectSpread({}, defaultPagination), {}, {
            size: nextProps.size
          }, previousState.pagination), nextProps.pagination);

          newPagination.current = newPagination.current || 1;
          newPagination.pageSize = newPagination.pageSize || 10;
          return {
            pagination: nextProps.pagination !== false ? newPagination : emptyObject
          };
        });
      }

      var _this$props3 = this.props,
          dataSource = _this$props3.dataSource,
          scroll = _this$props3.scroll,
          components = _this$props3.components;
      var _this$state = this.state,
          filters = _this$state.filters,
          sortColumn = _this$state.sortColumn,
          sortOrder = _this$state.sortOrder;

      if (nextProps.rowSelection && 'selectedRowKeys' in nextProps.rowSelection) {
        this.store.setState({
          selectedRowKeys: nextProps.rowSelection.selectedRowKeys || []
        });
      }

      if ('dataSource' in nextProps && nextProps.dataSource !== dataSource) {
        this.store.setState({
          selectionDirty: false
        });
      }

      if ('scroll' in nextProps && !isEqual(nextProps.scroll, scroll)) {
        var tableScroll = this.store.getState().scroll;
        this.store.setState({
          scroll: _objectSpread(_objectSpread({}, tableScroll), nextProps.scroll)
        });
      } // https://github.com/ant-design/ant-design/issues/10133


      this.CheckboxPropsCache = {};

      if (this.getSortOrderColumns(this.columns).length > 0) {
        var sortState = this.getSortStateFromColumns(this.columns);

        if (sortState.sortColumn !== sortColumn || sortState.sortOrder !== sortOrder) {
          this.setState(sortState);
        }
      }

      var filteredValueColumns = this.getFilteredValueColumns(this.columns);

      if (filteredValueColumns.length > 0) {
        var filtersFromColumns = this.getFiltersFromColumns(this.columns);

        var newFilters = _objectSpread({}, filters);

        Object.keys(filtersFromColumns).forEach(function (key) {
          newFilters[key] = filtersFromColumns[key];
        });

        if (this.isFiltersChanged(newFilters)) {
          this.setState({
            filters: newFilters
          });
        }
      }

      if ('filters' in nextProps) {
        this.setState({
          barFilters: nextProps.filters || []
        });
      }

      this.createComponents(nextProps.components, components);
    }
  }, {
    key: "setSelectedRowKeys",
    value: function setSelectedRowKeys(selectedRowKeys, selectionInfo, selectedRows) {
      var _this3 = this;

      var selectWay = selectionInfo.selectWay,
          record = selectionInfo.record,
          checked = selectionInfo.checked,
          changeRowKeys = selectionInfo.changeRowKeys,
          nativeEvent = selectionInfo.nativeEvent;
      var rowSelection = getRowSelection(this.props);

      if (rowSelection && !('selectedRowKeys' in rowSelection)) {
        this.store.setState({
          selectedRowKeys: selectedRowKeys
        });
      }

      if (!rowSelection.onChange && !rowSelection[selectWay]) {
        return;
      }

      var data = this.getFlatData();
      selectedRows = selectedRows || data.filter(function (row, i) {
        return selectedRowKeys.indexOf(_this3.getRecordKey(row, i)) >= 0;
      });

      if (rowSelection.onChange) {
        rowSelection.onChange(selectedRowKeys, selectedRows);
      }

      if (selectWay === 'onSelect' && rowSelection.onSelect) {
        rowSelection.onSelect(record, checked, selectedRows, nativeEvent);
      } else if (selectWay === 'onSelectAll' && rowSelection.onSelectAll) {
        var changeRows = data.filter(function (row, i) {
          return changeRowKeys.indexOf(_this3.getRecordKey(row, i)) >= 0;
        });
        rowSelection.onSelectAll(checked, selectedRows, changeRows);
      } else if (selectWay === 'onSelectInvert' && rowSelection.onSelectInvert) {
        rowSelection.onSelectInvert(selectedRowKeys);
      }
    }
  }, {
    key: "hasPagination",
    value: function hasPagination(props) {
      return (props || this.props).pagination !== false;
    }
  }, {
    key: "isFiltersChanged",
    value: function isFiltersChanged(filters) {
      var filtersChanged = false;
      var stateFilters = this.state.filters;

      if (Object.keys(filters).length !== Object.keys(stateFilters).length) {
        filtersChanged = true;
      } else {
        Object.keys(filters).forEach(function (columnKey) {
          if (filters[columnKey] !== stateFilters[columnKey]) {
            filtersChanged = true;
          }
        });
      }

      return filtersChanged;
    }
  }, {
    key: "getSortOrderColumns",
    value: function getSortOrderColumns(columns) {
      return flatFilter(columns || this.columns || [], function (column) {
        return 'sortOrder' in column;
      });
    }
  }, {
    key: "getFilteredValueColumns",
    value: function getFilteredValueColumns(columns) {
      return flatFilter(columns || this.columns || [], function (column) {
        return typeof column.filteredValue !== 'undefined';
      });
    }
  }, {
    key: "getFiltersFromColumns",
    value: function getFiltersFromColumns(columns) {
      var _this4 = this;

      var filters = {};
      this.getFilteredValueColumns(columns).forEach(function (col) {
        var colKey = _this4.getColumnKey(col);

        filters[colKey] = col.filteredValue;
      });
      return filters;
    }
  }, {
    key: "getDefaultSortOrder",
    value: function getDefaultSortOrder(columns) {
      var definedSortState = this.getSortStateFromColumns(columns);
      var defaultSortedColumn = flatFilter(columns || [], function (column) {
        return column.defaultSortOrder != null;
      })[0];

      if (defaultSortedColumn && !definedSortState.sortColumn) {
        return {
          sortColumn: defaultSortedColumn,
          sortOrder: defaultSortedColumn.defaultSortOrder
        };
      }

      return definedSortState;
    }
  }, {
    key: "getSortStateFromColumns",
    value: function getSortStateFromColumns(columns) {
      // return first column which sortOrder is not falsy
      var sortedColumn = this.getSortOrderColumns(columns).find(function (col) {
        return col.sortOrder;
      });

      if (sortedColumn) {
        return {
          sortColumn: sortedColumn,
          sortOrder: sortedColumn.sortOrder
        };
      }

      return {
        sortColumn: null,
        sortOrder: null
      };
    }
  }, {
    key: "getSorterFn",
    value: function getSorterFn() {
      var _this$state2 = this.state,
          sortOrder = _this$state2.sortOrder,
          sortColumn = _this$state2.sortColumn;

      if (!sortOrder || !sortColumn || typeof sortColumn.sorter !== 'function') {
        return;
      }

      return function (a, b) {
        var result = sortColumn.sorter(a, b, sortOrder);

        if (result !== 0) {
          return sortOrder === 'descend' ? -result : result;
        }

        return 0;
      };
    }
  }, {
    key: "toggleSortOrder",
    value: function toggleSortOrder(order, column) {
      var _this$state3 = this.state,
          sortColumn = _this$state3.sortColumn,
          sortOrder = _this$state3.sortOrder; // 只同时允许一列进行排序，否则会导致排序顺序的逻辑问题

      var isSortColumn = this.isSortColumn(column);

      if (!isSortColumn) {
        // 当前列未排序
        sortOrder = order;
        sortColumn = column;
      } else if (sortOrder === order) {
        // 切换为未排序状态
        sortOrder = undefined;
        sortColumn = null;
      } else {
        // 切换为排序状态
        sortOrder = order;
      }

      var newState = {
        sortOrder: sortOrder,
        sortColumn: sortColumn
      }; // Controlled

      if (this.getSortOrderColumns().length === 0) {
        this.setState(newState);
      }

      var onChange = this.props.onChange;

      if (onChange) {
        onChange.apply(void 0, _toConsumableArray(this.prepareParamsArguments(_objectSpread(_objectSpread({}, this.state), newState))));
      }
    }
  }, {
    key: "setNewFilterState",
    value: function setNewFilterState(newState) {
      var _this5 = this;

      var _this$props4 = this.props,
          propsPagination = _this$props4.pagination,
          onChange = _this$props4.onChange;
      var statePagination = this.state.pagination;

      var pagination = _objectSpread({}, statePagination);

      if (propsPagination) {
        // Reset current prop
        pagination.current = 1;
        pagination.onChange(pagination.current);
      }

      var filtersToSetState = _objectSpread({}, newState.filters); // Remove filters which is controlled


      this.getFilteredValueColumns().forEach(function (col) {
        var columnKey = _this5.getColumnKey(col);

        if (columnKey) {
          delete filtersToSetState[columnKey];
        }
      });

      if (Object.keys(filtersToSetState).length > 0) {
        newState.filters = filtersToSetState;
      } // Controlled current prop will not respond user interaction


      if (_typeof(propsPagination) === 'object' && 'current' in propsPagination) {
        newState.pagination = _objectSpread(_objectSpread({}, pagination), {}, {
          current: statePagination.current
        });
      }

      this.setState(newState, function () {
        _this5.store.setState({
          selectionDirty: false
        });

        if (onChange) {
          onChange.apply(void 0, _toConsumableArray(_this5.prepareParamsArguments(_objectSpread(_objectSpread({}, _this5.state), {}, {
            pagination: pagination
          }))));
        }
      });
    }
  }, {
    key: "getSelectedRows",
    value: function getSelectedRows(_) {
      return undefined;
    }
  }, {
    key: "renderRowSelection",
    value: function renderRowSelection(columns, locale) {
      var _this6 = this;

      var _this$props5 = this.props,
          rowSelection = _this$props5.rowSelection,
          dropdownProps = _this$props5.dropdownProps,
          menuProps = _this$props5.menuProps,
          checkboxPrefixCls = _this$props5.checkboxPrefixCls;
      var prefixCls = this.getPrefixCls();

      if (rowSelection) {
        var data = this.getFlatCurrentPageData().filter(function (item, index) {
          if (rowSelection.getCheckboxProps) {
            return !_this6.getCheckboxPropsByItem(item, index).disabled;
          }

          return true;
        });
        var selectionColumnClass = classNames("".concat(prefixCls, "-selection-column"), _defineProperty({}, "".concat(prefixCls, "-selection-column-custom"), rowSelection.selections));
        var selectionColumn = {
          key: 'selection-column',
          render: this.renderSelectionBox(rowSelection.type),
          className: selectionColumnClass,
          fixed: rowSelection.fixed,
          width: rowSelection.columnWidth
        };

        if (rowSelection.type !== 'radio') {
          var checkboxAllDisabled = data.every(function (item, index) {
            return _this6.getCheckboxPropsByItem(item, index).disabled;
          });
          selectionColumn.title = /*#__PURE__*/React.createElement(SelectionCheckboxAll, {
            checkboxPrefixCls: checkboxPrefixCls,
            dropdownProps: dropdownProps,
            menuProps: menuProps,
            store: this.store,
            locale: locale,
            data: data,
            getCheckboxPropsByItem: this.getCheckboxPropsByItem,
            getRecordKey: this.getRecordKey,
            disabled: checkboxAllDisabled,
            prefixCls: prefixCls,
            onSelect: this.handleSelectRow,
            selections: rowSelection.selections,
            hideDefaultSelections: rowSelection.hideDefaultSelections,
            getPopupContainer: this.getPopupContainer
          });
        }

        if ('fixed' in rowSelection) {
          selectionColumn.fixed = rowSelection.fixed;
        } else if (columns.some(function (column) {
          return column.fixed === 'left' || column.fixed === true;
        })) {
          selectionColumn.fixed = 'left';
        }

        if (columns[0] && columns[0].key === 'selection-column') {
          columns[0] = selectionColumn;
        } else {
          columns.unshift(selectionColumn);
        }
      }

      return columns;
    }
  }, {
    key: "getColumnKey",
    value: function getColumnKey(column, index) {
      return _getColumnKey(column, index);
    }
  }, {
    key: "getMaxCurrent",
    value: function getMaxCurrent(total) {
      var _this$state$paginatio = this.state.pagination,
          current = _this$state$paginatio.current,
          pageSize = _this$state$paginatio.pageSize;

      if ((current - 1) * pageSize >= total) {
        return Math.floor((total - 1) / pageSize) + 1;
      }

      return current;
    }
  }, {
    key: "isSortColumn",
    value: function isSortColumn(column) {
      var sortColumn = this.state.sortColumn;

      if (!column || !sortColumn) {
        return false;
      }

      return this.getColumnKey(sortColumn) === this.getColumnKey(column);
    }
  }, {
    key: "renderColumnsDropdown",
    value: function renderColumnsDropdown(columns, locale) {
      var _this7 = this;

      var _this$props6 = this.props,
          customizeDropdownPrefixCls = _this$props6.dropdownPrefixCls,
          radioPrefixCls = _this$props6.radioPrefixCls,
          checkboxPrefixCls = _this$props6.checkboxPrefixCls,
          rippleDisabled = _this$props6.rippleDisabled,
          filterBar = _this$props6.filterBar,
          customCode = _this$props6.customCode,
          filterBarLocale = _this$props6.filterBarLocale,
          renderSorter = _this$props6.renderSorter,
          $dropdownProps = _this$props6.dropdownProps,
          inputNumberProps = _this$props6.inputNumberProps;
      var getPrefixCls = this.context.getPrefixCls;
      var prefixCls = this.getPrefixCls();

      var dropdownProps = _objectSpread({
        prefixCls: getPrefixCls('dropdown', customizeDropdownPrefixCls)
      }, $dropdownProps);

      var _this$state4 = this.state,
          sortOrder = _this$state4.sortOrder,
          filters = _this$state4.filters;
      return treeMap(columns, function (originColumn, i) {
        var column = _objectSpread({}, originColumn);

        var key = _this7.getColumnKey(column, i);

        var filterDropdown;
        var sortButton;

        if (!filterBar && column.filters && column.filters.length > 0 || column.filterDropdown) {
          var colFilters = filters[key] || [];
          filterDropdown = /*#__PURE__*/React.createElement(FilterDropdown, {
            locale: locale,
            column: column,
            selectedKeys: colFilters,
            confirmFilter: _this7.handleFilter,
            prefixCls: "".concat(prefixCls, "-filter"),
            dropdownProps: dropdownProps,
            radioPrefixCls: radioPrefixCls,
            checkboxPrefixCls: checkboxPrefixCls,
            rippleDisabled: rippleDisabled,
            getPopupContainer: _this7.getPopupContainer
          });
        }

        if (column.sorter) {
          var isSortColumn = _this7.isSortColumn(column);

          sortButton = renderSorter({
            prefixCls: prefixCls,
            column: column,
            sortOrder: sortOrder,
            isSortColumn: isSortColumn,
            changeOrder: function changeOrder(order) {
              return _this7.toggleSortOrder(order, column);
            }
          });
        }

        var customButton;

        if (column.filterBar === true && customCode) {
          var filterColumns = columns.filter(function (c) {
            return c.filterField === true;
          });
          customButton = /*#__PURE__*/React.createElement(ColumnFilterMenu, {
            customCode: customCode,
            locale: locale,
            filterBarLocale: filterBarLocale,
            customColumns: _this7.getCustomColumns(),
            store: _this7.store,
            columns: filterColumns,
            prefixCls: "".concat(prefixCls, "-filter"),
            dropdownProps: dropdownProps,
            checkboxPrefixCls: checkboxPrefixCls,
            inputNumberProps: inputNumberProps,
            confirmFilter: _this7.handleCustomColumnFilter,
            getPopupContainer: _this7.getPopupContainer
          });
        }

        column.title = /*#__PURE__*/React.createElement("span", {
          key: key
        }, column.title, sortButton, customButton, filterDropdown);

        if (sortButton || filterDropdown || customButton) {