linkmore-design 1.1.11 → 1.1.13-alpha.0

package/lib/LmEditTable/EditTable.js

@@ -35,8 +35,6 @@ var _immer = require("immer");
 
 var _DndContainer = _interopRequireDefault(require("./DndContainer"));
 
-var _sortableBox = _interopRequireDefault(require("./sortableBox"));
-
 var _sortableBoxCol = _interopRequireDefault(require("./sortableBoxCol"));
 
 var _sortableItem = _interopRequireDefault(require("./sortableItem"));
@@ -49,8 +47,12 @@ var _UploadOss = _interopRequireDefault(require("../UploadOss"));
 
 var _util = require("./util");
 
+var _components = require("./components");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _virtual = require("./virtual");
+
 var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -105,7 +107,8 @@ var EditableContext = /*#__PURE__*/_react.default.createContext(null); // 表格
 
 var EditableRow = function EditableRow(_a) {
   var index = _a.index,
-      props = __rest(_a, ["index"]);
+      virtual = _a.virtual,
+      props = __rest(_a, ["index", "virtual"]);
 
   var _Form$useForm = _linkmoreDesign.Form.useForm(),
       _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
@@ -116,7 +119,7 @@ var EditableRow = function EditableRow(_a) {
     component: false
   }, /*#__PURE__*/_react.default.createElement(EditableContext.Provider, {
     value: form
-  }, /*#__PURE__*/_react.default.createElement("tr", Object.assign({}, props))));
+  }, virtual ? /*#__PURE__*/_react.default.createElement(_virtual.VirtualRow, Object.assign({}, props)) : /*#__PURE__*/_react.default.createElement("tr", Object.assign({}, props))));
 };
 
 var EditableSortRow = function EditableSortRow(_a) {
@@ -271,6 +274,15 @@ var Opetate = function Opetate(_ref) {
       options = _ref$options === void 0 ? ['add', 'delete'] : _ref$options,
       getLength = _ref.getLength,
       quickOpetateClearAll = _ref.quickOpetateClearAll;
+
+  var appendChildren = function appendChildren() {
+    handleAdd === null || handleAdd === void 0 ? void 0 : handleAdd(record, true);
+  };
+
+  var appendAdd = function appendAdd() {
+    handleAdd === null || handleAdd === void 0 ? void 0 : handleAdd(record);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -291,7 +303,27 @@ var Opetate = function Opetate(_ref) {
     onClick: function onClick() {
       return handleDelete(record[rowKey]);
     }
-  }), options.includes('add') && /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Button, {
+  }), (options === null || options === void 0 ? void 0 : options.includes('add')) && (options === null || options === void 0 ? void 0 : options.includes('addInChildren')) ? /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Popover, {
+    placement: "bottom",
+    overlayClassName: "lm_table_append_add_popover",
+    open: open,
+    title: null,
+    content: /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", {
+      onClick: appendAdd
+    }, "\u6DFB\u52A0\u5E73\u7EA7"), /*#__PURE__*/_react.default.createElement("li", {
+      onClick: appendChildren
+    }, "\u6DFB\u52A0\u5B50\u7EA7")),
+    trigger: "hover"
+  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Button, {
+    type: "link",
+    size: "small",
+    icon: /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+      type: "lmweb-plus-circle-fill",
+      style: {
+        fontSize: 16
+      }
+    })
+  })) : /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Button, {
     type: "link",
     size: "small",
     icon: /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
@@ -301,17 +333,10 @@ var Opetate = function Opetate(_ref) {
       }
     }),
     onClick: function onClick() {
-      return handleAdd(record);
+      return handleAdd(record, (options === null || options === void 0 ? void 0 : options.includes('addInChildren')) ? true : false);
     }
   }));
