form-driver 0.4.21 → 0.4.22

package/src/ui/widget/EnhancedSortDrag.tsx

@@ -1,21 +1,41 @@
 import { HolderOutlined } from "@ant-design/icons";
 import {
-  draggable,
-  dropTargetForElements,
-  monitorForElements,
-} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+  DndContext,
+  closestCenter,
+  DragOverlay,
+  TouchSensor,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  DragStartEvent,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  arrayMove,
+  verticalListSortingStrategy,
+  horizontalListSortingStrategy,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import clsx from "clsx";
 import React, {
   memo,
   ReactNode,
   useCallback,
-  useEffect,
-  useRef,
   useState,
+  useMemo,
 } from "react";
 
+import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
+
 import "./EnhancedSortDrag.less";
 
+// 使用 @dnd-kit 原生的 listeners 类型
+type DndListeners = SyntheticListenerMap | undefined;
+
 /**
  * 拖拽项数据类型定义
  */
@@ -44,7 +64,7 @@ export interface EnhancedSortDragProps {
   /** 拖拽失败回调 */
   onDragFail?: (error: DragError) => void;
   /** 自定义拖拽句柄渲染 */
-  renderDragHandle?: (item: DragItem, isDragging: boolean) => ReactNode;
+  renderDragHandle?: (item: DragItem, isDragging: boolean, listeners?: DndListeners) => ReactNode;
   /** 拖拽预览内容 */
   renderDragPreview?: (item: DragItem) => ReactNode;
   /** 是否为表格行模式 */
@@ -79,6 +99,119 @@ interface ValidationResult {
   error?: DragError;
 }
 
+/**
+ * 可排序的拖拽项子组件
+ */
+const SortableEnhancedItem: React.FC<{
+  item: DragItem;
+  index: number;
+  enableAnimation: boolean;
+  direction: "vertical" | "horizontal";
+  renderDragHandle?: (item: DragItem, isDragging: boolean, listeners?: DndListeners) => ReactNode;
+  isTableRow: boolean;
+}> = memo(({ item, index, enableAnimation, direction, renderDragHandle, isTableRow }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: item.id,
+    disabled: !item.isChecked,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition: enableAnimation ? transition : undefined,
+  };
+
+  const renderDefaultDragHandle = () => (
+    <div className="enhanced-dragHandleWrapper">
+      <HolderOutlined
+        className="enhanced-dragHandleIcon"
+        style={{
+          opacity: isDragging ? 0.5 : 1,
+          transition: enableAnimation ? "opacity 0.2s" : "none",
+        }}
+      />
+    </div>
+  );
+
+  // 表格行模式
+  if (isTableRow) {
+    return (
+      <tr
+        ref={setNodeRef}
+        key={item.id}
+        data-drag-id={item.id}
+        data-drag-index={index}
+        style={{
+          opacity: isDragging ? 0.5 : 1,
+          ...style,
+        }}
+        {...attributes}
+      >
+        {renderDragHandle ? (
+          renderDragHandle(item, isDragging, listeners)
+        ) : (
+          <td
+            {...listeners}
+            style={{
+              cursor: isDragging ? "grabbing" : "grab",
+              textAlign: "center",
+              width: "40px",
+            }}
+          >
+            <HolderOutlined
+              style={{
+                opacity: isDragging ? 0.5 : 1,
+                transition: enableAnimation ? "opacity 0.2s" : "none",
+              }}
+            />
+          </td>
+        )}
+        {item.cpn}
+      </tr>
+    );
+  }
+
+  // 普通模式
+  const itemClass = clsx("enhanced-dragItem", {
+    dragging: isDragging,
+    disabled: !item.isChecked,
+    [`direction-${direction}`]: true,
+  });
+
+  return (
+    <div
+      className={itemClass}
+      ref={setNodeRef}
+      key={item.id}
+      data-drag-id={item.id}
+      data-drag-index={index}
+      style={style}
+      {...attributes}
+    >
+      <div className="enhanced-dragBody">{item.cpn}</div>
+      <div className="enhanced-dragHandle">
+        {item.isChecked && (
+          renderDragHandle
+            ? renderDragHandle(item, isDragging, listeners)
+            : (
+              <div {...listeners}>
+                {renderDefaultDragHandle()}
+              </div>
+            )
+        )}
+      </div>
+    </div>
+  );
+});
+
+SortableEnhancedItem.displayName = "SortableEnhancedItem";
+
 /**
  * 增强版通用拖拽排序组件
  * 解决原组件的性能问题和功能局限性
@@ -96,23 +229,33 @@ const EnhancedSortDrag: React.FC<EnhancedSortDragProps> = memo((props) => {
     isTableRow = false,
   } = props;
 
-  // 使用 useRef 缓存 items 避免不必要的重渲染
-  const itemsRef = useRef<DragItem[]>(items);
-  itemsRef.current = items;
-
   // 拖拽状态管理
+  const [activeId, setActiveId] = useState<string | null>(null);
   const [dragState, setDragState] = useState<DragState>({
     draggingId: null,
     droppingId: null,
     isAnimating: false,
   });
 
-  // 使用 Map 替代对象，提高查找性能
-  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());
-  const dragHandleRefs = useRef<Map<string, HTMLSpanElement>>(new Map());
-
-  // 清理函数缓存，避免重复注册
-  const cleanupRefs = useRef<Map<string, () => void>>(new Map());
+  /**
+   * 配置传感器
+   */
+  const sensors = useSensors(
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 200,
+        tolerance: 5,
+      },
+    }),
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 10,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
 
   /**
    * 验证拖拽操作是否有效
@@ -194,304 +337,171 @@ const EnhancedSortDrag: React.FC<EnhancedSortDragProps> = memo((props) => {
   );
 
   /**
-   * 交换数据逻辑 - 核心拖拽算法
+   * 拖拽开始事件处理
    */
