@ucloud-fe/react-components 1.3.9 → 1.3.13

package/lib/components/Table/Table.js

@@ -15,6 +15,8 @@ Object.defineProperty(exports, "prefixCls", {
 });
 exports.default = exports.TableContext = exports.placeholderKey = exports.deprecatedLogForOnRowSelect = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -69,12 +71,16 @@ var _rcTable = _interopRequireDefault(require("../../libs/rc-table"));
 
 var _deprecatedLog = _interopRequireDefault(require("../../utils/deprecatedLog"));
 
+var _warning = _interopRequireWildcard(require("../../utils/warning"));
+
 var _Pagination = _interopRequireDefault(require("../../components/Pagination"));
 
 var _Notice = _interopRequireDefault(require("../../components/Notice"));
 
 var _Checkbox = _interopRequireDefault(require("../../components/Checkbox"));
 
+var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
+
 var _Radio = _interopRequireDefault(require("../../components/Radio"));
 
 var _Select = _interopRequireDefault(require("../../components/Select"));
@@ -89,10 +95,12 @@ var _style = require("./style");
 
 var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
 
+var _DragWrap = _interopRequireDefault(require("./DragWrap"));
+
 var _TableRow = _interopRequireDefault(require("./TableRow"));
 
 var _excluded = ["options", "multiple", "onChange"],
-    _excluded2 = ["pagination", "dataSource", "columns", "rowSelection", "onRowSelect", "contextMenu", "emptyContent", "errorContent", "className", "style", "expandedRowRender", "expandIconAsCell", "expandIconColumnIndex", "defaultExpandAllRows", "title", "footer", "locale", "hideExpandIcon", "onRow", "components", "onExpand", "zebraCrossing", "columnPlaceholder", "tableLayout", "scroll", "customStyle"];
+    _excluded2 = ["pagination", "dataSource", "columns", "rowSelection", "onRowSelect", "contextMenu", "emptyContent", "errorContent", "className", "style", "expandedRowRender", "expandIconAsCell", "expandIconColumnIndex", "defaultExpandAllRows", "title", "footer", "locale", "hideExpandIcon", "onRow", "components", "onExpand", "zebraCrossing", "columnPlaceholder", "tableLayout", "scroll", "customStyle", "dragSorting"];
 
 var _this = void 0,
     _dec,
@@ -125,9 +133,11 @@ exports.TableContext = TableContext;
 
 var missingColumnKeyWarn = function missingColumnKeyWarn() {
   (0, _newArrowCheck2.default)(this, _this);
-  return console.error('Warning: Table column need a unique key');
+  return (0, _warning.default)('Table column need a unique key');
 }.bind(void 0);
 