-}; // const isValidValue = (verifyValue) => {
-//   const toStringValue = JSON.stringify(verifyValue);
-//   if (verifyValue === undefined || verifyValue === null || verifyValue === '' || toStringValue === '[]' || toStringValue === '{}') {
-//     return false;
-//   }
-//   return true;
-// }
-
+};
 /*
   表格单元格
   editEnum： 下拉框时的数据数组（非数组时是配置设置）
@@ -363,6 +388,12 @@ var EditableCell = function EditableCell(props) {
 
   var inputRef = (0, _react.useRef)(null);
   var form = (0, _react.useContext)(EditableContext);
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      hoverStatus = _useState6[0],
+      setHoverStatus = _useState6[1];
+
   (0, _react.useEffect)(function () {
     var _a;
 
@@ -373,13 +404,7 @@ var EditableCell = function EditableCell(props) {
 
   var toggleEdit = function toggleEdit() {
     setEditing(!editing); // form.setFieldsValue({ [dataIndex]: record[dataIndex] });
-  }; // const checkCellRef = useRef(null)
-  // const focusCapturedRef = useRef(false);
-  // const curValue = useMemo(() => {
-  //   return record?.dataIndex
-  // }, [record])
-  // const curValueIsValid = isValidValue(curValue);
-  // 校验保存
+  }; // 校验保存
 
 
   var save = function save(row) {
@@ -462,15 +487,15 @@ var EditableCell = function EditableCell(props) {
   /** 快捷刷子，把当前的所有列的值，刷成当前的选中的列 */
 
 
-  var copyKey = function copyKey(e) {
+  var copyKey = function copyKey(e, type) {
     e === null || e === void 0 ? void 0 : e.stopPropagation();
     var dataIndex = col.dataIndex;
-    handleCopy === null || handleCopy === void 0 ? void 0 : handleCopy(dataIndex, record[dataIndex]);
+    handleCopy === null || handleCopy === void 0 ? void 0 : handleCopy(dataIndex, record[dataIndex], type, props.rowIndex);
   };
 
   var Control = function Control(con) {
     var resultComponentProps = (0, _lodash.isFunction)(componentProps) ? componentProps === null || componentProps === void 0 ? void 0 : componentProps(record, col) : componentProps;
-    var clearAttrComponentProps = (0, _lodash.omit)(resultComponentProps, ['optionOnly', 'isOnlyValue']);
+    var clearAttrComponentProps = (0, _lodash.omit)(resultComponentProps, ['optionOnly', 'isOnlyValue', 'quickcopy']);
 
     switch (con) {
       case 'input':
@@ -491,12 +516,6 @@ var EditableCell = function EditableCell(props) {
             noStyle: true
           }, /*#__PURE__*/_react.default.cloneElement(resultComponentProps.addonAfter, {
             onChange: handleFormItemChange
-          })) : null,
-          suffix: resultComponentProps.quickcopy ? /*#__PURE__*/_react.default.createElement("span", {
-            className: 'lm_table_quickcopy'
-          }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
-            onClick: copyKey,
-            type: 'lmweb-icon_m_brush'
           })) : null
         }));
 
@@ -579,7 +598,7 @@ var EditableCell = function EditableCell(props) {
 
       case 'switch':
         return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Switch, Object.assign({
-          size: 'small'
+          size: "small"
         }, clearAttrComponentProps, {
           onChange: handleFormItemChange
         }));
@@ -668,8 +687,7 @@ var EditableCell = function EditableCell(props) {
     }
 
     return childNode;
-  }, [col, isEdit, editing, getLength]); // const [childNode, setChildNode] = useState(getMemoChildNode);
-  // 出现死循环找我
+  }, [col, isEdit, editing, getLength]); // 出现死循环找我
 
   (0, _react.useEffect)(function () {
     var editable = col.editable,
@@ -677,22 +695,55 @@ var EditableCell = function EditableCell(props) {
 
     if (isEdit && editable) {
       form.setFieldsValue((0, _defineProperty2.default)({}, dataIndex, editable === 'date' ? (0, _moment.default)(record[dataIndex]) : record[dataIndex]));
-    } // if (
-    //   (isEdit && editable && record[dataIndex]) ||
-    //   (isHoverEdit && editable && record[dataIndex])
-    // ) {
-    //   form.setFieldsValue({
-    //     [dataIndex]: editable === 'date' ? moment(record[dataIndex]) : record[dataIndex],
-    //   })
-    // }
-
+    }
   }, [record]);