-  const swapItems = useCallback(
-    (fromId: string, toId: string) => {
-      try {
-        const currentItems = [...itemsRef.current];
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    const { active } = event;
+    setActiveId(active.id as string);
+    setDragState((prev) => ({
+      ...prev,
+      draggingId: active.id as string,
+      isAnimating: !!enableAnimation,
+    }));
+  }, [enableAnimation]);
 
-        // 验证拖拽操作
-        const validation = validateDragOperation(fromId, toId, currentItems);
+  /**
+   * 拖拽结束事件处理
+   */
+  const handleDragEnd = useCallback((event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveId(null);
+    setDragState((prev) => ({
+      ...prev,
+      draggingId: null,
+      droppingId: null,
+      isAnimating: false,
+    }));
+
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item) => item.id === active.id);
+      const newIndex = items.findIndex((item) => item.id === over.id);
+
+      if (oldIndex === -1 || newIndex === -1) {
+        return;
+      }
+
+      try {
+        const validation = validateDragOperation(
+          active.id as string,
+          over.id as string,
+          items
+        );
         if (!validation.isValid) {
           throw new Error(validation.error?.message || "拖拽验证失败");
         }
 
-        const fromIndex = currentItems.findIndex((item) => item.id === fromId);
-        const toIndex = currentItems.findIndex((item) => item.id === toId);
-
-        // 边界条件检查
-        if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
-          return;
-        }
-
-        const [moved] = currentItems.splice(fromIndex, 1);
-        currentItems.splice(toIndex, 0, moved);
-
-        // 更新引用
-        itemsRef.current = currentItems;
-
-        // 触发回调
-        onChange(currentItems);
+        const newItems = arrayMove(items, oldIndex, newIndex);
+        onChange(newItems);
       } catch (error) {
         console.error("拖拽交换数据失败:", error);
-
-        // 触发错误回调
         const dragError: DragError = {
           type: "DATA_ERROR",
           message: error instanceof Error ? error.message : "未知错误",
-          sourceId: fromId,
-          targetId: toId,
+          sourceId: active.id as string,
+          targetId: over.id as string,
         };
-
         onDragFail?.(dragError);
       }
-    },
-    [onChange, onDragFail, validateDragOperation]
-  );
+    }
+  }, [items, onChange, onDragFail, validateDragOperation]);
 
   /**
-   * 注册单个项目的拖拽监听器
+   * 获取当前拖拽项
    */
