@zat-design/sisyphus-react 3.6.6-beta.6 → 3.6.6-beta.7

package/dist/index.esm.css

@@ -1783,6 +1783,15 @@
 .pro-table.pro-table-draggable-only .ant-table-tbody .anticon {
   margin-right: 0;
 }
+.pro-table .ant-table-cell-with-append {
+  white-space: nowrap;
+  position: relative;
+  z-index: 100;
+}
+.pro-table .ant-table-row-expand-icon {
+  position: absolute;
+  left: -16px;
+}
 .pro-table .ant-table-content > table .ant-table-summary {
   background-color: var(--zaui-table-header-bg, #f2f3f5);
   color: var(--zaui-text, #343434);

package/dist/less.esm.css

@@ -1783,6 +1783,15 @@
 .pro-table.pro-table-draggable-only .ant-table-tbody .anticon {
   margin-right: 0;
 }
+.pro-table .ant-table-cell-with-append {
+  white-space: nowrap;
+  position: relative;
+  z-index: 100;
+}
+.pro-table .ant-table-row-expand-icon {
+  position: absolute;
+  left: -16px;
+}
 .pro-table .ant-table-content > table .ant-table-summary {
   background-color: var(--zaui-table-header-bg, #f2f3f5);
   color: var(--zaui-text, #343434);

package/es/ProForm/utils/useWatch.d.ts

@@ -2,6 +2,5 @@ import { InternalNamePath, FormInstance, NamePath } from 'rc-field-form/es/inter
 export declare function toArray<T>(value?: T | T[] | null): T[];
 export declare function getNamePath(path: NamePath | null): InternalNamePath;
 export declare function stringify(value: any): string | number;
-declare function useWatch(dependencies: string, form?: FormInstance, wait?: number): any;
-declare function useWatch(dependencies: NamePath[], form?: FormInstance, wait?: number): any[];
+declare function useWatch(dependencies: string | NamePath[], form?: FormInstance, wait?: number): any;
 export default useWatch;

package/es/ProTable/components/DndWrapper/index.d.ts

@@ -5,11 +5,12 @@ interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     disabled?: boolean;
 }
 export declare const Row: FC<RowProps>;
-declare const DndWrapper: ({ draggable, value, onChange, disabled, children }: {
+declare const DndWrapper: ({ draggable, value, onChange, disabled, children, rowKey }: {
     draggable: any;
     value: any;
     onChange: any;
     disabled: any;
     children: any;
+    rowKey: any;
 }) => any;
 export default DndWrapper;

package/es/ProTable/components/DndWrapper/index.js

@@ -1,11 +1,13 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["disabled", "children"];
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { DndContext } from '@dnd-kit/core';
+import { DndContext, closestCorners } from '@dnd-kit/core';
 import { arrayMove, useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { addLevelAndParentId, treeNodeFind, transformTreeToArray, createTreeFromArray } from './utils/index';
 import ProIcon from '../../../ProIcon';
 export var Row = function Row(props) {
   var disabled = props.disabled,
@@ -60,30 +62,67 @@ export var Row = function Row(props) {
   }));
 };
 var DndWrapper = function DndWrapper(_ref2) {
-  var _value$;
+  var _flatTree$;
   var draggable = _ref2.draggable,
     value = _ref2.value,
     onChange = _ref2.onChange,
     disabled = _ref2.disabled,
-    children = _ref2.children;
+    children = _ref2.children,
+    rowKey = _ref2.rowKey;
   var onDragEnd = function onDragEnd(_ref3) {
     var active = _ref3.active,
       over = _ref3.over;
+    // 为数据源划分层级及parentId
+    var transformedValue = addLevelAndParentId(value, rowKey);
+    // 同一level层级的且parentId相同的，可以互相之间拖拽替换
     if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
-      var activeIndex = value.findIndex(function (i) {
-        return i.rowKey === active.id;
+      var activeObject = treeNodeFind(transformedValue, function (t) {
+        return t.rowKey === active.id;
       });
-      var overIndex = value.findIndex(function (i) {
-        return i.rowKey === (over === null || over === void 0 ? void 0 : over.id);
+      var overObject = treeNodeFind(transformedValue, function (t) {
+        return t.rowKey === (over === null || over === void 0 ? void 0 : over.id);
       });
-      var nextValue = arrayMove(value, activeIndex, overIndex);
-      onChange(nextValue);
+      if (activeObject && overObject) {
+        var activeLevel = activeObject.level,
+          activeParentId = activeObject.parentId;
+        var overLevel = overObject.level,
+          overParentId = overObject.parentId;
+        if (activeLevel === overLevel && activeParentId === overParentId) {
+          // 将树平铺
+          var _flatTree = transformTreeToArray(transformedValue).map(function (item) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              children: undefined
+            });
+          });
+          var activeIndex = _flatTree.findIndex(function (i) {
+            return i.rowKey === active.id;
+          });
+          var overIndex = _flatTree.findIndex(function (i) {
+            return i.rowKey === (over === null || over === void 0 ? void 0 : over.id);
+          });
+          var nextValue = arrayMove(_flatTree, activeIndex, overIndex);
+          onChange(createTreeFromArray(nextValue, {
+            itemKey: 'rowKey',
+            parentKey: 'parentId',
+            childrenKey: 'children'
+          }));
+        }
+      }
+    } else {
+      onChange(_toConsumableArray(value));
     }
   };
+  // 将树平铺
+  var flatTree = transformTreeToArray(value).map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      children: undefined
+    });
+  });
   return draggable && !disabled ? _jsx(DndContext, {
     onDragEnd: onDragEnd,
+    collisionDetection: closestCorners,
     children: _jsx(SortableContext, {
-      items: (value === null || value === void 0 ? void 0 : (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.rowKey) ? value.map(function (i) {
+      items: (flatTree === null || flatTree === void 0 ? void 0 : (_flatTree$ = flatTree[0]) === null || _flatTree$ === void 0 ? void 0 : _flatTree$.rowKey) ? flatTree.map(function (i) {
         return i.rowKey;
       }) : [],
       strategy: verticalListSortingStrategy,

package/es/ProTable/components/DndWrapper/utils/index.d.ts

@@ -0,0 +1,8 @@
+import { ChildrenKey, Tree, BaseCallbackMeta, BaseInnerOptions, FindCallback, FindOptions, ArrayItemWithParentKey, FromArrayOptions, TreeWithParentKey, TypeOfKey, ForeachOptions, ForeachCallback, ToArrayOptions } from './propsType';
+export declare const getRowKey: (rowKey: any, record: any) => any;
+export declare const addLevelAndParentId: (tree: any[], rowKey: any, currentLevel?: number, currentParentId?: any) => any[];
+export declare function getFinalChildrenKey<T extends ChildrenKey>(tree: Tree<T>, meta: BaseCallbackMeta, options: BaseInnerOptions<T>): ChildrenKey;
+export declare function treeNodeFind<T extends ChildrenKey>(tree: Tree<T> | Tree<T>[], callback: FindCallback<T>, options?: FindOptions): Tree<T> | undefined;
+export declare function createTreeFromArray<K extends TypeOfKey, P extends TypeOfKey, T extends ChildrenKey>(array: ArrayItemWithParentKey<K, P>[], options?: FromArrayOptions): TreeWithParentKey<K, P, T>[];
+export declare function treeForEach<T extends ChildrenKey>(tree: Tree<T> | Tree<T>[], callback: ForeachCallback<T>, options?: ForeachOptions): void;
+export declare function transformTreeToArray<T extends ChildrenKey>(tree: Tree<T> | Tree<T>[], options?: ToArrayOptions): Tree<T>[];

package/es/ProTable/components/DndWrapper/utils/index.js

@@ -0,0 +1,165 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+export var getRowKey = function getRowKey(rowKey, record) {
+  // 默认取id
+  var key = record.rowKey || 'id';
+  if (rowKey) {
+    var _ref;
+    key = (_ref = typeof rowKey === 'function' ? rowKey(record) : record[rowKey]) !== null && _ref !== void 0 ? _ref : key;
+  }
+  return key;
+};
+var _addLevelAndParentId = function addLevelAndParentId(tree, rowKey) {
+  var currentLevel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var currentParentId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  return tree.map(function (node) {
+    var newNode = _objectSpread({}, node);
+    newNode.level = currentLevel;
+    newNode.parentId = currentParentId;
+    newNode.rowKey = getRowKey(rowKey, node);
+    if (node.children) {
+      newNode.children = _addLevelAndParentId(node.children, rowKey, currentLevel + 1, newNode.rowKey);
+    }
+    return newNode;
+  });
+};
+export { _addLevelAndParentId as addLevelAndParentId };
+export function getFinalChildrenKey(tree, meta, options) {
+  if (typeof options.getChildrenKey === 'function') {
+    var dynamicChildrenKey = options.getChildrenKey(tree, meta);
+    if (dynamicChildrenKey != null) {
+      return dynamicChildrenKey;
+    }
+  }
+  return options.childrenKey;
+}
+// 前置深度优先遍历
+var _treeNodePreImpl = function treeNodePreImpl(treeItem, callback, options) {
+  var callbackResult = callback(treeItem, options);
+  if (callbackResult) {
+    return treeItem;
+  }
+  var finalChildrenKey = getFinalChildrenKey(treeItem, options, options);
+  var children = treeItem[finalChildrenKey];
+  if (!children || !Array.isArray(children)) {
+    return undefined;
+  }
+  for (var i = 0, count = children.length; i < count; i++) {
+    var childItem = children[i];
+    var findOne = _treeNodePreImpl(childItem, callback, _objectSpread(_objectSpread({}, options), {}, {
+      parents: [].concat(_toConsumableArray(options.parents), [treeItem]),
+      depth: options.depth + 1
+    }));
+    if (findOne) {
+      return findOne;
+    }
+  }
+  return undefined;
+};
+var treeNodeStrategies = {
+  pre: _treeNodePreImpl
+};
+export function treeNodeFind(tree, callback, options) {
+  var _options$childrenKey, _options$strategy;
+  var childrenKey = (_options$childrenKey = options === null || options === void 0 ? void 0 : options.childrenKey) !== null && _options$childrenKey !== void 0 ? _options$childrenKey : 'children';
+  var strategy = (_options$strategy = options === null || options === void 0 ? void 0 : options.strategy) !== null && _options$strategy !== void 0 ? _options$strategy : 'pre';
+  var getChildrenKey = options === null || options === void 0 ? void 0 : options.getChildrenKey;
+  var method = treeNodeStrategies[strategy];
+  var innerOptions = {
+    childrenKey: childrenKey,
+    depth: 0,
+    parents: [],
+    getChildrenKey: getChildrenKey
+  };
+  if (Array.isArray(tree)) {
+    for (var i = 0, count = tree.length; i < count; i++) {
+      var treeItem = tree[i];
+      var result = method(treeItem, callback, innerOptions);
+      if (result) {
+        return result;
+      }
+    }
+    return undefined;
+  }
+  return method(tree, callback, innerOptions);
+}
+export function createTreeFromArray(array, options) {
+  var result = [];
+  var _ref2 = options || {},
+    _ref2$parentKey = _ref2.parentKey,
+    parentKey = _ref2$parentKey === void 0 ? 'pid' : _ref2$parentKey,
+    _ref2$itemKey = _ref2.itemKey,
+    itemKey = _ref2$itemKey === void 0 ? 'id' : _ref2$itemKey,
+    _ref2$childrenKey = _ref2.childrenKey,
+    childrenKey = _ref2$childrenKey === void 0 ? 'children' : _ref2$childrenKey;
+  var map = new Map();
+  array.map(function (item) {
+    var itemKeyValue = item[itemKey];
+    if (!map.get(itemKeyValue)) {
+      map.set(itemKeyValue, item);
+    }
+    return item;
+  });
+  array.map(function (item) {
+    var parentKeyValue = item[parentKey];
+    var parentItem = map.get(parentKeyValue);
+    if (!parentItem || !parentKeyValue) {
+      result.push(item);
+      return;
+    }
+    var siblings = parentItem[childrenKey];
+    if (siblings === null || siblings === undefined) {
+      // disable eslint tslint
+      parentItem[childrenKey] = [item];
+    } else if (Array.isArray(siblings)) {
+      siblings.push(item);
+    } else {
+      var msg = "the key \"".concat(childrenKey, "\" is not an array, please check your data");
+      throw new Error(msg);
+    }
+    return item;
+  });
+  return result;
+}
+// 前置遍历
+var _treeForEachPreImpl = function treeForEachPreImpl(treeItem, callback, options) {
+  callback(treeItem, options);
+  var finalChildrenKey = getFinalChildrenKey(treeItem, options, options);
+  var children = treeItem[finalChildrenKey];
+  if (children && Array.isArray(children)) {
+    var nextLevelOptions = _objectSpread(_objectSpread({}, options), {}, {
+      parents: [].concat(_toConsumableArray(options.parents), [treeItem]),
+      depth: options.depth + 1
+    });
+    children.forEach(function (childItem) {
+      _treeForEachPreImpl(childItem, callback, nextLevelOptions);
+    });
+  }
+};
+var treeForEachStrategies = {
+  pre: _treeForEachPreImpl
+};
+export function treeForEach(tree, callback, options) {
+  var _options$childrenKey2, _options$strategy2;
+  var childrenKey = (_options$childrenKey2 = options === null || options === void 0 ? void 0 : options.childrenKey) !== null && _options$childrenKey2 !== void 0 ? _options$childrenKey2 : 'children';
+  var strategy = (_options$strategy2 = options === null || options === void 0 ? void 0 : options.strategy) !== null && _options$strategy2 !== void 0 ? _options$strategy2 : 'pre';
+  var getChildrenKey = options === null || options === void 0 ? void 0 : options.getChildrenKey;
+  var isForest = Array.isArray(tree);
+  var method = treeForEachStrategies[strategy];
+  var innerOptions = {
+    childrenKey: childrenKey,
+    depth: 0,
+    parents: [],
+    getChildrenKey: getChildrenKey
+  };
+  isForest ? tree.forEach(function (tree) {
+    method(tree, callback, innerOptions);
+  }) : method(tree, callback, innerOptions);
+}
+export function transformTreeToArray(tree, options) {
+  var results = [];
+  treeForEach(tree, function (t) {
+    results.push(t);
+  }, options);
+  return results;
+}

package/es/ProTable/components/DndWrapper/utils/propsType.d.ts

@@ -0,0 +1,61 @@
+export type TreeKey = string | number;
+export type ChildrenKey = TreeKey;
+export type Tree<T extends ChildrenKey = 'children'> = {
+    [key in T]?: Tree<T>[];
+} & {
+    [key in TreeKey]: any;
+};
+export type Strategy = 'pre' | 'post' | 'breadth';
+export interface BaseOptions {
+    itemKey?: String;
+    parentKey?: String;
+    childrenKey?: ChildrenKey;
+    strategy?: Strategy;
+    getChildrenKey?: (tree: Tree, meta: BaseCallbackMeta) => ChildrenKey | undefined;
+}
+export interface BaseInnerOptions<T extends ChildrenKey = 'children'> {
+    childrenKey: ChildrenKey;
+    parents: Tree<T>[];
+    depth: number;
+    getChildrenKey?: (tree: Tree, meta: BaseCallbackMeta) => ChildrenKey | undefined;
+}
+export interface BaseCallbackMeta<T extends ChildrenKey = 'children'> {
+    depth: number;
+    parents?: Tree<T>[];
+}
+export type FindOptions = BaseOptions;
+export type FindCallbackMeta<T extends ChildrenKey> = BaseCallbackMeta<T>;
+export type FindCallback<T extends ChildrenKey> = (treeItem: Tree<T>, meta: FindCallbackMeta<T>) => boolean | undefined;
+type FindInnerOption<T extends ChildrenKey> = BaseInnerOptions<T>;
+export type FindImpl<T extends ChildrenKey> = (treeItem: Tree<T>, callback: FindCallback<T>, options: FindInnerOption<T>) => Tree<T> | undefined;
+export interface QueueItem {
+    tree: Tree<ChildrenKey>;
+    options: FindInnerOption<ChildrenKey>;
+}
+export type TypeOfKey = string;
+export type KeyValue = string | number | undefined | null;
+export type ArrayItemWithParentKey<P extends TypeOfKey, K extends TypeOfKey> = Record<string, any> & {
+    [key in P]?: KeyValue;
+} & {
+    [key in K]?: KeyValue;
+};
+export type TreeWithParentKey<K extends TypeOfKey, P extends TypeOfKey, T extends ChildrenKey> = Record<string, any> & {
+    [key in P]?: KeyValue;
+} & {
+    [key in K]: KeyValue;
+} & {
+    [key in T]?: TreeWithParentKey<K, P, T>[];
+};
+export interface FromArrayOptions {
+    parentKey?: TypeOfKey;
+    itemKey?: TypeOfKey;
+    childrenKey?: ChildrenKey;
+}
+export type FromArray<K extends TypeOfKey, P extends TypeOfKey, T extends ChildrenKey> = (array: ArrayItemWithParentKey<K, P>[], options: FromArrayOptions) => TreeWithParentKey<K, P, T>[];
+export type ForeachOptions = BaseOptions;
+export type ForeachCallbackMeta<T extends ChildrenKey> = BaseCallbackMeta<T>;
+export type ForeachCallback<T extends ChildrenKey> = (treeItem: Tree<T>, meta: ForeachCallbackMeta<T>) => void;
+export type ForeachInnerOption<T extends ChildrenKey> = BaseInnerOptions<T>;
+export type ForeachImpl<T extends ChildrenKey> = (treeItem: Tree<T>, callback: ForeachCallback<T>, options: ForeachInnerOption<T>) => void;
+export type ToArrayOptions = ForeachOptions;
+export {};

package/es/ProTable/components/DndWrapper/utils/propsType.js

@@ -0,0 +1 @@
+export {};

package/es/ProTable/index.js

@@ -370,6 +370,7 @@ function ProTable(props) {
         onChange: onDataSourceChange,
         disabled: false,
         draggable: draggable,
+        rowKey: rowKey,
         children: [(headerRender || columnConfig || resizeColumn) && _jsxs("div", {
           className: "column-config",
           children: [_jsx("div", {

package/es/ProTable/style/index.less

@@ -9,6 +9,15 @@
       }
     }
   }
+  .@{ant-prefix}-table-cell-with-append {
+    white-space: nowrap;
+    position: relative;
+    z-index: 100;
+  }
+  .@{ant-prefix}-table-row-expand-icon {
+    position: absolute;
+    left: -16px;
+  }
 
   .@{ant-prefix}-table-content {
     >table {

package/lib/ProForm/utils/useWatch.d.ts

@@ -2,6 +2,5 @@ import { InternalNamePath, FormInstance, NamePath } from 'rc-field-form/es/inter
 export declare function toArray<T>(value?: T | T[] | null): T[];
 export declare function getNamePath(path: NamePath | null): InternalNamePath;
 export declare function stringify(value: any): string | number;
-declare function useWatch(dependencies: string, form?: FormInstance, wait?: number): any;
-declare function useWatch(dependencies: NamePath[], form?: FormInstance, wait?: number): any[];
+declare function useWatch(dependencies: string | NamePath[], form?: FormInstance, wait?: number): any;
 export default useWatch;

package/lib/ProTable/components/DndWrapper/index.d.ts

@@ -5,11 +5,12 @@ interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     disabled?: boolean;
 }
 export declare const Row: FC<RowProps>;
-declare const DndWrapper: ({ draggable, value, onChange, disabled, children }: {
+declare const DndWrapper: ({ draggable, value, onChange, disabled, children, rowKey }: {
     draggable: any;
     value: any;
     onChange: any;
     disabled: any;
     children: any;
+    rowKey: any;
 }) => any;
 export default DndWrapper;

package/lib/ProTable/components/DndWrapper/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Row = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -12,6 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
 var _utilities = require("@dnd-kit/utilities");
+var _index = require("./utils/index");
 var _ProIcon = _interopRequireDefault(require("../../../ProIcon"));
 var _excluded = ["disabled", "children"];
 var Row = exports.Row = function Row(props) {
@@ -67,30 +69,67 @@ var Row = exports.Row = function Row(props) {
   }));
 };
 var DndWrapper = function DndWrapper(_ref2) {
-  var _value$;
+  var _flatTree$;
   var draggable = _ref2.draggable,
     value = _ref2.value,
     onChange = _ref2.onChange,
     disabled = _ref2.disabled,
-    children = _ref2.children;
+    children = _ref2.children,
+    rowKey = _ref2.rowKey;
   var onDragEnd = function onDragEnd(_ref3) {
     var active = _ref3.active,
       over = _ref3.over;
+    // 为数据源划分层级及parentId
+    var transformedValue = (0, _index.addLevelAndParentId)(value, rowKey);
+    // 同一level层级的且parentId相同的，可以互相之间拖拽替换
     if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
-      var activeIndex = value.findIndex(function (i) {
-        return i.rowKey === active.id;
+      var activeObject = (0, _index.treeNodeFind)(transformedValue, function (t) {
+        return t.rowKey === active.id;
       });
-      var overIndex = value.findIndex(function (i) {
-        return i.rowKey === (over === null || over === void 0 ? void 0 : over.id);
+      var overObject = (0, _index.treeNodeFind)(transformedValue, function (t) {
+        return t.rowKey === (over === null || over === void 0 ? void 0 : over.id);
       });
-      var nextValue = (0, _sortable.arrayMove)(value, activeIndex, overIndex);
-      onChange(nextValue);
+      if (activeObject && overObject) {
+        var activeLevel = activeObject.level,
+          activeParentId = activeObject.parentId;
+        var overLevel = overObject.level,
+          overParentId = overObject.parentId;
+        if (activeLevel === overLevel && activeParentId === overParentId) {
+          // 将树平铺
+          var _flatTree = (0, _index.transformTreeToArray)(transformedValue).map(function (item) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+              children: undefined
+            });
+          });
+          var activeIndex = _flatTree.findIndex(function (i) {
+            return i.rowKey === active.id;
+          });
+          var overIndex = _flatTree.findIndex(function (i) {
+            return i.rowKey === (over === null || over === void 0 ? void 0 : over.id);
+          });
+          var nextValue = (0, _sortable.arrayMove)(_flatTree, activeIndex, overIndex);
+          onChange((0, _index.createTreeFromArray)(nextValue, {
+            itemKey: 'rowKey',
+            parentKey: 'parentId',
+            childrenKey: 'children'
+          }));
+        }
+      }
+    } else {
+      onChange((0, _toConsumableArray2.default)(value));
     }
   };
+  // 将树平铺
+  var flatTree = (0, _index.transformTreeToArray)(value).map(function (item) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+      children: undefined
+    });
+  });
   return draggable && !disabled ? (0, _jsxRuntime.jsx)(_core.DndContext, {
     onDragEnd: onDragEnd,
+    collisionDetection: _core.closestCorners,
     children: (0, _jsxRuntime.jsx)(_sortable.SortableContext, {
-      items: (value === null || value === void 0 ? void 0 : (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.rowKey) ? value.map(function (i) {
+      items: (flatTree === null || flatTree === void 0 ? void 0 : (_flatTree$ = flatTree[0]) === null || _flatTree$ === void 0 ? void 0 : _flatTree$.rowKey) ? flatTree.map(function (i) {
         return i.rowKey;
       }) : [],
       strategy: _sortable.verticalListSortingStrategy,

package/lib/ProTable/components/DndWrapper/utils/index.d.ts

@@ -0,0 +1,8 @@
+import { ChildrenKey, Tree, BaseCallbackMeta, BaseInnerOptions, FindCallback, FindOptions, ArrayItemWithParentKey, FromArrayOptions, TreeWithParentKey, TypeOfKey, ForeachOptions, ForeachCallback, ToArrayOptions } from './propsType';
+export declare const getRowKey: (rowKey: any, record: any) => any;
+export declare const addLevelAndParentId: (tree: any[], rowKey: any, currentLevel?: number, currentParentId?: any) => any[];
+export declare function getFinalChildrenKey<T extends ChildrenKey>(tree: Tree<T>, meta: BaseCallbackMeta, options: BaseInnerOptions<T>): ChildrenKey;
+export declare function treeNodeFind<T extends ChildrenKey>(tree: Tree<T> | Tree<T>[], callback: FindCallback<T>, options?: FindOptions): Tree<T> | undefined;
+export declare function createTreeFromArray<K extends TypeOfKey, P extends TypeOfKey, T extends ChildrenKey>(array: ArrayItemWithParentKey<K, P>[], options?: FromArrayOptions): TreeWithParentKey<K, P, T>[];
+export declare function treeForEach<T extends ChildrenKey>(tree: Tree<T> | Tree<T>[], callback: ForeachCallback<T>, options?: ForeachOptions): void;
+export declare function transformTreeToArray<T extends ChildrenKey>(tree: Tree<T> | Tree<T>[], options?: ToArrayOptions): Tree<T>[];

package/lib/ProTable/components/DndWrapper/utils/index.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addLevelAndParentId = void 0;
+exports.createTreeFromArray = createTreeFromArray;
+exports.getFinalChildrenKey = getFinalChildrenKey;
+exports.getRowKey = void 0;
+exports.transformTreeToArray = transformTreeToArray;
+exports.treeForEach = treeForEach;
+exports.treeNodeFind = treeNodeFind;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var getRowKey = exports.getRowKey = function getRowKey(rowKey, record) {
+  // 默认取id
+  var key = record.rowKey || 'id';
+  if (rowKey) {
+    var _ref;
+    key = (_ref = typeof rowKey === 'function' ? rowKey(record) : record[rowKey]) !== null && _ref !== void 0 ? _ref : key;
+  }
+  return key;
+};
+var _addLevelAndParentId = exports.addLevelAndParentId = function addLevelAndParentId(tree, rowKey) {
+  var currentLevel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var currentParentId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  return tree.map(function (node) {
+    var newNode = (0, _objectSpread2.default)({}, node);
+    newNode.level = currentLevel;
+    newNode.parentId = currentParentId;
+    newNode.rowKey = getRowKey(rowKey, node);
+    if (node.children) {
+      newNode.children = _addLevelAndParentId(node.children, rowKey, currentLevel + 1, newNode.rowKey);
+    }
+    return newNode;
+  });
+};
+function getFinalChildrenKey(tree, meta, options) {
+  if (typeof options.getChildrenKey === 'function') {
+    var dynamicChildrenKey = options.getChildrenKey(tree, meta);
+    if (dynamicChildrenKey != null) {
+      return dynamicChildrenKey;
+    }
+  }
+  return options.childrenKey;
+}
+// 前置深度优先遍历
+var _treeNodePreImpl = function treeNodePreImpl(treeItem, callback, options) {
+  var callbackResult = callback(treeItem, options);
+  if (callbackResult) {
+    return treeItem;
+  }
+  var finalChildrenKey = getFinalChildrenKey(treeItem, options, options);
+  var children = treeItem[finalChildrenKey];
+  if (!children || !Array.isArray(children)) {
+    return undefined;
+  }
+  for (var i = 0, count = children.length; i < count; i++) {
+    var childItem = children[i];
+    var findOne = _treeNodePreImpl(childItem, callback, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, options), {}, {
+      parents: [].concat((0, _toConsumableArray2.default)(options.parents), [treeItem]),
+      depth: options.depth + 1
+    }));
+    if (findOne) {
+      return findOne;
+    }
+  }
+  return undefined;
+};
+var treeNodeStrategies = {
+  pre: _treeNodePreImpl
+};
+function treeNodeFind(tree, callback, options) {
+  var _options$childrenKey, _options$strategy;
+  var childrenKey = (_options$childrenKey = options === null || options === void 0 ? void 0 : options.childrenKey) !== null && _options$childrenKey !== void 0 ? _options$childrenKey : 'children';
+  var strategy = (_options$strategy = options === null || options === void 0 ? void 0 : options.strategy) !== null && _options$strategy !== void 0 ? _options$strategy : 'pre';
+  var getChildrenKey = options === null || options === void 0 ? void 0 : options.getChildrenKey;
+  var method = treeNodeStrategies[strategy];
+  var innerOptions = {
+    childrenKey: childrenKey,
+    depth: 0,
+    parents: [],
+    getChildrenKey: getChildrenKey
+  };
+  if (Array.isArray(tree)) {
+    for (var i = 0, count = tree.length; i < count; i++) {
+      var treeItem = tree[i];
+      var result = method(treeItem, callback, innerOptions);
+      if (result) {
+        return result;
+      }
+    }
+    return undefined;
+  }
+  return method(tree, callback, innerOptions);
+}
+function createTreeFromArray(array, options) {
+  var result = [];
+  var _ref2 = options || {},
+    _ref2$parentKey = _ref2.parentKey,
+    parentKey = _ref2$parentKey === void 0 ? 'pid' : _ref2$parentKey,
+    _ref2$itemKey = _ref2.itemKey,
+    itemKey = _ref2$itemKey === void 0 ? 'id' : _ref2$itemKey,
+    _ref2$childrenKey = _ref2.childrenKey,
+    childrenKey = _ref2$childrenKey === void 0 ? 'children' : _ref2$childrenKey;
+  var map = new Map();
+  array.map(function (item) {
+    var itemKeyValue = item[itemKey];
+    if (!map.get(itemKeyValue)) {
+      map.set(itemKeyValue, item);
+    }
+    return item;
+  });
+  array.map(function (item) {
+    var parentKeyValue = item[parentKey];
+    var parentItem = map.get(parentKeyValue);
+    if (!parentItem || !parentKeyValue) {
+      result.push(item);
+      return;
+    }
+    var siblings = parentItem[childrenKey];
+    if (siblings === null || siblings === undefined) {
+      // disable eslint tslint
+      parentItem[childrenKey] = [item];
+    } else if (Array.isArray(siblings)) {
+      siblings.push(item);
+    } else {
+      var msg = "the key \"".concat(childrenKey, "\" is not an array, please check your data");
+      throw new Error(msg);
+    }
+    return item;
+  });
+  return result;
+}
+// 前置遍历
+var _treeForEachPreImpl = function treeForEachPreImpl(treeItem, callback, options) {
+  callback(treeItem, options);
+  var finalChildrenKey = getFinalChildrenKey(treeItem, options, options);
+  var children = treeItem[finalChildrenKey];
+  if (children && Array.isArray(children)) {
+    var nextLevelOptions = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, options), {}, {
+      parents: [].concat((0, _toConsumableArray2.default)(options.parents), [treeItem]),
+      depth: options.depth + 1
+    });
+    children.forEach(function (childItem) {
+      _treeForEachPreImpl(childItem, callback, nextLevelOptions);
+    });
+  }
+};
+var treeForEachStrategies = {
+  pre: _treeForEachPreImpl
+};
+function treeForEach(tree, callback, options) {
+  var _options$childrenKey2, _options$strategy2;
+  var childrenKey = (_options$childrenKey2 = options === null || options === void 0 ? void 0 : options.childrenKey) !== null && _options$childrenKey2 !== void 0 ? _options$childrenKey2 : 'children';
+  var strategy = (_options$strategy2 = options === null || options === void 0 ? void 0 : options.strategy) !== null && _options$strategy2 !== void 0 ? _options$strategy2 : 'pre';
+  var getChildrenKey = options === null || options === void 0 ? void 0 : options.getChildrenKey;
+  var isForest = Array.isArray(tree);
+  var method = treeForEachStrategies[strategy];
+  var innerOptions = {
+    childrenKey: childrenKey,
+    depth: 0,
+    parents: [],
+    getChildrenKey: getChildrenKey
+  };
+  isForest ? tree.forEach(function (tree) {
+    method(tree, callback, innerOptions);
+  }) : method(tree, callback, innerOptions);
+}
+function transformTreeToArray(tree, options) {
+  var results = [];
+  treeForEach(tree, function (t) {
+    results.push(t);
+  }, options);
+  return results;
+}

package/lib/ProTable/components/DndWrapper/utils/propsType.d.ts

@@ -0,0 +1,61 @@
+export type TreeKey = string | number;
+export type ChildrenKey = TreeKey;
+export type Tree<T extends ChildrenKey = 'children'> = {
+    [key in T]?: Tree<T>[];
+} & {
+    [key in TreeKey]: any;
+};
+export type Strategy = 'pre' | 'post' | 'breadth';
+export interface BaseOptions {
+    itemKey?: String;
+    parentKey?: String;
+    childrenKey?: ChildrenKey;
+    strategy?: Strategy;
+    getChildrenKey?: (tree: Tree, meta: BaseCallbackMeta) => ChildrenKey | undefined;
+}
+export interface BaseInnerOptions<T extends ChildrenKey = 'children'> {
+    childrenKey: ChildrenKey;
+    parents: Tree<T>[];
+    depth: number;
+    getChildrenKey?: (tree: Tree, meta: BaseCallbackMeta) => ChildrenKey | undefined;
+}
+export interface BaseCallbackMeta<T extends ChildrenKey = 'children'> {
+    depth: number;
+    parents?: Tree<T>[];
+}
+export type FindOptions = BaseOptions;
+export type FindCallbackMeta<T extends ChildrenKey> = BaseCallbackMeta<T>;
+export type FindCallback<T extends ChildrenKey> = (treeItem: Tree<T>, meta: FindCallbackMeta<T>) => boolean | undefined;
+type FindInnerOption<T extends ChildrenKey> = BaseInnerOptions<T>;
+export type FindImpl<T extends ChildrenKey> = (treeItem: Tree<T>, callback: FindCallback<T>, options: FindInnerOption<T>) => Tree<T> | undefined;
+export interface QueueItem {
+    tree: Tree<ChildrenKey>;
+    options: FindInnerOption<ChildrenKey>;
+}
+export type TypeOfKey = string;
+export type KeyValue = string | number | undefined | null;
+export type ArrayItemWithParentKey<P extends TypeOfKey, K extends TypeOfKey> = Record<string, any> & {
+    [key in P]?: KeyValue;
+} & {
+    [key in K]?: KeyValue;
+};
+export type TreeWithParentKey<K extends TypeOfKey, P extends TypeOfKey, T extends ChildrenKey> = Record<string, any> & {
+    [key in P]?: KeyValue;
+} & {
+    [key in K]: KeyValue;
+} & {
+    [key in T]?: TreeWithParentKey<K, P, T>[];
+};
+export interface FromArrayOptions {
+    parentKey?: TypeOfKey;
+    itemKey?: TypeOfKey;
+    childrenKey?: ChildrenKey;
+}
+export type FromArray<K extends TypeOfKey, P extends TypeOfKey, T extends ChildrenKey> = (array: ArrayItemWithParentKey<K, P>[], options: FromArrayOptions) => TreeWithParentKey<K, P, T>[];
+export type ForeachOptions = BaseOptions;
+export type ForeachCallbackMeta<T extends ChildrenKey> = BaseCallbackMeta<T>;
+export type ForeachCallback<T extends ChildrenKey> = (treeItem: Tree<T>, meta: ForeachCallbackMeta<T>) => void;
+export type ForeachInnerOption<T extends ChildrenKey> = BaseInnerOptions<T>;
+export type ForeachImpl<T extends ChildrenKey> = (treeItem: Tree<T>, callback: ForeachCallback<T>, options: ForeachInnerOption<T>) => void;
+export type ToArrayOptions = ForeachOptions;
+export {};

package/lib/ProTable/components/DndWrapper/utils/propsType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/ProTable/index.js

@@ -374,6 +374,7 @@ function ProTable(props) {
         onChange: onDataSourceChange,
         disabled: false,
         draggable: draggable,
+        rowKey: rowKey,
         children: [(headerRender || columnConfig || resizeColumn) && (0, _jsxRuntime.jsxs)("div", {
           className: "column-config",
           children: [(0, _jsxRuntime.jsx)("div", {

package/lib/ProTable/style/index.less

@@ -9,6 +9,15 @@
       }
     }
   }
+  .@{ant-prefix}-table-cell-with-append {
+    white-space: nowrap;
+    position: relative;
+    z-index: 100;
+  }
+  .@{ant-prefix}-table-row-expand-icon {
+    position: absolute;
+    left: -16px;
+  }
 
   .@{ant-prefix}-table-content {
     >table {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.6.6-beta.6",
+  "version": "3.6.6-beta.7",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -68,8 +68,7 @@
     "rc-resize-observer": "^1.4.0",
     "react-resizable": "^3.0.4",
     "react-svg": "^15.1.7",
-    "react-window": "^1.8.10",
-    "commander": "<=9.2.0"
+    "react-window": "^1.8.10"
   },
   "peerDependencies": {
     "antd": "^4.24.8",
@@ -97,6 +96,7 @@
     "@zat-design/login-react": "1.0.25",
     "babel-eslint": "10.0.3",
     "babel-plugin-import": "^1.13.3",
+    "commander": "<=9.2.0",
     "cross-env": "^7.0.3",
     "dumi": "^1.0.9",
     "eslint": "7.10.0",