+
+  var handleTdHover = function handleTdHover() {
+    setHoverStatus(true);
+  };
+
+  var handleTdMouseOut = function handleTdMouseOut() {
+    setHoverStatus(false);
+  };
+
   return /*#__PURE__*/_react.default.createElement("td", Object.assign({}, (0, _lodash.omit)(clearProps, ['dataIndex']), {
     className: (0, _classnames.default)(clearProps === null || clearProps === void 0 ? void 0 : clearProps.className, 'lm_custom_cell_td'),
+    onMouseEnter: componentProps.quickcopy ? handleTdHover : undefined,
+    onMouseLeave: componentProps.quickcopy ? handleTdMouseOut : undefined,
     key: "r".concat(rowIndex, "_c").concat(colIndex)
-  }), getMemoChildNode);
+  }), hoverStatus && props.rowIndex > 0 && /*#__PURE__*/_react.default.createElement("span", {
+    className: 'quick_copy_warp quick_copy_up',
+    onClick: function onClick(e) {
+      return copyKey(e, 'up');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: 'lmweb-icon_up'
+  })), getMemoChildNode, hoverStatus && props.rowIndex < props.getLength - 1 && /*#__PURE__*/_react.default.createElement("span", {
+    className: 'quick_copy_warp quick_copy_down',
+    onClick: function onClick(e) {
+      return copyKey(e, 'down');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: 'lmweb-icon_down'
+  })));
 };
+/** true 不刷新， false 刷新 */
+
+
+var MemoEditableCell = /*#__PURE__*/(0, _react.memo)(EditableCell, function (prev, next) {
+  var pickProps = ['record', 'colIndex'];
+  var p = (0, _lodash.pick)(prev, pickProps);
+  var n = (0, _lodash.pick)(next, pickProps); // console.log(prev, next, '22', checkMemoShouldUploadSpecialFun(prev, next), isEqual(p, n))
+  // console.log(prev, next, '-sss')
+
+  /** TODO: 在record中带有children，子列表数据修改之后，会导致父级的record对比不一样 */
 
+  if (!(0, _util.checkMemoShouldUploadSpecialFun)(prev, next)) {
+    return false;
+  }
+
+  return (0, _lodash.isEqual)(p, n);
+});
 var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var defaultData = props.value,
       columns = props.columns,
@@ -710,6 +761,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _props$quickOpetateCl = props.quickOpetateClearAll,
       quickOpetateClearAll = _props$quickOpetateCl === void 0 ? true : _props$quickOpetateCl,
       rowSelection = props.rowSelection,
+      virtual = props.virtual,
       sortOpen = props.sortOpen,
       colSortOpen = props.colSortOpen,
       filterChange = props.filterChange,
@@ -718,7 +770,8 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       recordCreatorProps = props.recordCreatorProps,
       _props$shouldUpdate = props.shouldUpdate,
       shouldUpdate = _props$shouldUpdate === void 0 ? false : _props$shouldUpdate,
