linkmore-design 1.0.91 → 1.0.93

package/es/LmTable/Table.js

@@ -0,0 +1,1385 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Summary = void 0;
+
+require("antd/es/config-provider/style");
+
+var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _proTable = _interopRequireDefault(require("@ant-design/pro-table"));
+
+var _sortable = require("@dnd-kit/sortable");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodash = require("lodash");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactResizable = require("react-resizable");
+
+var _immer = require("immer");
+
+var _reactSortableHoc = require("react-sortable-hoc");
+
+var _IconFont = _interopRequireDefault(require("../IconFont"));
+
+var _Empty = _interopRequireDefault(require("../Empty"));
+
+var _DndContainer = _interopRequireDefault(require("./components/DndContainer"));
+
+var _sortableBoxCol = _interopRequireDefault(require("./components/sortableBoxCol"));
+
+var _sortableItemCol = _interopRequireDefault(require("./components/sortableItemCol"));
+
+var _sheelTableCell = _interopRequireDefault(require("./components/sheelTableCell"));
+
+var _tableChartsModal = _interopRequireDefault(require("./components/tableChartsModal"));
+
+var _customRenderEmpty = _interopRequireDefault(require("./components/customRenderEmpty"));
+
+var _util = require("./util");
+
+var _resetConfig = _interopRequireDefault(require("./resetConfig"));
+
+var _virTual = require("./virTual");
+
+var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "groupInfo", "emptyProps", "columnKeys"],
+    _excluded2 = ["className", "style"],
+    _excluded3 = ["onResize", "width", "onResizeStop"];
+var Summary = _proTable.default.Summary;
+exports.Summary = Summary;
+
+var isEmpty = function isEmpty(obj) {
+  var _Object$keys;
+
+  return ((_Object$keys = Object.keys(obj || {})) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 0;
+};
+
+var defaultParsePaste = function defaultParsePaste(str) {
+  return str.split(/\r\n|\n|\r/).map(function (row) {
+    return row.split('\t');
+  });
+};
+
+var range = function range(start, end) {
+  var array = [];
+  var inc = end - start > 0;
+
+  for (var i = start; inc ? i <= end : i >= end; inc ? i++ : i--) {
+    inc ? array.push(i) : array.unshift(i);
+  }
+
+  return array;
+}; // const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
+
+
+var DragHandle = (0, _reactSortableHoc.SortableHandle)(function () {
+  return /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    type: "lmweb-icon-m-receipt1",
+    style: {
+      cursor: 'move',
+      fontSize: '16px'
+    }
+  });
+});
+var sortDefaultColumnItem = {
+  title: '排序',
+  dataIndex: 'sort',
+  width: 48,
+  maxWidth: 48,
+  className: 'drag-visible',
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(DragHandle, null);
+  }
+};
+var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var customizeColumns = props.columns,
+      customizeDataSource = props.dataSource,
+      autoSize = props.autoSize,
+      rowClick = props.rowClick,
+      _onDoubleClick = props.onDoubleClick,
+      checkConfig = props.checkConfig,
+      _summary = props.summary,
+      pagination = props.pagination,
+      hiddenPage = props.hiddenPage,
+      loading = props.loading,
+      _props$virtual = props.virtual,
+      virtual = _props$virtual === void 0 ? false : _props$virtual,
+      _props$sortOpen = props.sortOpen,
+      sortOpen = _props$sortOpen === void 0 ? false : _props$sortOpen,
+      _props$colSortOpen = props.colSortOpen,
+      colSortOpen = _props$colSortOpen === void 0 ? false : _props$colSortOpen,
+      _props$resizeable = props.resizeable,
+      resizeable = _props$resizeable === void 0 ? false : _props$resizeable,
+      customCheck = props.customCheck,
+      components = props.components,
+      rowSelection = props.rowSelection,
+      columnsState = props.columnsState,
+      onChange = props.onChange,
+      filterChange = props.filterChange,
+      _props$tableRowType = props.tableRowType,
+      tableRowType = _props$tableRowType === void 0 ? 'default' : _props$tableRowType,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
+      _props$openSheet = props.openSheet,
+      openSheet = _props$openSheet === void 0 ? false : _props$openSheet,
+      _props$editSheet = props.editSheet,
+      editSheet = _props$editSheet === void 0 ? false : _props$editSheet,
+      dataChange = props.dataChange,
+      groupInfo = props.groupInfo,
+      emptyProps = props.emptyProps,
+      columnKeys = props.columnKeys,
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _resetProps$rowKey = resetProps.rowKey,
+      rowKey = _resetProps$rowKey === void 0 ? 'id' : _resetProps$rowKey;
+
+  var _useState = (0, _react.useState)({
+    selectedRows: []
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useSelectedRows = _useState2[0],
+      setSelectedRows = _useState2[1]; // 复选中的值
+
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      useActiveKey = _useState4[0],
+      setActiveKey = _useState4[1]; // 行选中
+
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      useColumns = _useState6[0],
+      setColumns = _useState6[1];
+
+  var tableWarpRef = (0, _react.useRef)(null);
+  var dataSourceRef = (0, _react.useRef)(null);
+  /** 右键的ref */
+
+  var contentMenuRef = (0, _react.useRef)(null);
+  /** 当前展开的列 */
+
+  var _useState7 = (0, _react.useState)([]),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      expandedRowKeys = _useState8[0],
+      setExpandedRowKeys = _useState8[1];
+
+  var deepDataSourceRef = (0, _react.useRef)([]);
+  /** 行分组 */
+
+  var groupDataSource = (0, _react.useMemo)(function () {
+    if (!(groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.length)) {
+      return customizeDataSource;
+    }
+
+    return (0, _util.transformWithRowGroup)(customizeDataSource, groupInfo);
+  }, [customizeDataSource, groupInfo]);
+  /** 列分组 */
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    if (!(columnKeys === null || columnKeys === void 0 ? void 0 : columnKeys.length)) {
+      return {
+        dataSource: groupDataSource,
+        columns: customizeColumns
+      };
+    }
+
+    return (0, _util.transformWithColGroup)(customizeColumns, groupDataSource, columnKeys);
+  }, [customizeColumns, groupDataSource, columnKeys]),
+      columns = _useMemo.columns,
+      dataSource = _useMemo.dataSource;
+
+  (0, _react.useEffect)(function () {
+    setExpandedRowKeys([]);
+  }, [groupInfo]);
+  /** sheel数据的表格 */
+
+  var _useState9 = (0, _react.useState)({
+    start: {},
+    end: {},
+    selecting: false,
+    forceEdit: false,
+    editing: {},
+    clear: {},
+    commiting: {}
+  }),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      sheelStataus = _useState10[0],
+      setSheelStatus = _useState10[1];
+
+  var shellStatusRef = (0, _react.useRef)({
+    start: {},
+    end: {},
+    selecting: false,
+    forceEdit: false,
+    editing: {},
+    clear: {},
+    commiting: {}
+  });
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      selectIng = _useState12[0],
+      setSelectIng = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      editIng = _useState14[0],
+      setEditIng = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      commitIng = _useState16[0],
+      setCommitIng = _useState16[1];
+  /** 右键菜单是否显示 */
+
+
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      contextMenuStatus = _useState18[0],
+      setContextMenuStatus = _useState18[1];
+  /** 右键按钮的位置 */
+
+
+  var _useState19 = (0, _react.useState)({
+    position: 'fixed',
+    left: 300,
+    top: 200
+  }),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      style = _useState20[0],
+      setStyle = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(null),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      chartsModalStatus = _useState22[0],
+      setChartsModalStatus = _useState22[1]; // 列设置
+
+
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      columnsStateMap = _useState24[0],
+      setColumnsStateMap = _useState24[1];
+
+  var SortableItem = (0, _reactSortableHoc.SortableElement)(function (props) {
+    return /*#__PURE__*/_react.default.createElement("tr", props);
+  });
+  var SortContainer = (0, _reactSortableHoc.SortableContainer)(function (props) {
+    return /*#__PURE__*/_react.default.createElement("tbody", props);
+  });
+  (0, _react.useEffect)(function () {
+    dataSourceRef.current = dataSource;
+  }, [dataSource]);
+  (0, _react.useEffect)(function () {
+    var source = [];
+
+    var deepChildren = function deepChildren(arr) {
+      arr.forEach(function (item) {
+        source.push((0, _lodash.omit)(item, 'children'));
+
+        if ((item === null || item === void 0 ? void 0 : item.children) && expandedRowKeys.includes(item.key)) {
+          deepChildren(item === null || item === void 0 ? void 0 : item.children);
+        }
+      });
+    };
+
+    deepChildren(dataSource);
+    deepDataSourceRef.current = source;
+  }, [dataSource, expandedRowKeys]);
+
+  var onSortEnd = function onSortEnd(_ref) {
+    var oldIndex = _ref.oldIndex,
+        newIndex = _ref.newIndex;
+
+    if (oldIndex !== newIndex) {
+      var newData = (0, _sortable.arrayMove)(dataSource, oldIndex, newIndex).filter(function (el) {
+        return !!el;
+      }); // setDataSource([...newData])
+
+      onChange === null || onChange === void 0 ? void 0 : onChange(newData);
+    }
+  };
+
+  var onColSortEnd = function onColSortEnd(active, over) {
+    var oldIndex = columns.findIndex(function (item) {
+      return item.dataIndex === active;
+    });
+    var newIndex = columns.findIndex(function (item) {
+      return item.dataIndex === over;
+    });
+    filterChange === null || filterChange === void 0 ? void 0 : filterChange((0, _sortable.arrayMove)(columns, oldIndex, newIndex).map(function (item, index) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        order: index
+      });
+    }));
+  };
+
+  var DraggableContainer = function DraggableContainer(props) {
+    return /*#__PURE__*/_react.default.createElement(SortContainer, (0, _extends2.default)({
+      useDragHandle: true,
+      disableAutoscroll: true,
+      helperClass: "row-dragging",
+      onSortEnd: onSortEnd
+    }, props));
+  };
+
+  var DraggableBodyRow = function DraggableBodyRow(props) {
+    var className = props.className,
+        style = props.style,
+        restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+    var index = dataSource.findIndex(function (x) {
+      return x[rowKey || 'index'] === restProps['data-row-key'];
+    });
+    return /*#__PURE__*/_react.default.createElement(SortableItem, (0, _extends2.default)({
+      index: index
+    }, restProps));
+  };
+
+  var handleResize = function handleResize(index) {
+    return function (e, _ref2) {
+      var size = _ref2.size;
+      var nextColumns = (0, _toConsumableArray2.default)(useColumns);
+      nextColumns[index] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, nextColumns[index]), {}, {
+        width: size.width
+      });
+      setColumns(nextColumns);
+    };
+  };
+
+  var endResize = function endResize(e, data) {
+    setTimeout(function () {
+      filterChange === null || filterChange === void 0 ? void 0 : filterChange(useColumns);
+    });
+  };
+
+  var isSelected = function isSelected(i, j) {
+    var _shellStatusRef$curre = shellStatusRef.current,
+        start = _shellStatusRef$curre.start,
+        end = _shellStatusRef$curre.end,
+        editing = _shellStatusRef$curre.editing,
+        commiting = _shellStatusRef$curre.commiting;
+    var maxi = Math.max(start === null || start === void 0 ? void 0 : start.i, end.i);
+    var mini = Math.min(start === null || start === void 0 ? void 0 : start.i, end.i);
+    var maxj = Math.max(start === null || start === void 0 ? void 0 : start.j, end.j);
+    var minj = Math.min(start === null || start === void 0 ? void 0 : start.j, end.j);
+    var isSelected = (0, _util.checkIsSelectd)(i, j, start, end);
+    return {
+      /** 是否选中 */
+      isSelected: isSelected,
+
+      /** 是否尾行 */
+      isEnd: i === maxi && j >= minj && j <= maxj,
+
+      /** 是否尾列 */
+      isRightEnd: j === maxj && i >= mini && i <= maxi,
+
+      /** 是否在编辑中 */
+      isEditing: (editing === null || editing === void 0 ? void 0 : editing.i) === i && (editing === null || editing === void 0 ? void 0 : editing.j) === j,
+
+      /** 是否有效拉伸 */
+      isVaildCommit: isEmpty(commiting) ? false : isSelected && !(0, _util.checkIsSelectd)(i, j, commiting === null || commiting === void 0 ? void 0 : commiting.start, commiting === null || commiting === void 0 ? void 0 : commiting.end)
+    };
+  };
+
+  var getSelectDatas = function getSelectDatas(start, end) {
+    return range(start.i, end.i).map(function (i) {
+      return range(start.j, end.j).map(function (j) {
+        var _columns$j, _columns$j2;
+
+        var columnKey = (_columns$j = columns[j]) === null || _columns$j === void 0 ? void 0 : _columns$j.dataIndex;
+        var dataItem = (groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.length) ? deepDataSourceRef.current[i] : dataSource[i];
+        var cell = dataItem === null || dataItem === void 0 ? void 0 : dataItem[columnKey];
+
+        if ((_columns$j2 = columns[j]) === null || _columns$j2 === void 0 ? void 0 : _columns$j2.render) {
+          var _columns$j3, _columns$j3$render;
+
+          return (_columns$j3 = columns[j]) === null || _columns$j3 === void 0 ? void 0 : (_columns$j3$render = _columns$j3.render) === null || _columns$j3$render === void 0 ? void 0 : _columns$j3$render.call(_columns$j3, cell, dataItem, i);
+        }
+
+        return cell;
+      }).join('\t');
+    }).join('\n');
+  };
+  /** 复制功能 */
+
+
+  var handleCopy = function handleCopy(e) {
+    var _shellStatusRef$curre2;
+
+    if (isEmpty((_shellStatusRef$curre2 = shellStatusRef.current) === null || _shellStatusRef$curre2 === void 0 ? void 0 : _shellStatusRef$curre2.editing)) {
+      var _e$clipboardData;
+
+      e === null || e === void 0 ? void 0 : e.preventDefault();
+      var _shellStatusRef$curre3 = shellStatusRef.current,
+          start = _shellStatusRef$curre3.start,
+          end = _shellStatusRef$curre3.end;
+      var text = getSelectDatas(start, end);
+
+      if (window.clipboardData && window.clipboardData.setData) {
+        window.clipboardData.setData('Text', text);
+      } else if ((_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.setData) {
+        e.clipboardData.setData('text/plain', text);
+      } else {
+        var _document;
+
+        (_document = document) === null || _document === void 0 ? void 0 : _document.execCommand('copy');
+
+        if (contextMenuStatus) {
+          setContextMenuStatus(false);
+        }
+      }
+    }
+  };
+
+  var onMouseOver = function onMouseOver(i, j) {
+    var _shellStatusRef$curre4, _shellStatusRef$curre7, _checkStatus, _shellStatusRef$curre8;
+
+    if (isEmpty(shellStatusRef === null || shellStatusRef === void 0 ? void 0 : (_shellStatusRef$curre4 = shellStatusRef.current) === null || _shellStatusRef$curre4 === void 0 ? void 0 : _shellStatusRef$curre4.commiting)) {
+      var _shellStatusRef$curre5, _shellStatusRef$curre6;
+
+      if ((shellStatusRef === null || shellStatusRef === void 0 ? void 0 : (_shellStatusRef$curre5 = shellStatusRef.current) === null || _shellStatusRef$curre5 === void 0 ? void 0 : _shellStatusRef$curre5.selecting) && isEmpty(shellStatusRef === null || shellStatusRef === void 0 ? void 0 : (_shellStatusRef$curre6 = shellStatusRef.current) === null || _shellStatusRef$curre6 === void 0 ? void 0 : _shellStatusRef$curre6.editing)) {
+        shellStatusRef.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, shellStatusRef.current), {}, {
+          end: {
+            i: i,
+            j: j
+          }
+        });
+        setSheelStatus((0, _objectSpread2.default)((0, _objectSpread2.default)({}, sheelStataus), {}, {
+          end: {
+            i: i,
+            j: j
+          }
+        }));
+      }
+    } else if (!isEmpty((shellStatusRef === null || shellStatusRef === void 0 ? void 0 : (_shellStatusRef$curre7 = shellStatusRef.current) === null || _shellStatusRef$curre7 === void 0 ? void 0 : _shellStatusRef$curre7.commiting) || {}) && ((_checkStatus = (0, _util.checkStatus)(i, j, shellStatusRef === null || shellStatusRef === void 0 ? void 0 : (_shellStatusRef$curre8 = shellStatusRef.current) === null || _shellStatusRef$curre8 === void 0 ? void 0 : _shellStatusRef$curre8.commiting)) === null || _checkStatus === void 0 ? void 0 : _checkStatus.isVaildCommit)) {
+      shellStatusRef.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, shellStatusRef.current), {}, {
+        end: {
+          i: i,
+          j: j
+        }
+      });
+      setSheelStatus((0, _objectSpread2.default)((0, _objectSpread2.default)({}, sheelStataus), {}, {
+        end: {
+          i: i,
+          j: j
+        }
+      }));
+    }
+  };
+  /** sheel 表格 鼠标松开 */
+
+
+  var sheelOnMouseUp = function sheelOnMouseUp() {
+    var _shellStatusRef$curre9;
+
+    if (!isEmpty((_shellStatusRef$curre9 = shellStatusRef.current) === null || _shellStatusRef$curre9 === void 0 ? void 0 : _shellStatusRef$curre9.commiting)) {
+      var _commiting$start, _commiting$end, _commiting$start2, _commiting$end2, _difference, _difference2, _obj$i;
+
+      var _shellStatusRef$curre10 = shellStatusRef.current,
+          start = _shellStatusRef$curre10.start,
+          end = _shellStatusRef$curre10.end,
+          commiting = _shellStatusRef$curre10.commiting;
+      var columnsKeysList = columns.map(function (item) {
+        return item.dataIndex;
+      });
+      var rowtext = range(commiting === null || commiting === void 0 ? void 0 : commiting.start.i, commiting === null || commiting === void 0 ? void 0 : commiting.end.i).map(function (i) {
+        return columnsKeysList.map(function (j) {
+          var columnKey = j;
+          var dataItem = (groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.length) ? deepDataSourceRef.current[i] : dataSource[i];
+          var cell = dataItem === null || dataItem === void 0 ? void 0 : dataItem[columnKey];
+          return cell;
+        });
+      });
+      var coltext = range(commiting === null || commiting === void 0 ? void 0 : commiting.start.i, commiting === null || commiting === void 0 ? void 0 : commiting.end.i).map(function (i) {
+        return range(commiting === null || commiting === void 0 ? void 0 : commiting.start.j, commiting === null || commiting === void 0 ? void 0 : commiting.end.j).map(function (j) {
+          var _columns$j4, _columns$j5;
+
+          var columnKey = (_columns$j4 = columns[j]) === null || _columns$j4 === void 0 ? void 0 : _columns$j4.dataIndex;
+          var dataItem = (groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.length) ? deepDataSourceRef.current[i] : dataSource[i];
+          var cell = dataItem === null || dataItem === void 0 ? void 0 : dataItem[columnKey];
+
+          if ((_columns$j5 = columns[j]) === null || _columns$j5 === void 0 ? void 0 : _columns$j5.render) {
+            var _columns$j6, _columns$j6$render;
+
+            return (_columns$j6 = columns[j]) === null || _columns$j6 === void 0 ? void 0 : (_columns$j6$render = _columns$j6.render) === null || _columns$j6$render === void 0 ? void 0 : _columns$j6$render.call(_columns$j6, cell, dataItem, i);
+          }
+
+          return cell;
+        });
+      });
+      var selectedRange = {
+        i: range(start.i, end.i),
+        j: range(start.j, end.j)
+      };
+      var commitRange = {
+        i: range(commiting === null || commiting === void 0 ? void 0 : (_commiting$start = commiting.start) === null || _commiting$start === void 0 ? void 0 : _commiting$start.i, commiting === null || commiting === void 0 ? void 0 : (_commiting$end = commiting.end) === null || _commiting$end === void 0 ? void 0 : _commiting$end.i),
+        j: range(commiting === null || commiting === void 0 ? void 0 : (_commiting$start2 = commiting.start) === null || _commiting$start2 === void 0 ? void 0 : _commiting$start2.j, commiting === null || commiting === void 0 ? void 0 : (_commiting$end2 = commiting.end) === null || _commiting$end2 === void 0 ? void 0 : _commiting$end2.j)
+      };
+      var obj = {
+        i: [],
+        j: []
+      };
+      var type = '';
+
+      if ((_difference = (0, _lodash.difference)(selectedRange.i, commitRange.i)) === null || _difference === void 0 ? void 0 : _difference.length) {
+        obj = {
+          i: (0, _lodash.difference)(selectedRange.i, commitRange.i),
+          j: selectedRange.j
+        };
+        type = 'row';
+      } else if ((_difference2 = (0, _lodash.difference)(selectedRange.j, commitRange.j)) === null || _difference2 === void 0 ? void 0 : _difference2.length) {
+        obj = {
+          i: selectedRange.i,
+          j: (0, _lodash.difference)(selectedRange.j, commitRange.j)
+        };
+        type = 'col';
+      }
+
+      var data = (0, _lodash.cloneDeep)(dataSourceRef.current);
+      (_obj$i = obj.i) === null || _obj$i === void 0 ? void 0 : _obj$i.map(function (tri, index) {
+        var _obj$j;
+
+        (_obj$j = obj.j) === null || _obj$j === void 0 ? void 0 : _obj$j.map(function (tdj) {
+          var _isSelected;
+
+          if ((_isSelected = isSelected(tri, tdj)) === null || _isSelected === void 0 ? void 0 : _isSelected.isSelected) {
+            if (type === 'row') {
+              var _rowtext;
+
+              data[tri][columnsKeysList[tdj]] = (_rowtext = rowtext[index % rowtext.length]) === null || _rowtext === void 0 ? void 0 : _rowtext[tdj];
+            } else {
+              var _coltext;
+
+              data[tri][columnsKeysList[tdj]] = (_coltext = coltext[index % coltext.length]) === null || _coltext === void 0 ? void 0 : _coltext[tdj % coltext[index % coltext.length].length];
+            }
+          }
+        });
+      });
+
+      if (editSheet) {
+        dataChange === null || dataChange === void 0 ? void 0 : dataChange(data);
+      }
+
+      setSheelStatus((0, _objectSpread2.default)((0, _objectSpread2.default)({}, sheelStataus), {}, {
+        selecting: false,
+        commiting: {}
+      }));
+      shellStatusRef.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, shellStatusRef.current), {}, {
+        selecting: false,
+        commiting: {}
+      });
+      setCommitIng(false);
+    } else {
+      setSheelStatus((0, _objectSpread2.default)((0, _objectSpread2.default)({}, sheelStataus), {}, {
+        selecting: false
+      }));
+      shellStatusRef.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, shellStatusRef.current), {}, {
+        selecting: false
+      });
+    }
+
+    document.removeEventListener('mouseup', sheelOnMouseUp);
+  };
+  /** 剪切内容 */
+
+
+  var handleCut = function handleCut(e) {
+    var _shellStatusRef$curre11;
+
+    if (isEmpty((_shellStatusRef$curre11 = shellStatusRef.current) === null || _shellStatusRef$curre11 === void 0 ? void 0 : _shellStatusRef$curre11.editing)) {
+      e.preventDefault();
+      handleCopy(e);
+      /** 暂时先不隐藏 */
+      // const { start, end } = shellStatusRef.current
+      // clearSelectedCells(start, end)
+    }
+  };
+  /** 内容粘贴 */
+
+
+  var handlePaste = function handlePaste(e) {
+    var _shellStatusRef$curre12;
+
+    if (isEmpty((_shellStatusRef$curre12 = shellStatusRef.current) === null || _shellStatusRef$curre12 === void 0 ? void 0 : _shellStatusRef$curre12.editing)) {
+      var _shellStatusRef$curre13 = shellStatusRef.current,
+          start = _shellStatusRef$curre13.start,
+          end = _shellStatusRef$curre13.end;
+      start = {
+        i: Math.min(start.i, end.i),
+        j: Math.min(start.j, end.j)
+      };
+      end = {
+        i: Math.max(start.i, end.i),
+        j: Math.max(start.j, end.j)
+      };
+      var parse = defaultParsePaste;
+      var changes = [];
+      var pasteData = [];
+
+      if (window.clipboardData && window.clipboardData.getData) {
+        // IE
+        pasteData = parse(window.clipboardData.getData('Text'));
+      } else if (e.clipboardData && e.clipboardData.getData) {
+        pasteData = parse(e.clipboardData.getData('text/plain'));
+      }
+
+      var data = dataSourceRef.current; // in order of preference
+
+      var resultEnd = [];
+      pasteData.forEach(function (row, i) {
+        row.forEach(function (value, j) {
+          resultEnd.push({
+            i: start.i + i,
+            j: start.j + j,
+            value: value
+          });
+        });
+      });
+      var columnsKeysList = columns.map(function (item) {
+        return item.dataIndex;
+      });
+      var res = (0, _immer.produce)(dataSourceRef.current, function (draft) {
+        resultEnd.forEach(function (item) {
+          var _isSelected2;
+
+          if ((_isSelected2 = isSelected(item.i, item.j)) === null || _isSelected2 === void 0 ? void 0 : _isSelected2.isSelected) {
+            draft[item.i][columnsKeysList[item.j]] = item.value;
+          }
+        });
+      });
+      /** 只有开通了编辑权限之后才可以 */
+
+      if (editSheet) {
+        dataChange === null || dataChange === void 0 ? void 0 : dataChange(res);
+      }
+    }
+  };
+
+  var pageClick = function pageClick(e) {
+    // if (this.props.disablePageClick) return;
+    var element = tableWarpRef.current;
+
+    if (!(element === null || element === void 0 ? void 0 : element.contains(e.target))) {
+      shellStatusRef.current = {
+        start: {},
+        end: {},
+        selecting: false,
+        forceEdit: false,
+        editing: {},
+        clear: {},
+        commiting: {}
+      };
+      setSelectIng(false);
+      document.removeEventListener('mousedown', pageClick);
+      document.removeEventListener('mouseup', sheelOnMouseUp);
+      document.removeEventListener('cut', handleCut);
+      document.removeEventListener('copy', handleCopy);
+      document.removeEventListener('paste', handlePaste);
+    }
+    /** 关闭右键 */
+
+
+    var contentElement = contentMenuRef.current;
+
+    if (!(contentElement === null || contentElement === void 0 ? void 0 : contentElement.contains(e.target))) {
+      setContextMenuStatus(false);
+    }
+  };
+  /** sheel 表格 鼠标点击 */
+
+  /**
+   * i 行
+   * j 列
+   * e 点击元素
+   * commitStatus boolena 是否点击了快速选择
+   */
+
+
+  var sheelMouseDown = function sheelMouseDown(i, j, e, commitStatus) {
+    var _shellStatusRef$curre14, _shellStatusRef$curre15, _shellStatusRef$curre16, _shellStatusRef$curre17, _shellStatusRef$curre18, _shellStatusRef$curre19, _shellStatusRef$curre20, _shellStatusRef$curre21, _shellStatusRef$curre22, _shellStatusRef$curre23;
+
+    var isNowEditingSameCell = !isEmpty((_shellStatusRef$curre14 = shellStatusRef.current) === null || _shellStatusRef$curre14 === void 0 ? void 0 : _shellStatusRef$curre14.editing) && ((_shellStatusRef$curre15 = shellStatusRef.current) === null || _shellStatusRef$curre15 === void 0 ? void 0 : _shellStatusRef$curre15.editing.i) === i && ((_shellStatusRef$curre16 = shellStatusRef.current) === null || _shellStatusRef$curre16 === void 0 ? void 0 : _shellStatusRef$curre16.editing.j) === j;
+    var editing = isEmpty((_shellStatusRef$curre17 = shellStatusRef.current) === null || _shellStatusRef$curre17 === void 0 ? void 0 : _shellStatusRef$curre17.editing) || ((_shellStatusRef$curre18 = shellStatusRef.current) === null || _shellStatusRef$curre18 === void 0 ? void 0 : _shellStatusRef$curre18.editing.i) !== i || ((_shellStatusRef$curre19 = shellStatusRef.current) === null || _shellStatusRef$curre19 === void 0 ? void 0 : _shellStatusRef$curre19.editing.j) !== j ? {} : (_shellStatusRef$curre20 = shellStatusRef.current) === null || _shellStatusRef$curre20 === void 0 ? void 0 : _shellStatusRef$curre20.editing;
+    shellStatusRef.current = {
+      selecting: !isNowEditingSameCell,
+      start: (e === null || e === void 0 ? void 0 : e.shiftKey) || commitStatus ? (_shellStatusRef$curre21 = shellStatusRef.current) === null || _shellStatusRef$curre21 === void 0 ? void 0 : _shellStatusRef$curre21.start : {
+        i: i,
+        j: j
+      },
+      end: {
+        i: i,
+        j: j
+      },
+      editing: editing,
+      forceEdit: !!isNowEditingSameCell,
+      commiting: commitStatus ? {
+        start: (_shellStatusRef$curre22 = shellStatusRef.current) === null || _shellStatusRef$curre22 === void 0 ? void 0 : _shellStatusRef$curre22.start,
+        end: {
+          i: i,
+          j: j
+        }
+      } : {}
+    };
+    setSelectIng(!isNowEditingSameCell);
+
+    if (commitStatus) {
+      setCommitIng(true);
+    }
+
+    if (isEmpty((_shellStatusRef$curre23 = shellStatusRef.current) === null || _shellStatusRef$curre23 === void 0 ? void 0 : _shellStatusRef$curre23.editing)) {
+      setEditIng(false);
+    }
+
+    document.addEventListener('mouseup', sheelOnMouseUp);
+    document.addEventListener('mousedown', pageClick);
+    document.addEventListener('cut', handleCut);
+    document.addEventListener('copy', handleCopy);
+    document.addEventListener('paste', handlePaste);
+  };
+  /** 鼠标右键点击事件 */
+
+
+  var onContextMenu = function onContextMenu(evt, i, j) {
+    evt.preventDefault();
+    var _shellStatusRef$curre24 = shellStatusRef.current,
+        start = _shellStatusRef$curre24.start,
+        end = _shellStatusRef$curre24.end;
+    /** 如果表格当前没有选择，则把当前的右击的td块默认选中 */
+
+    if (isEmpty(start) && isEmpty(end)) {
+      sheelMouseDown(i, j, evt);
+    }
+
+    if (!(0, _util.checkIsSelectd)(i, j, start, end)) {
+      sheelMouseDown(i, j, evt);
+    }
+
+    setContextMenuStatus(true); // 获得点击的位置
+
+    var clientX = evt.clientX,
+        clientY = evt.clientY; // 文档显示区的宽度
+
+    var screenW = window.innerWidth;
+    var screenH = window.innerHeight; // 右键菜单的宽度
+    // const rightClickRefW = rightClickRef.current.offsetWidth;
+    // const rightClickRefH = rightClickRef.current.offsetHeight;
+
+    var rightClickRefW = 200;
+    var rightClickRefH = 200; // right为true，说明鼠标点击的位置到浏览器的右边界的宽度可以放下contextmenu。
+    // 否则，菜单放到左边。
+
+    var right = screenW - clientX > rightClickRefW;
+    var top = screenH - clientY > rightClickRefH; // 赋值右键菜单离鼠标一些距离
+
+    clientX = right ? clientX + 6 : clientX - rightClickRefW - 6;
+    clientY = top ? clientY + 6 : clientY - rightClickRefH - 6;
+    setStyle((0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
+      left: clientX,
+      top: clientY
+    }));
+  };
+
+  var onSheelDoubleClick = function onSheelDoubleClick(i, j, col) {
+    if (editSheet) {
+      if (!col.readOnly) {
+        shellStatusRef.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, shellStatusRef.current), {}, {
+          editing: {
+            i: i,
+            j: j
+          },
+          forceEdit: true,
+          clear: {}
+        });
+        setEditIng(true);
+      }
+    }
+  };
+
+  var dataSourceChange = function dataSourceChange(i, j, newRecord) {
+    var res = (0, _immer.produce)(dataSourceRef.current, function (draft) {
+      draft[i] = newRecord;
+    });
+    dataChange === null || dataChange === void 0 ? void 0 : dataChange(res);
+    shellStatusRef.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, shellStatusRef.current), {}, {
+      editing: {},
+      forceEdit: false,
+      clear: {}
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      document.removeEventListener('mousedown', pageClick);
+      document.removeEventListener('mouseup', sheelOnMouseUp);
+      document.removeEventListener('cut', handleCut);
+      document.removeEventListener('copy', handleCopy);
+      document.removeEventListener('paste', handlePaste);
+    };
+  }, []);
+  var resetColumns = (0, _react.useCallback)(function () {
+    var result = useColumns.filter(function (item) {
+      return item.show !== false;
+    }).map(function (col, index) {
+      var obj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, col), {}, {
+        width: col.width,
+        onHeaderCell: function onHeaderCell(column) {
+          return {
+            width: column.width,
+            // onResize: (e, size) => handleResize(e, size, index),
+            onResize: handleResize(index),
+            onResizeStop: endResize
+          };
+        }
+      });
+
+      if (openSheet) {
+        obj.onCell = function (record, rowIndex) {
+          return {
+            record: record,
+            rowKey: rowKey,
+            col: col,
+            colIndex: index,
+            selectIng: selectIng,
+            editIng: editIng,
+            commitIng: commitIng,
+            rowIndex: rowIndex,
+            onMouseDown: sheelMouseDown,
+            onMouseOver: onMouseOver,
+            onContextMenu: onContextMenu,
+            isSelected: isSelected,
+            onDoubleClick: onSheelDoubleClick,
+            dataSourceChange: dataSourceChange
+          };
+        };
+      }
+
+      return obj;
+    });
+
+    if (groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.length) {
+      result = [{
+        dataIndex: 'group',
+        title: '分组',
+        key: 'group'
+      }].concat((0, _toConsumableArray2.default)(result));
+    }
+
+    return sortOpen ? [sortDefaultColumnItem].concat((0, _toConsumableArray2.default)(result)) : result;
+  }, [useColumns, sortOpen, selectIng, dataSource, groupInfo, commitIng]);
+  (0, _react.useEffect)(function () {
+    setColumns(columns);
+  }, [columns]); // 行点击事件
+
+  var onRecord = function onRecord(record) {
+    var _Object$assign = Object.assign(_resetConfig.default.checkConfig, checkConfig),
+        trigger = _Object$assign.trigger,
+        highlight = _Object$assign.highlight;
+
+    if (highlight) {
+      setActiveKey(record[rowKey]);
+    }
+
+    if (trigger === 'row') {
+      var selectedRows = useSelectedRows.selectedRows;
+
+      if (tableRowType === 'select' || tableRowType === 'default' && selectedRows.length) {
+        var selectedRowKeys = selectedRows.map(function (v) {
+          return v[rowKey];
+        });
+        var Idx = selectedRowKeys.indexOf(record[rowKey]);
+        Idx >= 0 ? selectedRows.splice(Idx, 1) : selectedRows.push(record);
+        setSelectedRows({
+          selectedRows: selectedRows
+        });
+        rowClick === null || rowClick === void 0 ? void 0 : rowClick(selectedRows);
+      }
+    } else {
+      rowClick === null || rowClick === void 0 ? void 0 : rowClick(record);
+    }
+  }; // 重写表格，增加虚拟滚动
+  // const vComponents = useMemo(() => {
+  //   return VList({
+  //     height: autoSize.height, // 此值和scrollY值相同. 必传.
+  //   })
+  // }, [autoSize.height])
+  // 复选框配置
+
+
+  var config = (0, _react.useMemo)(function () {
+    return (0, _objectSpread2.default)({
+      defaultSize: 'small',
+      tableLayout: columnKeys ? 'auto' : 'fixed',
+      rowKey: rowKey,
+      debounceTime: 300,
+      revalidateOnFocus: false,
+      options: {
+        setting: false,
+        density: false,
+        fullScreen: false,
+        reload: false
+      },
+      columnsState: {
+        value: columnsStateMap,
+        onChange: function onChange(k) {
+          setColumnsStateMap(k);
+        }
+      },
+      search: false,
+      tableAlertRender: false,
+      checkConfig: checkConfig,
+      // components: vComponents,
+      scroll: resetProps.autoSizer || resetProps.scroll ? (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        y: autoSize.height
+      }, resetProps.scroll), resizeable ? {
+        x: '100%'
+      } : {}) : resizeable ? {
+        x: '100%'
+      } : null,
+      pagination: !hiddenPage && (0, _objectSpread2.default)({
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: function showTotal(total) {
+          return "\u5171 ".concat(total, " \u6761");
+        },
+        locale: {
+          items_per_page: '/条',
+          jump_to: '前往',
+          page: '页'
+        },
+        size: 'small'
+      }, pagination),
+      rowSelection: rowSelection === false ? undefined : (0, _objectSpread2.default)({
+        fixed: true,
+        type: 'checkbox',
+        columnWidth: 36,
+        selectedRowKeys: useSelectedRows.selectedRows.map(function (v) {
+          return v[rowKey];
+        }),
+        onChange: function onChange(selectedRowKeys, selectedRows, t, s) {
+          setSelectedRows({
+            selectedRows: selectedRows
+          });
+          rowClick === null || rowClick === void 0 ? void 0 : rowClick(selectedRows);
+        }
+      }, rowSelection),
+      onRow: function onRow(record) {
+        return {
+          onClick: function onClick(e) {
+            onRecord(record);
+          },
+          onDoubleClick: function onDoubleClick() {
+            _onDoubleClick === null || _onDoubleClick === void 0 ? void 0 : _onDoubleClick(record);
+          }
+        };
+      },
+      rowClassName: function rowClassName(record) {
+        return record[rowKey] === useActiveKey ? 'row-active' : '';
+      },
+      columns: resetColumns(),
+      size: size
+    }, resetProps);
+  }, [useColumns, useSelectedRows, columnsStateMap, resetProps, autoSize.height, resizeable]);
+  var resultColumns = (0, _react.useMemo)(function () {
+    var result = useColumns.map(function (item, index) {
+      var _columnsStateMap$item, _columnsStateMap$item2, _columnsStateMap$item3, _columnsStateMap$item4;
+
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        colSort: (columnsStateMap === null || columnsStateMap === void 0 ? void 0 : (_columnsStateMap$item = columnsStateMap[item.dataIndex]) === null || _columnsStateMap$item === void 0 ? void 0 : _columnsStateMap$item.order) === undefined ? index : (columnsStateMap === null || columnsStateMap === void 0 ? void 0 : (_columnsStateMap$item2 = columnsStateMap[item.dataIndex]) === null || _columnsStateMap$item2 === void 0 ? void 0 : _columnsStateMap$item2.order) || index,
+        fixed: (columnsStateMap === null || columnsStateMap === void 0 ? void 0 : (_columnsStateMap$item3 = columnsStateMap[item.dataIndex]) === null || _columnsStateMap$item3 === void 0 ? void 0 : _columnsStateMap$item3.fixed) || item.fixed || undefined,
+        show: (columnsStateMap === null || columnsStateMap === void 0 ? void 0 : (_columnsStateMap$item4 = columnsStateMap[item.dataIndex]) === null || _columnsStateMap$item4 === void 0 ? void 0 : _columnsStateMap$item4.show) !== false
+      });
+    }).filter(function (item) {
+      return !!item.show;
+    });
+    result.sort(function (a, b) {
+      return (a.fixed === 'left' ? a.colSort : a.fixed === 'right' ? 500 + a.colSort : a.colSort + 50) - (b.fixed === 'left' ? b.colSort : b.fixed === 'right' ? 500 + b.colSort : b.colSort + 50);
+    });
+    return result;
+  }, [columnsStateMap, useColumns]);
+  (0, _react.useEffect)(function () {
+    var obj = (0, _objectSpread2.default)({}, columnsState);
+    columns === null || columns === void 0 ? void 0 : columns.forEach(function (item) {
+      /** 目前支持三种 */
+      var _ref3 = obj[item.dataIndex || item.key] || {},
+          order = _ref3.order,
+          show = _ref3.show,
+          fixed = _ref3.fixed;
+
+      obj[item.dataIndex || item.key] = {
+        fixed: fixed || item.fixed,
+        show: show === false ? false : item.show || true,
+        order: order || item.order
+      };
+    });
+    setColumnsStateMap(obj);
+  }, [columnsState]); // 将节点方法给外部使用
+
+  _react.default.useImperativeHandle(ref, function () {
+    return {
+      getCheckboxRecords: function getCheckboxRecords() {
+        return useSelectedRows.selectedRows;
+      },
+      // 用于按钮触发事件
+      clearSelect: function clearSelect() {
+        setSelectedRows({
+          selectedRows: []
+        });
+        rowClick === null || rowClick === void 0 ? void 0 : rowClick([]);
+      },
+      customSetCheckboxRecords: function customSetCheckboxRecords(value) {
+        setSelectedRows({
+          selectedRows: value
+        });
+        rowClick === null || rowClick === void 0 ? void 0 : rowClick(value);
+      },
+      checkboxRecords: useSelectedRows.selectedRows,
+      columns: useColumns.map(function (item) {
+        return (0, _lodash.omit)(item, ['render', 'sorter', 'onFilter', 'filters']);
+      })
+    };
+  }); // loading触发清空选中状态
+
+
+  (0, _react.useEffect)(function () {
+    setSelectedRows({
+      selectedRows: []
+    });
+  }, [loading]);
+
+  var onTableChange = function onTableChange(pagination, filters, sorter, extra) {
+    var resultColumns = useColumns.map(function (item) {
+      var obj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        sortOrder: false
+      });
+      obj.filteredValue = filters[obj.dataIndex] || [];
+
+      if (Array.isArray(sorter)) {
+        var checkSort = sorter.find(function (s) {
+          return s.field === obj.dataIndex;
+        });
+
+        if (checkSort) {
+          obj.sortOrder = checkSort.order;
+        }
+      } else if ((sorter === null || sorter === void 0 ? void 0 : sorter.field) === obj.dataIndex) {
+        obj.sortOrder = sorter.order;
+      }
+
+      return obj;
+    });
+    setColumns(resultColumns);
+    filterChange === null || filterChange === void 0 ? void 0 : filterChange(resultColumns);
+    onChange === null || onChange === void 0 ? void 0 : onChange(pagination, filters, sorter, extra);
+  };
+  /** 排序的表头 */
+
+
+  var ResizableTitle = function ResizableTitle(props) {
+    var onResize = props.onResize,
+        width = props.width,
+        onResizeStop = props.onResizeStop,
+        restProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
+
+    if (!width) {
+      return /*#__PURE__*/_react.default.createElement("th", restProps);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable, {
+      width: width,
+      height: 0,
+      handle: /*#__PURE__*/_react.default.createElement("span", {
+        className: "react-resizable-handle",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+        }
+      }),
+      onResize: onResize,
+      onResizeStop: onResizeStop,
+      draggableOpts: {
+        enableUserSelectHack: false
+      }
+    }, /*#__PURE__*/_react.default.createElement("th", restProps));
+  };
+
+  var colDraggableContainer = (0, _react.useCallback)(function (_ref4) {
+    var props = (0, _extends2.default)({}, _ref4);
+    return /*#__PURE__*/_react.default.createElement("tr", null, _react.default.Children.map(props.children, function (child) {
+      var _child$props, _child$props$column;
+
+      if (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : (_child$props$column = _child$props.column) === null || _child$props$column === void 0 ? void 0 : _child$props$column.fixed) {
+        return child;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_sortableItemCol.default, {
+        id: child.key
+      }, child);
+    }));
+  }, [columns]);
+  var tableComponents = (0, _react.useMemo)(function () {
+    var _ref5 = components || {},
+        _ref5$body = _ref5.body,
+        body = _ref5$body === void 0 ? {} : _ref5$body,
+        _ref5$header = _ref5.header,
+        header = _ref5$header === void 0 ? {} : _ref5$header;
+
+    return {
+      // table: (record) => {
+      //   return <div style={record.style}>{record.children}</div>
+      // }
+      table: virtual ? _virTual.VirtualTable : null,
+      header: (0, _objectSpread2.default)({
+        row: colSortOpen ? colDraggableContainer : null,
+        cell: resizeable ? ResizableTitle : null
+      }, header),
+      body: (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        wrapper: sortOpen ? DraggableContainer : virtual ? _virTual.VirtualWrapper : null,
+        row: sortOpen ? DraggableBodyRow : virtual ? _virTual.VirtualRow : null
+      }, body), {}, {
+        cell: openSheet ? _sheelTableCell.default : null
+      })
+    };
+  }, [sortOpen, resizeable, components, colSortOpen]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%',
+      width: '100%'
+    },
+    ref: tableWarpRef
+  }, /*#__PURE__*/_react.default.createElement(_configProvider.default, {
+    renderEmpty: loading ? function () {
+      return null;
+    } : emptyProps ? function () {
+      return /*#__PURE__*/_react.default.createElement(_Empty.default, emptyProps, (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.footer) || null);
+    } : _customRenderEmpty.default
+  }, colSortOpen ? /*#__PURE__*/_react.default.createElement(_DndContainer.default, {
+    move: onColSortEnd
+  }, /*#__PURE__*/_react.default.createElement(_sortableBoxCol.default, {
+    items: columns.reduce(function (acc, item) {
+      return [].concat((0, _toConsumableArray2.default)(acc), [item.dataIndex]);
+    }, [])
+  }, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
+    loading: loading,
+    dataSource: dataSource,
+    components: tableComponents,
+    onChange: onTableChange,
+    expandable: {
+      onExpand: function onExpand() {
+        shellStatusRef.current = {
+          start: {},
+          end: {},
+          selecting: false,
+          forceEdit: false,
+          editing: {},
+          clear: {},
+          commiting: {}
+        };
+      },
+      expandedRowKeys: expandedRowKeys,
+      onExpandedRowsChange: function onExpandedRowsChange(expandedRows) {
+        return setExpandedRowKeys(expandedRows);
+      }
+    },
+    tableClassName: (0, _classnames.default)('lm_protable', resizeable && 'lm_resizeable'),
+    summary: function summary(pageData) {
+      return _summary && _summary(pageData, resultColumns);
+    }
+  })))) : /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
+    loading: loading,
+    dataSource: dataSource,
+    components: tableComponents,
+    onChange: onTableChange,
+    expandable: {
+      onExpand: function onExpand() {
+        shellStatusRef.current = {
+          start: {},
+          end: {},
+          selecting: false,
+          forceEdit: false,
+          editing: {},
+          clear: {},
+          commiting: {}
+        };
+      },
+      expandedRowKeys: expandedRowKeys,
+      onExpandedRowsChange: function onExpandedRowsChange(expandedRows) {
+        return setExpandedRowKeys(expandedRows);
+      }
+    },
+    tableClassName: (0, _classnames.default)('lm_protable', resizeable && 'lm_resizeable'),
+    summary: function summary(pageData) {
+      return _summary && _summary(pageData, resultColumns);
+    }
+  }))), !!customCheck && /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_customCheck"
+  }, customCheck), contextMenuStatus && /*#__PURE__*/_react.default.createElement("div", {
+    ref: contentMenuRef,
+    className: "WeChatContactsAvatarTools",
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "rightClickItems",
+    onClick: handleCopy
+  }, "\u590D\u5236"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "rightClickItems",
+    onClick: function onClick() {
+      return setChartsModalStatus('column');
+    }
+  }, "\u751F\u6210\u67F1\u72B6\u56FE"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "rightClickItems",
+    onClick: function onClick() {
+      return setChartsModalStatus('pie');
+    }
+  }, "\u751F\u6210\u997C\u56FE"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "rightClickItems",
+    onClick: function onClick() {
+      return setChartsModalStatus('line');
+    }
+  }, "\u751F\u6210\u6298\u7EBF\u56FE")), chartsModalStatus && /*#__PURE__*/_react.default.createElement(_tableChartsModal.default, {
+    type: chartsModalStatus,
+    onCancel: function onCancel() {
+      return setChartsModalStatus(false);
+    },
+    onOk: function onOk() {
+      return setChartsModalStatus(false);
+    },
+    data: dataSource,
+    columns: columns,
+    selectInfo: (0, _lodash.pick)(shellStatusRef.current, ['start', 'end'])
+  }));
+}); // 监听大小: 这里的高度是整个表格的高度，表体需要减去列头和分页的高度
+
+/** 1: 使用scroll.x y 来控制宽高 默认都是100% */
+
+var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$autoSizer = props.autoSizer,
+      autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer;
+
+  var _useState25 = (0, _react.useState)({
+    width: '100%',
+    height: '100%'
+  }),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      tableSize = _useState26[0],
+      setTableSize = _useState26[1];
+
+  var defaultRef = ref || (0, _react.useRef)(null);
+  var tableWarpRef = (0, _react.useRef)(null);
+  var resizeRef = (0, _react.useRef)(null);
+
+  if (!autoSizer) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: tableWarpRef,
+      id: "lm_protable_warp",
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    }, /*#__PURE__*/_react.default.createElement(ResetTable, (0, _extends2.default)({
+      ref: defaultRef
+    }, props, {
+      autoSize: {
+        height: '100%',
+        width: '100%'
+      }
+    })));
+  }
+
+  var resetHeight = (0, _react.useMemo)(function () {
+    var height = tableSize.height;
+    var h = height - 32;
+
+    if (!props.hiddenPage || props.customCheck) {
+      h -= 48;
+    }
+
+    if (props.columns.some(function (v) {
+      return v.children;
+    })) {
+      h -= 32;
+    }
+
+    return h;
+  }, [props.hiddenPage, props.customCheck, props.columns, tableSize]);
+  var throttleSize = (0, _react.useCallback)(function () {
+    var width = tableSize.width,
+        height = tableSize.height;
+    return /*#__PURE__*/_react.default.createElement(ResetTable, (0, _extends2.default)({
+      ref: defaultRef
+    }, props, {
+      autoSize: {
+        height: resetHeight,
+        width: width
+      }
+    }));
+  }, [tableSize, props]);
+
+  var changeSize = function changeSize() {
+    var _tableWarpRef$current;
+
+    var value = props.summary ? 48 : 0;
+
+    var _ref6 = ((_tableWarpRef$current = tableWarpRef.current) === null || _tableWarpRef$current === void 0 ? void 0 : _tableWarpRef$current.getBoundingClientRect()) || {},
+        _ref6$width = _ref6.width,
+        width = _ref6$width === void 0 ? '100%' : _ref6$width,
+        _ref6$height = _ref6.height,
+        height = _ref6$height === void 0 ? '100%' : _ref6$height;
+
+    setTableSize({
+      width: width,
+      height: typeof height === 'string' ? "calc(".concat(height, " - ").concat(value, "px)") : height - value
+    });
+  };
+
+  var handResize = (0, _lodash.throttle)(changeSize, 600);
+  (0, _react.useEffect)(function () {
+    var summary = props.summary;
+    setTimeout(function () {
+      var _tableWarpRef$current5;
+
+      var _tableWarpRef$current2 = (_tableWarpRef$current5 = tableWarpRef.current) === null || _tableWarpRef$current5 === void 0 ? void 0 : _tableWarpRef$current5.getBoundingClientRect(),
+          _tableWarpRef$current3 = _tableWarpRef$current2.width,
+          width = _tableWarpRef$current3 === void 0 ? '100%' : _tableWarpRef$current3,
+          _tableWarpRef$current4 = _tableWarpRef$current2.height,
+          height = _tableWarpRef$current4 === void 0 ? '100%' : _tableWarpRef$current4;
+
+      var value = summary ? 48 : 0;
+      setTableSize({
+        width: width,
+        height: typeof height === 'string' ? "calc(".concat(height, " - ").concat(value, "px)") : height - value
+      });
+    }, 100);
+    resizeRef.current = window.addEventListener('resize', handResize);
+    return function () {
+      window.removeEventListener('resize', handResize);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: tableWarpRef,
+    id: "lm_protable_warp",
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, throttleSize());
+});
+
+var _default = /*#__PURE__*/(0, _react.memo)(ResizeSize);
+
+exports.default = _default;