+var dragSortingWarning = (0, _warning.onceWarning)("Can't use dragSorting with expandedRowRender or column.children");
+var uid = 0;
 var Table = (_dec = (0, _localeConsumerDecorator.default)({
   defaultLocale: _zh_CN.default,
   localeName: 'Table'
@@ -756,35 +766,56 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       return (key === undefined ? index : key) + '';
     };
 
-    _this2.getColumns = function (dataSourceOfCurrentPage, filters) {
+    _this2.getDragSorting = function () {
       var _this23 = this;
 
       (0, _newArrowCheck2.default)(this, _this3);
       var _this2$props2 = _this2.props,
-          columns = _this2$props2.columns,
-          rowSelection = _this2$props2.rowSelection,
-          columnPlaceholder = _this2$props2.columnPlaceholder,
-          locale = _this2$props2.locale,
-          dataSource = _this2$props2.dataSource;
+          dragSorting = _this2$props2.dragSorting,
+          expandedRowRender = _this2$props2.expandedRowRender,
+          columns = _this2$props2.columns;
+      if (!dragSorting) return false;
+
+      if (expandedRowRender || columns && columns.findIndex(function (column) {
+        (0, _newArrowCheck2.default)(this, _this23);
+        return !!column.children;
+      }.bind(this)) >= 0) {
+        dragSortingWarning();
+        return false;
+      }
+
+      return dragSorting;
+    }.bind(this);
+
+    _this2.getColumns = function (dataSourceOfCurrentPage, filters) {
+      var _this24 = this;
+
+      (0, _newArrowCheck2.default)(this, _this3);
+      var _this2$props3 = _this2.props,
+          columns = _this2$props3.columns,
+          rowSelection = _this2$props3.rowSelection,
+          columnPlaceholder = _this2$props3.columnPlaceholder,
+          locale = _this2$props3.locale,
+          dataSource = _this2$props3.dataSource;
       var _this2$state2 = _this2.state,
           _this2$state2$order = _this2$state2.order,
           currentOrder = _this2$state2$order === void 0 ? {} : _this2$state2$order,
           selectedRowKeyMap = _this2$state2.selectedRowKeyMap,
           columnConfig = _this2$state2.columnConfig;
       var cloneColumns = columns.map(function (column, index) {
-        (0, _newArrowCheck2.default)(this, _this23);
+        (0, _newArrowCheck2.default)(this, _this24);
         return _objectSpread(_objectSpread({}, column), {}, {
           index: index
         });
       }.bind(this));
       var newColumns = cloneColumns.filter(function (column) {
-        (0, _newArrowCheck2.default)(this, _this23);
+        (0, _newArrowCheck2.default)(this, _this24);
         var key = column.key;
         return !columnConfig[key] || !columnConfig[key].hidden;
       }.bind(this));
 
       var _generateColumnTitle = function generateColumnTitle(column) {
-        (0, _newArrowCheck2.default)(this, _this23);
+        (0, _newArrowCheck2.default)(this, _this24);
         var dataIndex = column.dataIndex,
             title = column.title,
             renderTitle = column.renderTitle,
@@ -819,42 +850,42 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
 
         if (rowSelection.getDisabledOfRow) {
           enableDataSourceOfCurrentPage = (0, _filter2.default)(flatDataSourceOfCurrentPage, function (item) {
-            (0, _newArrowCheck2.default)(this, _this23);
+            (0, _newArrowCheck2.default)(this, _this24);
             return !rowSelection.getDisabledOfRow(item.record);
           }.bind(this));
           enableDataSource = (0, _filter2.default)(flatDataSource, function (item) {
-            (0, _newArrowCheck2.default)(this, _this23);
+            (0, _newArrowCheck2.default)(this, _this24);
             return !rowSelection.getDisabledOfRow(item.record);
           }.bind(this));
         }
 
         var selectedEnableDataSourceOfCurrentPage = (0, _filter2.default)(enableDataSourceOfCurrentPage, function (item) {
-          (0, _newArrowCheck2.default)(this, _this23);
+          (0, _newArrowCheck2.default)(this, _this24);
           return selectedRowKeyMap[item.key];
         }.bind(this));
         var selectedEnableDataSource = (0, _filter2.default)(enableDataSource, function (item) {
-          (0, _newArrowCheck2.default)(this, _this23);
+          (0, _newArrowCheck2.default)(this, _this24);
           return selectedRowKeyMap[item.key];
         }.bind(this));
         var selectedEnableDataSourceOfCurrentPageCount = selectedEnableDataSourceOfCurrentPage.length;
         var isAllSelected = selectedEnableDataSourceOfCurrentPageCount === enableDataSourceOfCurrentPage.length && selectedEnableDataSourceOfCurrentPageCount > 0;
         var selectedCount = (0, _filter2.default)(selectedRowKeyMap, function (v) {
-          (0, _newArrowCheck2.default)(this, _this23);
+          (0, _newArrowCheck2.default)(this, _this24);
           return v;
         }.bind(this)).length;
 
         var renderSelectedAllCheckbox = function renderSelectedAllCheckbox() {
-          var _this24 = this;
+          var _this25 = this;
 
-          (0, _newArrowCheck2.default)(this, _this23);
+          (0, _newArrowCheck2.default)(this, _this24);
           return /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
             disabled: selectionDisabled,
             onChange: function () {
-              var _this25 = this;
+              var _this26 = this;
 
-              (0, _newArrowCheck2.default)(this, _this24);
+              (0, _newArrowCheck2.default)(this, _this25);
               var enableKeysOfCurrentPage = enableDataSourceOfCurrentPage.map(function (item) {
-                (0, _newArrowCheck2.default)(this, _this25);
+                (0, _newArrowCheck2.default)(this, _this26);
                 return item.key;
               }.bind(this));
 
@@ -871,11 +902,11 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
             getPopupContainer: _this2.getPopupContainer,
             popup: /*#__PURE__*/_react.default.createElement("span", null, locale.selected, " ", selectedCount, ' ', /*#__PURE__*/_react.default.createElement(_style.CancelSelect, {
               onClick: function () {
-                var _this26 = this;
+                var _this27 = this;
 
-                (0, _newArrowCheck2.default)(this, _this23);
+                (0, _newArrowCheck2.default)(this, _this24);
                 var enableKeys = selectedEnableDataSource.map(function (item) {
-                  (0, _newArrowCheck2.default)(this, _this26);
+                  (0, _newArrowCheck2.default)(this, _this27);
                   return item.key;
                 }.bind(this));
 
@@ -891,21 +922,21 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
           width: 32,
           fixed: rowSelection.fixed,
           onHeaderCell: function onHeaderCell() {
-            (0, _newArrowCheck2.default)(this, _this23);
+            (0, _newArrowCheck2.default)(this, _this24);
             return {
               className: _style.selectIconHeaderCls
             };
           }.bind(this),
           onCell: function onCell() {
-            (0, _newArrowCheck2.default)(this, _this23);
+            (0, _newArrowCheck2.default)(this, _this24);
             return {
               className: _style.selectIconCellCls
             };
           }.bind(this),
           render: function render(value, record, index) {
-            var _this27 = this;
+            var _this28 = this;
 
-            (0, _newArrowCheck2.default)(this, _this23);
+            (0, _newArrowCheck2.default)(this, _this24);
 
             var rowKey = _this2.getRowKey(record, index);
 
@@ -920,14 +951,14 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
             return rowSelection.multiple === false ? /*#__PURE__*/_react.default.createElement(_Radio.default, {
               disabled: disabled,
               onChange: function () {
-                (0, _newArrowCheck2.default)(this, _this27);
+                (0, _newArrowCheck2.default)(this, _this28);
                 return _this2.handleSelectRecord(rowKey);
               }.bind(this),
               checked: !!selectedRowKeyMap[rowKey]
             }) : /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
               disabled: disabled,
               onChange: function () {
-                (0, _newArrowCheck2.default)(this, _this27);
+                (0, _newArrowCheck2.default)(this, _this28);
                 return _this2.handleSelectRecord(rowKey, !selectedRowKeyMap[rowKey]);
               }.bind(this),
               checked: !!selectedRowKeyMap[rowKey]
@@ -936,28 +967,66 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
         });
       }
 
+      var dragSorting = _this2.getDragSorting();
+
+      if (dragSorting) {
+        newColumns.unshift({
+          title: null,
+          key: 'table_row_drag_sorting',
+          width: 40,
+          fixed: dragSorting === null || dragSorting === void 0 ? void 0 : dragSorting.fixed,
+          onHeaderCell: function onHeaderCell() {
+            (0, _newArrowCheck2.default)(this, _this24);
+            return {
+              className: _style.draggerHeaderCls
+            };
+          }.bind(this),
+          onCell: function onCell() {
+            (0, _newArrowCheck2.default)(this, _this24);
+            return {
+              className: _style.draggerCellCls
+            };
+          }.bind(this),
+          render: function render(value, record, index) {
+            (0, _newArrowCheck2.default)(this, _this24);
+
+            var rowKey = _this2.getRowKey(record, index);
+
+            return /*#__PURE__*/_react.default.createElement("span", {
+              "data-row-key": rowKey,
+              onMouseEnter: _this2.setDraggable,
+              onMouseLeave: _this2.unsetDraggable,
+              className: _style.draggerCls
+            }, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+              type: "dragger",
+              size: "16px"
+            }));
+          }.bind(this)
+        });
+      }
+
       if (columnPlaceholder) {
         var lastUnFixedIndex = (0, _findLastIndex2.default)(newColumns, function (columnConfig) {
-          (0, _newArrowCheck2.default)(this, _this23);
+          (0, _newArrowCheck2.default)(this, _this24);
           return !columnConfig.fixed;
         }.bind(this));
         newColumns.splice(lastUnFixedIndex + 1, 0, {
           title: '',
           key: placeholderKey,
           onHeaderCell: function onHeaderCell() {
-            (0, _newArrowCheck2.default)(this, _this23);
+            (0, _newArrowCheck2.default)(this, _this24);
             return {
               className: _style.placeholderHeaderCls
             };
           }.bind(this),
           onCell: function onCell() {
-            (0, _newArrowCheck2.default)(this, _this23);
+            (0, _newArrowCheck2.default)(this, _this24);
             return {
               className: _style.placeholderCellCls
             };
           }.bind(this),
           render: function render() {
-            (0, _newArrowCheck2.default)(this, _this23);
+            (0, _newArrowCheck2.default)(this, _this24);
             return null;
           }.bind(this)
         });
@@ -966,6 +1035,144 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       return newColumns;
     }.bind(this);
 
+    _this2.getTableDom = function () {
+      (0, _newArrowCheck2.default)(this, _this3);
+      return document.querySelector("[data-table-id=\"".concat(_this2.tableId, "\"]"));
+    }.bind(this);
+
+    _this2.getContentDom = function () {
+      (0, _newArrowCheck2.default)(this, _this3);
+      return _this2.getTableDom().querySelector(".".concat(_style.contentCls));
+    }.bind(this);
+
+    _this2.getBodyDom = function () {
+      (0, _newArrowCheck2.default)(this, _this3);
+      return _this2.getTableDom().querySelector(".".concat(_style.bodyCls));
+    }.bind(this);
+
+    _this2.getRowDom = function (rowKey) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      return _this2.getTableDom().querySelector("tr[data-row-key=\"".concat(rowKey, "\"]"));
+    }.bind(this);
+
+    _this2.getRowDomByIndex = function (rowIndex) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      return _this2.getTableDom().querySelector("tr[data-row-index=\"".concat(rowIndex, "\"]"));
+    }.bind(this);
+
+    _this2.__dragEnterCounter = null;
+
+    _this2.initDrag = function (source) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      _this2.__dragEnterCounter = 0;
+
+      _this2.unsetDragOver(source, source);
+    }.bind(this);
+
+    _this2.setDraggable = function (e) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      var rowKey = e.currentTarget.dataset['rowKey'];
+
+      _this2.getRowDom(rowKey).setAttribute('draggable', true);
+    }.bind(this);
+
+    _this2.unsetDraggable = function (e) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      var rowKey = e.currentTarget.dataset['rowKey'];
+
+      _this2.getRowDom(rowKey).setAttribute('draggable', false);
+    }.bind(this);
+
+    _this2.setDragOver = function (source, target) {
+      (0, _newArrowCheck2.default)(this, _this3);
+
+      var _this2$transformDomIn = _this2.transformDomIndex(source, target),
+          _this2$transformDomIn2 = (0, _slicedToArray2.default)(_this2$transformDomIn, 2),
+          sourceIndex = _this2$transformDomIn2[0],
+          targetIndex = _this2$transformDomIn2[1];
+
+      if (sourceIndex > targetIndex) targetIndex--;
+
+      if (targetIndex >= 0) {
+        var _this2$getRowDomByInd;
+
+        (_this2$getRowDomByInd = _this2.getRowDomByIndex(targetIndex)) === null || _this2$getRowDomByInd === void 0 ? void 0 : _this2$getRowDomByInd.classList.add(_style.dragOverDownCls);
+      } else {
+        _this2.getRowDomByIndex(0).classList.add(_style.dragOverUpCls);
+      }
+    }.bind(this);
+
+    _this2.unsetDragOver = function (source, target) {
+      (0, _newArrowCheck2.default)(this, _this3);
+
+      var _this2$transformDomIn3 = _this2.transformDomIndex(source, target),
+          _this2$transformDomIn4 = (0, _slicedToArray2.default)(_this2$transformDomIn3, 2),
+          sourceIndex = _this2$transformDomIn4[0],
+          targetIndex = _this2$transformDomIn4[1];
+
+      if (sourceIndex > targetIndex) targetIndex--;
+
+      if (targetIndex >= 0) {
+        var _this2$getRowDomByInd2;
+
+        (_this2$getRowDomByInd2 = _this2.getRowDomByIndex(targetIndex)) === null || _this2$getRowDomByInd2 === void 0 ? void 0 : _this2$getRowDomByInd2.classList.remove(_style.dragOverDownCls);
+      } else {
+        _this2.getRowDomByIndex(0).classList.remove(_style.dragOverUpCls);
+      }
+    }.bind(this);
+
+    _this2.onDragStart = function (source) {
+      (0, _newArrowCheck2.default)(this, _this3);
+
+      _this2.initDrag(source);
+    }.bind(this);
+
+    _this2.onDragEnd = function (source) {
+      (0, _newArrowCheck2.default)(this, _this3);
+
+      _this2.initDrag(source);
+    }.bind(this);
+
+    _this2.onDragEnter = function (source, target) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      _this2.__dragEnterCounter++;
+
+      _this2.unsetDragOver(source, source);
+
+      _this2.setDragOver(source, target);
+    }.bind(this);
+
+    _this2.onDragLeave = function (source, target) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      _this2.__dragEnterCounter--;
+
+      _this2.unsetDragOver(source, target); // drag out the table
+
+
+      if (!_this2.__dragEnterCounter) _this2.setDragOver(source, source);
+    }.bind(this);
+
+    _this2.onDrop = function (source, target) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      if (source === target) return;
+
+      var _this2$transformDomIn5 = _this2.transformDomIndex(source, target),
+          _this2$transformDomIn6 = (0, _slicedToArray2.default)(_this2$transformDomIn5, 2),
+          sourceIndex = _this2$transformDomIn6[0],
+          targetIndex = _this2$transformDomIn6[1];
+
+      var dragSorting = _this2.getDragSorting();
+
+      dragSorting === null || dragSorting === void 0 ? void 0 : dragSorting.onChange(sourceIndex, targetIndex);
+
+      _this2.initDrag(source);
+    }.bind(this);
+
+    _this2.transformDomIndex = function (source, target) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      return [+source.dataset['rowIndex'], +target.dataset['rowIndex']];
+    }.bind(this);
+
     _this2.getPagination = function () {
       (0, _newArrowCheck2.default)(this, _this3);
       var paginationS = _this2.state.pagination,
@@ -974,7 +1181,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
     }.bind(this);
 
     _this2.renderSearchInfo = function (option) {
-      var _this28 = this;
+      var _this29 = this;
 
       (0, _newArrowCheck2.default)(this, _this3);
       var filters = option.filters,
@@ -984,15 +1191,15 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       var first = true;
 
       var renderLabel = function renderLabel(_ref5) {
-        var _this29 = this;
+        var _this30 = this;
 
-        (0, _newArrowCheck2.default)(this, _this28);
+        (0, _newArrowCheck2.default)(this, _this29);
         var value = _ref5.value,
             _ref5$column$filter = _ref5.column.filter,
             multiple = _ref5$column$filter.multiple,
             options = _ref5$column$filter.options;
         options = options.map(function (option) {
-          (0, _newArrowCheck2.default)(this, _this29);
+          (0, _newArrowCheck2.default)(this, _this30);
           return !(0, _isObject2.default)(option) ? {
             value: option,
             label: option
@@ -1001,23 +1208,23 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
 
         if (multiple) {
           var label = (0, _map2.default)(value, function (v) {
-            var _this30 = this;
+            var _this31 = this;
 
-            (0, _newArrowCheck2.default)(this, _this29);
+            (0, _newArrowCheck2.default)(this, _this30);
             var option = (0, _find2.default)(options, function (option) {
-              (0, _newArrowCheck2.default)(this, _this30);
+              (0, _newArrowCheck2.default)(this, _this31);
               return v === option.value;
             }.bind(this));
             return option && option.label;
           }.bind(this));
           var _first = true;
           return (0, _map2.default)(label, function (_label) {
-            (0, _newArrowCheck2.default)(this, _this29);
+            (0, _newArrowCheck2.default)(this, _this30);
             return _first ? [_first = false, _label] : [' | ', _label];
           }.bind(this));
         } else {
           var _option = (0, _find2.default)(options, function (option) {
-            (0, _newArrowCheck2.default)(this, _this29);
+            (0, _newArrowCheck2.default)(this, _this30);
             return value === option.value;
           }.bind(this));
 
@@ -1033,7 +1240,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
         closable: false,
         className: "".concat(_style.prefixCls, "-filter-notice")
       }, searchValue && /*#__PURE__*/_react.default.createElement("span", null, locale.search, locale.colon, searchValue, locale.semicolon), !(0, _isEmpty2.default)(filters) && /*#__PURE__*/_react.default.createElement("span", null, locale.filter, locale.colon, (0, _map2.default)(filters, function (filterInfo) {
-        (0, _newArrowCheck2.default)(this, _this28);
+        (0, _newArrowCheck2.default)(this, _this29);
         return first ? [first = false, renderLabel(filterInfo)] : [', ', renderLabel(filterInfo)];
       }.bind(this)), locale.semicolon), /*#__PURE__*/_react.default.createElement("span", null, locale.searchResult, locale.colon, total, locale.items, locale.semicolon), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("a", {
         className: "".concat(_style.prefixCls, "-reset-link"),
@@ -1105,10 +1312,10 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
 
     _this2.onRow = function (record, index) {
       (0, _newArrowCheck2.default)(this, _this3);
-      var _this2$props3 = _this2.props,
-          _this2$props3$onRow = _this2$props3.onRow,
-          onRow = _this2$props3$onRow === void 0 ? noop : _this2$props3$onRow,
-          contextMenu = _this2$props3.contextMenu;
+      var _this2$props4 = _this2.props,
+          _this2$props4$onRow = _this2$props4.onRow,
+          onRow = _this2$props4$onRow === void 0 ? noop : _this2$props4$onRow,
+          contextMenu = _this2$props4.contextMenu;
       return _objectSpread(_objectSpread({}, onRow(record, index)), {}, {
         record: record,
         contextMenu: contextMenu
@@ -1132,7 +1339,8 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       selectedRowKeyMap: {},
       columnConfig: _props.defaultColumnConfig,
       searchValue: ''
-    }; // init pagination
+    };
+    _this2.tableId = "uc_table_uid_".concat(uid++); // init pagination
 
     var _pagination = _props.pagination;
 
@@ -1185,7 +1393,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
   (0, _createClass2.default)(Table, [{
     key: "render",
     value: function render() {
-      var _this31 = this;
+      var _this32 = this;
 
       /* eslint-disable no-unused-vars */
       var _this$props = this.props,
@@ -1218,6 +1426,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
           tableLayout = _this$props.tableLayout,
           scroll = _this$props.scroll,
           customStyle = _this$props.customStyle,
+          _dragSorting = _this$props.dragSorting,
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
 
       if (emptyContent === undefined) {
@@ -1246,7 +1455,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
 
       var columns = this.getColumns(dataSource, finalFilters);
       var defaultExpandAllRowsProps = !defaultExpandAllRows ? null : function () {
-        (0, _newArrowCheck2.default)(this, _this31);
+        (0, _newArrowCheck2.default)(this, _this32);
         var _this$state$changedUn = this.state.changedUnExpandedRowKeys,
             changedUnExpandedRowKeys = _this$state$changedUn === void 0 ? {} : _this$state$changedUn;
         var expandedRowKeys = this.getExpandedRowKeys(dataSource, changedUnExpandedRowKeys);
@@ -1254,7 +1463,15 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
           expandedRowKeys: expandedRowKeys
         };
       }.bind(this)();
-      return /*#__PURE__*/_react.default.createElement(_ContainerContext.InheritProvider, {
+      var dragSorting = this.getDragSorting();
+      return /*#__PURE__*/_react.default.createElement(_DragWrap.default, {
+        draggable: !!dragSorting,
+        onDragStart: this.onDragStart,
+        onDragEnd: this.onDragEnd,
+        onDrop: this.onDrop,
+        onDragEnter: this.onDragEnter,
+        onDragLeave: this.onDragLeave
+      }, /*#__PURE__*/_react.default.createElement(_ContainerContext.InheritProvider, {
         value: {
           getPopupContainer: this.getPopupContainer
         }
@@ -1271,7 +1488,8 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
         style: style,
         hideExpandIcon: hideExpandIcon,
         zebraCrossing: zebraCrossing,
-        customStyle: customStyle
+        customStyle: customStyle,
+        "data-table-id": this.tableId
       }, /*#__PURE__*/_react.default.createElement(_style.PopupContainer, {
         ref: this.savePopupContainer
       }), /*#__PURE__*/_react.default.createElement(_rcTable.default, (0, _extends2.default)({}, defaultExpandAllRowsProps, {
@@ -1293,7 +1511,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
         expandedRowRender: expandedRowRender,
         expandIconColumnIndex: expandIconColumnIndex === undefined ? columns[0] && columns[0].key === 'table_row_selection' ? 1 : 0 : expandIconColumnIndex,
         title: function () {
-          (0, _newArrowCheck2.default)(this, _this31);
+          (0, _newArrowCheck2.default)(this, _this32);
           return this.renderTitle({
             filters: finalFilters,
             searchValue: searchValue,
@@ -1302,7 +1520,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
           });
         }.bind(this),
         footer: function () {
-          (0, _newArrowCheck2.default)(this, _this31);
+          (0, _newArrowCheck2.default)(this, _this32);
           return this.renderFooter({
             dataSource: _d,
             emptyContent: emptyContent,
@@ -1318,7 +1536,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       }, pagination, {
         className: "".concat(_style.prefixCls, "-pagination"),
         onChange: function (current, pageSize) {
-          (0, _newArrowCheck2.default)(this, _this31);
+          (0, _newArrowCheck2.default)(this, _this32);
           this.setState({
             pagination: {
               current: current,
@@ -1328,7 +1546,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
           pagination.onChange && pagination.onChange(current, pageSize);
         }.bind(this),
         onPageSizeChange: function (current, pageSize) {
-          (0, _newArrowCheck2.default)(this, _this31);
+          (0, _newArrowCheck2.default)(this, _this32);
           this.setState({
             pagination: {
               current: current,
@@ -1338,7 +1556,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
           pagination.onPageSizeChange && pagination.onPageSizeChange(current, pageSize);
         }.bind(this),
         onAdvise: function (current, pageSize) {
-          (0, _newArrowCheck2.default)(this, _this31);
+          (0, _newArrowCheck2.default)(this, _this32);
           this.setState({
             pagination: {
               current: current,
@@ -1347,7 +1565,7 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
           });
           pagination.onAdvise && pagination.onAdvise(current, pageSize);
         }.bind(this)
-      })))));
+      }))))));
     }
   }]);
   return Table;
@@ -1449,6 +1667,13 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
     disabled: _propTypes.default.bool
   }), _propTypes.default.oneOf([true])]),
 
+  /** 拖拽排序 */
+  dragSorting: _propTypes.default.oneOfType([_propTypes.default.oneOf([true]), _propTypes.default.shape({
+    fixed: _propTypes.default.bool,
+    // (record, fromIndex, toIndex) => void
+    onChange: _propTypes.default.func
+  })]),
+
   /**
    * 列表选项变化回调
    * @deprecated - 请使用rowSelection.onChange来替换

package/lib/components/Table/TableRow.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+interface TableRowProps {
+    record: any;
+    contextMenu?: (record: any, hideContextMenu: () => void) => ReactNode;
+    draggable?: boolean;
+    'data-row-key'?: string | number;
+}
+declare const _default: React.MemoExoticComponent<({ ...restProps }: TableRowProps) => JSX.Element>;
+export default _default;