-      resetProps = __rest(props, ["value", "columns", "isEdit", "isAdd", "onChange", "rowKey", "rowHoverEdit", "isUseForm", "isHoverEdit", "useQuickOpetate", "quickOpetateClearAll", "rowSelection", "sortOpen", "colSortOpen", "filterChange", "size", "recordCreatorProps", "shouldUpdate"]); // const [dataSource, setDataSource] = useState([]);
+      resetProps = __rest(props // const [dataSource, setDataSource] = useState([]);
+  , ["value", "columns", "isEdit", "isAdd", "onChange", "rowKey", "rowHoverEdit", "isUseForm", "isHoverEdit", "useQuickOpetate", "quickOpetateClearAll", "rowSelection", "virtual", "sortOpen", "colSortOpen", "filterChange", "size", "recordCreatorProps", "shouldUpdate"]); // const [dataSource, setDataSource] = useState([]);
 
 
   var _useControllableValue = (0, _ahooks.useControllableValue)({
@@ -730,20 +783,15 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       setDataSource = _useControllableValue2[1]; // const [count, setCount] = useState(0);
 
 
-  var _useState5 = (0, _react.useState)({}),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      _valid = _useState6[0],
-      setValid = _useState6[1];
-
-  var _useState7 = (0, _react.useState)([]),
+  var _useState7 = (0, _react.useState)({}),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      localRowSelectList = _useState8[0],
-      setLocalRowSelectList = _useState8[1];
+      _valid = _useState8[0],
+      setValid = _useState8[1];
 
   var _useState9 = (0, _react.useState)([]),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      sortEditTable = _useState10[0],
-      setCallBackFalg = _useState10[1];
+      localRowSelectList = _useState10[0],
+      setLocalRowSelectList = _useState10[1];
   /** 当前展开的列 */
 
 
@@ -752,20 +800,10 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       expandedRowKeys = _useState12[0],
       setExpandedRowKeys = _useState12[1];
 
-  var dataSourceRef = (0, _react.useRef)([]);
-  var sortDataSorceRef = (0, _react.useRef)([]);
-  var deepDataSourceRef = (0, _react.useRef)([]);
-
-  var onSortEnd = function onSortEnd(active, over) {
-    var cloneArr = (0, _toConsumableArray2.default)(dataSourceRef.current);
-    var oldIndex = cloneArr.findIndex(function (v) {
-      return v[_rowKey] === active;
-    });
-    var newIndex = cloneArr.findIndex(function (v) {
-      return v[_rowKey] === over;
-    });
-    setDataSource((0, _sortable.arrayMove)(cloneArr, oldIndex, newIndex));
-  };
+  var dataSourceRef = (0, _react.useRef)(dataSource);
+  var deepDataSourceRef = (0, _react.useRef)((0, _util.deepDataSourcePreKeys)(dataSource, _rowKey));
+  dataSourceRef.current = dataSource;
+  deepDataSourceRef.current = (0, _util.deepDataSourcePreKeys)(dataSource, _rowKey);
 
   var onColSortEnd = function onColSortEnd(active, over) {
     var _a;
@@ -803,29 +841,9 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
     setDataSource(res); // onChange?.(res)
   };
-
-  (0, _react.useEffect)(function () {
-    var _a;
-
-    dataSourceRef.current = dataSource;
-    deepDataSourceRef.current = (0, _util.deepDataSourcePreKeys)(dataSource, _rowKey);
-
-    if (sortOpen) {
-      var dataSourceKeys = dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item) {
-        return item[_rowKey];
-      }).join(',');
-      var setCallBackFalgKeys = ((_a = sortDataSorceRef.current) === null || _a === void 0 ? void 0 : _a.map(function (item) {
-        return item[_rowKey];
-      }).join(',')) || '';
-
-      if (dataSourceKeys !== setCallBackFalgKeys) {
-        setCallBackFalg(dataSource);
-        sortDataSorceRef.current = dataSource;
-      }
-    }
-  }, [dataSource]);
   /** 本地缓存一个选择数据 */
 