-  const registerDragListeners = useCallback(
-    (item: DragItem, index: number) => {
-      const el = itemRefs.current.get(item.id);
-      const dragHandle = dragHandleRefs.current.get(item.id);
-
-      if (!el) return;
-
-      // 清理之前的监听器
-      const existingCleanup = cleanupRefs.current.get(item.id);
-      if (existingCleanup) {
-        existingCleanup();
-      }
-
-      const cleanups: (() => void)[] = [];
-
-      // 注册为可拖拽元素
-      cleanups.push(
-        draggable({
-          element: el,
-          dragHandle: dragHandle,
-          canDrag: () => item.isChecked,
-          getInitialData: () => ({
-            id: item.id,
-            index,
-            label: item.label,
-          }),
-          onDragStart: () => {
-            setDragState((prev) => ({
-              ...prev,
-              draggingId: item.id,
-              isAnimating: !!enableAnimation,
-            }));
-            console.log("开始拖拽:", item.label);
-          },
-          onDrop: () => {
-            setDragState((prev) => ({
-              ...prev,
-              draggingId: null,
-              droppingId: null,
-              isAnimating: false,
-            }));
-          },
-        })
-      );
-
-      // 注册为拖拽目标
-      cleanups.push(
-        dropTargetForElements({
-          element: el,
-          canDrop: () => item.isChecked,
-          onDragEnter: (args) => {
-            const sourceId = args.source.data.id as string;
-            if (sourceId === item.id) return;
-
-            console.log("拖拽进入:", item.id);
-            setDragState((prev) => ({
-              ...prev,
-              droppingId: item.id,
-            }));
-          },
-          onDragLeave: () => {
-            setDragState((prev) => ({
-              ...prev,
-              droppingId: null,
-            }));
-          },
-          onDrop: ({ source }) => {
-            if (!source) return;
-            const sourceId = source.data.id as string;
-            if (sourceId === item.id) return;
-
-            // 执行数据交换
-            swapItems(sourceId, item.id);
-          },
-        })
-      );
-
-      // 存储清理函数
-      const combinedCleanup = () => {
-        cleanups.forEach((fn) => fn());
-      };
-      cleanupRefs.current.set(item.id, combinedCleanup);
-    },
-    [swapItems, enableAnimation]
+  const activeItem = useMemo(
+    () => items.find((item) => item.id === activeId),
+    [items, activeId]
   );
 
   /**
-   * 性能优化：只在必要的时候注册监听器
+   * 选择排序策略
    */
-  useEffect(() => {
-    // 清理所有旧的监听器
-    cleanupRefs.current.forEach((cleanup) => cleanup());
-    cleanupRefs.current.clear();
-
-    // 注册所有项目的监听器
-    items.forEach((item, index) => {
-      registerDragListeners(item, index);
-    });
-
-    // 监听全局拖拽结束
-    const monitorCleanup = monitorForElements({
-      onDrop: () => {
-        setDragState((prev) => ({
-          ...prev,
-          draggingId: null,
-          droppingId: null,
-          isAnimating: false,
-        }));
-      },
-    });
-    cleanupRefs.current.set("monitor", monitorCleanup);
-
-    return () => {
-      cleanupRefs.current.forEach((cleanup) => cleanup());
-      cleanupRefs.current.clear();
-    };
-  }, [items.length, registerDragListeners]); // 只在列表长度变化时重新注册
-
-  /**
-   * 渲染默认拖拽句柄
-   */
-  const renderDefaultDragHandle = useCallback(
-    (item: DragItem, isDragging: boolean) => (
-      <HolderOutlined
-        ref={(el) => {
-          if (el) {
-            dragHandleRefs.current.set(item.id, el);
-          }
-        }}
-        style={{
-          cursor: isDragging ? "grabbing" : "grab",
-          marginLeft: "8px",
-          opacity: isDragging ? 0.5 : 1,
-          transition: enableAnimation ? "opacity 0.2s" : "none",
-        }}
-      />
-    ),
-    [enableAnimation]
+  const sortingStrategy = useMemo(
+    () =>
+      direction === "vertical"
+        ? verticalListSortingStrategy
+        : horizontalListSortingStrategy,
+    [direction]
   );
 
   /**
-   * 渲染拖拽项
+   * 缓存 item id 列表，避免每次渲染创建新数组引用
    */
-  const renderDragItem = useCallback(
-    (item: DragItem, index: number) => {
-      const isDragging = dragState.draggingId === item.id;
-      const isDropping = dragState.droppingId === item.id;
-
-      // 如果是表格行模式，直接返回组件内容
-      if (isTableRow) {
-        // console.log("表格行数据", item);
-        return (
-          <tr
-            ref={(el) => {
-              if (el) {
-                itemRefs.current.set(item.id, el as unknown as HTMLDivElement);
-              }
-            }}
-            key={item.id}
-            data-drag-id={item.id}
-            data-drag-index={index}
-            style={{
-              transition: enableAnimation ? "all 0.3s ease" : "none",
-              opacity: isDragging ? 0.5 : 1,
-              backgroundColor: isDropping ? "#e6f7ff" : "transparent",
-            }}
-          >
-            {/* 如果提供了自定义拖拽句柄，则将其作为第一列 */}
-            {renderDragHandle && renderDragHandle(item, isDragging)}
-            {!renderDragHandle && (
-              <td
-                ref={(el) => {
-                  if (el) {
-                    dragHandleRefs.current.set(
-                      item.id,
-                      el as unknown as HTMLSpanElement
-                    );
-                  }
-                }}
-                style={{
-                  cursor: isDragging ? "grabbing" : "grab",
-                  textAlign: "center",
-                  width: "40px",
-                }}
-              >
-                <HolderOutlined
-                  style={{
-                    opacity: isDragging ? 0.5 : 1,
-                    transition: enableAnimation ? "opacity 0.2s" : "none",
-                  }}
-                />
-              </td>
-            )}
-            {item.cpn}
-          </tr>
-        );
-      }
-
-      const itemClass = clsx("enhanced-dragItem", {
-        dragging: isDragging,
-        dropping: isDropping,
-        disabled: !item.isChecked,
-        [`direction-${direction}`]: true,
-      });
-
-      return (
-        <div
-          className={itemClass}
-          ref={(el) => {
-            if (el) {
-              itemRefs.current.set(item.id, el);
-            }
-          }}
-          key={item.id}
-          data-drag-id={item.id}
-          data-drag-index={index}
-          style={{
-            transition: enableAnimation ? "all 0.3s ease" : "none",
-          }}
-        >
-          <div className="enhanced-dragBody">{item.cpn}</div>
-          <div className="enhanced-dragHandle">
-            {item.isChecked &&
-              (renderDragHandle
-                ? renderDragHandle(item, isDragging)
-                : renderDefaultDragHandle(item, isDragging))}
-          </div>
-        </div>
-      );
-    },
-    [
-      dragState,
-      direction,
-      enableAnimation,
-      renderDragHandle,
-      renderDefaultDragHandle,
-      isTableRow,
-    ]
-  );
+  const itemIds = useMemo(() => items.map((item) => item.id), [items]);
 
   // 如果是表格行模式，直接渲染子元素而不是包装div
   if (isTableRow) {
-    return <>{items.map(renderDragItem)}</>;
+    return (
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={itemIds}
+          strategy={sortingStrategy}
+        >
+          {items.map((item, index) => (
+            <SortableEnhancedItem
+              key={item.id}
+              item={item}
+              index={index}
+              enableAnimation={enableAnimation}
+              direction={direction}
+              renderDragHandle={renderDragHandle}
+              isTableRow={isTableRow}
+            />
+          ))}
+        </SortableContext>
+        <DragOverlay dropAnimation={null}>
+          {activeItem ? (
+            <div className="enhanced-sortDrag-overlay">
+              {renderDragPreview
+                ? renderDragPreview(activeItem)
+                : (
+                  <div className="enhanced-sortDrag-overlay-row">
+                    <span className="enhanced-sortDrag-overlay-label">
+                      {activeItem.label || activeItem.id || '拖拽中...'}
+                    </span>
+                  </div>
+                )}
+            </div>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+    );
   }
 
   return (
-    <div className={`enhanced-sortDrag direction-${direction}`}>
-      {items.map(renderDragItem)}
-    </div>
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <div className={`enhanced-sortDrag direction-${direction}`}>
+        <SortableContext
+          items={itemIds}
+          strategy={sortingStrategy}
+        >
+          {items.map((item, index) => (
+            <SortableEnhancedItem
+              key={item.id}
+              item={item}
+              index={index}
+              enableAnimation={enableAnimation}
+              direction={direction}
+              renderDragHandle={renderDragHandle}
+              isTableRow={isTableRow}
+            />
+          ))}
+        </SortableContext>
+      </div>
+      <DragOverlay dropAnimation={null}>
+        {activeItem ? (
+          <div className="enhanced-sortDrag-overlay">
+            {renderDragPreview
+              ? renderDragPreview(activeItem)
+              : (
+                <div className="enhanced-sortDrag-overlay-content">
+                  <div className="enhanced-sortDrag-overlay-body">{activeItem.cpn}</div>
+                </div>
+              )}
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
   );
 });