+
   (0, _react.useEffect)(function () {
     if (rowSelection) {
       var selectedRowKeys = rowSelection.selectedRowKeys;
@@ -976,17 +994,31 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   /** 快捷添加 */
 
 
-  var handleTableRowAdd = function handleTableRowAdd(record) {
+  var handleTableRowAdd = function handleTableRowAdd(record, isAppendInChindren) {
     var _a, _b;
 
     var preKeys = (_b = (_a = deepDataSourceRef === null || deepDataSourceRef === void 0 ? void 0 : deepDataSourceRef.current) === null || _a === void 0 ? void 0 : _a[record[_rowKey]]) === null || _b === void 0 ? void 0 : _b.preKeys;
     var res = (0, _immer.produce)(dataSourceRef.current, function (draft) {
+      var _a, _b, _c, _d;
+
       if (preKeys.length > 1) {
         var deeps = function deeps(children) {
           children === null || children === void 0 ? void 0 : children.forEach(function (item, index) {
+            var _a;
+
             if (preKeys === null || preKeys === void 0 ? void 0 : preKeys.includes(item[_rowKey])) {
               if (item[_rowKey] === record[_rowKey]) {
-                children.splice(index + 1, 0, (0, _defineProperty2.default)({}, _rowKey, "".concat(Date.now())));
+                if (isAppendInChindren) {
+                  if (item === null || item === void 0 ? void 0 : item.children) {
+                    (_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.push((0, _defineProperty2.default)({}, _rowKey, "".concat(Date.now())));
+                  } else {
+                    item.children = [(0, _defineProperty2.default)({}, _rowKey, "".concat(Date.now()))];
+                  }
+
+                  !expandedRowKeys.includes(item[_rowKey]) && setExpandedRowKeys([].concat((0, _toConsumableArray2.default)(expandedRowKeys), [item[_rowKey]]));
+                } else {
+                  children.splice(index + 1, 0, (0, _defineProperty2.default)({}, _rowKey, "".concat(Date.now())));
+                }
               } else if (item.children) {
                 deeps(item.children);
               }
@@ -1001,17 +1033,29 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         });
 
         if (index !== -1) {
-          draft.splice(index + 1, 0, (0, _defineProperty2.default)({}, _rowKey, "".concat(Date.now())));
+          if (isAppendInChindren) {
+            if ((_a = draft[index].children) === null || _a === void 0 ? void 0 : _a.length) {
+              (_b = draft[index].children) === null || _b === void 0 ? void 0 : _b.push((0, _defineProperty2.default)({}, _rowKey, "".concat(Date.now())));
+            } else {
+              draft[index].children = [(0, _defineProperty2.default)({}, _rowKey, "".concat(Date.now()))];
+            }
+
+            !expandedRowKeys.includes((_c = draft[index]) === null || _c === void 0 ? void 0 : _c[_rowKey]) && setExpandedRowKeys([].concat((0, _toConsumableArray2.default)(expandedRowKeys), [(_d = draft[index]) === null || _d === void 0 ? void 0 : _d[_rowKey]]));
+          } else {
+            draft.splice(index + 1, 0, (0, _defineProperty2.default)({}, _rowKey, "".concat(Date.now())));
+          }
         }
       }
     });
     setDataSource(res);
   };
 
-  var handleCopy = function handleCopy(key, value) {
+  var handleCopy = function handleCopy(key, value, type, rowIndex) {
     var res = (0, _immer.produce)(dataSourceRef.current, function (draft) {
-      draft === null || draft === void 0 ? void 0 : draft.forEach(function (item) {
-        return item[key] = value;
+      draft === null || draft === void 0 ? void 0 : draft.forEach(function (item, index) {
+        if (type === 'up' && index < rowIndex || type === 'down' && index > rowIndex) {
+          item[key] = value;
+        }
       });
     });
     setDataSource(res);
@@ -1038,9 +1082,9 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var DisableOptions = (0, _react.useMemo)(function () {
     var newColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (item) {
-      var _ref3 = item.componentProps || {},
-          optionOnly = _ref3.optionOnly,
-          options = _ref3.options;
+      var _ref5 = item.componentProps || {},
+          optionOnly = _ref5.optionOnly,
+          options = _ref5.options;
 
       if (optionOnly && options) {
         var dataIndex = item.dataIndex;
@@ -1124,19 +1168,6 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
 
       var newCol = Object.assign(Object.assign({}, col), {
-        shouldCellUpdate: function shouldCellUpdate(record, prevRecord) {
-          var _a;
-
-          var dataIndex = col.dataIndex,
-              editable = col.editable,
-              relevanceCols = col.relevanceCols;
-
-          if ((col === null || col === void 0 ? void 0 : col.fixed) || hasDisableOptions && hasDisableOptions.includes(dataIndex) || ((_a = col.componentProps) === null || _a === void 0 ? void 0 : _a.options) || editable === 'render' || !!relevanceCols || !!shouldUpdate) {
-            return true;
-          }
-
-          return record[dataIndex] !== prevRecord[dataIndex];
-        },
         onCell: function onCell(record, rowIndex) {
           return {
             getLength: dataSource.length,
@@ -1176,20 +1207,19 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return mapColumns(col, index);
     });
     return res;
-  }, [columns, isAdd, sortOpen, useQuickOpetate, sortEditTable, dataSource, (0, _toConsumableArray2.default)(memoOptions)]);
-  var DraggableContainer = (0, _react.useCallback)(function (_a) {
-    var _b;
+  }, [columns, isAdd, sortOpen, useQuickOpetate, dataSource, (0, _toConsumableArray2.default)(memoOptions)]);
 
-    var props = __rest(_a, []);
+  var onSortEnd = function onSortEnd(active, over) {
+    var cloneArr = (0, _toConsumableArray2.default)(dataSourceRef.current);
+    var oldIndex = cloneArr.findIndex(function (v) {
+      return v[_rowKey] === active;
+    });
+    var newIndex = cloneArr.findIndex(function (v) {
+      return v[_rowKey] === over;
+    });
+    setDataSource((0, _sortable.arrayMove)(cloneArr, oldIndex, newIndex));
+  };
 
-    return /*#__PURE__*/_react.default.createElement(_DndContainer.default, {
-      move: onSortEnd
-    }, /*#__PURE__*/_react.default.createElement(_sortableBox.default, {
-      items: (_b = dataSourceRef.current) === null || _b === void 0 ? void 0 : _b.map(function (item) {
-        return item[_rowKey];
-      })
-    }, /*#__PURE__*/_react.default.createElement("tbody", Object.assign({}, props))));
-  }, [sortEditTable]);
   var colDraggableContainer = (0, _react.useCallback)(function (_a) {
     var _b;
 
@@ -1207,34 +1237,6 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }, child);
     }));
   }, [columns]);
-  var config = (0, _react.useMemo)(function () {
-    var component = {
-      body: Object.assign({
-        row: sortOpen ? EditableSortRow : EditableRow,
-        cell: EditableCell
-      }, sortOpen ? {
-        wrapper: DraggableContainer
-      } : {})
-    };
-
-    if (colSortOpen) {
-      component['header'] = {
-        row: colDraggableContainer
-      };
-    }
-
-    return Object.assign({
-      pagination: false,
-      tableLayout: 'fixed',
-      scroll: {
-        x: '100%'
-      },
-      rowKey: function rowKey(record) {
-        return record[_rowKey] || record.index || Math.random();
-      },
-      components: component
-    }, resetProps);
-  }, [resultColumns, dataSource, sortOpen, colSortOpen, size]);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       setRow: handleSave,
@@ -1246,6 +1248,46 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var isShowAddAction = (0, _react.useMemo)(function () {
     return isEdit && isAdd || isHoverEdit && isAdd;
   }, [isEdit, isAdd, isHoverEdit]);
+  var config = (0, _react.useRef)(Object.assign({
+    pagination: false,
+    tableLayout: 'fixed',
+    scroll: {
+      x: '100%'
+    },
+    rowKey: function rowKey(record) {
+      return record[_rowKey] || record.index || Math.random();
+    },
+    components: {
+      table: virtual ? _virtual.VirtualTable : null,
+      body: Object.assign({
+        row: function row(rowProps) {
+          return sortOpen ? EditableSortRow(Object.assign(Object.assign({}, rowProps), {
+            virtual: virtual
+          })) : EditableRow(Object.assign(Object.assign({}, rowProps), {
+            virtual: virtual
+          }));
+        },
+        cell: MemoEditableCell
+      }, sortOpen ? {
+        wrapper: function wrapper(wrapperProps) {
+          var _a;
+
+          return (0, _components.DraggableContainer)(Object.assign(Object.assign({}, wrapperProps), {
+            virtual: virtual,
+            keys: (_a = dataSourceRef.current) === null || _a === void 0 ? void 0 : _a.map(function (item) {
+              return item[_rowKey];
+            }),
+            onSortEnd: onSortEnd
+          }));
+        }
+      } : virtual ? {
+        wrapper: _virtual.VirtualWrapper
+      } : {}),
+      header: {
+        row: colSortOpen ? colDraggableContainer : null
+      }
+    }
+  }, resetProps));
 
   if (colSortOpen) {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -1256,7 +1298,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       items: columns.reduce(function (acc, item) {
         return [].concat((0, _toConsumableArray2.default)(acc), [item.dataIndex]);
       }, [])
-    }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Table, Object.assign({}, config, {
+    }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Table, Object.assign({}, config.current, {
       size: size || 'small',
       columns: resultColumns,
       rowClassName: "editable-row",
@@ -1290,7 +1332,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "lm_editTable_warpper"
-  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Table, Object.assign({}, config, {
+  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Table, Object.assign({}, config.current, {
     size: size || 'small',
     columns: resultColumns,
     rowClassName: "editable-row",

package/lib/LmEditTable/components/DraggableContainer.d.ts

@@ -0,0 +1,7 @@
+declare const DraggableContainer: ({ keys, onSortEnd, virtual, ...props }: {
+    [x: string]: any;
+    keys: any;
+    onSortEnd: any;
+    virtual: any;
+}) => JSX.Element;
+export default DraggableContainer;

package/lib/LmEditTable/components/DraggableContainer.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DndContainer = _interopRequireDefault(require("../DndContainer"));
+
+var _sortableBox = _interopRequireDefault(require("../sortableBox"));
+
+var _virtual = require("../virtual");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var DraggableContainer = function DraggableContainer(_a) {
+  var keys = _a.keys,
+      onSortEnd = _a.onSortEnd,
+      virtual = _a.virtual,
+      props = __rest(_a, ["keys", "onSortEnd", "virtual"]);
+
+  return /*#__PURE__*/_react.default.createElement(_DndContainer.default, {
+    move: onSortEnd
+  }, /*#__PURE__*/_react.default.createElement(_sortableBox.default, {
+    items: keys
+  }, virtual ? /*#__PURE__*/_react.default.createElement(_virtual.VirtualWrapper, Object.assign({}, props)) : /*#__PURE__*/_react.default.createElement("tbody", Object.assign({}, props))));
+};
+
+var _default = DraggableContainer;
+exports.default = _default;

package/lib/LmEditTable/components/index.d.ts

@@ -0,0 +1,11 @@
+import DraggableContainer from './DraggableContainer';
+export { DraggableContainer };
+declare const _default: {
+    DraggableContainer: ({ keys, onSortEnd, virtual, ...props }: {
+        [x: string]: any;
+        keys: any;
+        onSortEnd: any;
+        virtual: any;
+    }) => JSX.Element;
+};
+export default _default;

package/lib/LmEditTable/components/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DraggableContainer", {
+  enumerable: true,
+  get: function get() {
+    return _DraggableContainer.default;
+  }
+});
+exports.default = void 0;
+
+var _DraggableContainer = _interopRequireDefault(require("./DraggableContainer"));
+
+var _default = {
+  DraggableContainer: _DraggableContainer.default
+};
+exports.default = _default;

package/lib/LmEditTable/sortableItem.d.ts

@@ -1,2 +1,3 @@
-declare const SortableItem: (props: any) => JSX.Element;
-export default SortableItem;
+import React from 'react';
+declare const _default: React.MemoExoticComponent<(props: any) => JSX.Element>;
+export default _default;